let count = 10;

let n = 1;

let yellowCount = 0;

let blueCount = 0;

let table;

let timers = [];

let img;

​

function preload(){

   // load our image

  backgroundImage = loadImage("image.jpg");

  orangeImage = loadImage("orange.png");

  blueImage = loadImage("blue.png");

  playerimg = loadImage("player.png");

}

​

class Timeout {

    constructor(callbackFunction, time) {

        this.time = time; 

        this.callback = callbackFunction; 

        this.run(); // It will be automatically invoked when the constructor is run

    }

    run() {

        this.startedTime = new Date().getTime();

        if (this.time > 0) {

            this.timeout = setTimeout(this.callback, this.time); // Timeout must be set if this.time is greater than 0

        }

    }

    pause() {

        let currentTime = new Date().getTime();

        this.time = this.time - (currentTime - this.startedTime); // The time that was given when initializing the timeout is subtracted from the amount of time spent

        clearTimeout(this.timeout);

    }

}

​

​

function reset_table() {

  table.elt.rows[1].cells[1].innerHTML = 0;

  table.elt.rows[1].cells[2].innerHTML = 0;

  table.elt.rows[2].cells[1].innerHTML = 0;

  table.elt.rows[2].cells[2].innerHTML = 0;

  yellowCount = 0;

  blueCount = 0;

}

​

function create_table(){

  // Create table

  table = createElement("table");

  table.style("border-collapse", "collapse");

  table.style("border", "1px solid black");

  table.style("width", "400px");

  table.style("height", "128px");

  table.style("margin", "0 auto");

  table.class("table table-dark table-striped")

  table.position(150, 300)

​

  // Create header row

  let headerRow = table.elt.insertRow();

  let headerCell1 = headerRow.insertCell();

  headerCell1.innerHTML = "Farve";

  headerCell1.style.border = "1px solid black";

  headerCell1.style.padding = "5px";

  headerCell1.style.width = "133px";

  headerCell1.style.textAlign = "center";

  let headerCell2 = headerRow.insertCell();

  headerCell2.innerHTML = "Hyppighed";

  headerCell2.style.border = "1px solid black";

  headerCell2.style.padding = "5px";

  headerCell2.style.width = "133px";

  headerCell2.style.textAlign = "center";

  let headerCell3 = headerRow.insertCell();

  headerCell3.innerHTML = "Frekvens";

  headerCell3.style.border = "1px solid black";

  headerCell3.style.padding = "5px";

  headerCell3.style.textAlign = "center";

​

  // Create row for "gul"

  let row1 = table.elt.insertRow();

  let cell1_1 = row1.insertCell();

  cell1_1.innerHTML = "Orange / Succes";

  cell1_1.style.border = "1px solid black";

  cell1_1.style.padding = "5px";

  cell1_1.style.textAlign = "center";

  let cell1_2 = row1.insertCell();

  cell1_2.style.border = "1px solid black";

  cell1_2.style.padding = "5px";

  cell1_2.innerHTML = 0;

  cell1_2.style.textAlign = "center";

  let cell1_3 = row1.insertCell();

  cell1_3.style.border = "1px solid black";

  cell1_3.style.padding = "5px";

  cell1_3.innerHTML = 0.0;

  cell1_3.style.textAlign = "center";

​

  // Create row for "blå"

  let row2 = table.elt.insertRow();

  let cell2_1 = row2.insertCell();

  cell2_1.innerHTML = "Blå / Fiasko";

  cell2_1.style.border = "1px solid black";

  cell2_1.style.padding = "5px";

  cell2_1.style.textAlign = "center";

  let cell2_2 = row2.insertCell();

  cell2_2.style.border = "1px solid black";

  cell2_2.style.padding = "5px";

  cell2_2.innerHTML = 0;

  cell2_2.style.textAlign = "center";

  let cell2_3 = row2.insertCell();

  cell2_3.style.border = "1px solid black";

  cell2_3.style.padding = "5px";

  cell2_3.innerHTML = 0.0;

  cell2_3.style.textAlign = "center";

}

​

