diff options
| -rw-r--r-- | js/toadmode/toad.js | 27 |
1 files changed, 8 insertions, 19 deletions
diff --git a/js/toadmode/toad.js b/js/toadmode/toad.js index f0dc0db..73d4cbf 100644 --- a/js/toadmode/toad.js +++ b/js/toadmode/toad.js @@ -1,23 +1,16 @@ -// 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 +const canvas = document.getElementById('toad'); 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 +const gridSize = 50; context.strokeStyle = 'white'; const drawLine = (x1, y1, x2, y2) => { @@ -34,7 +27,6 @@ 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'; @@ -46,20 +38,20 @@ 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 + context.strokeStyle = '#2d2d2d'; + context.fillStyle = '#2d2d2d'; if (shape === 'square') { context.rect(x, y, gridSize, gridSize); - context.fill(); // Fill the square shape + context.fill(); } 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 + context.fill(); } 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.fill(); } context.stroke(); shapes.push({ type: shape, x, y, color: '#2d2d2d' }); @@ -68,7 +60,7 @@ const drawShape = (shape, x, y) => { ['Square', 'Triangle', 'Circle'].forEach(shape => { const option = document.createElement('li'); option.textContent = shape; - option.style.cursor = 'pointer'; // Add this line + option.style.cursor = 'pointer'; option.addEventListener('click', (event) => { contextMenu.style.display = 'none'; const cellX = Math.floor(lastRightClick.x / gridSize) * gridSize; @@ -80,10 +72,8 @@ const drawShape = (shape, x, y) => { 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 }; @@ -94,7 +84,6 @@ canvas.addEventListener('contextmenu', (event) => { let shapes = []; -// Hide the context menu when clicking anywhere else window.addEventListener('click', () => { contextMenu.style.display = 'none'; }); \ No newline at end of file |