p5.disableFriendlyErrors = true;

var canvas;

var ballX = 600;//set starting point of ball
var ballY = 400;
var ballwidth = 25;//set size of ball
var ballheight = 25;

var ballDirectionX = -1;
var ballDirectionY = -1;
var ballSpeed = 5;

//player1 is  CPU
var p1X = 5;//set a distance from left border***
var p1Y = 250;
var cpuSpeed = 40;

//player 2
var p2X = -5;//set a distance from right border***
var p2Y = -5;

//player 2
var p3X = -20;//set a distance from right border***
var p3Y = -20;


//playersize
var playerWidth = 10;
var playerHeight = 200; 
var pSpeed = 5;

//scoreboard
var p1Score = 0;
var p2Score = 0;

//FUNCTIONS
var stage = 0;
//0 =splash
//1 =pong

var myFont, fontReady = false;

var song;

var hit = false;

//var sound1;
//var startOverSound;
//var layer1;
//var layer2;
//var layer3;
//var layer4;
//var layer5;
//var layer6;
//var layer7;
//var layer8;

var r = 0;
var g = 0;
var b = 0;

var col = 0;

var hit = false;

let PNF; 

var c = map(mouseX, 0, width, 100, 800);
  // Scale the mouseX value from 0 to canvas width to a range between 40 and 300
  var d = map(mouseY, 0, height, 100, 800);

//var sliderRate,
//var sliderPan;

function fontRead(){
  fontReady = true;
}

function preload() {
myFont = loadFont("brut_grotesque-text-webfont.ttf", fontRead);
    
layer1 = document.getElementById("sound1");//ambaincz
layer2 = document.getElementById("sound2");//sirens
layer3 = document.getElementById("sound3");//pigeons
layer4 = document.getElementById("sound4");//bell 1
layer5 = document.getElementById("sound5");// truck
layer6 = document.getElementById("sound6");//streetcrowd
layer7 = document.getElementById("sound7");//walking
layer8 = document.getElementById("sound8");//bikeonpath
layer9 = document.getElementById("container2");//bikeonpath

//  layer1 = loadSound("sounds/sirens.mp3");//if mouse goes somewhere  
//  layer2 = loadSound("sounds/trafficjam.mp3");//if mouse goes somewhere  
//  layer3 = loadSound("sounds/pigeons.mp3");  
//  layer4 = loadSound("sounds/bell1.mp3");//how to randomize this with other bell sounds
//  layer5 = loadSound("sounds/truckreversebeep.mp3");     
//  layer6 = loadSound("sounds/streetcrowd.mp3");  
//  layer7 = loadSound("sounds/walking.mp3");  
//  layer8 = loadSound("sounds/bikeonpath.mp3"); 
    
   PNF =loadImage = ('images/PNF.png');
}

function setup() {  
  createCanvas(windowWidth, windowHeight).position(0,0).style('z-index','-10').style('display','fixed');
  width = windowWidth;
  height = windowHeight;  
  rectMode(CENTER);
    
  background(r, g, b);   
    
 // sound1.playMode('restart');      
      
  //textalignment
  textAlign(CENTER);
}//close setup 

function loaded(){
  //song.play();
}

function draw(){ 

console.log("stage", stage);
    
  //pong(); //run pong function
  if (stage == 0){
    splash1();//run splash1
}
  if(stage == 0 && mouseIsPressed == true){
    stage = 1;//startslide2  
}//close 0    
  if (stage == 1){
    splash2();//run splash2
}//close 1
  if(stage == 1 && keyIsPressed == true){
    stage = 2;//startslide2  
}
  if (stage == 2){
    pong();//run pong
  }//close 2
  
  if(stage == 3){ //player 1 wins
    p1Wins();
  }//close 3
  
  if(stage == 4){ //player 2 wins
    p2Wins();
  }//close 4
  
}//close draw

function keyPressed() {
  console.log('keyPressed: ' + key);
}

function keyReleased() {
  console.log('keyReleased: ' + key);
}

function keyTyped(){
  console.log('keyTyped: ' + key);
}

function mousePressed(){
  console.log('mousePressed'); 
}

function mouseReleased(){
  console.log('mouseReleased');
}

function mouseClicked(){
  console.log('mouseClicked');
}

function mouseMoved(){
  console.log('mouseMoved');
}

function mouseDragged(){
  console.log('mouseDragged');
}

function mouseWheel(){
  console.log('mouseWheel');
}

