56 lines
1.1 KiB
TypeScript
56 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 } = 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: "200px",
|
|
overflow: "scroll",
|
|
"scrollbar-width": "none",
|
|
display: "flex",
|
|
gap: "5px",
|
|
}}
|
|
>
|
|
<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 }>;
|