​

/*

what still needs to be done:

- delete and swap

- undo pop-ups / history?

- top bar

- aesthetics:

  - font

  - more shit

- make it zoom correctly on phone

- make separate version for android with double tap disabled

*/

​

// define mode, true = chatmode, false = gridmode

let mode = true;

​

let times = [];

let grid = [];

​

let gridbotx, gridboty;

let dashY, numpadY;

​

const chatmarg = 15,chatheight=50,chatY=480;

const buttonmarg = 15;

const plusY = chatY + chatheight + buttonmarg, plusheight = 50;

const recordY = plusY + plusheight + buttonmarg, recordwidth = 100, recordheight=200;

​

const xdiff=80,ydiff=70, butwidth = 70, butheight = 50;

const butx1 = 10,butx2=butx1+xdiff,butx3=butx2+xdiff,buty1=plusY,buty2=buty1+ydiff,buty3=buty2+ydiff,buty4=buty3+ydiff;

const numbers = [[butx2,buty4],[butx1,buty1],[butx2,buty1],[butx3,buty1],[butx1,buty2],[butx2,buty2],[butx3,buty2],[butx1,buty3],[butx2,buty3],[butx3,buty3]];

​

​

let selection = -1;

let typing = "";

let queue = [];

​

​

const timesX = 300, timesY = 450, timesmarg = 50, timeswidth = 100, timesheight = 30;

​

​

function setup() {

  createCanvas(412, 846);

  createButton("switch mode").mousePressed(switchMode);

  createButton("export time").mousePressed(exportTimes);

  for(i=101;i<130;i++){

    grid.push([i,true])

  }

  // canvas dependent variables

  gridbotx = 15; 

  gridboty = height - 80;

  dashY = height - 380;

  numpadY = dashY +  70;

}

​

function draw() {

  background(255);

  noStroke();

  fill(220);

  rect(0,dashY,width,height-dashY);

  fill(35,53,65);

  rect(0,numpadY,width,height-numpadY);

  // draw buttons

  noStroke();

  if(mode){

    for(i=0;i<numbers.length;i++){

      fill(35,53,65);

      rect(numbers[i][0],numbers[i][1],butwidth,butheight,15);

      fill(255);

      text(i,numbers[i][0]+35,numbers[i][1]+30)

    }

  }

  else{

    for(i=0;i<grid.length;i++){

      if(grid[i][1]){fill(35,53,65);}

      else{fill(95,108,117)}

      rect(gridbotx + (i%3) * xdiff, gridboty - Math.trunc(i/3) * ydiff,butwidth,butheight,15);

      fill(255);

      text(grid[i][0], gridbotx + (i%3) * xdiff + 25, gridboty - Math.trunc(i/3) * ydiff + 30)

    }

  }

  // draw other buttons

  fill(35,53,65);

  if(mode){

    rect(butx3,buty4,butwidth,butheight,15);

  }

  rect(width-buttonmarg-recordwidth,plusY,recordwidth,plusheight,15);

  fill(255);

  text("<-",butx3+30,buty4+30);

  text("+", width-buttonmarg-recordwidth+35,plusY+30);

  fill(232,94,2);

  rect(width-buttonmarg-recordwidth,recordY,recordwidth,recordheight,15);

  // draw chatbox

  if(selection == -1){

      strokeWeight(4);

      stroke(232,94,2);

    }

  else{

      strokeWeight(2);

      stroke(180);

    }

  fill(255);

  if(mode){

    rect(chatmarg,chatY,width-2*chatmarg,chatheight,5);}

  else{rect(width-buttonmarg-recordwidth, chatY, recordwidth, chatheight,5);}

  noStroke()

  fill(100);

  text(hour()+":"+minute()+":"+second()+"."+Math.round(millis()/100)%10,width-chatmarg-65,510);

  fill(0);

  let chatbuffer = 0;

  for(i=0;i<queue.length;i++){

    stroke(180);

    strokeWeight(2);

    line(chatmarg*2 + chatbuffer*50+35, chatY+10, chatmarg*2+chatbuffer*50+35, chatY+chatheight-10);

    noStroke();

    text(queue[i],chatmarg*2 + chatbuffer*50, 510);

    chatbuffer++

  }

  text(typing,chatmarg*2 + chatbuffer*50,510);

  // draw times

  let buffer = 0;

  for(i=times.length-1;i>-1;i--){

    let curry = timesY - timesmarg * (times.length-i) - buffer*0.5*timesheight;

    let curheight = timesheight;

    for(j=2;j<times[i].length;j++){

      buffer++;

      curheight += 0.5*timesheight;

      curry -= 0.5*timesheight;

    }

    // console.log(buffer);

    fill(255);

    if(selection == i){

      strokeWeight(4);

      stroke(232,94,2);

    }

    else{

      strokeWeight(1);

      stroke(180);

    }

    rect(timesX, curry, timeswidth, curheight,5);

    noStroke();

    for(j=2;j<times[i].length;j++){

      fill(180);

      text(times[i][j], timesX + 10, curry + 20);

      stroke(180);

      strokeWeight(1);

      line(timesX+10, curry+20, timesX + 30, curry+10)

      noStroke();

      curry += 0.5*timesheight;

    }

    if(selection==i && times[i][0].length==3){

      fill(180);

    }

    else{

      fill(0);

    }

    text(times[i][0], timesX + 10, curry + 20);

    fill(120);

    text(times[i][1], timesX + 40, curry + 20);

  }

}

