JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>

  <head>

    <body>
      <canvas id="canvas" width="400" height="550"></canvas>
      <script>
        let ctx = document.getElementById("canvas").getContext("2d");
        let over = false;
        let rows = [];
        let feedback = [];
        let answer = "";
        let say = "";
        let i = 0;
        let z = 0;
        let mX = 0;
        let mY = 0;
        let cX = 0;
        let cY = 0;
        let color = 0;
        let row = 9;
        let confirm = false;
        let colors = ["white", "blue", "#ff6600", "red", "yellow", "green", "#595959"];
        document.addEventListener("mousemove", function moved(e) {
          mX = e.clientX;
          mY = e.clientY;
        });
        document.addEventListener("mousedown", function down(e) {
          cX = e.pageX;
          cY = e.pageY;
          let x = 30;
          let y = 90;
          for (let i = 0; i < 10; i++) {
            for (let z = 0; z < 4; z++) {
              if (i == row) {
                if (mX > (x + 25) - 15 && mX < (x + 25) + 15 && mY > (y + 25) - 15 && mY < (y + 25) + 15) {
                  rows.splice((i * 4) + z, 1, color);
                }
                //block(270, y - 5, 100, 40, "green");
                if (mX > (275) && mX < (380) && mY > (y) && mY < (y + 40)) {
                  if (confirm == true) {
                    row--;
                  }
                }
              }
              x += 40;
            }
            x = 30;
            y += 45;
          }
        });
        document.addEventListener("keydown", function keyDown(e) {
          switch (e.keyCode) {
            case 49:
              color = 0;
              break;
            case 50:
              color = 1;
              break;
            case 51:
              color = 2;
              break;
            case 52:
              color = 3;
              break;
            case 53:
              color = 4;
              break;
            case 54:
            ...