class Horse {
  constructor(y, speed, images) {
    this.images = images;
    this.speed = speed;
    this.velocity = 0;
    this.maxVelocity = 60;
    this.acceleration = 0.05;
    this.y = y;
    this.x = -50;
    this.counter = 0;
    this.animate();
    this.marked = false;
    this.raceTime =0
  }

  reset() {
    this._velocity = 0;
    this._acceleration = 0.05;
    this._x = -50;
    this.counter = 0;
    this.raceTime = 0
    this.animate();
    this.marked = false;

  }

  get maxVelocity() {
    return this._maxVelocity;
  }

  set maxVelocity(value) {
    this._maxVelocity = value;
  }
  get y() {
    return this._y;
  }

  set y(value) {
      this._y = value;
  }

  get x() {
    //this.x = this._x+4;
    return this._x;
  }

  set x(value) {
    this._x = value;
  }

  get velocity() {
    return this._velocity;
  }

  set velocity(value) {
    this._velocity = value;
  }

  get acceleration() {
    return this._acceleration;
  }

  set acceleration(value) {
    this._acceleration = value;
  }

  move() {
    //if (this._x > 1800) this._x = 0;
    if (this.counter > 150 && this.counter % 40 == 1) {
      this._acceleration = randomGaussian(
        0.007 / (this._velocity / this.speed) - 0.007,
        0.004
      );
    }
    this._velocity = this._velocity + this._acceleration;
    this._acceleration = this._acceleration * randomGaussian(0.97, 0.01);
    this._x = this._x + this._velocity;

    this.counter++;
    this.animate();
  }

  changeImage(img) {
    this.img = img;
  }

  animate() {
    
    if (this.marked) strokeWeight(5);
    else strokeWeight(0);
    stroke(18, 12, 179, 255);
    fill(this._acceleration * 30000, 100, 200);
    if (this.raceTime % 15 < 3) {
        image(this.images[0], this._x, this._y-150);
    } else if (this.raceTime % 15 < 6) {
        image(this.images[4], this._x, this._y-150);
    } else if (this.raceTime % 15 < 9) {
        image(this.images[3], this._x, this._y-150);
    } else if (this.raceTime % 15 < 12) {
        image(this.images[2], this._x, this._y-150);
    } else if (this.raceTime % 15 < 15) {
        image(this.images[1], this._x, this._y-150);
    }
    this.raceTime+=this.velocity/10
  }

  changeMarked(to) {
    this.marked = to;
  }
}
class HorseRace {
  constructor(y, images) {
    this.images = images;
    this.horses = [];
    for (this.i = y; this.i < 800; this.i += 125) {
      append(this.horses, new Horse(this.i, (this.i - y) / 800 + 4, images));
    }
    this.finals;
    this.finals = new Array(this.horses.length).fill(0);
    this.markedOne = false;
    this.betHorse = 0;
    this.raceTime = 0;
    this.winner = [];
  }

  startRace() {

    for (this.i = 0; this.i < this.horses.length; this.i++) {
      this.horses[this.i].move();
      fill(19, 191, 23)
      
      if(this.horses[this.i].marked){
        stroke(230, 21, 21)
        strokeWeight(7)
      }
      textSize(20)
      text(this.i+1,this.horses[this.i]._x+107, this.horses[this.i]._y-95)
    }

    for (this.i = 0; this.i < this.horses.length; this.i++) {
      if (this.horses[this.i]._x > 1700 && !this.winner.includes(this.i)) {
        this.winner.push(this.i);
        //alert(this.i+ " has won");
        /*
        this.markedOne = false
        this.finals[this.i] = this.finals[this.i] + 1;
        for (this.j = 0; this.j < this.horses.length; this.j++) {
          this.horses[this.j].reset();
        }
        alert(this.i);
        return false;
        */
      }
      if(this.horses[this.i]._x > 2500){
        return false;
      }
      //rect(horses[i].x,horses[i].y,50,50);
    }
    return true;
  }

