diff options
| author | elioat <elioat@tilde.institute> | 2024-01-07 18:42:17 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-01-07 18:42:17 -0500 |
| commit | f3a044a1d6f70ea823cbff66cf59d3825bcf7182 (patch) | |
| tree | 50bcdf8e52d61e40b07448340f557409f36e7bc4 /js | |
| parent | 843842ebf58f52f38ebdb6f735024f7bce309eb3 (diff) | |
| download | tour-f3a044a1d6f70ea823cbff66cf59d3825bcf7182.tar.gz | |
*
Diffstat (limited to 'js')
| -rw-r--r-- | js/toadmode/index.html | 22 | ||||
| -rw-r--r-- | js/toadmode/toad.js | 100 |
2 files changed, 122 insertions, 0 deletions
diff --git a/js/toadmode/index.html b/js/toadmode/index.html new file mode 100644 index 0000000..7d1fb17 --- /dev/null +++ b/js/toadmode/index.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>toad mode</title> + <style> + body { + margin: 0; + padding: 0; + background-color: #000; + } + canvas { + display: block; + } + </style> +</head> +<body> + <canvas id="toad"></canvas> + <script src="toad.js"></script> +</body> +</html> \ No newline at end of file diff --git a/js/toadmode/toad.js b/js/toadmode/toad.js new file mode 100644 index 0000000..f0dc0db --- /dev/null +++ b/js/toadmode/toad.js @@ -0,0 +1,100 @@ +// Get the viewport's width and height +const viewportWidth = window.innerWidth; +const viewportHeight = window.innerHeight; + +// Select the existing canvas element +const canvas = document.getElementById('toad'); // replace 'your-canvas-id' with the id of your canvas + +// Set the canvas's width and height to the viewport's width and height +canvas.width = viewportWidth; +canvas.height = viewportHeight; + +// Get the canvas's context +const context = canvas.getContext('2d'); + +// Set the canvas's background color to grey +context.fillStyle = '#f0f0f0'; +context.fillRect(0, 0, canvas.width, canvas.height); + +// Draw a grid of white lines on the canvas +const gridSize = 50; // Change this value to change the size of the grid cells +context.strokeStyle = 'white'; + +const drawLine = (x1, y1, x2, y2) => { + context.moveTo(x1, y1); + context.lineTo(x2, y2); + context.stroke(); +}; + +for (let x = 0; x <= viewportWidth; x += gridSize) { + drawLine(x, 0, x, viewportHeight); +} + +for (let y = 0; y <= viewportHeight; y += gridSize) { + drawLine(0, y, viewportWidth, y); +} + +// Create a custom context menu +const contextMenu = document.createElement('ul'); +contextMenu.id = 'context-menu'; +contextMenu.style.display = 'none'; +contextMenu.style.position = 'fixed'; +contextMenu.style.listStyle = 'none'; +contextMenu.style.padding = '10px'; +contextMenu.style.backgroundColor = 'white'; +contextMenu.style.border = '1px solid black'; + +const drawShape = (shape, x, y) => { + context.beginPath(); + context.strokeStyle = '#2d2d2d'; // Change this to the color you want + context.fillStyle = '#2d2d2d'; // Change this to the color you want + if (shape === 'square') { + context.rect(x, y, gridSize, gridSize); + context.fill(); // Fill the square shape + } else if (shape === 'triangle') { + context.moveTo(x, y); + context.lineTo(x + gridSize, y); + context.lineTo(x + gridSize / 2, y + gridSize); + context.closePath(); + context.fill(); // Fill the triangle shape + } else if (shape === 'circle') { + context.arc(x + gridSize / 2, y + gridSize / 2, gridSize / 2, 0, 2 * Math.PI); + context.fill(); // Fill the circle shape + } + context.stroke(); + shapes.push({ type: shape, x, y, color: '#2d2d2d' }); +}; + +['Square', 'Triangle', 'Circle'].forEach(shape => { + const option = document.createElement('li'); + option.textContent = shape; + option.style.cursor = 'pointer'; // Add this line + option.addEventListener('click', (event) => { + contextMenu.style.display = 'none'; + const cellX = Math.floor(lastRightClick.x / gridSize) * gridSize; + const cellY = Math.floor(lastRightClick.y / gridSize) * gridSize; + drawShape(shape.toLowerCase(), cellX, cellY); + }); + contextMenu.appendChild(option); +}); + +document.body.appendChild(contextMenu); + +// Store the last right click position +let lastRightClick = { x: 0, y: 0 }; + +// Add an event listener for the 'contextmenu' event on the canvas +canvas.addEventListener('contextmenu', (event) => { + event.preventDefault(); + lastRightClick = { x: event.clientX, y: event.clientY }; + contextMenu.style.display = 'block'; + contextMenu.style.left = `${event.clientX}px`; + contextMenu.style.top = `${event.clientY}px`; +}); + +let shapes = []; + +// Hide the context menu when clicking anywhere else +window.addEventListener('click', () => { + contextMenu.style.display = 'none'; +}); \ No newline at end of file |