47 lines
994 B
TypeScript
47 lines
994 B
TypeScript
import { Component, For, JSX } from "solid-js";
|
|
import Card from "./Card";
|
|
import { Pile } from "../types/cards";
|
|
import { type ComponentProps } from "solid-js";
|
|
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}
|
|
>
|
|
<For each={props.pile}>
|
|
{(card, i) => (
|
|
<Card
|
|
card={card}
|
|
face="down"
|
|
style={{
|
|
position: "absolute",
|
|
transform: `translate(${i() * 0.5}px, ${
|
|
i() * 0.2
|
|
}px)`,
|
|
// "z-index": 100 - i(),
|
|
border: `0.1px solid rgb(${
|
|
10 + i() + Math.random() * 50
|
|
}, ${10 + i() + Math.random() * 50}, ${
|
|
10 + i() + Math.random() * 50
|
|
});`,
|
|
}}
|
|
/>
|
|
)}
|
|
</For>
|
|
</div>
|
|
);
|
|
}) satisfies Component<
|
|
{
|
|
pile: Pile;
|
|
} & Stylable &
|
|
Clickable
|
|
>;
|