@react-chess-tools/react-chess-game 0.5.2 → 1.0.0

package/src/components/ChessGame/Theme.stories.tsx

@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { ChessGame } from "./index";
+import { defaultGameTheme, themes } from "../../theme";
+import type { ChessGameTheme, PartialChessGameTheme } from "../../theme/types";
+
+const meta = {
+  title: "react-chess-game/Theme/Playground",
+  component: ChessGame.Root,
+  tags: ["theme"],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: "900px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ChessGame.Root>;
+
+export default meta;
+
+// Color picker component
+const ColorInput: React.FC<{
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}> = ({ label, value, onChange }) => {
+  // Extract hex from rgba for color picker
+  const rgbaToHex = (rgba: string): string => {
+    const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (match) {
+      const r = parseInt(match[1]).toString(16).padStart(2, "0");
+      const g = parseInt(match[2]).toString(16).padStart(2, "0");
+      const b = parseInt(match[3]).toString(16).padStart(2, "0");
+      return `#${r}${g}${b}`;
+    }
+    return value.startsWith("#") ? value : "#000000";
+  };
+
+  const hexToRgba = (hex: string, alpha: number = 0.5): string => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        marginBottom: "8px",
+      }}
+    >
+      <input
+        type="color"
+        value={rgbaToHex(value)}
+        onChange={(e) => onChange(hexToRgba(e.target.value))}
+        style={{ width: "40px", height: "30px", cursor: "pointer" }}
+      />
+      <span style={{ fontSize: "12px", minWidth: "100px" }}>{label}</span>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ fontSize: "11px", width: "180px", padding: "4px" }}
+      />
+    </div>
+  );
+};
+
+// Background color picker (for board squares)
+const BgColorInput: React.FC<{
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}> = ({ label, value, onChange }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        marginBottom: "8px",
+      }}
+    >
+      <input
+        type="color"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ width: "40px", height: "30px", cursor: "pointer" }}
+      />
+      <span style={{ fontSize: "12px", minWidth: "100px" }}>{label}</span>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ fontSize: "11px", width: "180px", padding: "4px" }}
+      />
+    </div>
+  );
+};
+
+export const Playground = () => {
+  const [theme, setTheme] = useState<ChessGameTheme>(defaultGameTheme);
+  const [copied, setCopied] = useState(false);
+
+  const updateTheme = (path: string[], value: string) => {
+    setTheme((prev) => {
+      const newTheme = JSON.parse(JSON.stringify(prev));
+      let current: Record<string, unknown> = newTheme;
+      for (let i = 0; i < path.length - 1; i++) {
+        current = current[path[i]] as Record<string, unknown>;
+      }
+      if (path[path.length - 2] === "board") {
+        current[path[path.length - 1]] = { backgroundColor: value };
+      } else {
+        current[path[path.length - 1]] = value;
+      }
+      return newTheme;
+    });
+  };
+
+  const copyTheme = () => {
+    const themeCode = `const myTheme: PartialChessGameTheme = ${JSON.stringify(theme, null, 2)};`;
+    navigator.clipboard.writeText(themeCode);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const loadPreset = (preset: ChessGameTheme) => {
+    setTheme(preset);
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "24px", flexWrap: "wrap" }}>
+      <div style={{ flex: "1", minWidth: "300px" }}>
+        <h3 style={{ marginBottom: "16px" }}>Theme Editor</h3>
+
+        <div style={{ marginBottom: "16px" }}>
+          <strong>Load Preset:</strong>
+          <div style={{ display: "flex", gap: "8px", marginTop: "8px" }}>
+            <button onClick={() => loadPreset(themes.default)}>Default</button>
+            <button onClick={() => loadPreset(themes.lichess)}>Lichess</button>
+            <button onClick={() => loadPreset(themes.chessCom)}>
+              Chess.com
+            </button>
+          </div>
+        </div>
+
+        <div style={{ marginBottom: "16px" }}>
+          <strong>Board Colors</strong>
+          <div style={{ marginTop: "8px" }}>
+            <BgColorInput
+              label="Light Square"
+              value={
+                (theme.board.lightSquare as { backgroundColor: string })
+                  .backgroundColor
+              }
+              onChange={(v) => updateTheme(["board", "lightSquare"], v)}
+            />
+            <BgColorInput
+              label="Dark Square"
+              value={
+                (theme.board.darkSquare as { backgroundColor: string })
+                  .backgroundColor
+              }
+              onChange={(v) => updateTheme(["board", "darkSquare"], v)}
+            />
+          </div>
+        </div>
+
+        <div style={{ marginBottom: "16px" }}>
+          <strong>State Colors</strong>
+          <div style={{ marginTop: "8px" }}>
+            <ColorInput
+              label="Last Move"
+              value={theme.state.lastMove}
+              onChange={(v) => updateTheme(["state", "lastMove"], v)}
+            />
+            <ColorInput
+              label="Active Square"
+              value={theme.state.activeSquare}
+              onChange={(v) => updateTheme(["state", "activeSquare"], v)}
+            />
+            <ColorInput
+              label="Check"
+              value={theme.state.check}
+              onChange={(v) => updateTheme(["state", "check"], v)}
+            />
+          </div>
+        </div>
+
+        <div style={{ marginBottom: "16px" }}>
+          <strong>Indicator Colors</strong>
+          <div style={{ marginTop: "8px" }}>
+            <ColorInput
+              label="Move Dot"
+              value={theme.indicators.move}
+              onChange={(v) => updateTheme(["indicators", "move"], v)}
+            />
+            <ColorInput
+              label="Capture Ring"
+              value={theme.indicators.capture}
+              onChange={(v) => updateTheme(["indicators", "capture"], v)}
+            />
+          </div>
+        </div>
+
+        <button
+          onClick={copyTheme}
+          style={{
+            padding: "8px 16px",
+            backgroundColor: copied ? "#4caf50" : "#2196f3",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+          }}
+        >
+          {copied ? "Copied!" : "Copy Theme Code"}
+        </button>
+      </div>
+
+      <div style={{ flex: "1", minWidth: "350px" }}>
+        <h3 style={{ marginBottom: "16px" }}>Preview</h3>
+        <div style={{ maxWidth: "400px" }}>
+          <ChessGame.Root
+            fen="r1bqkb1r/pppp1ppp/2n2n2/4p2Q/2B1P3/8/PPPP1PPP/RNB1K1NR w KQkq - 4 4"
+            theme={theme}
+          >
+            <ChessGame.Board />
+          </ChessGame.Root>
+        </div>
+        <p style={{ fontSize: "12px", color: "#666", marginTop: "8px" }}>
+          Click on a piece to see move indicators. The position shows a check.
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/components/ChessGame/ThemePresets.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+import { ChessGame } from "./index";
+import { themes } from "../../theme";
+
+const meta = {
+  title: "react-chess-game/Theme/Presets",
+  component: ChessGame.Root,
+  tags: ["theme", "presets"],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: "1200px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ChessGame.Root>;
+
+export default meta;
+
+// Position with a move played (to show lastMove highlight)
+const POSITION_WITH_MOVE =
+  "rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR w KQkq e6 0 2";
+
+export const DefaultTheme = () => (
+  <div style={{ maxWidth: "500px" }}>
+    <h3>Default Theme</h3>
+    <p style={{ fontSize: "14px", color: "#666", marginBottom: "16px" }}>
+      The original colors matching the classic chessboard look.
+    </p>
+    <ChessGame.Root theme={themes.default}>
+      <ChessGame.Board />
+    </ChessGame.Root>
+  </div>
+);
+
+export const LichessTheme = () => (
+  <div style={{ maxWidth: "500px" }}>
+    <h3>Lichess Theme</h3>
+    <p style={{ fontSize: "14px", color: "#666", marginBottom: "16px" }}>
+      Green highlights inspired by Lichess.org style.
+    </p>
+    <ChessGame.Root theme={themes.lichess}>
+      <ChessGame.Board />
+    </ChessGame.Root>
+  </div>
+);
+
+export const ChessComTheme = () => (
+  <div style={{ maxWidth: "500px" }}>
+    <h3>Chess.com Theme</h3>
+    <p style={{ fontSize: "14px", color: "#666", marginBottom: "16px" }}>
+      Green board with yellow highlights inspired by Chess.com.
+    </p>
+    <ChessGame.Root theme={themes.chessCom}>
+      <ChessGame.Board />
+    </ChessGame.Root>
+  </div>
+);
+
+export const CustomThemeExample = () => {
+  // Example of a custom dark theme
+  const darkTheme = {
+    board: {
+      lightSquare: { backgroundColor: "#4a4a4a" },
+      darkSquare: { backgroundColor: "#2d2d2d" },
+    },
+    state: {
+      lastMove: "rgba(100, 150, 255, 0.5)",
+      check: "rgba(255, 50, 50, 0.6)",
+      activeSquare: "rgba(100, 150, 255, 0.5)",
+      dropSquare: { backgroundColor: "rgba(100, 150, 255, 0.3)" },
+    },
+    indicators: {
+      move: "rgba(200, 200, 200, 0.2)",
+      capture: "rgba(255, 100, 100, 0.3)",
+    },
+  };
+
+  return (
+    <div style={{ maxWidth: "500px" }}>
+      <h3>Custom Dark Theme Example</h3>
+      <p style={{ fontSize: "14px", color: "#666", marginBottom: "16px" }}>
+        Example of a fully custom theme with dark colors and blue highlights.
+      </p>
+      <ChessGame.Root theme={darkTheme}>
+        <ChessGame.Board />
+      </ChessGame.Root>
+      <details style={{ marginTop: "16px" }}>
+        <summary style={{ cursor: "pointer", fontSize: "14px" }}>
+          View theme code
+        </summary>
+        <pre
+          style={{
+            fontSize: "11px",
+            background: "#f5f5f5",
+            padding: "12px",
+            overflow: "auto",
+          }}
+        >
+          {JSON.stringify(darkTheme, null, 2)}
+        </pre>
+      </details>
+    </div>
+  );
+};
+
+export const PartialThemeOverride = () => {
+  // Only override specific colors
+  const partialTheme = {
+    state: {
+      lastMove: "rgba(147, 112, 219, 0.5)", // Purple
+      check: "rgba(255, 165, 0, 0.6)", // Orange
+    },
+  };
+
+  return (
+    <div style={{ maxWidth: "500px" }}>
+      <h3>Partial Theme Override</h3>
+      <p style={{ fontSize: "14px", color: "#666", marginBottom: "16px" }}>
+        Only override specific colors (purple last move, orange check). Other
+        colors use defaults.
+      </p>
+      <ChessGame.Root fen={POSITION_WITH_MOVE} theme={partialTheme}>
+        <ChessGame.Board />
+      </ChessGame.Root>
+      <details style={{ marginTop: "16px" }}>
+        <summary style={{ cursor: "pointer", fontSize: "14px" }}>
+          View theme code
+        </summary>
+        <pre
+          style={{
+            fontSize: "11px",
+            background: "#f5f5f5",
+            padding: "12px",
+            overflow: "auto",
+          }}
+        >
+          {JSON.stringify(partialTheme, null, 2)}
+        </pre>
+      </details>
+    </div>
+  );
+};

package/src/components/ChessGame/parts/Board.tsx

@@ -12,6 +12,7 @@ import {
 } from "../../../utils/board";
 import { isLegalMove, requiresPromotion } from "../../../utils/chess";
 import { useChessGameContext } from "../../../hooks/useChessGameContext";
+import { useChessGameTheme } from "../../../theme/context";
 
 export interface ChessGameProps {
   options?: ChessboardOptions;
@@ -19,6 +20,7 @@ export interface ChessGameProps {
 
 export const Board: React.FC<ChessGameProps> = ({ options = {} }) => {
   const gameContext = useChessGameContext();
+  const theme = useChessGameTheme();
 
   if (!gameContext) {
     throw new Error("ChessGameContext not found");
@@ -121,18 +123,18 @@ export const Board: React.FC<ChessGameProps> = ({ options = {} }) => {
   }, [promotionMove, squareWidth, orientation]);
 
   const baseOptions: ChessboardOptions = {
-    squareStyles: getCustomSquareStyles(game, info, activeSquare),
+    squareStyles: getCustomSquareStyles(game, info, activeSquare, theme),
     boardOrientation: orientation === "b" ? "black" : "white",
     position: currentFen,
     showNotation: true,
     showAnimations: isLatestMove,
+    lightSquareStyle: theme.board.lightSquare,
+    darkSquareStyle: theme.board.darkSquare,
     canDragPiece: ({ piece }) => {
       if (isGameOver) return false;
       return piece.pieceType[0] === turn;
     },
-    dropSquareStyle: {
-      backgroundColor: "rgba(255, 255, 0, 0.4)",
-    },
+    dropSquareStyle: theme.state.dropSquare,
     onPieceDrag: ({ piece, square }) => {
       if (piece.pieceType[0] === turn) {
         setActiveSquare(square as Square);

package/src/components/ChessGame/parts/Root.tsx

@@ -2,21 +2,31 @@ import React from "react";
 import { Color } from "chess.js";
 import { useChessGame } from "../../../hooks/useChessGame";
 import { ChessGameContext } from "../../../hooks/useChessGameContext";
+import { ThemeProvider } from "../../../theme/context";
+import { mergeTheme } from "../../../theme/utils";
+import type { PartialChessGameTheme } from "../../../theme/types";
 
 export interface RootProps {
   fen?: string;
   orientation?: Color;
+  /** Optional theme configuration. Supports partial themes - only override the colors you need. */
+  theme?: PartialChessGameTheme;
 }
 
 export const Root: React.FC<React.PropsWithChildren<RootProps>> = ({
   fen,
   orientation,
+  theme,
   children,
 }) => {
   const context = useChessGame({ fen, orientation });
+
+  // Merge partial theme with defaults
+  const mergedTheme = React.useMemo(() => mergeTheme(theme), [theme]);
+
   return (
     <ChessGameContext.Provider value={context}>
-      {children}
+      <ThemeProvider theme={mergedTheme}>{children}</ThemeProvider>
     </ChessGameContext.Provider>
   );
 };