​

function mousePressed(){

  // enable only for chrome on android:

  // if (event.type == 'touchstart'){

  // GRID FUNCTION

  if(mode == false){

    for(i=0;i<grid.length;i++){

      let xx = gridbotx + (i%3) * xdiff, yy = gridboty - Math.trunc(i/3) * ydiff

      if(mouseX>xx && mouseX<xx + butwidth && mouseY>yy && mouseY<yy + butheight && grid[i][1]){

        times.push([grid[i][0],hour()+":"+minute()+":"+second()+"."+Math.round(millis()/100)%10])

        grid[i][1] = false;

      }

    }

  }

  // NUMPAD FUNCTION

  if(mode){

    for(i=0;i<numbers.length;i++){

      if(mouseX>numbers[i][0] && mouseX<numbers[i][0] + butwidth && mouseY>numbers[i][1] && mouseY<numbers[i][1] + butheight && typing.length < 3){

        if(selection==-1){

          typing = typing.concat(i);

        }

        else if(times[selection][0].length < 3){

          times[selection][0] = times[selection][0].concat(i);

          if(times[selection][0].length>2){

            selection = -1;

          }

        }

        else{

          times[selection].push(times[selection][0]);

          times[selection][0] = "".concat(i);

        }

      }

    }

  }

  // BACKSPACE

  if(mouseX > butx3 && mouseX < butx3 + butwidth && mouseY > buty4 && mouseY < buty4 + butheight){

    if(selection==-1){

      typing = typing.substring(0, typing.length - 1);

    }

    else{

      times[selection][0] = times[selection][0].substring(0,times[selection][0].length - 1);

    }

  }

  if(mouseX > width-buttonmarg-recordwidth && mouseX < width-buttonmarg){

    // RECORD BUTTON

    if(mouseY > recordY && mouseY < recordY + recordheight){

      if(queue.length > 0){

        times.push([queue[0], hour()+":"+minute()+":"+second()+"."+Math.round(millis()/100)%10]);

        queue.shift();

      }

      else{

        times.push([typing, hour()+":"+minute()+":"+second()+"."+Math.round(millis()/100)%10]);

        typing = "";

      }

     }

    // PLUS BUTTON

    if(mouseY > plusY && mouseY < plusY + plusheight){      

      if(selection == -1){

        queue.push(typing);

        typing = "";

      }

      else{

        times.splice(selection+1, 0, ["",times[selection][1]]);

        selection++;

      }

    }

  }

  // SELECT TIME

  if(mouseX > timesX && mouseX < timesX + timeswidth){

    let buffer = 0;

    for(i=times.length-1;i>-1;i--){

      let curry = timesY - timesmarg * (times.length-i) - buffer*0.5*timesheight;

      for(j=2;j<times[i].length;j++){

        buffer++;

      }

      if(mouseY>curry - (times[i].length - 2) * timesheight*0.5 && mouseY<curry + timesheight){

        selection = i;

      }

    }

  }

  // DESELECT TIME

  if(mouseX > chatmarg && mouseX < chatmarg+width-2*chatmarg && mouseY > chatY && mouseY < chatY+chatheight){

    typing = "";

    selection = -1;

  }

  if(mouseX < timesX && mouseY < chatY){

    typing = "";

    selection = -1;

  }

  // }

}

​

function switchMode(){

  if(mode){mode = false;}

  else{mode=true;}

}

​

function exportTimes(){

  timetable = new p5.Table();

  timetable.addColumn('bib');

  timetable.addColumn('time');

  for(i=0;i<times.length;i++){

    let newRow = timetable.addRow();

    newRow.setString('bib', times[i][0]);

    newRow.setString('time', times[i][1]);

  }

  saveTable(timetable, 'results.csv');

}