Add settings icon, settings popup

client/src/App.tsx

@@ -1,22 +1,16 @@
-import styled from "styled-components";
 import "./App.css";
 import { GameClientContextProvider } from "./contexts/GameClientContext";
 import { GameEngineContextProvider } from "./contexts/GameEngineContext";
 import { GameScreenSelector } from "./GameScreenSelector";
-
-const SettingsIcon = styled.div`
-    position: absolute;
-    top: 10px;
-    right: 10px;
-`;
+import { SettingsButtonAndPopup } from "./menus/SettingsButtonAndPopup";
 
 function App() {
     return (
         <div className="App">
             <GameEngineContextProvider>
                 <GameClientContextProvider>
                     <>
-                        <SettingsIcon>⚙️</SettingsIcon>
+                        <SettingsButtonAndPopup />
                         <GameScreenSelector />
                     </>
                 </GameClientContextProvider>

client/src/contexts/GameClientContext.tsx

@@ -41,6 +41,12 @@ export const GameClientContext = React.createContext<{
     playerTurnTimeoutRef: React.MutableRefObject<any>;
     gameMode: GameMode | null;
     setGameMode: React.Dispatch<React.SetStateAction<GameMode | null>>;
+    settings: {
+        showPossibleMoves: boolean;
+    };
+    setSettings: React.Dispatch<
+        React.SetStateAction<{ showPossibleMoves: boolean }>
+    >;
 }>({} as any);
 
 export const GameClientContextProvider = ({
@@ -56,6 +62,7 @@ export const GameClientContextProvider = ({
     const [promotionMenuPosition, setPromotionMenuPosition] =
         useState<Position | null>(null); // stores null or promoting position
     const [gameMode, setGameMode] = useState<GameMode | null>(null);
+    const [settings, setSettings] = useState({ showPossibleMoves: true });
 
     const {
         availableMovesForPlayer,
@@ -72,6 +79,12 @@ export const GameClientContextProvider = ({
         setPlayerSelection(player);
     }, []);
 
+    useEffect(() => {
+        if (!settings.showPossibleMoves) {
+            setAvailableMoves([]);
+        }
+    }, [settings.showPossibleMoves]);
+
     useEffect(() => {
         if (
             playerSelection !== null &&
@@ -121,7 +134,9 @@ export const GameClientContextProvider = ({
                     mapIndexToChessFile(selectedPiece.fileIndex) &&
                 move.from.rank === mapRankIndexToRank(selectedPiece.tileIndex),
         );
-        setAvailableMoves(availableSelectedPieceMoves);
+        setAvailableMoves(
+            settings.showPossibleMoves ? availableSelectedPieceMoves : [],
+        );
     }, [selectedPiece, availableMovesForPlayer]);
 
     return (
@@ -138,6 +153,8 @@ export const GameClientContextProvider = ({
                 playerTurnTimeoutRef,
                 gameMode,
                 setGameMode,
+                settings,
+                setSettings,
             }}
         >
             {children}

client/src/menus/SettingsButtonAndPopup.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { GameClientContext } from "../contexts/GameClientContext";
+
+const SettingsIcon = styled.div`
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+`;
+
+const PopupOverlay = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+const PopupContent = styled.div`
+    background: rgb(40, 40, 40);
+    color: white;
+    padding: 1rem 1.5rem;
+    border-radius: 12px;
+    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
+    min-width: 220px;
+`;
+
+const SettingsPopupContainer = styled.div`
+    background: rgb(40, 40, 40);
+    color: white;
+    padding: 1rem 1.5rem;
+    border-radius: 12px;
+    min-width: 320px;
+`;
+
+const SettingsLabel = styled.label`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.1rem;
+    margin-top: 1rem;
+`;
+
+const CloseButton = styled.button`
+    margin-top: 24px;
+    float: right;
+    padding: 0.5rem 1.5rem;
+    border-radius: 6px;
+    border: 1px solid #222;
+    background: #2d8cff;
+    color: #fff;
+    font-weight: 600;
+    cursor: pointer;
+`;
+
+export function SettingsButtonAndPopup() {
+    const [showSettings, setShowSettings] = useState(false);
+    return (
+        <>
+            <SettingsIcon onClick={() => setShowSettings(true)}>
+                ⚙️
+            </SettingsIcon>
+            {showSettings && (
+                <PopupOverlay onClick={() => setShowSettings(false)}>
+                    <PopupContent onClick={(e) => e.stopPropagation()}>
+                        <SettingsPopup onClose={() => setShowSettings(false)} />
+                    </PopupContent>
+                </PopupOverlay>
+            )}
+        </>
+    );
+}
+
+function SettingsPopup({ onClose }: { onClose: () => void }) {
+    const { settings, setSettings } = React.useContext(GameClientContext);
+    return (
+        <SettingsPopupContainer>
+            <h2>Settings</h2>
+            <SettingsLabel>
+                <input
+                    type="checkbox"
+                    checked={settings.showPossibleMoves}
+                    onChange={(e) =>
+                        setSettings((s) => ({
+                            ...s,
+                            showPossibleMoves: e.target.checked,
+                        }))
+                    }
+                />
+                Show possible moves
+            </SettingsLabel>
+            <CloseButton onClick={onClose}>Close</CloseButton>
+        </SettingsPopupContainer>
+    );
+}

server/src/user/jwt-auth.guard.ts

@@ -5,7 +5,6 @@ import {
     UnauthorizedException,
 } from "@nestjs/common";
 import { JwtService } from "@nestjs/jwt";
-import { Request } from "express";
 
 @Injectable()
 export class JwtAuthGuard implements CanActivate {