function splash1(){
  //welcome screen
  background(0);
  fill(255);
  
    let lines= 'Navigate and find hidden hotspots within the cities of Den Haag or/and Rotterdam by interacting with your Web browser.\n These hotspots contain games and files made and shared by the 1st year students from Experimental Publishing Master Course (XPUB).\n This is part of the Special Issue 14 made in collaboration with Page Not Found (PNF) in Den Haag.\n In order to particiate to this geocatching experience, it is required from you be located in Den Haag (Netherlands).\n If you are not from one of these two cities, please contact us via mail to recieve a USB stick containing games from the students.Insert mail here';
  textSize(14);
        
  textLeading(16);
  textAlign(BOTTOM); 
  textFont(myFont);
  text(lines, width/2, height-100);
  textSize(25);
  textFont(myFont);
  text('SPECIAL ISSUE 14 WEB LAUNCHER\nClick anywhere', width/2, height/2 );
  
}//close spash

function splash2(){
  //welcome screen
  background(255);
  fill(0);
  
  let lines= 'How does it work?\n Launch a ball from your device in order for it to start finding a nearby hotspot in a city.\n While the ball is crossing a hotspot range, you will notice a message popping asking you to click/tap in order to catch you hotspot location.\n You are also invited to move your cursor/finger, type, press, grab, zoom , rotate, and resize to unlock various sounds from the hotspot you are redirected to\n You would like to know what is going on? Please click the help button.\nYou are not located in Den Haag, you can still get the files by sending us your adress at xpub mail!.\n';
  textSize(14);
        
  textLeading(16);
  textAlign(BOTTOM); 
  textFont(myFont);
  text(lines, width/2, height-100);
  textSize(25);
  textFont(myFont);
  text('LAUNCH A BALL IN THE CITY\nPress any key', width/2, height/2 );
}

function p1Wins(){
  //P1 Win screen
  r = map(mouseX, 0, windowHeight, 0, 255); 
  g = map(mouseY, 0, windowHeight, 255, 0);
  b = map(mouseX, 0, windowWidth, 0, 255);
      
//  col = mouseX/2;  
  background(r, g, b);  
    
  fill(255);

  textSize(25);
  textFont(myFont);  
  text('Refresh to launch a new ball', width/2, height/2);
    
    
}//close P1


function p2Wins(){
  //P2 Win screen
  background(163);
  fill(255);
  
  textSize(20);
  textFont(myFont);
  text('Refresh to launch a new ball', width/2, height/2);
}//close P2

