merge

frontend/eslint.config.js

@@ -32,6 +32,7 @@ export default [
       ...react.configs['jsx-runtime'].rules,
       ...reactHooks.configs.recommended.rules,
       'react/jsx-no-target-blank': 'off',
+      'react/prop-types': 'off',
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       'prettier/prettier': 'error',
     },

frontend/index.html

@@ -5,14 +5,14 @@
     <script>
       (function () {
         try {
-          var t = localStorage.getItem('theme')
+          var t = localStorage.getItem('theme');
           if (t === 'dark' || (!t && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark')
+            document.documentElement.classList.add('dark');
           } else {
-            document.documentElement.classList.remove('dark')
+            document.documentElement.classList.remove('dark');
           }
         } catch (e) {}
-      })()
+      })();
     </script>
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

frontend/package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix && prettier --write .",
     "preview": "vite preview"
   },
   "dependencies": {

frontend/src/App.jsx

@@ -1,7 +1,7 @@
-import Deck from "./Components/Deck";
-import Home from "./pages/Home";
-import Error from "./pages/Error";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Deck from './Components/Deck';
+import Home from './pages/Home';
+import Error from './pages/Error';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 function App() {
   return (
     <BrowserRouter>
@@ -14,4 +14,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

frontend/src/Components/ClueInput.jsx

@@ -1,5 +1,5 @@
 // ClueInput.jsx
-import React, { useState,useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import socket from '../socket';
@@ -20,7 +20,10 @@
   // read currentTurn from the Redux store so we can restrict Concealer input to the active team
   const currentTurn = useSelector((state) => state.game?.currentTurn ?? 'red');
 
-  const numbers = Array.from({ length: 10 }, (_, i) => ({ value: `${i + 1}`, label: `${i + 1}` })).concat({ value: 'infinity', label: '∞' });
+  const numbers = Array.from({ length: 10 }, (_, i) => ({ value: `${i + 1}`, label: `${i + 1}` })).concat({
+    value: 'infinity',
+    label: '∞',
+  });
 
   useEffect(() => {
     // If this client is a Revealer and there's a persisted clue, show it after reload/join
@@ -42,7 +45,7 @@
       console.log('📬 clueReceived:', clueData);
       setClueWord(clueData.word);
       setClueNumber(clueData.number);
-  setIsSubmitted(true);
+      setIsSubmitted(true);
       setCardsRevealed(0); // Reset counter for new turn
     };
     socket.on('clueReceived', onClueReceived);
@@ -55,7 +58,7 @@
       const normalizedTurn = String(currentTurn || '').toLowerCase();
       const isRoleConcealer = normalizedRole.startsWith('conceal') || normalizedRole === 'spymaster';
       if (isRoleConcealer && normalizedTeam && normalizedTeam === normalizedTurn) {
-  setIsSubmitted(false);
+        setIsSubmitted(false);
         setClueWord('');
         setClueNumber('1');
         setCardsRevealed(0);
@@ -70,7 +73,7 @@
       const normalizedTurn = String(currentTurn || '').toLowerCase();
       const isRoleConcealer = normalizedRole.startsWith('conceal') || normalizedRole === 'spymaster';
       if (isRoleConcealer && normalizedTeam && normalizedTeam === normalizedTurn) {
-  setIsSubmitted(false);
+        setIsSubmitted(false);
         setClueWord('');
         setClueNumber('1');
         setCardsRevealed(0);
@@ -83,21 +86,21 @@
       socket.off('requestClue', onRequestClue);
       socket.off('turnSwitched', onTurnSwitched);
     };
   }, [joinedTitle, joinedTeam]);
 
   useEffect(() => {
     const onCardRevealed = ({ cardsRevealedThisTurn }) => {
       console.log('🎯 Card revealed, count:', cardsRevealedThisTurn);
       setCardsRevealed(cardsRevealedThisTurn || 0);
-      
+
       // Check if we've reached the clue number limit
       if (cardsRevealedThisTurn && clueNumber !== 'infinity' && cardsRevealedThisTurn >= parseInt(clueNumber)) {
         console.log(`✅ Clue limit reached! ${cardsRevealedThisTurn} cards revealed, switching turn...`);
-  setIsSubmitted(false);
+        setIsSubmitted(false);
         setClueWord('');
         setClueNumber('1');
         setCardsRevealed(0);
-        
+
         // Emit switchTurn event
         socket.emit('switchTurn', { gameId });
       }
@@ -128,60 +131,65 @@
   const isRoleConcealer = normalizedRole.startsWith('conceal') || normalizedRole === 'spymaster';
   const isConcealers = isRoleConcealer && normalizedTeam && normalizedTeam === normalizedTurn;
 
-  useEffect(()=>{
-    console.log("ClueWord:",clueWord);
-  },[])
+  useEffect(() => {
+    console.log('ClueWord:', clueWord);
+  }, []);
 
   return (
     <div>
-  {!isSubmitted && isConcealers ? (
-      <div className="w-[1100px] mt-6 p-4 rounded-[30px] dark:bg-black/60 bg-white/70 shadow-2xl flex items-center justify-center border dark:border-white/10 border-gray-400 backdrop-blur-sm">
-        <form onSubmit={handleSubmit} className="flex items-center space-x-3 w-full justify-center">
-          <input
-            type="text"
-            value={clueWord}
-            onChange={(e) => setClueWord(e.target.value)}
-            placeholder="Enter one-word clue"
-            className="flex-grow p-3 rounded-xl border dark:border-gray-700 bg-input dark:bg-gray-800 text-foreground dark:text-white focus:ring-2 focus:ring-primary max-w-[400px]"
-          />
-          <select
-            value={clueNumber}
-            onChange={(e) => setClueNumber(e.target.value)}
-            className="py-3 px-3 rounded-xl bg-sidebar-accent dark:bg-sidebar-accent text-sidebar-accent-foreground font-bold cursor-pointer"
-          >
-            {numbers.map((num) => (
-              <option key={num.value} value={num.value}>{num.label}</option>
-            ))}
-          </select>
-          <button
-            type="submit"
-            className="h-12 w-12 flex items-center justify-center rounded-full bg-primary text-primary-foreground hover:bg-opacity-90 transition-opacity duration-300 shadow-md"
-            disabled={!clueWord.trim()}
-            title="Submit Clue"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor" className="w-6 h-6">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-            </svg>
-          </button>
-        </form>
+      {!isSubmitted && isConcealers ? (
+        <div className="w-[1100px] mt-6 p-4 rounded-[30px] dark:bg-black/60 bg-white/70 shadow-2xl flex items-center justify-center border dark:border-white/10 border-gray-400 backdrop-blur-sm">
+          <form onSubmit={handleSubmit} className="flex items-center space-x-3 w-full justify-center">
+            <input
+              type="text"
+              value={clueWord}
+              onChange={(e) => setClueWord(e.target.value)}
+              placeholder="Enter one-word clue"
+              className="flex-grow p-3 rounded-xl border dark:border-gray-700 bg-input dark:bg-gray-800 text-foreground dark:text-white focus:ring-2 focus:ring-primary max-w-[400px]"
+            />
+            <select
+              value={clueNumber}
+              onChange={(e) => setClueNumber(e.target.value)}
+              className="py-3 px-3 rounded-xl bg-sidebar-accent dark:bg-sidebar-accent text-sidebar-accent-foreground font-bold cursor-pointer"
+            >
+              {numbers.map((num) => (
+                <option key={num.value} value={num.value}>
+                  {num.label}
+                </option>
+              ))}
+            </select>
+            <button
+              type="submit"
+              className="h-12 w-12 flex items-center justify-center rounded-full bg-primary text-primary-foreground hover:bg-opacity-90 transition-opacity duration-300 shadow-md"
+              disabled={!clueWord.trim()}
+              title="Submit Clue"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                strokeWidth={3}
+                stroke="currentColor"
+                className="w-6 h-6"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+              </svg>
+            </button>
+          </form>
         </div>
-      ) : (
-        clueWord ? (
+      ) : clueWord ? (
         <div className="text-center">
           <div className="text-2xl font-bold tracking-wide text-gray-900 dark:text-white mb-2">
-            <span className="uppercase">{clueWord}</span>{" "}
+            <span className="uppercase">{clueWord}</span>{' '}
             <span className="text-primary font-extrabold">({clueNumber === 'infinity' ? '∞' : clueNumber})</span>
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-300">
             {cardsRevealed} / {clueNumber === 'infinity' ? '∞' : clueNumber} cards revealed
           </div>
         </div>
-
-        ) : (
-          <></>
-        )
+      ) : (
+        <></>
       )}
-        </div>
+    </div>
   );
 };