//Emma Casey and Lily Onilenla 
//code ported from https://editor.p5js.org/ehersh/sketches/Hk52gNXR7

//defining variables
var screen = 0;
var y=-20;
var x=200;
var speed = 2;
var score= 0;
var img;
var img2;
var img3;
var img4;
var img5;

//The setup function is called once when the program starts.
//It's used to define initial environment properties
//Here we create the size of the canvas and import any images used
function setup() {
  createCanvas(1366, 625);
  img=loadImage('/uploads/emma7/1670372982.png')
  img2=loadImage('/uploads/emma7/1670419542.png')
  img3=loadImage('/uploads/emma7/1670420735.png')
  img4=loadImage('/uploads/emma7/raindrop.png')
  img5=loadImage('/uploads/emma7/bucket.png')
}

//The draw function continuously executes the lines of code contained inside its block until the program is stopped.
function draw() {
    image(img,0,0,1366,625) //The image on the start screen
	if(screen == 0){
    startScreen()
  }else if(screen == 1){
  	gameOn()
  }else if(screen==2){
  	endScreen()
  }	
}


function startScreen(){
	    background('rgba(100%,0%,100%,0.5)'); //colour shade over start screen image
		fill(300)

		textAlign(CENTER);
		text("Rainfall Catch",683,312.5) //position is half of canvas, main title
		textSize(45); //the text size
		text("Tap on the screen to start",683, 400); 
		reset();
}

function gameOn(){
  image(img2,0,0,1366,625) //backrgound cloudy image
  text("score = " + score, 125, 60) //calculating the score and displaying it
  image(img4,x,y,25,20)//raindrop falling elements
  rectMode(CENTER)
  image(img5,mouseX,600,40,40) //bucket elements

	y+= speed;
  if(y>height){
  	screen =2
	 }
  if(y>height-10 && x>mouseX-20 && x<mouseX+20){ //mouse controls
	var rainDrop = new Audio('/uploads/emma7/rain.mp3'); //audio for the raindrop sound 
	rainDrop.play();
  	y=-20
    speed+=.5 // gets faster each time it comes down by .5
    score+= 1
  }
	if(y==-20){
  	pickRandom();
  }
}

function pickRandom(){
	x= random(20,width-20)
}

function endScreen(){
		image(img3,0,0,1366,625)
		textAlign(CENTER);
		text('GAME OVER',683,250) //game over title when player loses game
  	    text("SCORE = " + score,683, 300)
		text('click to play again',683, 350);
}

function mousePressed(){
	if(screen==0){
  	screen=1
  }else if(screen==2){
  	screen=0
  }
}

function reset(){ //reset the game
	  score=0;
  	speed=2;
  	y=-20;
}