let candleCount = 0;

let litCandleCount = 0;

let mode = 'placing';

let textMargin = 40;

​

function setup() {

  createCanvas(400, 400);

  strokeCap(SQUARE);

  frameRate(30);

  textSize(24);

  textAlign(CENTER);

}

​

function draw() {

  background(64);

​

  strokeWeight(15);

  stroke("silver");

  noFill();

  line(width * 0.5, height,

       width * 0.5, height * 0.45);

  arc(width * 0.5, height * 0.5,

      width * 0.8, height * 0.8, 0, PI);

  arc(width * 0.5, height * 0.5,

      width * 0.6, height * 0.6, 0, PI);

  arc(width * 0.5, height * 0.5,

      width * 0.4, height * 0.4, 0, PI);

  arc(width * 0.5, height * 0.5,

      width * 0.2, height * 0.2, 0, PI);

​

  strokeWeight(8);

  stroke('blue');

​

  if (shamashPlaced) {

    line(width * 0.5, height * 0.2,

         width * 0.5, height * 0.45);

  }

​

  if (mode === 'lighting' || mode === 'done') {

    drawFire(width * 0.5, height * 0.2);

  }

​

  let rightCandleX = width * 0.9;

  const candleWidth = width * 0.1;

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

    stroke("blue");

​

    // Skip over shamash position in center

    let candleX =

        rightCandleX - (i < 4 ? i : i + 1) * candleWidth;

    line(candleX, height * 0.25, candleX, height * 0.5);

​

    if (i >= candleCount - litCandleCount) {

      drawFire(candleX, height * 0.25);

    }

  }

​

  noStroke();

  fill(255);

  if (mode === 'placing') {

    text('Click to place a candle', width * 0.5, textMargin);

​

    if (candleCount >= 1) {

      fill('blue');

      rect(width * 0.8, 0, width * 0.2, height * 0.2);

      fill(255);

      text('Light', width * 0.9, height * 0.1);

    }

  } else if (mode === "lighting") {

    text('Click to light a candle', width * 0.5, textMargin);

  } else {

    text('Happy Hanukkah!', width * 0.5, textMargin);

  }

}

​

function drawFire(x, y) {

  const fireRed = random(100, 255);

  const fireGreen = random(fireRed);

  stroke(fireRed, fireGreen, 0);

  fill(fireRed, fireGreen, 0);

  const fireHeight = random(10, width * 0.1);

  ellipse(x, y - fireHeight * 0.5,

          random(fireHeight), fireHeight);

}

​

function mousePressed() {

  if (mode === 'placing') {

    if (candleCount >= 1 &&

        mouseX > width * 0.8 && mouseY < height * 0.2) {

      mode = 'lighting';

    } else {

      placeCandle();

    }

  } else if (mode === 'lighting') {

    lightCandle();

  }

}

​

function lightCandle() {

  litCandleCount++;

  if (litCandleCount == candleCount) {

    mode = 'done';

  }

}

​

function placeCandle() {

  if (shamashPlaced) {

    candleCount++;

    if (candleCount === 8) {

      mode = 'lighting';

    }

  } else {

    shamashPlaced = true;

  }

}

​