feat: cell cycle coloring

LeoDog896 · Jul 23, 2024 · ea7af5c · ea7af5c
1 parent 7847cd6
commit ea7af5c
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 10 deletions.
diff --git a/src/lib/cell.ts b/src/lib/cell.ts
@@ -0,0 +1,56 @@
+const colors = Object.freeze({
+    white: "white",
+    black: "black",
+    a: "#2EC0F9",
+    b: "#67597A",
+    c: "#F97068",
+    d: "#D1D646",
+    e: "#23CE6B"
+} as const);
+
+export const enum Cell {
+    Disabled = 0,
+    Enabled = 1,
+    A = 2,
+    B = 3,
+    C = 4,
+    D = 5,
+    E = 6
+}
+
+const maxCell = Cell.E;
+
+const cellColorMap: { [key in Cell]: string } = {
+    [Cell.Disabled]: colors.white,
+    [Cell.Enabled]: colors.black,
+    [Cell.A]: colors.a,
+    [Cell.B]: colors.b,
+    [Cell.C]: colors.c,
+    [Cell.D]: colors.d,
+    [Cell.E]: colors.e
+};
+
+export function cellToColor(cell: Cell): string {
+    return cellColorMap[cell];
+}
+
+/**
+ * If a cell isn't disabled, disable it;
+ * otherwise, enable it.
+ */
+export function flipCell(cell: Cell) {
+    if (cell == Cell.Disabled) {
+        return Cell.Enabled;
+    }
+
+    return Cell.Disabled;
+}
+
+/** Cycles the color of a cell - if it's not a color, make it the first one. */
+export function cycleColor(cell: Cell, reverse = false) {
+    if (cell < Cell.A) return Cell.A;
+    if (cell == maxCell && !reverse) return Cell.A;
+    if (cell == Cell.A && reverse) return maxCell;
+
+    return cell + (reverse ? -1 : 1);
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Cell, cellToColor, flipCell, cycleColor } from '$lib/cell';
 	import { Canvas, Layer, type Render } from 'svelte-canvas';
 
 	let x = 0;
@@ -14,7 +15,7 @@
 
 	type Vector = [x: number, y: number];
 
-	const map: Record<string, boolean> = {};
+	let map: Map<string, Cell> = new Map();
 
 	function screenToMap(xCursor: number, yCursor: number): Vector {
 		return [Math.floor((xCursor - x) / boxSize), Math.floor((yCursor - y) / boxSize)];
@@ -29,21 +30,21 @@
 				const xPos = i * boxSize + (x % boxSize);
 				const yPos = j * boxSize + (y % boxSize);
 
-                const activeCell = map[JSON.stringify([xCoord, yCoord])];
+                const activeCell = map.get(JSON.stringify([xCoord, yCoord])) ?? Cell.Disabled;
+				const color = cellToColor(activeCell);
 
 				if (activeCell) {
-					context.fillStyle = 'black';
+					context.fillStyle = color;
 					context.fillRect(xPos, yPos, boxSize, boxSize);
 				} else {
-					context.fillStyle = 'white';
+					context.fillStyle = color;
                     context.strokeStyle = 'gray';
 					context.strokeRect(xPos, yPos, boxSize, boxSize);
 				}
 
 				// draw the coords
-                console.log(boxSize)
                 if (boxSize > 35) {
-                    context.fillStyle = activeCell ? 'white' : 'gray';
+                    context.fillStyle = activeCell == Cell.Disabled ? 'gray' : 'white';
                     context.font = `${boxSize / 2}px`;
                     context.fillText(`${xCoord}, ${yCoord}`, xPos + 5, yPos + 15);
                 }
@@ -69,17 +70,22 @@
 			y += movementY;
 		}
 	}}
-	on:mouseup={({ offsetX, offsetY }) => {
+	on:mouseup={({ offsetX, offsetY, altKey, shiftKey }) => {
 		mouseDown = false;
 		if (!dragging) {
 			const [xCoord, yCoord] = screenToMap(offsetX, offsetY);
-			map[JSON.stringify([xCoord, yCoord])] = !map[JSON.stringify([xCoord, yCoord])];
+			const foundCell = map.get(JSON.stringify([xCoord, yCoord])) ?? Cell.Disabled;
+			map.set(
+				JSON.stringify([xCoord, yCoord]),
+				altKey ? cycleColor(foundCell, shiftKey) : flipCell(foundCell)
+			);
+			map = map;
 		}
 		dragging = false;
 	}}
 />
 
-<Canvas {width} {height}>
+<Canvas {width} {height} on:contextmenu={event => event.preventDefault()}>
 	<Layer {render} />
 </Canvas>