let busStop;

let room;

let darkroom;

​

let dog, record, flower, book, keychain;

​

let illusion = ['dog', 'record'];

// let real = ['flower', 'book', 'keychain'];

let real = [];

let userSelect = [];

let popWindow;

​

let dogButton, recordButton, flowerButton, keychainButton, bookButton;

​

let select = false;

// let shut = false;

let keepButton, delButton;

let keep = false;

let del = false;

​

​

function preload() {

  workSansB = loadFont('static/WorkSans-Bold.ttf');

  workSansL = loadFont('static/WorkSans-Light.ttf');

  busStop = loadImage('bus_stop1.png');

  room = loadImage('room1.png');

  darkroom = loadImage('room_dark.png');

  dog = loadImage('dog.png');

  flower = loadImage('flower.png');

  book = loadImage('book.png');

  keychain = loadImage('keychain.png');

  record = loadImage('record.png');

}

​

function setup() {

  createCanvas(600, 400);

  starMove = new MoveStar(400, 60);

​

  settting();

​

}

​

function settting() {

  dogButton = new Bnt('dog.png', "This is your pet dog called Fuzzy. \n But the fact is you don’t have a real dog, \n you only have a dog toy bought from Ikea. ", 120, 120, 80, 70, dog);

  recordButton = new Bnt('record.png',  " You have a collection of music records. But you don’t even have a phonograph… ",430, 180, 100, 100, record);

  flowerButton = new Bnt('flower.png',  "You love flowers, you buy flowers every week for yourself.",10, 250, 100, 150, flower);

  bookButton = new Bnt('book.png',  "You love poetry. But you can’t really understand it. \n So you never bought any. ",130, 300, 80, 80, book);

  keychainButton = new Bnt('keychain.png',  "This is a keychain you bought in Finland with reflective materials, \n which will shine when spotted with car lights.",300, 200, 20, 50, keychain);

  dogButton.init();

  recordButton.init();

  flowerButton.init();

  keychainButton.init();

  bookButton.init();

​

  real.push(flower, book, keychain);

  real.sort();

  userSelect.push(dog, record, flower, book, keychain);

  userSelect.sort();

}

class Bnt {

  constructor(name,desc, x, y, w, h, img) {

    this.name = name;

    this.desc = desc;

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.img = img;

    this.button = createImg(this.name, 'not found');

    this.toggle = true;

    this.isClick = false;

    this.keep = createButton('keep');

    this.del = createButton('delete');

    this.keep.hide();

    this.del.hide();

    // this.select = false;

  }

  init() {

    this.button.size(this.w, this.h);

    this.button.position(this.x, this.y);

    this.button.mousePressed(() => {

      this.turn(); //arrow function bubble up to the whole class

    });

    this.button.hide();

​

    this.winBntInit(); //initialize keep and delete button

  }

  turnOn() {

    if (this.toggle) {

      this.button.show();

      // console.log('is showing');

      this.toggle = false; //可以放在turn（）里，但意思不一样，放在这会比较省performance //放在这是只loop一次

    }

  }

  turn() {

    this.isClick = true;

    select = true;

    // shut = true;

    // shut = true;

    // if(this.isClick){

    //   this.button.hide();///这个一定要放在这，不然会出现index is not allowed in this range???

    // }

  }

  openWindow() {

    if (this.isClick) {

      this.winShow();

    }

​

    //  if(shut){

    //    this.button.hide();

    //   //  shut = false;

    //  }else{

    //    this.button.show();

    //  }

​

    if (select) {

      this.button.hide();

    } else {

      this.button.show();

    }

  }

