depth for card piles

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",

pkg/client/src/components/Game.tsx

@@ -34,7 +34,14 @@ export default () => {
 				hand={view().myHand}
 				onClickCard={(card) => submitAction({ type: "discard", card })}
 			/>
-			<div class="absolute tc text-align-center">
+			<div
+				class="absolute tc text-align-center"
+				style={{
+					"background-color":
+						view().playerTurn == me() ? "var(--yellow)" : "transparent",
+					color: view().playerTurn == me() ? "var(--dark)" : "var(--light)",
+				}}
+			>
 				It's{" "}
 				<span class="font-bold">
 					{view().playerTurn == me()

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 (
 		<Show when={props.count > 0}>
-			<Card
-				onClick={props.onClick}
-				style={props.style}
-				class={props.class + " shadow-lg shadow-black"}
-				face="down"
-			/>
+			<div
+				style={{
+					...props.style,
+				}}
+				class={props.class}
+			>
+				<svg
+					class="absolute z-[-1]"
+					width={cardWidth + cards().length * cardOffset}
+					height={cardHeight + cards().length * cardOffset}
+					viewBox={`0 0 ${cardWidth + cards().length * cardOffset} ${
+						cardHeight + cards().length * cardOffset
+					}`}
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<For each={cards()}>
+						{(i) => {
+							const xOffset = (i * cardOffset) / 2;
+							const yOffset = i * cardOffset;
+							const color = desaturate(hashColor(i), 0.9);
+							return (
+								<rect
+									x={xOffset}
+									y={yOffset}
+									width={cardWidth}
+									height={cardHeight}
+									rx="5" // Rounded corners
+									ry="5"
+									fill={color}
+								/>
+							);
+						}}
+					</For>
+				</svg>
+				<Card onClick={props.onClick} face="down" />
+			</div>
 		</Show>
 	);
 }) satisfies Component<

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%",

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)}`;