​

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

const butx1 = 30,butx2=butx1+xdiff,butx3=butx2+xdiff,buty1=550,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]];

​

const grid = [];

​

let typing = "";

​

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

const  recordmarg = 15, recordy = chatY + chatheight + recordmarg,recordwidth = 100, recordheight=200;

​

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

​

​

function setup() {

  createCanvas(412, 846);

​

}

​

function draw() {

  background(255);

  noStroke();

  fill(220);

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

  // draw buttons

  noStroke();

  fill(35,53,65);

  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)

  }  

  // draw record button

  fill(232,94,2);

  rect(width-recordmarg-recordwidth,recordy,recordwidth,recordheight,15);

  // draw chatbox

  strokeWeight(4);

  stroke(232,94,2);

  fill(255);

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

  noStroke()

  fill(100);

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

  fill(0);

  text(typing,chatmarg+15,510)

  // draw times

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

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

    strokeWeight(2);

    stroke(180);

    fill(255);

    rect(timesX, curry, timeswidth, timesheight);

    noStroke();

    fill(0);

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

    fill(120);

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

  }

}

​

function mousePressed(){

  // GRID FUNCTION (not finished oops)

  // 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){

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

  //     console.log(times);

  //   }

  // }

  // NUMPAD FUNCTION

  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){

      typing = typing.concat(i);

      // console.log(typing);

    }

  }

  if(mouseX > width-recordmarg-recordwidth && mouseX < width-recordmarg && mouseY > recordy && mouseY < recordy + recordheight){

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

    typing = "";

     }

}