  draw() {
    for (this.i = 0; this.i < this.horses.length; this.i++) {
      this.horses[this.i].animate();
      fill(19, 191, 23)
      textSize(20)
      if(this.horses[this.i].marked){
        stroke(230, 21, 21)
        strokeWeight(7)
      }
      text(this.i+1,this.horses[this.i]._x+107, this.horses[this.i]._y-95)

      
    }
  }

  tellResult() {
    print(this.finals);
  }
  mark(i) {
    this.horses.forEach((element) => element.changeMarked(false));
    this.horses[i].changeMarked(true);
    this.markedOne = true;
    this.betHorse = i;
  }
  marked1() {
    return this.markedOne;
  }
}

function zuschauer() {
  stroke(0, 0, 0, 0);
  triangle(
    zuschauerX - 10,
    zuschauerY + 10,
    zuschauerX + 10,
    zuschauerY + 10,
    zuschauerX + 0,
    zuschauerY
  );
  fill("#fcd09d");
  ellipse(zuschauerX, zuschauerY - 5, 10, 10);
}

// Beschreibe diese Funktion …
function cloudrap() {
  stroke(70, 130, 180, 100);
  fill("#ffffff");
  rect(yung_hurn, yeat + -10, 40, 20);
  ellipse(yung_hurn + 40, yeat, 20, 20);
  ellipse(yung_hurn, yeat, 20, 20);
  ellipse(yung_hurn + 10, yeat + -10, 20, 20);
  ellipse(yung_hurn + 25, yeat + -10, 30, 30);
}

// Beschreibe diese Funktion …
function h_C3_A4nds() {
  strokeWeight(1);
  line(h_C3_A4ndewaschen + 10, handy, h_C3_A4ndewaschen + 15, handy - 5);
  line(h_C3_A4ndewaschen, handy, h_C3_A4ndewaschen - 5, handy - 5);
  stroke("#fcd09d");
  strokeWeight(2);
  point(h_C3_A4ndewaschen + 15, handy - 5);
  point(h_C3_A4ndewaschen - 5, handy - 5);
}

function horse(x, y) {
  image(horesI, x, y);
}


function drawPodium(x,y, horse, pos){
  const width = 500;
  noStroke();
  fill(255);


  //3rd place place 
  rect(x+(width/6), y,width/3,60);

  //2nd place place 
  rect(x-(width/2), y-15,width/3,75);
  //1st place place 
  rect(x-(width/6), y-40,width/3,100);
  //falling hores
  switch(pos){
    case 1:
      horse._x = x-width/6
      if(horse._y <= y) horse._y += 1.5;
      else return false;
      break;
    case 2:
      horse._x = x-width/2-20
      if(horse._y <= y+25) horse._y +=2;
      else return false;
      break;
    case 3:
      horse._x = x+width/6
      if(horse._y <= y+40) horse._y += 2;
      else return false;
      break;  
  
  }

  return true
}

let posForPodium =3  
let raceOngoing = 2;
let hr;
let d;
let c = 0;

function preload() {
  myImage = loadImage("Images/unnamed.png");
  horsesImg = [
    loadImage("Images/horse_run_cycleBild1.png"),
    loadImage("Images/horse_run_cycleBild2.png"),
    loadImage("Images/horse_run_cycleBild3.png"),
    loadImage("Images/horse_run_cycleBild4.png"),
    loadImage("Images/horse_run_cycleBild5.png"),
  ];
}
function setup() {
  frameRate(60);
  createCanvas(2000, 700);myButton = new Clickable();  
  myButton.text = "Start"
  myButton.textSize = 30
  //myButton.image = myImage;
    //Create button
  myButton.locate(190, 300); 
  
  myButton.onPress = function () {
    raceOngoing = 1
  }
  restart = new Clickable();
  restart.text = "Restart";
  restart.textSize = 30
  restart.locate(window.width/2+130,280);
  restart.onPress = function () {
    hr = new HorseRace(380, horsesImg);
    raceOngoing = 2
    posForPodium = 3
  }

  hr = new HorseRace(380, horsesImg);
  // d = new DifferentHorse(0,10);

  angleMode(DEGREES);
  ListePunkte = [];
  for (var count = 0; count < 200; count++) {
    ListePunkte.push([random(0, width - 30), random(250, 700)]);
  }
  listeFarbeMenschen = [];
  for (var count2 = 0; count2 < 223; count2++) {
    listeFarbeMenschen.push([random(0, 255), random(0, 255), random(0, 255)]);
  }
  yeat = random(30, 100);
  //a = createA('http://bzga.de', 'Hilfe unter bzga.de');
  //a.position(435, 180);

}
let a = null;
rand = 0;
listeCloudRapper = [];
yung_hurn = -50;
yeat = 0;

