*

2 files changed, 41 insertions, 37 deletions

diff --git a/js/toadmode/index.html b/js/toadmode/index.html
index 993c55e..929b4ba 100644
--- a/js/toadmode/index.html
+++ b/js/toadmode/index.html
@@ -7,14 +7,11 @@
     <style>
         /* https://github.com/abrudz/APL386 */
         @font-face {font-family: 'APL386';src: url('APL386.ttf');}
-        /* https://shantellsans.com/process */
-        @import url('https://fonts.googleapis.com/css2?family=Shantell+Sans&display=swap');
         body {
             margin: 0;
             padding: 0;
             background-color: #000;
-            /* font-family: 'APL386', monospace; */
-            font-family: 'Shantell Sans', sans-serif;
+            font-family: 'APL386', monospace;
         }
         canvas {
             display: block;
diff --git a/js/toadmode/toad.js b/js/toadmode/toad.js
index ab83653..143c5f3 100644
--- a/js/toadmode/toad.js
+++ b/js/toadmode/toad.js
@@ -1,13 +1,11 @@
 const viewportWidth = window.innerWidth;
 const viewportHeight = window.innerHeight;
-
 const canvas = document.getElementById('toad');
 canvas.width = viewportWidth;
 canvas.height = viewportHeight;
-
 const context = canvas.getContext('2d');
+const cellSize = 50;
 
-const gridSize = 50;
 let shapes = [];
 
 const drawLine = (x1, y1, x2, y2) => {
@@ -20,24 +18,24 @@ const drawShape = (shape, x, y) => {
     context.beginPath();
     context.strokeStyle = '#2d2d2d';
     context.fillStyle = '#2d2d2d';
-    const size = gridSize * 0.8;
-    const offset = (gridSize - size) / 2;
+    const size = cellSize * 0.8;
+    const offset = (cellSize - size) / 2;
     if (shape === 'square') {
         context.rect(x + offset, y + offset, size, size);
     } else if (shape === 'triangle') {
-        context.moveTo(x + gridSize / 2, y + offset);
+        context.moveTo(x + cellSize / 2, y + offset);
         context.lineTo(x + offset, y + size + offset);
         context.lineTo(x + size + offset, y + size + offset);
         context.closePath();
     } else if (shape === 'circle') {
-        const radius = gridSize * 0.4;
-        const centerX = x + gridSize / 2;
-        const centerY = y + gridSize / 2;
+        const radius = cellSize * 0.4;
+        const centerX = x + cellSize / 2;
+        const centerY = y + cellSize / 2;
         context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
     } else if (shape === 'octagon') {
-        const cellCenterX = x + gridSize / 2;
-        const cellCenterY = y + gridSize / 2;
-        const sideLength = gridSize / (2 + Math.sqrt(2));
+        const cellCenterX = x + cellSize / 2;
+        const cellCenterY = y + cellSize / 2;
+        const sideLength = cellSize / (2 + Math.sqrt(2));
         const angle = (2 * Math.PI) / 8;
         context.moveTo(cellCenterX + sideLength * Math.cos(0), cellCenterY + sideLength * Math.sin(0));
         [...Array(8).keys()].slice(1).forEach(i => {
@@ -47,9 +45,9 @@ const drawShape = (shape, x, y) => {
         });
         context.closePath();
     } else if (shape === 'pentagon') {
-        const cellCenterX = x + gridSize / 2;
-        const cellCenterY = y + gridSize / 2;
-        const sideLength = gridSize / (1 + Math.sqrt(5 / 2));
+        const cellCenterX = x + cellSize / 2;
+        const cellCenterY = y + cellSize / 2;
+        const sideLength = cellSize / (1 + Math.sqrt(5 / 2));
         const angle = (2 * Math.PI) / 5;
         context.moveTo(cellCenterX + sideLength * Math.cos(0), cellCenterY + sideLength * Math.sin(0));
         [...Array(5).keys()].slice(1).forEach(i => {
@@ -59,10 +57,10 @@ const drawShape = (shape, x, y) => {
         });
         context.closePath();
     } else if (shape === 'diamond') {
-        context.moveTo(x + gridSize / 2, y + offset);
-        context.lineTo(x + offset, y + gridSize / 2);
-        context.lineTo(x + gridSize / 2, y + size + offset);
-        context.lineTo(x + size + offset, y + gridSize / 2);
+        context.moveTo(x + cellSize / 2, y + offset);
+        context.lineTo(x + offset, y + cellSize / 2);
+        context.lineTo(x + cellSize / 2, y + size + offset);
+        context.lineTo(x + size + offset, y + cellSize / 2);
         context.closePath();
     }
     context.fill();
@@ -76,8 +74,8 @@ const createContextMenuOption = (shape) => {
     option.style.cursor = 'pointer';
     option.addEventListener('click', (event) => {
         contextMenu.style.display = 'none';
-        const cellX = Math.floor(lastRightClick.x / gridSize) * gridSize;
-        const cellY = Math.floor(lastRightClick.y / gridSize) * gridSize;
+        const cellX = Math.floor(lastRightClick.x / cellSize) * cellSize;
+        const cellY = Math.floor(lastRightClick.y / cellSize) * cellSize;
         drawShape(shape.toLowerCase(), cellX, cellY);
     });
     if (shape === 'Nope') {
@@ -108,8 +106,8 @@ document.body.appendChild(contextMenu);
 let lastRightClick = { x: 0, y: 0 };
 
 canvas.addEventListener('click', (event) => {
-    const cellX = Math.floor(event.clientX / gridSize) * gridSize;
-    const cellY = Math.floor(event.clientY / gridSize) * gridSize;
+    const cellX = Math.floor(event.clientX / cellSize) * cellSize;
+    const cellY = Math.floor(event.clientY / cellSize) * cellSize;
     const clickedShape = shapes.find(shape => shape.x === cellX && shape.y === cellY);
     if (!clickedShape) {
         lastRightClick = { x: event.clientX, y: event.clientY };
@@ -121,24 +119,25 @@ canvas.addEventListener('click', (event) => {
 
 const removeShape = (x, y) => {
     shapes = shapes.filter(shape => !(shape.x === x && shape.y === y));
-    redrawGrid();
+    drawGrid();
     context.fillStyle = '#f0f0f0';
-    context.fillRect(x, y, gridSize, gridSize);
+    context.fillRect(x, y, cellSize, cellSize);
 }
 
-const redrawGrid = () => {
+const drawGrid = () => {
     context.clearRect(0, 0, canvas.width, canvas.height);
 
     context.fillStyle = '#f0f0f0';
     context.fillRect(0, 0, canvas.width, canvas.height);
 
     context.strokeStyle = 'white';
-    for (let x = 0; x < Math.ceil(viewportWidth / gridSize); x++) {
-        drawLine(x * gridSize, 0, x * gridSize, viewportHeight);
+
+    for (let x = 0; x < Math.ceil(viewportWidth / cellSize); x++) {
+        drawLine(x * cellSize, 0, x * cellSize, viewportHeight);
     }
 
-    for (let y = 0; y < Math.ceil(viewportHeight / gridSize); y++) {
-        drawLine(0, y * gridSize, viewportWidth, y * gridSize);
+    for (let y = 0; y < Math.ceil(viewportHeight / cellSize); y++) {
+        drawLine(0, y * cellSize, viewportWidth, y * cellSize);
     }
 
     shapes.forEach(shape => {
@@ -146,10 +145,18 @@ const redrawGrid = () => {
     });
 }
 
+let beatCounter = 0;
+window.addEventListener('keydown', (event) => {
+    if (event.key === ' ' || event.key === 'Enter') {
+        beatCounter++;
+        console.log(`Beat: ${beatCounter}`);
+    }
+});
+
 canvas.addEventListener('dblclick', (event) => {
-    const cellX = Math.floor(event.clientX / gridSize) * gridSize;
-    const cellY = Math.floor(event.clientY / gridSize) * gridSize;
+    const cellX = Math.floor(event.clientX / cellSize) * cellSize;
+    const cellY = Math.floor(event.clientY / cellSize) * cellSize;
     removeShape(cellX, cellY);
 });
 
-redrawGrid();
+drawGrid();