style cleanup

packages/client/src/app.tsx

@@ -6,19 +6,15 @@ import { render } from "solid-js/web";
 import Root from "./routes/index";
 import "virtual:uno.css";
 
-const Version = () => (
-	<>
-		<span class="fixed br m-2 font-mono text-xs">v{pkg.version}</span>
-		<div class="i-solar-user-circle-bold fixed s-10 top-0 right-0 m-2 cursor-pointer" />
-	</>
-);
-
 const App = () => (
 	<Router
 		root={(props) => (
 			<>
 				<Suspense>{props.children}</Suspense>
-				<Version />
+				<span class="fixed br m-2 font-mono text-xs">
+					{"v" + pkg.version}
+				</span>
+				<div class="i-solar-user-circle-bold fixed s-10 top-0 right-0 m-2 cursor-pointer" />
 			</>
 		)}
 	>

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<
 	{

packages/client/src/routes/[game]/[instance].tsx

@@ -8,20 +8,7 @@ export default () => {
 	return (
 		<>
 			<Game instanceId={params.instance} />
-			<A
-				href={`/${params.game}`}
-				// style={{
-				// 	position: "absolute",
-				// 	padding: "10px",
-				// 	top: "0",
-				// 	left: "0",
-				// 	margin: "20px",
-				// 	"background-color": "white",
-				// 	"border-radius": "8px",
-				// 	border: "2px solid black",
-				// }}
-				class="fixed tl m-4 px-2 py-1.5 button"
-			>
+			<A href={`/${params.game}`} class="fixed tl m-4 px-2 py-1.5 button">
 				Back
 			</A>
 		</>

packages/client/src/style.css

@@ -44,41 +44,19 @@ a:visited {
 }
 
 .hand {
+	height: 160px;
 	background: radial-gradient(rgb(24, 70, 82), rgb(1, 42, 41));
-}
+	min-width: 100px;
+	width: fit-content;
+	max-width: 90%;
+	border: 2px dashed white;
+	border-radius: 12px;
 
-.full {
-	height: 100%;
-	width: 100%;
-}
+	margin-bottom: 50px;
+	padding: 10px;
 
-.w-full {
-	width: 100%;
-}
-
-.center {
+	overflow: scroll;
+	scrollbar-width: none;
 	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.column {
-	display: flex;
-	flex-direction: column;
-}
-
-.free {
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-.fixed-br {
-	position: fixed;
-	bottom: 0;
-	right: 0;
-}
-
-.clear {
-	pointer-events: none;
+	gap: 5px;
 }

packages/client/uno.config.ts

@@ -21,5 +21,20 @@ export default defineConfig({
 		["tr", { top: 0, right: 0 }],
 		["bl", { bottom: 0, left: 0 }],
 		["br", { bottom: 0, right: 0 }],
+		[
+			"bc",
+			{
+				bottom: 0,
+				left: 0,
+				right: 0,
+				"margin-left": "auto",
+				"margin-right": "auto",
+			},
+		],
+
+		[
+			"center",
+			{ top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
+		],
 	],
 });