function draw() {
  strokeWeight(2);
  //Siemons
  zuschauerX = 75;
  zuschauerY = 135;
  background("#ffcc66");
  fill("#00cccc");
  rect(0, 0, width, 151);
  let t = random(150)
  if (t <= 1) {
    listeCloudRapper.push([-50, random(30, 100)]);
  }
  for (k = 1; k <= listeCloudRapper.length; k = k + 1) {
    yung_hurn = listeCloudRapper[k - 1][0];
    yeat = listeCloudRapper[k - 1][1];
    listeCloudRapper[k - 1][0] = listeCloudRapper[k - 1][0] + 0.5;
    cloudrap();
  }
  fill("#009900");
  stroke(0, 0, 0, 0);
  rect(0, 150, width, 100);
  fill("#c4151c");
  stroke(0, 0, 0, 0);
  dreieckX = 100;
  dreieckX2 = 125;
  for (var count3 = 0; count3 < 19; count3++) {
    triangle(dreieckX, 5, dreieckX, 15, dreieckX2, 10);
    dreieckX = dreieckX + 100;
    dreieckX2 = dreieckX2 + 100;
  }
  fill("#ff6666");
  stroke(0, 0, 0, 255);
  lineX1 = 100;
  for (var count4 = 0; count4 < 19; count4++) {
    line(lineX1, 5, lineX1, 150);
    lineX1 = lineX1 + 100;
  }
  stroke("ffffff");
  strokeWeight(2);
  line(0, 225, width, 225);
  line(0, 250, width, 250);
  lineX2 = 0;
  for (var count5 = 0; count5 < 52; count5++) {
    line(lineX2, 250, lineX2, 225);
    lineX2 = lineX2 + 40;
  }
  beginShape();
  vertex(50, 150);
  vertex(99, 50);
  vertex(1901, 50);
  vertex(1950, 150);
  endShape(CLOSE);
  fill("#ffffff");
  rect(400, 165, 200, 50);
  fill("#000000");
  textSize(20);
  textAlign(CENTER);
  
  //a.position(430, 180);
  stroke("#996633");
  for (i = 1; i <= 200; i = i + 1) {
    point(ListePunkte[i - 1][0], ListePunkte[i - 1][1]);
  }
  stroke(0, 0, 0, 0);
  h_C3_A4ndewaschen = 70;
  handy = 140;
  for (j = 1; j <= 75; j = j + 1) {
    fill(
      listeFarbeMenschen[j - 1][0],
      listeFarbeMenschen[j - 1][1],
      listeFarbeMenschen[j - 1][2],
      255
    );
    zuschauer();
    zuschauerX = zuschauerX + 25;
    stroke(
      listeFarbeMenschen[j - 1][0],
      listeFarbeMenschen[j - 1][1],
      listeFarbeMenschen[j - 1][2],
      255
    );
    h_C3_A4nds();
    h_C3_A4ndewaschen = h_C3_A4ndewaschen + 25;
  }
  zuschauerY = zuschauerY + -33;
  zuschauerX = 86;
  h_C3_A4ndewaschen = 81;
  handy = 107;
  for (j = 76; j <= 149; j = j + 1) {
    fill(
      listeFarbeMenschen[j - 1][0],
      listeFarbeMenschen[j - 1][1],
      listeFarbeMenschen[j - 1][2],
      255
    );
    zuschauer();
    zuschauerX = zuschauerX + 25;
    stroke(
      listeFarbeMenschen[j - 1][0],
      listeFarbeMenschen[j - 1][1],
      listeFarbeMenschen[j - 1][2],
      255
    );
    h_C3_A4nds();
    h_C3_A4ndewaschen = h_C3_A4ndewaschen + 25;
  }
  zuschauerY = zuschauerY + -33;
  zuschauerX = 100;
  h_C3_A4ndewaschen = 95;
  handy = 74;
  for (j = 150; j <= 222; j = j + 1) {
    fill(
      listeFarbeMenschen[j - 1][0],
      listeFarbeMenschen[j - 1][1],
      listeFarbeMenschen[j - 1][2],
      255
    );
    zuschauer();
    zuschauerX = zuschauerX + 25;
    stroke(
      listeFarbeMenschen[j - 1][0],
      listeFarbeMenschen[j - 1][1],
      listeFarbeMenschen[j - 1][2],
      255
    );
    h_C3_A4nds();
    h_C3_A4ndewaschen = h_C3_A4ndewaschen + 25;
  }
  stroke(0, 0, 0, 0);
  griechland = 260;
  bayernbursche = 250;
  bettercallsaul = 1900;
  for (var count6 = 0; count6 < 23; count6++) {
    fill("#ffffff");
    rect(bettercallsaul, griechland, 10, 10);
    griechland = griechland + 20;
    fill("#000000");
    rect(bettercallsaul, bayernbursche, 10, 10);
    bayernbursche = bayernbursche + 20;
  }
  bayernbursche = 260;
  griechland = 250;
  bettercallsaul = bettercallsaul + -10;
  for (var count7 = 0; count7 < 23; count7++) {
    fill("#ffffff");
    rect(bettercallsaul, griechland, 10, 10);
    griechland = griechland + 20;
    fill("#000000");
    rect(bettercallsaul, bayernbursche, 10, 10);
    bayernbursche = bayernbursche + 20;
  }
  griechland = 260;
  bayernbursche = 250;
  bettercallsaul = bettercallsaul + -10;
  for (var count8 = 0; count8 < 23; count8++) {
    fill("#ffffff");
    rect(bettercallsaul, griechland, 10, 10);
    griechland = griechland + 20;
    fill("#000000");
    rect(bettercallsaul, bayernbursche, 10, 10);
    bayernbursche = bayernbursche + 20;
  }

  /*
************************************

ENDE

***********************************
*/

  if (raceOngoing == 1) {
    c += 0.1;
    // background(noise(c)*200,200,100)
    if (!hr.startRace()) {
      hr.tellResult();
      raceOngoing = 0;
      for(i = 0; i<4; i++){
        hr.horses[i]._y = -10
      }
    }
  }else if(raceOngoing == 2){//start  
    hr.draw();
    makeStartScreen();
    textSize(40);
    stroke(0);
    strokeWeight(2);
    fill(10, 16, 199);
  //text(mouseX,300,300)
    text("Choose your fighter", 200, 220);
    if(hr.marked1()){
      myButton.draw(); //Position Button
      text("Ready?", 250, 280);  

  };
  
  }else{
    if(posForPodium>=1){
      if(!drawPodium(window.width/2,500, hr.horses[hr.winner[posForPodium-1]], posForPodium)) posForPodium+= -1;

    }else {    
      textSize(40);
      stroke(0);
      strokeWeight(2);
      fill(10, 16, 199);
      if(hr.winner[0] != hr.betHorse){text("Try Harder",window.width/2,300); }
      else{text("Nice job",window.width/2,300);
      }
      drawPodium(window.width/2,500, hr.horses[hr.winner[posForPodium-1]], posForPodium);
      restart.draw();
    }
    hr.draw();
  }


}



function makeStartScreen() {
  if (mouseIsPressed) {
    if (mouseX <= 80){ 
    if (245 < mouseY && mouseY < 304) hr.mark(0);
    if (376 < mouseY && mouseY < 428) hr.mark(1);
    if (500 < mouseY && mouseY < 555) hr.mark(2);
    if (625 < mouseY && mouseY < 675) hr.mark(3);
    }
  }
}