const WINDOW_HEIGHT = 768

const RADIUS = 8

const MARGIN_TOP = 60

const MARGIN_LEFT = 30

const endTime = new Date(2022, 2, 9, 14, 00, 00)

let curShowTimeSeconds = 0

window.onload = function () {

  let canvas = document.getElementById('canvas')

  let context = canvas.getContext('2d')

  canvas.width = WINDOW_WIDTH

  canvas.height = WINDOW_HEIGHT

  curShowTimeSeconds = getCurrentShowTimeSeconds()

  setInterval(() => {

    render(context)

    update()

  }, 50);

}

function getCurrentShowTimeSeconds() {

  let curTime = new Date()

  let ret = endTime.getTime() - curTime.getTime()

  ret = Math.round(ret / 10000)

  return ret >= 0 ? ret : 0

}

function update() {

  let nextShowTimeSeconds = getCurrentShowTimeSeconds()

  let nextHours = parseInt(nextShowTimeSeconds / 3600)

  let nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60)

  let nextSeconds = nextShowTimeSeconds % 60

  let curHours = parseInt(curShowTimeSeconds / 3600)

  let curMinutes = parseInt((curShowTimeSeconds - curHours * 3600) / 60)

  let curSeconds = curShowTimeSeconds % 60

  if (nextSeconds != curSeconds) {

    curShowTimeSeconds = nextShowTimeSeconds

  }

}

function render(cxt) {

  // 对矩形进行刷新操作

  cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)

  let hours = parseInt(curShowTimeSeconds / 3600)

  let minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60)

  let seconds = curShowTimeSeconds % 60

  // 时钟

  renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)

  renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)

  renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)

  // 分钟

  renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt)

  renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt)

  renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt)

  // 秒钟

  renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt)

  renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt)

}

function renderDigit(x, y, num, cxt) {

  cxt.fillStyle = "skyblue"

  for (let i = 0; i < digit[num].length; i++) {

    for (let j = 0; j < digit[num][i].length; j++) {

      if (digit[num][i][j] == 1) {

        cxt.beginPath()

        cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)

        cxt.closePath()

        cxt.fill()

      }

    }

  }

}