  winShow() {

​

    background(0);

    image(darkroom, 0, 0);

​

    push();

    fill(0, 200);

    rect(0, 0, 600, 400);

    pop();

    // imageMode(CENTER); //这个会让image移位(原来的sketch里没有被push 和pop圈住)

    fill(255, 0, 0);

​

    push();

    imageMode(CENTER);

    image(this.img, width / 2, height / 2 - 40, this.w, this.h);

    // text("i've always wanted to have a dog... \n but maybe after i graduate :/ ", width / 2, height / 2 + 30);

    fill(255);

    textFont('Work Sans', 12);

    text(this.desc, width / 2, height / 2 + 40);

    pop();

​

    this.keep.show();

    this.del.show();

​

  }

  winBntInit() {

    this.keep.show();

    this.del.show();

    this.keep.position(width / 3 - 50, 280);

    this.keep.size(100, 25);

    this.keep.style('background-color', '#A03C8E');

    this.keep.style('border', 'none');

    this.keep.style('color', 'white');

    this.keep.style('font-family', 'Work Sans');

    this.keep.style('font-size', '15px');

    this.keep.hide();

    this.keep.mousePressed(() => this.keepObject(this)); //console log 这个this 能得到现在按着的这个object （this object）

    // this.keep.mousePressed(this.hello); // callback 和arrow 的区别！！！

    this.del.style('background-color', '#6638F0');

    this.del.position(width / 3 * 2 - 50, 280);

    this.del.size(100, 25);

    this.del.style('border', 'none');

    this.del.style('color', 'white');

    this.del.style('font-family', 'Work Sans');

    this.del.style('font-size', '15px');

    this.del.hide();

    this.del.mousePressed(() => this.delObject(this)); //console log 这个this 能得到现在按着的这个object （this object）

  }

  hello() {

    console.log(this); //这个里this是指button， 而arrow 没有自己的this， 所以arrow里面的this是指整个class。

  }

  keepObject(id) {

    console.log('add', id);

    this.removeWin();

​

    //push object or name

  }

  delObject(id) {

    //remove object bnt

    console.log('delete', id);

    this.removeWin();

    this.button.remove(); //delete buttons image

    let index = userSelect.indexOf(id.img);

    userSelect.splice(index, 1);

    userSelect.sort();

    console.log(userSelect);

  }

​

​

  removeWin() {

    this.isClick = false;

    select = false;

    // shut = false;

    this.keep.hide();

    this.del.hide();

​

  }

  restart() {

    if (keyIsPressed && keyCode == 13) {

      this.button = createImg(this.name, 'not found');

    }

​

  }

  ending() {

    this.button.remove();

    // userSelect

  }

​

}

​

​

