42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { Component, For } from "solid-js";
|
|
import { Handlers, PiecesStyle } from "../../types";
|
|
import Scrollable from "./reusable/Scrollable";
|
|
import piecesSets from "../../board/styles-pieces";
|
|
import { state, setState } from "../../state";
|
|
import "./Pieces.css";
|
|
|
|
const pieces = Object.entries(piecesSets).map(([key, data]) => ({
|
|
key,
|
|
img: data.nw,
|
|
})) as { key: PiecesStyle; img: string }[];
|
|
|
|
const Pieces: Component<{ handlers: Handlers; class?: string }> = (props) => {
|
|
return (
|
|
<Scrollable class={"pieces" + (props.class ? ` ${props.class}` : "")}>
|
|
{
|
|
<For each={pieces}>
|
|
{(item) => (
|
|
<img
|
|
class={
|
|
"pieces__ico" +
|
|
(state.boardConfig.piecesStyle === item.key
|
|
? " pieces__ico--active"
|
|
: "")
|
|
}
|
|
onClick={() => {
|
|
setState("boardConfig", "piecesStyle", item.key);
|
|
props.handlers.changePiecesStyle(item.key);
|
|
}}
|
|
src={item.img}
|
|
title={item.key}
|
|
draggable={false}
|
|
/>
|
|
)}
|
|
</For>
|
|
}
|
|
</Scrollable>
|
|
);
|
|
};
|
|
|
|
export default Pieces;
|