*

3 files changed, 131 insertions, 0 deletions

diff --git a/js/notes/README.md b/js/notes/README.md
new file mode 100644
index 0000000..f92fc7f
--- /dev/null
+++ b/js/notes/README.md
@@ -0,0 +1 @@
+# really bad note taking surface
\ No newline at end of file
diff --git a/js/notes/app.js b/js/notes/app.js
new file mode 100644
index 0000000..b4f9bf6
--- /dev/null
+++ b/js/notes/app.js
@@ -0,0 +1,108 @@
+const canvas = document.getElementById('canvas');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+const ctx = canvas.getContext('2d');
+const input = document.getElementById('input');
+let rectangles = JSON.parse(localStorage.getItem('rectangles')) || [];
+let currentRectangle = null;
+let dragging = false;
+
+const createRectangle = (x, y, width, height, text) => ({ x, y, width, height, text });
+const isPointInsideRectangle = (point, rectangle) => (
+    point.x >= rectangle.x &&
+    point.x <= rectangle.x + rectangle.width &&
+    point.y >= rectangle.y &&
+    point.y <= rectangle.y + rectangle.height
+);
+
+const handleMouseDown = (e) => {
+    currentRectangle = createRectangle(e.clientX, e.clientY, 0, 0, '');
+    dragging = true;
+};
+
+const handleMouseMove = (e) => {
+    if (dragging && currentRectangle) {
+        currentRectangle.width = e.clientX - currentRectangle.x;
+        currentRectangle.height = e.clientY - currentRectangle.y;
+        render();
+    }
+};
+
+const handleMouseUp = (e) => {
+    if (dragging && currentRectangle) {
+        rectangles.push(currentRectangle);
+        localStorage.setItem('rectangles', JSON.stringify(rectangles));
+        currentRectangle = null;
+        dragging = false;
+    }
+};
+
+const handleDoubleClick = (e) => {
+    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
+    if (rectangle) {
+        input.style.left = `${rectangle.x}px`;
+        input.style.top = `${rectangle.y}px`;
+        input.value = rectangle.text;
+        input.focus();
+        currentRectangle = rectangle;
+    }
+};
+
+const handleContextMenu = (e) => {
+    e.preventDefault();
+    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
+    if (rectangle) {
+        if (confirm('Are you sure you want to remove this rectangle?')) {
+            rectangles = rectangles.filter((r) => r !== rectangle);
+            localStorage.setItem('rectangles', JSON.stringify(rectangles));
+            render();
+        }
+    }
+};
+
+const handleInputBlur = (e) => {
+    if (currentRectangle) {
+        currentRectangle.text = input.value;
+        localStorage.setItem('rectangles', JSON.stringify(rectangles));
+        input.value = '';
+        render();
+    }
+};
+
+const handleClick = (e) => {
+    rectangles.forEach((r) => (r.focus = false));
+    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
+    if (rectangle) {
+        rectangle.focus = true;
+        render();
+    }
+};
+
+canvas.addEventListener('mousedown', handleMouseDown);
+canvas.addEventListener('mousemove', handleMouseMove);
+canvas.addEventListener('mouseup', handleMouseUp);
+canvas.addEventListener('dblclick', handleDoubleClick);
+canvas.addEventListener('contextmenu', handleContextMenu);
+input.addEventListener('blur', handleInputBlur);
+canvas.addEventListener('click', handleClick);
+
+const render = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    rectangles.forEach((r) => {
+        ctx.fillStyle = 'white';
+        ctx.fillRect(r.x, r.y, r.width, r.height);
+        ctx.lineWidth = r.focus ? 3 : 1;
+        ctx.strokeRect(r.x, r.y, r.width, r.height);
+        ctx.fillStyle = 'black';
+        ctx.fillText(r.text, r.x, r.y + r.height);
+    });
+    if (currentRectangle) {
+        ctx.fillStyle = 'white';
+        ctx.fillRect(currentRectangle.x, currentRectangle.y, currentRectangle.width, currentRectangle.height);
+        ctx.lineWidth = 1;
+        ctx.strokeRect(currentRectangle.x, currentRectangle.y, currentRectangle.width, currentRectangle.height);
+    }
+    ctx.lineWidth = 1;
+};
+
+render();
\ No newline at end of file
diff --git a/js/notes/index.html b/js/notes/index.html
new file mode 100644
index 0000000..79749b9
--- /dev/null
+++ b/js/notes/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>notes</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+        #canvas {
+            background-color: grey;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script src="app.js"></script>
+</body>
+</html>
\ No newline at end of file