1 files changed, 100 insertions, 0 deletions
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