function setup() {

  createCanvas(848, 428);

  orangeImage.resize(40, 40);

  blueImage.resize(40, 40);

  playerimg.resize(150, 300);

​

  div = createElement("div111");

  div.style("background-color", "rgba(0, 0, 0, .6) ")

  div.style("height", "128px")

  div.style("width", "848px")

  div.style("z-score", "1")

  div.position(0,300)

  create_table();

  // Create button to submit inputs

  submitButton = createButton('Start');

  submitButton.position(30, 210+94);

  submitButton.style("color", "white");

  submitButton.style("width", "90px");

  submitButton.class("btn btn-success");

  submitButton.mousePressed(start);

  // Create button to submit inputs

  restart_soft_Button = createButton('Prøv Igen');

  restart_soft_Button.position(30, 260+85);

  restart_soft_Button.style("color", "white");

  restart_soft_Button.style("width", "90px");

  restart_soft_Button.mousePressed(restart_soft);

  restart_soft_Button.class("btn btn-warning");

  restart_soft_Button.attribute('disabled', '');

  // Create button to submit inputs

  restartButton = createButton('Genstart');

  restartButton.position(30, 310+76);

  restartButton.style("color", "white");

  restartButton.style("width", "90px");

  restartButton.class("btn btn-danger");

  restartButton.mousePressed(restart1);

  restartButton.attribute('disabled', '');

}

​

function create_balls(n_count) {

    if(n_count > 10){

      return 1; 

    }

    circles = [];

    yellowCount = 0;

    blueCount = 0;

    for (let i = 0; i < n; i++) {

      let p_experimental = random(1);

      let circle = {

        x: 475,

        y: 20,

        targetX: random(25, 400),

        targetY: random(25, 300-20),

        show: false,

        image: (p_experimental < 0.5) ? orangeImage : blueImage

      };

      let cell = table.elt.rows[1].cells[1];

      let cell1 = table.elt.rows[1].cells[2];

      let cell2 = table.elt.rows[2].cells[1];

      let cell3 = table.elt.rows[2].cells[2];

      let str_1 = String(n_count);

      let cell4 = document.getElementById(str_1);

      let cell5 = document.getElementById(str_1.concat("_"));

      circle.show = true;

      if(circle.image == orangeImage){

​

        yellowCount += 1;

        cell.innerHTML = yellowCount;

        cell1.innerHTML = (yellowCount/(yellowCount+blueCount)).toFixed(2);

        cell3.innerHTML = (blueCount/(yellowCount+blueCount)).toFixed(2);

        cell4.innerHTML = yellowCount;

        cell5.innerHTML = (yellowCount/(yellowCount+blueCount)).toFixed(2);

      } else {

        blueCount += 1;

        cell2.innerHTML = blueCount;

        cell1.innerHTML = (yellowCount/(yellowCount+blueCount)).toFixed(2);

        cell3.innerHTML = (blueCount/(yellowCount+blueCount)).toFixed(2);

        cell4.innerHTML = yellowCount;

        cell5.innerHTML = (yellowCount/(yellowCount+blueCount)).toFixed(2);

      }

      circles.push(circle);

  }

​

  n += 1;

  submitButton.html("Næste");

  restart_soft_Button.removeAttribute('disabled');

​

​

  if(n_count >= 10){

    submitButton.attribute('disabled', '');

    restartButton.removeAttribute('disabled');

  }

  return 0;

}

​

function restart1 (){

  reset_table();

  for (let i = 1; i < 11; i++){

    let str1 = String(i);

    let cell4 = document.getElementById(str1);

    let cell5 = document.getElementById(str1.concat("_"));

    cell4.innerHTML = 0;

    cell5.innerHTML = 0;

  }

  circles = [];

  timers = [];

  incrementor = 500;

  delay = 0;

  n = 1;

  yellowCount = 0;

  blueCount = 0;

  submitButton.removeAttribute('disabled');

  restartButton.attribute('disabled', '');

}

​

function restart_soft (){

  reset_table();

​

  circles = [];

  timers = [];

  incrementor = 500;

  delay = 0;

  n -= 1;

  yellowCount = 0;

  blueCount = 0;

  start();

}

​

​

function start (){

  reset_table();

  create_balls(n);

}

​

​

function draw() {

  background(backgroundImage);

  // Set the stroke color to black

  stroke(0);

  strokeWeight(5);

  // Draw a rectangle that covers the entire canvas

  noFill();

  image(playerimg, 400, 20)

  rect(0, 0, width, height);

  noStroke();

  for (let circle of circles) {

    if (circle.show) {

      image(circle.image, circle.x, circle.y);

      circle.x -= (circle.x - circle.targetX) * 0.1;

      circle.y += (circle.targetY - circle.y) * 0.1;

    }

  }

}

​