asd.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as THREE from "three";
import * as shaders from "./shaders";

const rootElement = document.getElementById("root");
// ReactDOM.render(<App />, rootElement);

let WIDTH = window.innerWidth;
let HEIGHT = window.innerHeight;
let canvas = document.createElement("canvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;

rootElement.append(canvas);

let ctx = canvas.getContext("2d");

let cx = WIDTH / 2;
let cy = HEIGHT / 2;

function drawCircle(cx, cy, r, color) {
  ctx.save();
  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.closePath();
  ctx.restore();
}

function drawHourArrow() {
  ctx.lineTo(-10, -80);
  ctx.lineTo(0, -160);
  ctx.lineTo(10, -80);
  ctx.lineTo(0, 0);
}

function drawMinuteArrow() {
  ctx.lineTo(-5, -80);
  ctx.lineTo(0, -180);
  ctx.lineTo(5, -80);
  ctx.lineTo(0, 0);
}

function drawSecondArrow() {
  ctx.lineTo(-2, -80);
  ctx.lineTo(0, -180);
  ctx.lineTo(2, -80);
  ctx.lineTo(0, 0);
}

function drawArrow(h, type) {
  ctx.save();
  ctx.beginPath();
  ctx.translate(cx, cy);
  ctx.rotate(deg2rad(h));
  if (type === "hour") {
    drawHourArrow();
  }
  if (type === "minute") {
    drawMinuteArrow();
  }
  if (type === "second") {
    drawSecondArrow();
  }
  ctx.fillStyle = "white";
  ctx.fill();
  ctx.closePath();
  ctx.restore();
}

function drawHoursMarks() {
  let gph = 360 / 12;
  for (let idx = 0; idx < 12; idx++) {
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(deg2rad(idx * gph));
    ctx.fillStyle = "yellow";
    ctx.fillRect(-3, -190, 6, 30);
    ctx.restore();
  }
}

function drawMinutesMarks() {
  let gph = 360 / 60;
  for (let idx = 0; idx < 60; idx++) {
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(deg2rad(idx * gph));
    ctx.fillStyle = "yellow";
    ctx.fillRect(-1, -190, 2, 16);
    ctx.restore();
  }
}

function drawText(x, y, text, style, color) {
  ctx.save();
  ctx.translate(cx, cy);
  ctx.font = style;
  ctx.fillStyle = color;
  let { width } = ctx.measureText(text);
  ctx.fillText(text, x - width / 2, y);
  ctx.restore();
}

function tick() {
  drawCircle(cx, cy, 200, "purple");
  drawCircle(cx, cy, 10, "white");

  drawHoursMarks();
  drawMinutesMarks();

  let d = new Date();
  let h = d.getHours();
  let m = d.getMinutes();
  let s = d.getSeconds();

  let hs = h < 10 ? `0${h}` : h;
  let ms = m < 10 ? `0${m}` : m;
  let ss = s < 10 ? `0${s}` : s;

  drawText(0, 80, `${hs}:${ms}:${ss}`, "40px sans-serif", "yellow");

  drawArrow(hours2deg(d.getHours()), "hour");
  drawArrow(minute2deg(d.getMinutes()), "minute");
  drawArrow(minute2deg(d.getSeconds()), "second");
}

setInterval(() => {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  tick();
}, 1000);

function minute2deg(t) {
  return t * 6;
}

function hours2deg(t) {
  if (t < 12) {
    return t * 30;
  } else {
    return (t - 12) * 30;
  }
}

function deg2rad(deg) {
  return (deg * Math.PI) / 180;
}