diff --git a/properties/color.json b/properties/color.json index dcef9d0..b3aaa03 100644 --- 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" } } -} \ No newline at end of file +} diff --git a/src/components/Crokinole.svelte b/src/components/Crokinole.svelte index 922bf4c..072e8ff 100644 --- 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 index fb7592a..4bd1714 100644 --- 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" } -} \ No newline at end of file +} diff --git a/src/styles/app.css b/src/styles/app.css index b3be368..79bf505 100644 --- 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 index 535b52b..9c87c64 100644 --- 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 index 6547a93..a997e35 100644 --- 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)