style cleanup

packages/client/src/components/Card.tsx

@@ -24,10 +24,7 @@ export default ((props) => {
 				onClick={props.onClick}
 				draggable={false}
 				class={props.class}
-				style={{
-					"border-radius": "5px",
-					...props.style,
-				}}
+				style={props.style}
 				width="100px"
 				src={
 					props.face == "down"

packages/client/src/components/Game.tsx

@@ -30,19 +30,13 @@ export default (props: { instanceId: string }) => {
 	return (
 		<GameContext.Provider value={{ view, submitAction }}>
 			<Show when={view.latest != undefined}>
-				<div
-					class="full column center"
-					style={{ "row-gap": "20px", "font-size": "32px" }}
-				>
-					<div class="full center">
-						<Pile
-							count={view.latest!.deckCount}
-							style={{ cursor: "pointer" }}
-							onClick={() => submitAction({ type: "draw" })}
-						/>
-					</div>
-					<Hand hand={view.latest!.myHand} />
-				</div>
+				<Pile
+					count={view.latest!.deckCount}
+					class="cursor-pointer fixed center"
+					onClick={() => submitAction({ type: "draw" })}
+				/>
+
+				<Hand class="fixed bc" hand={view.latest!.myHand} />
 			</Show>
 		</GameContext.Provider>
 	);

packages/client/src/components/Hand.tsx

@@ -3,29 +3,13 @@ import Card from "./Card";
 import { Hand } from "../../../shared/cards";
 import { GameContext } from "./Game";
 import { produce } from "solid-js/store";
+import { Stylable } from "./toolbox";
 
 export default ((props) => {
 	const { submitAction, view } = useContext(GameContext)!;
 
 	return (
-		<div
-			class="hand"
-			style={{
-				"min-width": "100px",
-				width: "fit-content",
-				"max-width": "80%",
-				border: "2px dashed white",
-				"border-radius": "12px",
-				margin: "10px",
-				"margin-bottom": "25px",
-				padding: "10px",
-				height: "180px",
-				overflow: "scroll",
-				"scrollbar-width": "none",
-				display: "flex",
-				gap: "5px",
-			}}
-		>
+		<div class={"hand " + props.class} style={props.style}>
 			<For each={props.hand}>
 				{(card) => (
 					<Card
@@ -39,4 +23,4 @@ export default ((props) => {
 			</For>
 		</div>
 	);
-}) satisfies Component<{ hand: Hand }>;
+}) satisfies Component<{ hand: Hand } & Stylable>;

packages/client/src/components/Pile.tsx

@@ -5,20 +5,14 @@ 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}
-		>
-			<Show when={props.count > 0}>
-				<Card face="down" />
-			</Show>
-		</div>
+		<Show when={props.count > 0}>
+			<Card
+				onClick={props.onClick}
+				style={props.style}
+				class={props.class + " shadow-lg shadow-black"}
+				face="down"
+			/>
+		</Show>
 	);
 }) satisfies Component<
 	{