color

the-pudding · Sep 20, 2024 · 9964f73 · 9964f73
1 parent d5358ed
commit 9964f73
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 53 deletions.
diff --git a/properties/color.json b/properties/color.json
@@ -39,20 +39,17 @@
 		"gray-1000": {
 			"value": "rgb(25, 25, 25)"
 		},
-		"purple": {
-			"value": "#a239ca"
+		"pink-aa": {
+			"value": "#FF00FF"
 		},
-		"blue": {
-			"value": "#4717f6"
+		"pink-aaa": {
+			"value": "#D100D1"
 		},
-		"green": {
-			"value": "#34a29e"
+		"teal-aa": {
+			"value": "#00A3A3"
 		},
-		"red": {
-			"value": "#ff533d"
-		},
-		"yellow": {
-			"value": "#e5e338"
+		"teal-aaa": {
+			"value": "#008080"
 		}
 	}
-}
+}
diff --git a/src/components/Crokinole.svelte b/src/components/Crokinole.svelte
@@ -50,7 +50,7 @@
 	}
 
 	function addDisc() {
-		crokinole.addDisc({ player: "player1", mode: "place" });
+		crokinole.addDisc({ player: "player1", state: "place" });
 	}
 
 	function onFlick() {
@@ -61,7 +61,7 @@
 		[
 			{ x: 0.7, y: 0.5, player: "player1" },
 			{ x: 0.45, y: 0.48, player: "player2" },
-			{ mode: "shoot" }
+			{ state: "shoot" }
 		].forEach(crokinole.addDisc);
 	}
 
@@ -70,7 +70,7 @@
 	}
 
 	function onAim() {
-		crokinole.setMode("shoot");
+		crokinole.setState("shoot");
 	}
 
 	function updateRange() {
@@ -81,10 +81,10 @@
 	function onPhaseClick() {
 		if (phase === "place") {
 			phase = "aim";
-			crokinole.setMode("aim");
+			crokinole.setState("aim");
 		} else if (phase === "aim") {
 			phase = "shoot";
-			crokinole.setMode("shoot");
+			crokinole.setState("shoot");
 		}
 	}
 

diff --git a/src/data/variables.json b/src/data/variables.json
@@ -22,11 +22,10 @@
     "gray-800": "rgb(55, 55, 55)",
     "gray-900": "rgb(38, 38, 38)",
     "gray-1000": "rgb(25, 25, 25)",
-    "purple": "#a239ca",
-    "blue": "#4717f6",
-    "green": "#34a29e",
-    "red": "#ff533d",
-    "yellow": "#e5e338"
+    "pink-aa": "#FF00FF",
+    "pink-aaa": "#D100D1",
+    "teal-aa": "#00A3A3",
+    "teal-aaa": "#008080"
   },
   "": {
     "12px": "0.75rem",
@@ -49,4 +48,4 @@
     "112px": "7rem",
     "128px": "8rem"
   }
-}
+}
diff --git a/src/styles/app.css b/src/styles/app.css
@@ -23,11 +23,11 @@
 	--color-bg: var(--color-white);
 	--color-bg2: var(--color-gray-100);
 	--color-fg: var(--color-gray-800);
-	--color-primary: #00ffff;
-	--color-secondary: #ff00ff;
+	--color-primary: var(--color-pink-aa);
+	--color-secondary: var(--color-teal-aa);
 	--color-link: var(--color-fg);
 	--color-focus: var(--color-primary);
