// Preloaded dingen
let pixelFont;
let ambience;
let honk;
let boostSFX;

// Variabelen
let autoX = 0;
let auto2X = 0;
let tijd = 0;
let snelheidMultiplier = 1;
let boomOffset = 0;
let variatie = 0;
let wolk1X = 0;
let wolk2X = 0;
let wolk3X = 0;
let cirkelGrootte = 0;
let cirkelX = 0;
let cirkelY = 0;
let boost = 1;

let isDropping = false;

let auto1StoplichtBoost = 0;
let auto2StoplichtBoost = 0;

// Consts
const decaySnelheid = 0.006;
const auto1Snelheid = 0.1;
const auto2Snelheid = 0.8;
const wolk1Snehlheid = 0.14;
const wolk2Snehlheid = 0.08;
const wolk3Snehlheid = 0.09;
const tijdSnelheid =  0.023;
const variatieSnelheid = 0.01;
const canvasXSize = 1000; // Dit zorgt er voor dat als ik ooit de canvas grootte aanpas, dat de auto blijft werken.
const canvasYSize = 1000; // Handig zodat als ik de canvas aanpas dat andere dingen ook gelijk werken

// Kleur bal
let R = 0;
let G = 0;
let B = 0;

// Kleur snelle auto
let autoR = 0;
let autoG = 0;
let autoB = 0;

// kleur truck
let truckR = 0;
let truckG = 0;
let truckB = 0;

// Knopjes
let button;
let buttonSnelleAuto;

function preload() {  // Laad de benodigde assets
  pixelFont = loadFont("/../assets_week_1/Fonts/PublicPixel.ttf");
  ambience = loadSound("/../assets_week_1/Audio/Ambience.ogg");
  honk = loadSound("/../assets week 2/honk.ogg");
  boostSFX = loadSound("/../assets week 2/Boost.ogg")
}


function setup() { // In godot is dit de ready function
  createCanvas(canvasXSize, canvasYSize);
  console.log("Canvas gemaakt!");
  ambience.loop(); // Achtergrond ambience
  button = createButton("Honk");
  buttonSnelleAuto = createButton("honlo");
  // Button.size(x,y) zou handiger geweest zijn dan fontsize aanpassen /:

  // maak auto random kleur
  autoR = random(0,255);
  autoG = random(0,255);
  autoB = random(0,255);

  // maak truck random kleur
  truckR = random(0,255);
  truckG = random(0,255);
  truckB = random(0,255);

}

function keyPressed() {
  if (keyCode === 32 && snelheidMultiplier < 10) { // Spatiebalk
    snelheidMultiplier += 1;
  }
  else if (keyCode === 8 && snelheidMultiplier > 0) { // Backspace
    snelheidMultiplier -= 1;
  }
}