function draw() {

  textAlign(CENTER, CENTER);

  //scenes

  switch (sceneNum) {

    //start page

    case 0:

      background(0);

      fill('#F78AE0');

      text('press SPACE to enter the game', width / 2, height - 50);

      textFont('Work Sans', 30);

      textStyle(BOLD);

      text('Dream Cage 1.0', width / 2, height / 2 - 15);

      textFont('Work Sans', 15);

      textStyle(NORMAL);

​

      break;

      //Operational Manual

    case 1:

      background(0);

      fill('#4AF2A1');

      text('Operation Manual', width / 2, 70);

      text('Space \n\n ArrowUp \n\n ArrowDown \n\n ArrowLeft \n\n ArrowRight \n\n Enter', width / 3, 230);

      text('next scene \n\n move obeject up \n\n move object down \n\n move obeject left \n\n move object right \n\n play again', width / 3 * 2, 230);

      break;

      //story begins at the bus stop

    case 2:

      background(0);

      //stroy begins at a bus stop

      fill('#4AF2A1');

      textFont('Work Sans', 15);

      textStyle(NORMAL);

      text('it was a starry night, you were sitting in the bus stop', width / 2, height - 50);

​

      //starryNight

      starryNight();

​

      //bus stop

      push();

​

      scale(0.3);

      image(busStop, width / 2, height / 2);

      pop();

      break;

      //star appears

    case 3:

      background(0);

      //starryNight

      starryNight();

​

      //bus stop

      push();

      scale(0.3);

      image(busStop, width / 2, height / 2);

      pop();

​

      //falling star

      starMove.body(400, 60);

​

      //narrator

      fill('#4AF2A1');

      textFont('Work Sans', 15);

      textStyle(NORMAL);

      text('when you were not paying attention, a star sneaked into your mind ✨', width / 2, height - 50);

​

      break;

      //manipulate the star

    case 4:

      background(0);

      //starryNight

​

      starryNight();

​

      //bus stop

      push();

      scale(0.3);

      image(busStop, width / 2, height / 2);

      pop();

​

      //falling star

      starMove.body(400, 60);

      starMove.move();

​

      //hint

      fill('#F78AE0');

      textFont('Work Sans', 15);

      textStyle(NORMAL);

​

      text('use arrow keys to move the star into the bus stop', width / 2, height - 50);

​

      break;

      //blackout

    case 5:

      //blackout

      background(0);

​

      //narrator

      fill('#4AF2A1');

      textFont('Work Sans', 15);

      textStyle(NORMAL);

      text('you suddenly lost consciousness...', width / 2, height / 2);

      break;

      //entering the dream

    case 6:

​

      background(0);

      image(darkroom, 0, 0);

​

      push();

      fill(0, 150);

      rect(0, 0, 600, 400);

      pop();

      //narrator

      fill('#4AF2A1');

      textFont('Work Sans', 15);

      textStyle(NORMAL);

      text("you wake up in a room that you can't fully recognize... \n\n there's something weird about this room... \n\n some of the objects are real, \n\n the others are just...... like a dreamy illusion", width / 2, height / 2);

      break;

      //hint on how to escape from the dream

    case 7:

      background(0);

      image(darkroom, 0, 0);

​

      push();

      fill(0, 150);

      rect(0, 0, 600, 400);

      pop();

      //narrator

      fill('#F78AE0');

      textFont('Work Sans', 15);

      textStyle(NORMAL);

      text("to esacpe from this room, \n\n check the suspicious objects and delete the illusory ones, \n\n otherwise you're stuck here forever \n\n\n ... ... \n\n\n unless that's what you want", width / 2, height / 2);

      break;

      //the room with dreamlike color and mix of objects

    case 8:

      push();

      //background

      background(0);

      dogButton.turnOn();

      recordButton.turnOn();

      flowerButton.turnOn();

      keychainButton.turnOn();

      bookButton.turnOn();

      imageMode(CENTER);

      image(room, width / 2, height / 2);

​

      pop();

​

      dogButton.openWindow();

      recordButton.openWindow();

      flowerButton.openWindow();

      keychainButton.openWindow();

      bookButton.openWindow();

​

      //make up your mind

      push();

      fill(255);

      textSize(15);

      textAlign(RIGHT);

      // stroke(255);

      text('press SPACE if you have made up your mind>', width - 30, height - 30);

      pop();

      //

      // console.log(real);

      // console.log(userSelect);

​

      // if (userSelect.length == real.length) {

      //   for (let i = 0; i < userSelect.length; i++) {

      //     if (userSelect[i] === real[i]) {

      //       console.log('match');

      //       sceneNum = 11;

      //     } else {

      //       sceneNum = 10;

      //       console.log('not correct');

      //     }

      //   }

      //

      // }

​

      break;

​

    case 9:

      break;

​

      //welcome back to the real world

    case 10:

      dogButton.ending();

      recordButton.ending();

      flowerButton.ending();

      keychainButton.ending();

      bookButton.ending();

​

      background(255);

      fill('#6638F0');

      textFont('Work Sans', 15);

      textStyle(NORMAL);

      text('farewell my friend', width / 2, height / 2);

      text('press ENTER to play again', width / 2, height - 50);

​

      break;

​

      //you've made your decision to stay in the dream forever

    case 11:

      dogButton.ending();

      recordButton.ending();

      flowerButton.ending();

      keychainButton.ending();

      bookButton.ending();

      background(0);

      fill('#F78AE0');

      textFont('Work Sans', 15);

      textStyle(NORMAL);

      // text('you have decided to stay here forever ', width / 2, height / 2 - 20);

      text('press ENTER to play again', width / 2, height - 50);

      // textStyle(BOLD);

      text('✨ welcome ✨', width / 2, height / 2 - 10);

​

      // textFont('Work Sans', 12);

      // text('®liaaaaaa', width / 2, height - 50);

​

      //play again

      break;

  }

}

