JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Billion Satoshis</title>
    <script type="module">
      let cells = Math.pow(384, 2);
      document.addEventListener("DOMContentLoaded", main);

      function main() {
        const view = document.getElementById("scroller");
        const grid = [];

        for (let i = 0; i < cells; i++) {
          const el = document.createElement("div");

          el.classList.add("cell");
          grid.push(el);
        }

        view.append(...grid);

        /* added */
        const selectionLayer = document.getElementById("selectionLayer");
        let isMouseDown = false;
        let isMultiSelectionOn = false;
        let selectionStart = {},
          selectionEnd = {};
        let selectionRect = {};
        let scrollBarCorrection_x = view.offsetWidth - view.clientWidth;
        let scrollBarCorrection_y = view.offsetHeight - view.clientHeight;
        let selectionMargin = {
          width: 10,
          height: 5,
        };

        view.addEventListener("mousedown", (e) => {
          isMouseDown = true;

          if (!isMultiSelectionOn) {
            selectionEnd = {
              x: null,
              y: null,
            };
            clearSecelction();
          }

          selectionStart = {
            x: e.x - view.offsetLeft,
            y: e.y - view.offsetTop,
          };
        });

        view.addEventListener("mouseup", (e) => {
          isMouseDown = false;

          selectionEnd = {
            x: e.x - view.offsetLeft,
            y: e.y - view.offsetTop,
          };

          if (
            Math.abs(selectionEnd.x - selectionStart.x) <
              selectionMargin.width ||
            Math.abs(selectionEnd.y - selectionStart.y) < selectionMargin.height
          )
            return;

          selectionLayer.style.top = `0px`;
          selectionLayer.style.left =...