From 67fdf66cd48c444cecfac62a9b756d8ed74d9044 Mon Sep 17 00:00:00 2001 From: Daniel McCrystal Date: Tue, 2 Sep 2025 22:38:04 -0400 Subject: [PATCH] depth for card piles --- pkg/client/package.json | 1 + pkg/client/src/components/Game.tsx | 9 ++++- pkg/client/src/components/Pile.tsx | 54 +++++++++++++++++++++++---- pkg/client/src/components/Table.tsx | 4 +- pkg/client/src/components/toolbox.tsx | 3 ++ pkg/server/src/api.ts | 1 - pkg/shared/games/simple.ts | 2 +- pnpm-lock.yaml | 8 ++++ 8 files changed, 69 insertions(+), 13 deletions(-) diff --git a/pkg/client/package.json b/pkg/client/package.json index 35a2a13..48c2fe9 100644 --- a/pkg/client/package.json +++ b/pkg/client/package.json @@ -11,6 +11,7 @@ "@solid-primitives/scheduled": "^1.5.2", "@solid-primitives/storage": "^4.3.3", "@solidjs/router": "^0.15.3", + "color2k": "^2.0.3", "js-cookie": "^3.0.5", "kefir": "^3.8.8", "kefir-bus": "^2.3.1", diff --git a/pkg/client/src/components/Game.tsx b/pkg/client/src/components/Game.tsx index 84c0eaf..24cce10 100644 --- a/pkg/client/src/components/Game.tsx +++ b/pkg/client/src/components/Game.tsx @@ -34,7 +34,14 @@ export default () => { hand={view().myHand} onClickCard={(card) => submitAction({ type: "discard", card })} /> -
+
It's{" "} {view().playerTurn == me() diff --git a/pkg/client/src/components/Pile.tsx b/pkg/client/src/components/Pile.tsx index e3377cc..5b21a6f 100644 --- a/pkg/client/src/components/Pile.tsx +++ b/pkg/client/src/components/Pile.tsx @@ -1,17 +1,55 @@ -import { Component, For, JSX, Show } from "solid-js"; +import { Component, createMemo, For, JSX, Show } from "solid-js"; import Card from "./Card"; +import { desaturate } from "color2k"; -import { Clickable, Stylable } from "./toolbox"; +import { Clickable, hashColor, Stylable } from "./toolbox"; +const cardWidth = 100; +const cardHeight = 145; +const cardOffset = 0.3; // Small offset for the stack effect export default ((props) => { + const cards = createMemo(() => { + const numCards = Math.max(0, props.count - 1); // Subtract 1 for the top card + return Array.from({ length: numCards }, (_, i) => i).toReversed(); + }); return ( 0}> - +
+ + + {(i) => { + const xOffset = (i * cardOffset) / 2; + const yOffset = i * cardOffset; + const color = desaturate(hashColor(i), 0.9); + return ( + + ); + }} + + + +
); }) satisfies Component< diff --git a/pkg/client/src/components/Table.tsx b/pkg/client/src/components/Table.tsx index 7c8e4a7..034281e 100644 --- a/pkg/client/src/components/Table.tsx +++ b/pkg/client/src/components/Table.tsx @@ -129,8 +129,8 @@ export default (props: { tableKey: string }) => { "top-40", "bottom-20", - "left-10", - "right-10" + "left-[2%]", + "right-[2%]" )} style={{ "border-radius": "50%", diff --git a/pkg/client/src/components/toolbox.tsx b/pkg/client/src/components/toolbox.tsx index 332e45b..0d9e842 100644 --- a/pkg/client/src/components/toolbox.tsx +++ b/pkg/client/src/components/toolbox.tsx @@ -1,3 +1,4 @@ +import hash, { NotUndefined } from "object-hash"; import { JSX } from "solid-js"; export type Stylable = { @@ -19,3 +20,5 @@ export type Sizable = { width?: string; height?: string; }; + +export const hashColor = (obj: NotUndefined) => `#${hash(obj).substring(0, 6)}`; diff --git a/pkg/server/src/api.ts b/pkg/server/src/api.ts index dd9823e..c7fb7c5 100644 --- a/pkg/server/src/api.ts +++ b/pkg/server/src/api.ts @@ -19,7 +19,6 @@ export const WS = Bus< const api = new Elysia({ prefix: "/api" }) .post("/whoami", async ({ cookie: { token } }) => { - console.log("WHOAMI"); let key: string | undefined; if (token.value == null || (key = resolveToken(token.value)) == null) { const [newToken, newKey] = generateTokenAndKey(); diff --git a/pkg/shared/games/simple.ts b/pkg/shared/games/simple.ts index 883db44..7097cb6 100644 --- a/pkg/shared/games/simple.ts +++ b/pkg/shared/games/simple.ts @@ -116,7 +116,7 @@ export default (config: SimpleConfiguration) => resolveQuit: () => null, getResult: (state) => Object.entries(state.playerHands).find( - ([_, hand]) => hand.length === 2 + ([_, hand]) => hand.length === 52 )?.[0], } satisfies Game< SimpleGameState, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5babdb3..d409c16 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: '@solidjs/router': specifier: ^0.15.3 version: 0.15.3(solid-js@1.9.9) + color2k: + specifier: ^2.0.3 + version: 2.0.3 js-cookie: specifier: ^3.0.5 version: 3.0.5 @@ -927,6 +930,9 @@ packages: color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + color2k@2.0.3: + resolution: {integrity: sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==} + colorette@2.0.20: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} @@ -3238,6 +3244,8 @@ snapshots: color-name@1.1.4: {} + color2k@2.0.3: {} + colorette@2.0.20: {} compare-func@2.0.0: