joshua/slick-connections.pages.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pin and unpin working

Browse source
This commit is contained in:
Joshua Seigler 2025-04-05 17:12:27 -07:00
parent 161149a6a2
commit 7aa4a156e7
1 changed files with 34 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/App.tsx
View file

@ -76,15 +76,37 @@ function App() {
};
const handlePinUnpin = () => {
if (store.selected.every((x) => x <= store.pinnedCount)) {
if (store.selected.every((x) => x < store.pinnedCount)) {
// we are unpinning
const puzzleStart = Array.from({ length: store.pinnedCount }, (_, i) => i)
.filter((x) => !store.selected.includes(x))
.map((x) => store.puzzle[x]);
const puzzleMiddle = store.selected.map((x) => store.puzzle[x]);
const puzzleEnd = store.puzzle.slice(store.pinnedCount);
const newPuzzle = [...puzzleStart, ...puzzleMiddle, ...puzzleEnd];
setStore({
pinnedCount: store.pinnedCount - store.selected.length,
selected: [],
})
puzzle: newPuzzle,
});
return;
}
// we are pinning
const puzzleStart = store.puzzle.slice(0, store.pinnedCount);
const puzzleMid = store.selected
.filter((x) => x >= store.pinnedCount)
.map((x) => store.puzzle[x]);
const puzzleEnd = Array.from(
{ length: 16 - store.pinnedCount },
(_, i) => i + store.pinnedCount
)
.filter((x) => !store.selected.includes(x))
.map((x) => store.puzzle[x]);
setStore({
pinnedCount: puzzleStart.length + puzzleMid.length,
selected: [],
puzzle: [...puzzleStart, ...puzzleMid, ...puzzleEnd]
})
};
return (
@ -106,12 +128,14 @@ function App() {
<div class="puzzle-row">
{[0, 1, 2, 3].map((col) => {
const index = 4 * row + col;
const answer = getFromPuzzle(index).answer;
return (
<button
classList={{
"puzzle-item": true,
"is-selected": store.selected.includes(index),
}}
style={{ "view-transition-name": `puzzle-${answer}` }}
type="button"
on:click={() => {
setStore({
@ -121,7 +145,7 @@ function App() {
});
}}
>
{getFromPuzzle(index).answer}
{answer}
{store.pinnedCount > index && <div class="badge">🔒</div>}
</button>
);
@ -131,8 +155,13 @@ function App() {
</For>
<div class="puzzle-actions">
<div class="puzzle-actions-secondary">
<button type="button" disabled={store.selected.length === 0}>
{store.selected.length > 0 && store.selected.every((x) => x <= store.pinnedCount)
<button
type="button"
disabled={store.selected.length === 0}
on:click={handlePinUnpin}
>
{store.selected.length > 0 &&
store.selected.every((x) => x < store.pinnedCount)
? "Unpin"
: "Pin"}
</button>