diff options
Diffstat (limited to 'js/toadmode')
| -rw-r--r-- | js/toadmode/index.html | 5 | ||||
| -rw-r--r-- | js/toadmode/toad.js | 73 |
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(); |