function draw() { // In godot is dit de process function

  background(51, 255 - abs(tijd), 255);

  // Bergen
  strokeWeight(3)
  stroke(0)
  fill(60 - abs(tijd / 10))
  triangle(285, 877, 550, 300, 770, 877);
  fill(80 - abs(tijd / 10));
  triangle(80, 877, 266, 535, 452, 877);
  triangle(605, 877, 840, 685, 1050, 877);

  // Sneeuw
  fill(255- abs(tijd) / 75);
  triangle(489, 435, 550, 300, 601 , 435);

  //Gras
  fill(0,150 - abs(tijd / 10),0);
  stroke(0, 100 - abs(tijd / 10), 0);
  strokeWeight(10);
  rect(-15, 880, canvasXSize + 30, 30);

  // Weg
  fill(50 - abs(tijd / 10));
  stroke(100 - abs(tijd / 10));
  rect(-15, 900, canvasXSize + 30, 125); // Extra grootte zodat de strokes mooi zijn.
  
  // Lijnen
  noStroke();
  fill(240- abs(tijd / 75));
  rect(0, 950, 100, 15, 20, 20);
  rect(150, 950, 100, 15, 20, 20);
  rect(300, 950, 100, 15, 20, 20);
  rect(450, 950, 100, 15, 20, 20);
  rect(600, 950, 100, 15, 20, 20);
  rect(750, 950, 100, 15, 20, 20);
  rect(900, 950, 100, 15, 20, 20);

  // Stoplicht
  noStroke();
  fill(100 - abs(tijd / 10));
  rect(800, 650, 50, 150);
  rect(817, 795, 15, 100);

  // Berekeningen
  wolk1X -= wolk1Snehlheid * deltaTime;
  wolk2X -= wolk2Snehlheid * deltaTime;
  wolk3X -= wolk3Snehlheid * deltaTime;
  autoX += ((auto1Snelheid * boost) * (snelheidMultiplier + auto1StoplichtBoost)) * deltaTime;
  auto2X += (auto2Snelheid * (snelheidMultiplier + auto2StoplichtBoost)) * deltaTime;
  tijd += tijdSnelheid * deltaTime;
  variatie += variatieSnelheid * deltaTime;

  // Reset posities

  if (wolk1X < -400) {
    wolk1X = 1300;
  }

  if (wolk2X < -555) {
    wolk2X = 1000;
  }

  if (wolk3X < -700) {
    wolk3X = 1000;
  }

  if (autoX > canvasXSize + 100) {
    autoX = -300;
    truckR = random(0,255);
    truckG = random(0,255);
    truckB = random(0,255);
  }

  if (auto2X > 666) {
    auto2X = -1500;
    autoR = random(0,255);
    autoG = random(0,255);
    autoB = random(0,255);
  }

  if (variatie >= 100) {
    variatie = -100;
  }

  if (tijd >= 255) {
    tijd = -255;
  }

  // Zorg ervoor dat autos stoppen voor stoplicht, of verdergaan als ze er al langs zijn

  // Auto 1 (truck)
  if (snelheidMultiplier == 0 && autoX < 650 || 
    snelheidMultiplier == 0 && autoX > 800 && autoX < canvasXSize + 50) {
    auto1StoplichtBoost = 1;
  }
  else {
    auto1StoplichtBoost = 0;
  }

  // Auto 2 (Snel)

  if (snelheidMultiplier == 0 && auto2X < 100 || 
    snelheidMultiplier == 0 && auto2X > 200 && auto2X < 620) {
    auto2StoplichtBoost = 1;
  }
  else {
    auto2StoplichtBoost = 0;
  }


  // Bomen

  // Houten gedeelte
  fill(139 - abs(tijd / 10),69,19);
  rect(100, 725, 25, 150);
  rect(200, 725, 25, 150);
  rect(350, 725, 25, 150);
  rect(580, 725, 25, 150);

  // Bladeren 1
  fill(0,220 - abs(tijd / 10),0);
  circle(121 + abs(variatie / 7),716, 75);
  circle(215 + abs(variatie / 7),716, 75);
  circle(355 + abs(variatie / 7),716, 75);
  circle(595 + abs(variatie / 7),716, 75);

  // Bladeren 2
  fill(0,180 - abs(tijd / 10),0);
  circle(110 + abs(variatie / 9),726, 75);
  circle(210 + abs(variatie / 9),720, 75);
  circle(351 + abs(variatie / 9),720, 75);
  circle(590 + abs(variatie / 9),720, 75);

  // Bladeren 3
  fill(0,140 - abs(tijd / 10),0);
  circle(112 - abs(variatie / 7),715, 75);
  circle(212 - abs(variatie / 7),715, 75);
  circle(350 - abs(variatie / 7),715, 75);
  circle(592 - abs(variatie / 7),715, 75);

  // Bladeren 4
  fill(0,100 - abs(tijd / 10),0);
  circle(123 - abs(variatie / 9),720, 75);
  circle(218 - abs(variatie / 9),725, 75);
  circle(340 - abs(variatie / 9),725, 75);
  circle(598 - abs(variatie / 9),725, 75);

  // Basis kleuren stoplicht
  fill(0, 200 - abs(tijd/10), 0); // Groen
  circle(825, 675, 40);

  fill(200, 153- abs(tijd / 10), 53); // Oranje
  circle(825, 725, 40);

  fill(200,0- abs(tijd / 10),0); // Rood
  circle(825, 775, 40);

  // Stoplicht lichten
    if (snelheidMultiplier == 0) { // Rood licht
      fill(255,0,0);
      circle(825, 775, 40);
}
     else if (snelheidMultiplier == 1) { // Oranje licht
          fill(255, 153, 53); 
          circle(825, 725, 40);
    }
    else if (snelheidMultiplier > 1) { // Groen licht
          fill(0,255,0);
          circle(825, 675, 40);
  }
  // Autos
  
  // Koplamp achter
  if (abs(tijd) > 150) {
    fill(255, 255, 0, 100);

    // Auto 2
    triangle(735 + auto2X, 913, 800 + auto2X,
    940, 800 + auto2X, 880);
  }

  // Auto 2 (raar toekomstige snelle auto)

  // Raam
  fill (0,255- abs(tijd / 10),255- abs(tijd / 10));
  triangle(700 + auto2X, 886, 610 + auto2X, 860, 610 + auto2X, 886);

  // Lichaam
  fill(autoR - abs(tijd / 10),autoG- abs(tijd / 10),autoB - abs(tijd / 10));
  rect(500 + auto2X, 885, 150, 55);
  triangle(700 + auto2X, 886, 770 + auto2X, 940,700 + auto2X, 940);
  rect(550 + auto2X, 885, 150, 55);
  triangle(500 + auto2X, 885, 610 + auto2X, 860, 610 + auto2X, 886);
  triangle(500 + auto2X, 886, 420 + auto2X, 940, 500 + auto2X, 940);

  // Wielen
  fill(15- abs(tijd / 150));
  circle(500 + auto2X, 940, 25);
  circle(680 + auto2X, 940, 25);

  // Auto 1

  // Raam
  fill (0,255- abs(tijd / 10),255- abs(tijd / 10));
  triangle(150 + autoX, 879, 200 + autoX, 932, 155 + autoX, 932);

  // Lichaam
  fill(truckR - abs(tijd / 10),truckG- abs(tijd / 10),truckB - abs(tijd / 10));
  triangle(6 + autoX, 880, 0 + autoX, 930, 6 + autoX, 980);
  rect(5 + autoX, 880, 150, 100);
  rect(150 + autoX, 930, 50, 50);

  // Wielen
  fill(15- abs(tijd / 150));
  circle(35 + autoX, 975, 30);
  circle(170 + autoX, 975, 30);

  if (abs(tijd) > 150) { // Koplampen voor
    fill(255, 255, 0, 100);
    // Auto 1
    triangle(250 + autoX, 900 , 250 + autoX,
      1010, 200 + autoX, 955);
  }

  // Zon
  fill(255, 255, 0, 100);
  circle(500 + tijd * 4, 300 - ((cos(tijd / 50) + 1) / 2) * 130, 150 - abs(variatie)); // Er is een veel makkelijkere manier om dit te doen, dit kan je in de "makkelijke zon manier" map vinden. Deze berekening zorgt ervoor dat bij de top de zon een beetje plat word, wat realistischer is dan een volle cirkel
  fill(200, 200, 0, 100);
  circle(500 + tijd * 4, 300 - ((cos(tijd / 50) + 1) / 2) * 130, 50 + abs(variatie));
  fill(255, 255, 0);
  circle(500 + tijd * 4, 300 - ((cos(tijd / 50) + 1) / 2) * 130, 75);

  // Tekst instellingen
  fill(0);
  textSize(24);
  textAlign(TOP, LEFT);
  textFont(pixelFont);
  noStroke();
  fill(0, 0, 0);

  // Tekst autos
  text("John\n Co", 30 + autoX, 910);

  // Tutorial Tekst
  text("Spatie/backspace om \naan te passen!", 486, 75);

  // Statistieken
  text("Snelheid:" + (snelheidMultiplier), 485, 25);

  // Boom (voorgrond)

  // Hout
  fill(139 - abs(tijd / 10),69,19);
  rect(470, 850, 25, 150);
  
  // Bladeren 1
  fill(0,220 - abs(tijd / 10),0);
  circle(480 + abs(variatie / 7),816, 75);

  // Bladeren 2
  fill(0,180 - abs(tijd / 10),0);
  circle(492 + abs(variatie / 9),826, 75);

  // Bladeren 3
  fill(0,140 - abs(tijd / 10),0);
  circle(478 - abs(variatie / 7),812, 75);

  // Bladeren 4
  fill(0,100 - abs(tijd / 10),0);
  circle(483 - abs(variatie / 9),820, 75);

  // Wolken
  
  // Achterkant

  // wolk 1
  fill(215 - abs(tijd / 10));
  circle(260 + wolk1X, 245, 100);
  circle(310 + wolk1X, 258, 75);
  circle(210 + wolk1X, 258, 75);

  // wolk 2
  circle(390 + wolk2X, 295, 100);
  circle(440 + wolk2X, 308, 75);
  circle(340 + wolk2X, 308, 75);

  // wolk 3
  circle(590 + wolk3X, 395, 100);
  circle(640 + wolk3X, 408, 75);
  circle(540 + wolk3X, 408, 75);

  // Voorkant

  // wolk 1
  fill(255 - abs(tijd / 10));
  circle(260 + wolk1X, 255, 100);
  circle(310 + wolk1X, 268, 75);
  circle(210 + wolk1X, 268, 75);

  // wolk 2
  circle(390 + wolk2X, 305, 100);
  circle(440 + wolk2X, 318, 75);
  circle(340 + wolk2X, 318, 75);

  // wolk 3
  circle(590 + wolk3X, 405, 100);
  circle(640 + wolk3X, 418, 75);
  circle(540 + wolk3X, 418, 75);

  // Cirkel
  if (mouseIsPressed && !isDropping) { // Laat speler niet bal bewegen als hij is gevallen
    if (mouseButton == LEFT) {
      R = random(0,255);
      B = random(0,255);
      G = random(0,255);
      cirkelX = mouseX;
      cirkelY = mouseY;
      isDropping = false;
      if (cirkelGrootte < 100) {
        cirkelGrootte += 0.05 * deltaTime;
      }
    }
  }
  else if (isDropping) { // Zwaartekracht
    if (cirkelY  <= canvasYSize - cirkelGrootte / 2) {
      cirkelY += (0.9 * cirkelGrootte / 150 ) * deltaTime;
    }
    
  }

  // Maak bal
  fill(R, G, B);
  circle(cirkelX, cirkelY, cirkelGrootte);

  // Collision

  if (cirkelX - cirkelGrootte < autoX + 200
    && cirkelX - cirkelGrootte > autoX 
    && cirkelY + cirkelGrootte > 880 && isDropping) {
    boost = 2 * (cirkelGrootte / 10);
    cirkelGrootte = 0;
    cirkelY = 0;
    cirkelX = 0;
    isDropping = false;
    boostSFX.play();
    }

  // Boost
  if (boost > 1) {
    boost -= decaySnelheid * deltaTime;
  }
  else if (boost < 1) {
    boost = 1;
  }

  // Maak honk button correct
  button.position(autoX, 880);
  button.mousePressed(on_car1_clicked);
  button.style("background-color", "transparent");
  button.style("border-width", "0px");
  button.style("font-size", "90px");
  button.style("color", "transparent");

  // Honk button snelle auto
  buttonSnelleAuto.position(500 + auto2X, 850);
  buttonSnelleAuto.mousePressed(on_car2_clicked);
  buttonSnelleAuto.style("background-color", "transparent");
  buttonSnelleAuto.style("border-width", "0px");
  buttonSnelleAuto.style("font-size", "90px");
  buttonSnelleAuto.style("color", "transparent");
}

function mouseReleased () { // Laat bal vallen wanneer muis losgelaten word
  if (mouseButton == LEFT) {
    if(!isDropping && cirkelGrootte >= 10) {
      isDropping = true;
    }
  }
}

function on_car1_clicked () { // Speel honk met een pitch van 0.9
  honk.rate(0.9);
  honk.play();
}

function on_car2_clicked () { // Speel honk met een pitch van 1.6
  honk.rate(1.6);
  honk.play();
}