Add toggle to view pawn structure without pieces

franciscoBSalgueiro · Jul 3, 2024 · 23b449c · 23b449c
1 parent 2bba1c7
commit 23b449c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/public/pieces/view-pawn-structure.css b/public/pieces/view-pawn-structure.css
@@ -0,0 +1,7 @@
+.bishop,
+.knight,
+.rook,
+.queen,
+.king {
+  display: none;
+}
diff --git a/src/chessground/Chessground.tsx b/src/chessground/Chessground.tsx
@@ -18,7 +18,7 @@ export function Chessground(
   useEffect(() => {
     if (ref?.current == null) return;
     if (api) {
-      api?.set({
+      api.set({
         ...props,
         events: {
           change: () => {

diff --git a/src/components/boards/Board.tsx b/src/components/boards/Board.tsx
@@ -48,6 +48,8 @@ import {
   IconEdit,
   IconEditOff,
   IconEraser,
+  IconEye,
+  IconEyeOff,
   IconPlus,
   IconSwitchVertical,
   IconTarget,
@@ -65,6 +67,7 @@ import { chessgroundDests, chessgroundMove } from "chessops/compat";
 import { makeSan } from "chessops/san";
 import { useAtom, useAtomValue } from "jotai";
 import { memo, useContext, useMemo, useState } from "react";
+import { Helmet } from "react-helmet";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { match } from "ts-pattern";
@@ -167,8 +170,11 @@ function Board({
   if (forcedEP && pos) {
     dests = forceEnPassant(dests, pos);
   }
-  const turn = pos?.turn || "white";
+
+  const [viewPawnStructure, setViewPawnStructure] = useState(false);
   const [pendingMove, setPendingMove] = useState<NormalMove | null>(null);
+
+  const turn = pos?.turn || "white";
   const orientation =
     movable === "white" || movable === "black"
       ? movable
@@ -354,6 +360,21 @@ function Board({
             </ActionIcon>
           </Tooltip>
         )}
+
+        <Tooltip label="Toggle Pawn Structure View">
+          <ActionIcon
+            variant={editingMode ? "filled" : "default"}
+            size="lg"
+            onClick={() => setViewPawnStructure(!viewPawnStructure)}
+          >
+            {viewPawnStructure ? (
+              <IconEyeOff size="1.3rem" />
+            ) : (
+              <IconEye size="1.3rem" />
+            )}
+          </ActionIcon>
+        </Tooltip>
+
         {saveFile && (
           <Tooltip label={`Save PGN (${keyMap.SAVE_FILE.keys})`}>
             <ActionIcon
@@ -518,6 +539,11 @@ function Board({
 
   return (
     <>
+      {viewPawnStructure && (
+        <Helmet>
+          <link rel="stylesheet" href="/pieces/view-pawn-structure.css" />
+        </Helmet>
+      )}
       <Box w="100%" h="100%">
         <Box
           style={{
@@ -649,7 +675,7 @@ function Board({
                         : dests,
                   showDests,
                   events: {
-                    after: (orig, dest, metadata) => {
+                    after(orig, dest, metadata) {
                       if (!editingMode) {
                         const from = parseSquare(orig)!;
                         const to = parseSquare(dest)!;
@@ -690,6 +716,7 @@ function Board({
                   enabled: false,
                 }}
                 draggable={{
+                  enabled: !viewPawnStructure,
                   deleteOnDropOff: editingMode,
                 }}
                 drawable={{