52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
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, gameState } = 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",
|
|
}}
|
|
>
|
|
<For each={props.hand}>
|
|
{(card) => (
|
|
<Card
|
|
card={card}
|
|
style={{
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
const index = gameState()!.hand.indexOf(card);
|
|
setGameState({
|
|
deck: [card, ...gameState()!.deck],
|
|
hand: [
|
|
...gameState()!.hand.slice(0, index),
|
|
...gameState()!.hand.slice(index + 1),
|
|
],
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
</For>
|
|
</div>
|
|
);
|
|
}) satisfies Component<{ hand: Hand }>;
|