[MIDTERM] ASSIGNMENT 7 – BITMAP GAME

let sceneNum = 1; 
let player;
let eyeplayer;
let eyeimage;
let words = [];
let button1;
let time1;
let time2;

function preload(){
  eyeimage = loadImage("images"/"eye.png")
}

function setup() {
  createCanvas(500, 500);
  player = new Player();
  eyeplayer = new EyePlayer();
    for(let i= 0; i< 4; i++){
//i means 0-9, so each object will be generated with a spacing of 10
  words[i] = new Words(500*i+400,250,random(0,5));
    }
  button1 = createButton("I don't understand how to respond");
  button1.hide();
  button1.position();
  
  button1.mousePressed(trigger1c);
}

function draw() {
  background(220);
  switch(sceneNum){
// each scene consists of a 'case, function, break' structure

    case 1:
      game1a();
      //1a "i'm bad at talking to people" (social blackhole)
    break;
    case 2:
      game1b();
      //1b "i didn't know how to respond in any way that wasn't negative" (taiko simulation)
    break;
    case 3:
      game1c();
      //1c I started watching people to learn (space invadors simulation)
    break;
    
    case 4:
      game2();
//2a I think i'm getting the hang of this (taiko simulation 2)
//2b social blackhole 2 
//2c (color mix match)
    break;
    
    case 5:
      game3();
//3a I had to move cities. I feel weird and not like myself. It feels like I'm back at square 1. (social blackhole 3)
//3b Without my old friends I forgot who i was and no longer understood how I felt (color mix-match)
//3c every interaction felt like I was just trying to replicate my experiences a year before, and everything felt forced. (button: my behaviours drove people away) 
    break;
  }
}

function game1a(){
  console.log('this is game 1a');
//"I'm bad at talking to people."
  background(158, 122, 255);
  
  push();
  fill(245, 231, 186);
  noStroke();
  rect(90,225,300,50);
  pop();
  player.show();
  player.move();
  fill(255, 255, 122);
  triangle(30,275,80,275,55,225);
  fill(255, 255, 122);
  square(400,225,50);
  
  if(dist(player.x, player.y, 50, 250) < 10){
    sceneNum = 2
  }
  
  time1 = millis()
}

function game1b(){
  console.log('this is game 1b');
  background(74, 195, 255)
  push();
  fill(222, 150, 255);
  noStroke();
  rect(90,225,450,50);
  pop();
  player.show();
  push();
  
  time2 = millis();
  if(time2 - time1 > 2000){button1.show()}
  
  //by making "words" an array, we turn it into a different type of class. i represents the 'index' of the array, meaning the whole collection of numbers, aka the whole array. so words[i].move/show means move/show the whole array. 
  for(let i= 0; i< 4; i++){
  words[i].show();
  words[i].move();
  }
  pop();
  
}

function game1c(){
  console.log('this is game 1c');
}

function game2a(){
  console.log('this is game 2a');
  player.show();
  player.move();  
}

// function mousePressed(){
//   sceneNum ++;
// }

class Player{
  constructor(){
    this.x = 100;
    this.y = 250;
    this.size = 50;
  }
  show(){
    fill(66, 245, 182);
    ellipse(this.x,this.y,this.size);
    // image()
  }
  move(){
    if(keyIsPressed && keyCode == RIGHT_ARROW)
      this.x +=5;
    if(keyIsPressed && keyCode == LEFT_ARROW)
      this.x -=5;
    if(keyIsPressed && keyCode == UP_ARROW)
      this.y -=5;
    if(keyIsPressed && keyCode == DOWN_ARROW)
      this.y +=5;
  }
}

class EyePlayer{
  constructor(){
    this.x = 50;
    this.y = 450;
  }
  show(){
    image(eyeimage);
  }
  move(){
    
  }
}

class Words{
  constructor(x,y,c){
    this.x = x;
    this.y = y;
    this.size = 50;
    this.opacity = 255;
    // this.color = color(255, 0, 0); 
    // color(47, 0, 255);
    this.color = random(0,5);
  }
  show(){
    if(this.color> 3){fill(255, 0, 0, this.opacity); }
    else if(this.color< 3){fill(47, 0, 255, this.opacity);}
    console.log(this.color)
    // fill(c, this.opacity);
    noStroke();
    ellipse(this.x,this.y,this.size);
    //image
  }
  move(){
    this.x -=2;
    if(dist(this.x, this.y, 50, 250) < 10){
    this.opacity = 0;
  }
  }
}

function trigger1c(){
  sceneNum = 3;  
  button1.hide();
}