can put them back

src/components/Hand.tsx

@@ -1,11 +1,19 @@
-import { Component, For } from "solid-js";
+import { Component, For, useContext } from "solid-js";
 import Card from "./Card";
 import { Hand } from "../types/cards";
+import { GameContext } from "./Game";
+import { produce } from "solid-js/store";
 
 export default ((props) => {
+	const { setGameState } = 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",
@@ -18,7 +26,30 @@ export default ((props) => {
 				gap: "5px",
 			}}
 		>
-			<For each={props.hand}>{(card) => <Card card={card} />}</For>
+			<For each={props.hand}>
+				{(card) => (
+					<Card
+						card={card}
+						style={{
+							cursor: "pointer",
+						}}
+						onClick={() =>
+							setGameState(
+								produce((state) => {
+									const index = state.hand.indexOf(card);
+									console.log(index);
+									state.deck.push(
+										state.hand.splice(
+											props.hand.indexOf(card),
+											1
+										)[0]!
+									);
+								})
+							)
+						}
+					/>
+				)}
+			</For>
 		</div>
 	);
 }) satisfies Component<{ hand: Hand }>;