basic shape

packages/client/src/components/Pile.tsx

@@ -0,0 +1,46 @@
+import { Component, For, JSX } from "solid-js";
+import Card from "./Card";
+import { Pile } from "../types/cards";
+import { type ComponentProps } from "solid-js";
+import { Clickable, Stylable } from "./toolbox";
+
+export default ((props) => {
+	return (
+		<div
+			{...props}
+			class={`center ${props.class ?? ""}}`.trim()}
+			style={{
+				width: "200px",
+				height: "400px",
+				...(props.style as JSX.CSSProperties),
+			}}
+			onClick={props.onClick}
+		>
+			<For each={props.pile}>
+				{(card, i) => (
+					<Card
+						card={card}
+						face="down"
+						style={{
+							position: "absolute",
+							transform: `translate(${i() * 0.5}px, ${
+								i() * 0.2
+							}px)`,
+							// "z-index": 100 - i(),
+							border: `0.1px solid rgb(${
+								10 + i() + Math.random() * 50
+							}, ${10 + i() + Math.random() * 50}, ${
+								10 + i() + Math.random() * 50
+							});`,
+						}}
+					/>
+				)}
+			</For>
+		</div>
+	);
+}) satisfies Component<
+	{
+		pile: Pile;
+	} & Stylable &
+		Clickable
+>;