function windowResized() { 
    resizeCanvas(windowWidth, windowHeight); 
} 
function pong() {
   
    //OTHER EXISTING EVENTS https://p5js.org/reference/
  r = map(ballX, 0, windowWidth, 0, 255); 
  g = map(ballY, 0, windowHeight, 255, 0);
  b = map(mouseX, 0, windowWidth, 0, 255);
      
//  col = mouseX/2;  
  background(r, g, b);  

//hit = collideBallEllipse(ballX, ballY, 150, 200, 200, 100);
    
//   stroke(hit ? color('red') : 0);
//   print('colliding?', hit);  
    
      //open pong
  //call functions
  keyTyped();//loop keytyped function
  //keyPressed();//loop keypressed function
  cpu(); //loop cpu function
//  document.querySelector("audio").play()  
  if (sound1.paused) {
    sound1.play();
  }    

  noStroke();//turn off outline border
  fill(255); //fill set to white
  textSize(25);  
  textAlign(BOTTOM); 
    
  text('Click while the ball is in the hotspot\n in order to get its coordinates!', width/2, height-100); 
  textSize(40);
  textFont(myFont);
  textAlign(BOTTOM);    
  //IN BETWEEN VARIABLES SHOWCASE
  

     
    //if (mouseY >= height/2-200 && mouseY <= height/2+400) {     
        //if (mouseX >= width/2-200 && mouseX <= width/2+400) {
    var ell = ellipse(width/2, height/2, d, d);
    
          if (Math.sqrt((mouseX-width/2)*(mouseX-width/2) + (mouseY-height/2)*(mouseY-height/2)) < d) { 
              textFont(myFont);
                textAlign(CENTER); 
                textSize(15);          
                text('your mouse is inside a hot location at: '+ mouseX + ' pixels (x) /' + mouseY + ' pixels (y)', width/2, 280); 
                layer7.play();//walking
                    
 }
//}                         
                  if(ballY >= height/2-200 && ballY <= height/2+400) {
                        if(ballX >= width/200 && ballX <= width/2+400) {
                            background(255, 255, 255);   
                            textAlign(CENTER); 
                            textSize(25); 
                            fill(0,0,0);
                            text('Click now to catch your hotspot location!', width/2, 200);
                                if(mouseIsPressed == true) {

}
}
}          
      if(mouseIsPressed == true) {
        textFont(myFont);
        textAlign(CENTER); 
        textSize(15);                   
        text('your mouse is currently pressed ', width/2, 220);
        layer1.play();//sirens
        
}
      if(mouseIsPressed){  
          if(mouseButton === RIGHT) {
            textFont(myFont);
            textAlign(CENTER); 
            textSize(15); 
            text('your mouse is right clicked ', width/2, 240)
       }    
}  
      if(keyIsPressed == true) {
        textAlign(CENTER); 
        textSize(15);    
        text('a key is currently pressed ', width/2, 300);
        layer4.play();//Bell
        console.log("playlayer4");
}
      if(ballX >= 900 && ballX <= 1100) {
        textAlign(CENTER); 
        textSize(15);    
        text('The ball is crossing a hotspot at: ' + ballX +' pixels (x)', width/2, 400);   
        layer6.play();//streetcrowd
        console.log("playlayer6");  
}
      if(ballY >= 50 && ballY <= 200) {
        textAlign(CENTER); 
        textSize(15); 
        text('The ball is crossing a hotspot at: '+ ballY +' pixels (y)', width/2, 420); 
        layer2.play();//sirens
        console.log("playlayer2");          
} 
      if(windowWidth < 800) {
        textAlign(CENTER); 
        textSize(15); 
        text('canvas width has been resized to the hot size of: ' + width +' pixels (width)', width/2, 360);
        layer8.play();//pigeons
        console.log("playlayer8");           
}  
      if(windowHeight < 400) {
        textAlign(CENTER); 
        textSize(15); 
        text('canvas height has been resized to the hot size of: ' + height +' pixels (height)', width/2, 380);
        layer8.play();//bikeonpath
        console.log("playlayer8");          
}


  
  fill(r, g, c); 
  
    //var ell = ellipse(width/2+100, height/2+100, d, d);   
   
    
  let e = int(dist(width/2+100, height/2+100, ballX, ballY)); 
    
  textAlign(CENTER); 
  textSize(25);
  fill(255);
  text('You are at '+e+' meters away from the hotspot', width/2, 100);  
    
  //create our motion
  ballX = ballX + (ballDirectionX*ballSpeed);//move horizontally
  ballY = ballY + (ballDirectionY*ballSpeed);//move vertically
  
  //make a ball
  ellipse(ballX, ballY, ballwidth, ballheight);
  
  if(ballX < 0){//ball off the left of the screen
    ballDirectionX = ballDirectionX*-1;
  }
  if(ballX > width){//ball off the right of the screen
    ballDirectionX = ballDirectionX*-1;
    //insert a sound here  
  }
  if(ballY < 0){//ball off the left of the screen
    ballDirectionY = ballDirectionY*-1;
  }
  if(ballY > height){//ball off the top of the screen
    ballDirectionY = ballDirectionY*-1;
  }
  //collide with paddles
  if(ballX >= p1X-5 && ballX <= p1X+5 && ballY >= p1Y-100 && ballY <= p1Y+100){
    //hit the player
    ballDirectionX = ballDirectionX*-1; //change direction
  }
  //draw players
  rect(p1X, p1Y, playerWidth, playerHeight);//p1
  rect(p2X, p2Y, playerWidth, playerHeight);//p2

  
  //window size refresh  
    //scoreboard
  textSize(10);
  text(p1Score, width/2 -10 , 20);
  text(p2Score, width/2 + 10, 20);
  
  if(ballX <= 0){
    //off left wall - p1 missed
    p2Score = p2Score+1;//add point
    //recenterball   
    ball1X = width/2; 
    ballY = height/2;
  }//close p2 scores
  
  if(ballX >= width){
    //off right wall - p2 missed
    p1Score = p1Score+1;//add point
    //recenterball
//    ball1X = width/2; 
//    ballY = height/2;
  }//close p1 scores
    
  if(p1Score >= 100){
    stage = 3; //run p1wins
  }//close p1wins
  
    if(p2Score >= 1){
    stage = 4; //run p2wins
        
  }//close p2wins
    
}//close pong

// window.onresize = function() {
//   var w = window.innerWidth;
//   var h = window.innerHeight;  
//   cnv.size(w,h);
//   width = w;
//   height = h;
// }
//UP
function keyTyped(){
  if(key == 'z' && keyIsPressed){
    p1Y = p1Y-pSpeed; 
  }//close w
//DOWN  
  if(key == 's' && keyIsPressed){
    p1Y = p1Y+pSpeed; 
  }//close s
  
}//close keytyped

function cpu(){
  //controls cpu player
  if(ballX < width/2){//has the ball crossed the court?
    if(p1Y <= ballY){
      p1Y = p1Y+cpuSpeed;
      //move down
    }//close above cel
  
  
    if(p1Y >= ballY){
      p1Y = p1Y-cpuSpeed;
    //move up     
    }//close bellow ball
  }//close move cpu
  else{
    p1Y = p1Y; //only move when ball is on cpu side
  }//close else

}//close cpu


//function keyPressed(){
//  if(keyCode == UP_ARROW && keyIsPressed){
//    p2Y = p2Y-pSpeed;
//  }//closedown

//  if(keyCode == DOWN_ARROW && keyIsPressed){
//    p2Y = p2Y+pSpeed;
//  }//closedown
//}