@vnejs/plugins.views.screens.checkers 0.2.1

package/src/view/index.tsx

@@ -0,0 +1,309 @@
+import type { CSSProperties } from "react";
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Flex, PositionBox, Screen, Text, createRenderFunc, useCallback, useEffect, useMemo, useState, useStoreState } from "@vnejs/uis.react";
+import { getVneLength } from "@vnejs/uis.utils";
+
+import type { CheckersPluginConstants, CheckersPluginEvents, CheckersPluginParams, CheckersPluginSettings } from "../types.js";
+import type { CheckersColor, CheckersPiece } from "../utils/board.js";
+import { listBoardPieces } from "../utils/board.js";
+import type { CheckersGridItem, CheckersPluginState } from "../utils/checkers.js";
+
+type CheckersComponentProps = ReactComponentProps<
+  CheckersPluginEvents,
+  CheckersPluginConstants,
+  CheckersPluginSettings,
+  CheckersPluginParams,
+  CheckersPluginState
+>;
+
+type VisualPiece = {
+  id: string;
+  color: CheckersColor;
+  king: boolean;
+  row: number;
+  column: number;
+  opacity: number;
+  zone: "board" | "graveyard";
+  graveyardIndex: number;
+};
+
+const SELECTED_OPACITY = 0.7;
+const GRAVEYARD_STACK = 0.55;
+
+const cellBackground = (item: CheckersGridItem & { isFocus?: boolean }) => {
+  if (item.isFocus) return "rgba(255, 214, 64, 0.85)";
+  if (item.isLegalTarget) return "rgba(80, 200, 120, 0.75)";
+  if (item.isSelected) return "rgba(90, 160, 255, 0.8)";
+  return item.isDark ? "rgba(60, 40, 20, 0.95)" : "rgba(220, 200, 160, 0.95)";
+};
+
+const pieceLook = (piece: Pick<CheckersPiece, "color" | "king">): CSSProperties => {
+  const isWhite = piece.color === "white";
+  return {
+    width: "62%",
+    height: "62%",
+    borderRadius: "50%",
+    background: isWhite ? "#f4f0e6" : "#1a1a1a",
+    border: `${getVneLength(6)} solid ${piece.king ? "#d4af37" : isWhite ? "#bbb" : "#444"}`,
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+};
+
+const kingMarkLook = (): CSSProperties => ({
+  width: "50%",
+  height: "50%",
+  borderRadius: "50%",
+  boxSizing: "border-box",
+  border: `${getVneLength(6)} solid #d4af37`,
+  background: "transparent",
+});
+
+const CheckersScreen = ({ store, onMount, PARAMS, emit, EVENTS }: CheckersComponentProps) => {
+  const {
+    isShow = false,
+    isForce = false,
+    board,
+    gridItems = [],
+    gridRow = null,
+    gridColumn = null,
+    selected = null,
+    statusText = "",
+  } = useStoreState<CheckersPluginState>(store, onMount);
+
+  const transition = PARAMS.CHECKERS.TRANSITION;
+  const propsByView = PARAMS.CHECKERS.VIEW_PROPS;
+  const rows = PARAMS.CHECKERS.ROWS;
+  const columns = PARAMS.CHECKERS.COLUMNS;
+  const cellSize = PARAMS.CHECKERS.CELL_SIZE;
+  const cellGap = PARAMS.CHECKERS.CELL_GAP;
+  const graveyardGap = PARAMS.CHECKERS.GRAVEYARD_GAP;
+  const boardSize = columns * cellSize + (columns - 1) * cellGap;
+  const playfieldWidth = cellSize + graveyardGap + boardSize + graveyardGap + cellSize;
+
+  const boardPieces = useMemo(() => (board ? listBoardPieces(board) : []), [board]);
+  const selectedId = useMemo(() => {
+    if (!selected || !board) return null;
+    return board[selected.row]?.[selected.column]?.id ?? null;
+  }, [board, selected]);
+
+  const [visualPieces, setVisualPieces] = useState<VisualPiece[]>([]);
+
+  useEffect(() => {
+    if (!isShow) {
+      setVisualPieces([]);
+      return;
+    }
+
+    setVisualPieces((prev) => {
+      const nextById = new Map(boardPieces.map((piece) => [piece.id, piece]));
+      const next: VisualPiece[] = [];
+      let whiteGraveyardCount = 0;
+      let blackGraveyardCount = 0;
+
+      for (const piece of prev) {
+        if (piece.zone === "graveyard") {
+          if (piece.color === "white") whiteGraveyardCount = Math.max(whiteGraveyardCount, piece.graveyardIndex + 1);
+          else blackGraveyardCount = Math.max(blackGraveyardCount, piece.graveyardIndex + 1);
+        }
+      }
+
+      for (const piece of prev) {
+        const live = nextById.get(piece.id);
+        if (live) {
+          next.push({
+            id: live.id,
+            color: live.color,
+            king: live.king,
+            row: live.row,
+            column: live.column,
+            opacity: selectedId === live.id ? SELECTED_OPACITY : 1,
+            zone: "board",
+            graveyardIndex: 0,
+          });
+          nextById.delete(piece.id);
+          continue;
+        }
+
+        if (piece.zone === "graveyard") {
+          next.push(piece);
+          continue;
+        }
+
+        const graveyardIndex = piece.color === "white" ? whiteGraveyardCount++ : blackGraveyardCount++;
+        next.push({
+          ...piece,
+          opacity: 1,
+          zone: "graveyard",
+          graveyardIndex,
+        });
+      }
+
+      for (const piece of nextById.values()) {
+        next.push({
+          id: piece.id,
+          color: piece.color,
+          king: piece.king,
+          row: piece.row,
+          column: piece.column,
+          opacity: selectedId === piece.id ? SELECTED_OPACITY : 1,
+          zone: "board",
+          graveyardIndex: 0,
+        });
+      }
+
+      return next;
+    });
+  }, [boardPieces, isShow, selectedId]);
+
+  const propsScreen = useMemo(() => ({ ...propsByView.screen, isShow, isForce }), [isShow, isForce, propsByView.screen]);
+  const propsStatus = useMemo(() => ({ ...propsByView.status, text: statusText, width: playfieldWidth }), [statusText, propsByView.status, playfieldWidth]);
+
+  const cellLen = useMemo(() => getVneLength(cellSize), [cellSize]);
+  const gapLen = useMemo(() => getVneLength(cellGap), [cellGap]);
+  const graveyardGapLen = useMemo(() => getVneLength(graveyardGap), [graveyardGap]);
+  const stepLen = useMemo(() => (cellGap ? `calc(${cellLen} + ${gapLen})` : cellLen), [cellGap, cellLen, gapLen]);
+  const boardOffsetX = useMemo(() => `calc(${cellLen} + ${graveyardGapLen})`, [cellLen, graveyardGapLen]);
+  const blackGraveyardX = useMemo(
+    () => `calc(${cellLen} + ${graveyardGapLen} + ${getVneLength(boardSize)} + ${graveyardGapLen})`,
+    [boardSize, cellLen, graveyardGapLen],
+  );
+
+  const playfieldStyle = useMemo(
+    (): CSSProperties => ({
+      position: "relative",
+      width: getVneLength(playfieldWidth),
+      height: getVneLength(boardSize),
+      boxSizing: "border-box",
+    }),
+    [boardSize, playfieldWidth],
+  );
+
+  const boardStyle = useMemo(
+    (): CSSProperties => ({
+      position: "absolute",
+      top: 0,
+      left: boardOffsetX,
+      display: "grid",
+      gridTemplateColumns: `repeat(${columns}, ${cellLen})`,
+      gridTemplateRows: `repeat(${rows}, ${cellLen})`,
+      gap: gapLen,
+      width: getVneLength(boardSize),
+      height: getVneLength(boardSize),
+      boxSizing: "border-box",
+    }),
+    [boardOffsetX, boardSize, cellLen, columns, gapLen, rows],
+  );
+
+  const graveyardStyle = useCallback(
+    (side: "left" | "right"): CSSProperties => ({
+      position: "absolute",
+      top: 0,
+      left: side === "left" ? 0 : blackGraveyardX,
+      width: cellLen,
+      height: getVneLength(boardSize),
+      boxSizing: "border-box",
+      borderRadius: getVneLength(12),
+      background: "rgba(255, 255, 255, 0.06)",
+    }),
+    [blackGraveyardX, boardSize, cellLen],
+  );
+
+  const cellBaseStyle = useMemo(
+    (): CSSProperties => ({
+      width: cellLen,
+      height: cellLen,
+      boxSizing: "border-box",
+      transition: `background-color ${transition}ms`,
+    }),
+    [cellLen, transition],
+  );
+
+  const piecesLayerStyle = useMemo(
+    (): CSSProperties => ({
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+    }),
+    [],
+  );
+
+  const pieceTransform = useCallback(
+    (piece: VisualPiece) => {
+      if (piece.zone === "graveyard") {
+        const x = piece.color === "white" ? "0px" : blackGraveyardX;
+        const y = `calc(${piece.graveyardIndex} * ${cellLen} * ${GRAVEYARD_STACK})`;
+        return `translate(${x}, ${y})`;
+      }
+
+      return `translate(calc(${boardOffsetX} + ${piece.column} * ${stepLen}), calc(${piece.row} * ${stepLen}))`;
+    },
+    [blackGraveyardX, boardOffsetX, cellLen, stepLen],
+  );
+
+  const onCellClick = useCallback(
+    (row: number, column: number) => {
+      void emit(EVENTS.CHECKERS.CELL_CLICK, { row, column });
+    },
+    [emit, EVENTS.CHECKERS.CELL_CLICK],
+  );
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...propsByView.position}>
+        <Flex {...propsByView.flex}>
+          <Text {...propsStatus} />
+          <div style={playfieldStyle}>
+            <div style={graveyardStyle("left")} />
+            <div style={graveyardStyle("right")} />
+            <div style={boardStyle}>
+              {gridItems.map((item) => {
+                const isFocus = gridRow === item.row && gridColumn === item.column;
+
+                return (
+                  <div
+                    key={`${item.row}-${item.column}`}
+                    onClick={() => onCellClick(item.row, item.column)}
+                    vne-cursor-type="pointer"
+                    style={{
+                      ...cellBaseStyle,
+                      background: cellBackground({ ...item, isFocus }),
+                    }}
+                  />
+                );
+              })}
+            </div>
+            <div style={piecesLayerStyle}>
+              {visualPieces.map((piece) => (
+                <div
+                  key={piece.id}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: cellLen,
+                    height: cellLen,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transform: pieceTransform(piece),
+                    opacity: piece.opacity,
+                    transition: `transform ${transition}ms, opacity ${transition}ms`,
+                    willChange: "transform, opacity",
+                  }}
+                >
+                  <div style={pieceLook(piece)}>{piece.king ? <div style={kingMarkLook()} /> : null}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Flex>
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<CheckersPluginState> = createRenderFunc(CheckersScreen);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules", "src/tests"]
+}