const amt = 10;

​

var TXTSIZE = 16;

var marg = 60;

var NUMBER = 1;

const CURRENCIES  = ['😹','💰','💎','👻']

var FAIL = '👿'

var FAILED = false;

​

const buttons = [];

​

const colorCodes = ['#ff0000', '#ff00ff', ' #000000'];

const monies = new Map();

​

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER)

  textSize(TXTSIZE);

  textAlign(CENTER)

  background(220);

  for (var x = marg; x < (width-marg)+1; x += (width-(4*marg))/4 ){

      for (var y = marg; y < (height-marg)+1; y+= (height-(4*marg))/4){

        fill('yellow')

        print(x,y)

        circle(x, y, TXTSIZE*2);

        let chest = new Chest(y,x);

        buttons.push(chest)

      }

    }

  for (i of CURRENCIES) {

    let a = createDiv(`${i}: 0`)

    monies.set(i, {div: a, val: 0});

  }

}

​

function changeColor(x) {

  console.log(x)

}

​

function randomItem() { 

 return itemReveal(Math.floor(random(0, 11)))

}

​

function itemReveal(x) { 

  print(x)

  switch (x) { 

    case 0:

    case 4:

       return {icon: '💎', value:  Math.floor(random(1,6)) }

      case 1: 

    case 5:

    case 8:

    case 9:

       return {icon:'💰', value: Math.floor(random(1,6)) }

      case 2:

    case 6:

       return {icon:'👻', value: Math.floor(random(1,6)) }

      case 3:

    case 7:

       return {icon:'😹', value:  Math.floor(random(1,6)) }

      default: 

       return {icon:'👿', value: 0 }

  }

}

class Chest {

  // assumption rectmode has been set to CENTER

  constructor (x,y) {

    this.isopen=false;

    this.contents = randomItem();

    this.num = NUMBER++;

    this.d = createDiv('🧰')

    const div = this.d;

    div.style("cursor", "pointer");

    const theNumber = this.num;

    const cont = this.contents

    div.position(x-TXTSIZE+3,y-TXTSIZE);

    div.mousePressed(function() {

​

      div.html(cont.icon)

      if (cont.icon == FAIL) {

        print('failed!')

        FAILED = true;

      } else  if (!FAILED) {

        var o = monies.get(cont.icon)

        o.val = o.val+cont.value;

        o.div.html(`${cont.icon}: ${o.val+cont.value}`)

      } else {

        textSize(75)

​

        fill('rgba(255,255,255,0.5)')

        rect(200,200,width-marg,height-marg);

        fill('orange')

        for (const b of buttons) {

          b.d.html('')

        }

        text('game over', 200, 200) 

      }

    })

  }

}

function draw() {

  noLoop();

}