diff --git a/src/App.css b/src/App.css index 8fcab3a..2686ecf 100644 --- a/src/App.css +++ b/src/App.css @@ -66,12 +66,12 @@ } .puzzle { - --unit: 0.5rem; + --unit: min(0.5rem, 1.15vw); display: flex; flex-direction: column; gap: calc(1 * var(--unit)); font-size: calc(3 * var(--unit)); - font-weight: 600; + font-weight: 700; width: calc((20 * 4 + 3) * var(--unit)); margin: 0 auto; } @@ -105,13 +105,14 @@ justify-content: center; align-items: center; border-radius: calc(1 * var(--unit)); + font-weight: 500; &[data-level="0"] { - background-color: var(--group-blue); + background-color: var(--group-yellow); } &[data-level="1"] { - background-color: var(--group-yellow); + background-color: var(--group-blue); } &[data-level="2"] { @@ -122,6 +123,12 @@ background-color: var(--group-purple); } } +.puzzle-group-name { + font-weight: 700; +} +.puzzle-group-members { + font-weight: 500; +} .puzzle-actions { display: flex; margin-top: calc(1 * var(--unit)); diff --git a/src/App.tsx b/src/App.tsx index 904ac03..4201b56 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,9 +2,10 @@ import { For, createMemo, createSignal } from "solid-js"; import connections from "./assets/connections.json"; import "./App.css"; import { shuffleArray } from "./utils"; +import { createStore } from "solid-js/store"; -type Connection = typeof connections[number] -type Answer = Connection["answers"][number] +type Connection = (typeof connections)[number]; +type Answer = Connection["answers"][number]; function fromIndex(index: number): [number, number] { const col = index % 4; @@ -13,49 +14,48 @@ function fromIndex(index: number): [number, number] { } function App() { - const [puzzleIndex, setPuzzleIndex] = createSignal(0); - // const [pinnedCount, setPinnedCount] = createSignal(0); - const [selected, setSelected] = createSignal([]); - const [solvedGroups, setSolvedGroups] = createSignal([]) - const [puzzle, setPuzzle] = createSignal( - shuffleArray( - Array(16) - .fill(0) - .map((_, i) => i) - ) - ); + const [store, setStore] = createStore({ + puzzleIndex: 0, + selected: [] as number[], + solvedGroups: [] as Answer[], + puzzle: shuffleArray(Array.from({ length: 16 }, (_, i) => i)), + get answers() { + return connections[store.puzzleIndex].answers; + }, + }); - const answers = () => connections[puzzleIndex()].answers; const getFromPuzzle = (index: number) => { - const puzzleIndex = puzzle()[index]; + const puzzleIndex = store.puzzle[index]; const [groupIndex, memberIndex] = fromIndex(puzzleIndex); - const group = answers()[groupIndex]; + const group = store.answers[groupIndex]; return { group: group.group, level: group.level, - answer: answers()[groupIndex].members[memberIndex], + answer: store.answers[groupIndex].members[memberIndex], }; }; const handleGuess = () => { - const selectedAnswers = selected().map((x) => getFromPuzzle(x)); + const selectedAnswers = store.selected.map((x) => getFromPuzzle(x)); const { level } = selectedAnswers[0]; - const isCorrect = selectedAnswers.every( - x => x.level === level - ); + const isCorrect = selectedAnswers.every((x) => x.level === level); if (!isCorrect) { // TODO you got it wrong alert("wrong"); return; } - setPuzzle(puzzle().filter((x) => selected().every(s => puzzle()[s] !== x))); - setSelected([]); - const newSolvedGroup = answers().find((x) => x.level === level); + setStore({ + puzzle: store.puzzle.filter((x) => store.selected.every((s) => store.puzzle[s] !== x)), + selected: [], + }) + const newSolvedGroup = store.answers.find((x) => x.level === level); if (newSolvedGroup != null) { - setSolvedGroups([...solvedGroups(), newSolvedGroup]) + setStore({ + solvedGroups: [...store.solvedGroups, newSolvedGroup] + }) } }; // const handlePinUnpin = () => { - // const sel = selected() + // const sel = store.selected // if (sel.every(x => x <= pinnedCount())) { // // we are unpinning // return @@ -67,17 +67,17 @@ function App() {

Slick Connections

- - {({group, level, members}) => ( + + {({ group, level, members }) => (
- {group} -
{members.join(', ')}
+
{group}
+
{members.join(", ")}
)}
- + {(row) => (
{[0, 1, 2, 3].map((col) => { @@ -86,15 +86,15 @@ function App() {