​

function keyPressed() {

​

  let spaceNext = [0, 1, 2, 3, 5, 6, 7, 8];

  // let commandPrevious = [0, 1, 2, 3, 4, 5, 6, 7, 8];

  let enterRestart = [10, 11];

​

  if (keyCode === 32) {

    if (spaceNext.includes(sceneNum)) {

      sceneNum++;

    }

​

    if (sceneNum == 9) {

      console.log(userSelect);

      let crNum = 0;

      for (let i = 0; i < userSelect.length; i++) {

        // console.log(i)

        if (real.includes(userSelect[i])) {

          crNum++;

          console.log(crNum)

        } 

      }

      if(crNum == 3 && userSelect.length == 3){

        sceneNum = 10;

      }

      else{

        sceneNum = 11;

      }

    }

  }

​

​

  //

  // if (userSelect === real) {

  //   sceneNum = 10;

  // } else {

  //   sceneNum = 11;

  // }

​

​

  // if (userSelect.length == real.length) {

  //   for (let i = 0; i < userSelect.length; i++) {

  //     if (userSelect[i] === real[i]) {

  //       console.log('match');

  //       sceneNum = 10;

  //     } else {

  //       sceneNum = 11;

  //       console.log('not correct');

  //     }

  //   }

  // }

​

  // if (sceneNum === 8){

  //   for (let i = 0; i < real.length; i ++){

  //     if (userSelect.length != 0){

  //       if (userSelect[i] === real[i]){

  //         sceneNum = 10;

  //       } else {

  //         sceneNum = 11;

  //       }

  //     }

  //   }

  // }

​

  // if (sceneNum === 8 && userSelect != null){

  //   for (let i = 0; i < real.length; i ++){

  //     if (userSelect[i] === real[i]){

  //       sceneNum = 10;

  //     } else {

  //       sceneNum = 11;

  //     }

  //   }

  // }

​

  // if (sceneNum === 9 && illusion === null) {

  //   sceneNum = 10;

  // }

  // if (sceneNum === 9 && illusion != null) {

  //   sceneNum = 11;

  // }

  // if (keyCode === 91) {

  //   if (commandPrevious.includes(sceneNum)) {

  //     sceneNum--;

  //   }

  // }

  if (keyCode === 13) {

    if (enterRestart.includes(sceneNum)) {

      sceneNum = 0;

    }

  }

}

​

function starryNight() {

  for (i = 0; i < 30; i++) {

    // frameRate(3);

    fill('#F78AE0');

    noStroke();

    let a = random(0, width);

    let b = random(0, height / 3);

    let c = random(0, 2);

    ellipse(a, b, c);

  }

​

}

​

class MoveStar {

  constructor() {

    this.x = 400;

    this.y = 60;

  }

​

  body() {

    textSize(30);

    text('✨', this.x, this.y);

  }

  move() {

    // frameRate(24);

    if (keyIsPressed) {

      if (keyCode === DOWN_ARROW) {

        this.y += 5;

      } else if (keyCode === UP_ARROW) {

        this.y -= 5;

      } else if (keyCode === RIGHT_ARROW) {

        this.x += 5;

      } else if (keyCode === LEFT_ARROW) {

        this.x -= 5;

      }

    }

    if (this.x < 300 && this.y > 100) {

      sceneNum++;

      this.x = 400;

      this.y = 60;

    }

  }

​

}