-	--color-mark: var(--color-secondary);
+	--color-mark: var(--color-primary);
 	--color-selection: var(--color-gray-300);
 	--color-border: var(--color-gray-300);
 	--color-button-bg: var(--color-fg);

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 31 May 2022 13:42:06 GMT
+ * Generated on Fri, 20 Sep 2024 15:54:51 GMT
  */
 
 :root {
@@ -24,11 +24,10 @@
   --color-gray-800: #373737;
   --color-gray-900: #262626;
   --color-gray-1000: #191919;
-  --color-purple: #a239ca;
-  --color-blue: #4717f6;
-  --color-green: #34a29e;
-  --color-red: #ff533d;
-  --color-yellow: #e5e338;
+  --color-pink-aa: #ff00ff;
+  --color-pink-aaa: #d100d1;
+  --color-teal-aa: #00a3a3;
+  --color-teal-aaa: #008080;
   --12px: 0.75rem;
   --14px: 0.875rem;
   --16px: 1rem;

diff --git a/src/utils/crokinole.js b/src/utils/crokinole.js
@@ -11,13 +11,11 @@ const DISC_RESTITUTION = 0.9;
 const DISC_DENSITY = 0.05;
 const DISC_FRICTIONAIR = 0.05;
 
-// TODO color vars
 const COLOR = {
-	player1: "#c0c",
-	player2: "#0cc",
-	active: "#000",
-	vector: "#000",
-	peg: variables.color["gray-400"]
+	player1: variables.color["pink-aa"],
+	player2: variables.color["teal-aa"],
+	active: variables.color["black"],
+	vector: variables.color["black"]
 };
 
 // Define a simple event emitter class
@@ -58,7 +56,7 @@ export default function createCrokinoleSimulation() {
 
 	// things to carry over on resize
 	let discs = [];
-	let mode; // standby, place, shoot, play
+	let state; // idle, place, shoot, play
 	let activeDisc;
 
 	function updateDiscColors() {
@@ -222,7 +220,7 @@ export default function createCrokinoleSimulation() {
 			const peg = Matter.Bodies.circle(x, y, r, {
 				isStatic: true,
 				restitution: 0.9,
-				render: { fillStyle: COLOR.peg },
+				render: { fillStyle: "#000" },
 				collisionFilter: {
 					category: PEG_CATEGORY,
 					mask: DISC_CATEGORY
@@ -550,7 +548,7 @@ export default function createCrokinoleSimulation() {
 			});
 
 			emitter.emit("shotComplete", scores);
-			setMode("standby");
+			setState("idle");
 		}
 		// TODO fire event that says shot all done and provide disc status
 		// discs.map(d => d)
@@ -600,7 +598,7 @@ export default function createCrokinoleSimulation() {
 
 	function addDisc(opts = {}) {
 		const player = opts.player || "player1";
-		const m = opts.mode || "place";
+		const m = opts.state || "place";
 		const x = opts.x ? opts.x * mid * 2 : mid;
 		const y = opts.y
 			? opts.y * mid * 2
@@ -645,13 +643,13 @@ export default function createCrokinoleSimulation() {
 		updateDiscColors();
 		shotMaxMagnitude = activeDisc.mass * mid * 0.0007;
 
-		setMode(m);
+		setState(m);
 	}
 
 	function drag(mouse) {
-		if (!activeDisc || mode === "standby" || mode === "play") return;
+		if (!activeDisc || state === "idle" || state === "play") return;
 
-		if (mode === "place") {
+		if (state === "place") {
 			const buffer = 2;
 			const angles = [45 - buffer, 135 + buffer];
 			// Set the radius of the five circle
@@ -697,7 +695,7 @@ export default function createCrokinoleSimulation() {
 				const y = mid + b;
 				Matter.Body.setPosition(activeDisc, { x, y });
 			}
-		} else if (mode === "shoot") {
+		} else if (state === "shoot") {
 			setIndicatorVisible(true);
 			// Calculate the inverse of the mouse position from the active disc position
 			// This will be the target for the flick
@@ -710,15 +708,15 @@ export default function createCrokinoleSimulation() {
 	}
 
 	function release() {
-		if (!activeDisc || mode !== "shoot") return;
+		if (!activeDisc || state !== "shoot") return;
 		flickDisc();
 	}
 
 	function flickDisc(opts) {
-		if (!activeDisc || mode !== "shoot") return;
+		if (!activeDisc || state !== "shoot") return;
 		if (opts && (!opts.target || !opts.speed)) return;
 
-		setMode("play");
+		setState("play");
 
 		setIndicatorVisible(false);
 
@@ -736,8 +734,8 @@ export default function createCrokinoleSimulation() {
 		updateDiscColors();
 	}
 
-	function setMode(v) {
-		mode = v;
+	function setState(v) {
+		state = v;
 	}
 
 	function setIndicatorVisible(v) {
@@ -751,7 +749,7 @@ export default function createCrokinoleSimulation() {
 			clearInstance();
 			prevMid = mid;
 		} else {
-			setMode("standby");
+			setState("idle");
 		}
 
 		const height = width;
@@ -806,7 +804,7 @@ export default function createCrokinoleSimulation() {
 		drag,
 		release,
 		flickDisc,
-		setMode,
+		setState,
 		setIndicatorVisible,
 		init,
 		on: (event, listener) => emitter.on(event, listener)