Login page. Read-only for Spectators

drcrazy · drcrazy · commit 2f16cbc53680 · 2026-04-30T17:52:38.000+03:00
diff --git a/artifacts/game-client/src/App.tsx b/artifacts/game-client/src/App.tsx
@@ -1,7 +1,8 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Route, Router, Switch, Redirect } from "wouter";
+import { Route, Router, Switch } from "wouter";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { LoginPage } from "@/pages/LoginPage";
 import { ViewerPage } from "@/pages/ViewerPage";
 import { GamePage } from "@/pages/GamePage";
 import { SpectatorPage } from "@/pages/SpectatorPage";
@@ -15,6 +16,7 @@ import Adepts2NotFound from "@/apps/adepts-game-2/pages/not-found";
 import Adepts3Home from "@/apps/adepts-game-3/pages/Home";
 import Adepts3NotFound from "@/apps/adepts-game-3/pages/not-found";
 import { GamePhaseArrows } from "@/components/GamePhaseArrows";
+import { RequireLogin } from "@/components/RequireLogin";
 
 const queryClient = new QueryClient();
 
@@ -33,24 +35,30 @@ function App() {
               <Route path="/spectate" component={SpectatorPage} />
               <Route path="/game" component={GamePage} />
               <Route path="/adepts-game" nest>
-                <Switch>
-                  <Route path="/" component={Adepts1Home} />
-                  <Route component={Adepts1NotFound} />
-                </Switch>
+                <RequireLogin>
+                  <Switch>
+                    <Route path="/" component={Adepts1Home} />
+                    <Route component={Adepts1NotFound} />
+                  </Switch>
+                </RequireLogin>
               </Route>
               <Route path="/adepts-game-2" nest>
-                <Switch>
-                  <Route path="/" component={Adepts2Home} />
-                  <Route component={Adepts2NotFound} />
-                </Switch>
+                <RequireLogin>
+                  <Switch>
+                    <Route path="/" component={Adepts2Home} />
+                    <Route component={Adepts2NotFound} />
+                  </Switch>
+                </RequireLogin>
               </Route>
               <Route path="/adepts-game-3" nest>
-                <Switch>
-                  <Route path="/" component={Adepts3Home} />
-                  <Route component={Adepts3NotFound} />
-                </Switch>
+                <RequireLogin>
+                  <Switch>
+                    <Route path="/" component={Adepts3Home} />
+                    <Route component={Adepts3NotFound} />
+                  </Switch>
+                </RequireLogin>
               </Route>
-              <Route path="/"><Redirect to="/adepts-game/" /></Route>
+              <Route path="/" component={LoginPage} />
             </Switch>
             <GamePhaseArrows />
           </>
diff --git a/artifacts/game-client/src/apps/adepts-game-2/pages/Home.tsx b/artifacts/game-client/src/apps/adepts-game-2/pages/Home.tsx
@@ -4,6 +4,7 @@ import { Scoreboard } from "@/lib/adepts-scoreboard";
 import { QuizBoard } from "@/lib/adepts-quiz-board";
 import { QuestionModal } from "@/lib/adepts-question-modal";
 import { GamePhaseNav } from "@/components/GamePhaseArrows";
+import { useRole } from "@/hooks/useRole";
 
 function resolveUrl(url: string): string {
   if (!url) return url;
@@ -12,6 +13,7 @@ function resolveUrl(url: string): string {
 }
 
 export default function Home() {
+  const { isSpectator } = useRole();
   const {
     state,
     updatePlayerName,
@@ -67,7 +69,7 @@ export default function Home() {
           Adepts-game 2
         </span>
         <div className="ml-auto flex items-center gap-3">
-          <GamePhaseNav />
+          {!isSpectator && <GamePhaseNav />}
           <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "monospace", fontSize: 11, color: "#2ecc71" }}>
             <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#2ecc71", boxShadow: "0 0 8px #2ecc71" }} />
             Онлайн
@@ -82,6 +84,7 @@ export default function Home() {
           questions={state.questions}
           onUpdateTheme={updateThemeName}
           onQuestionClick={handleQuestionClick}
+          readonly={isSpectator}
         />
       </main>
 
@@ -91,6 +94,7 @@ export default function Home() {
           onUpdateName={updatePlayerName}
           onUpdateScore={updatePlayerScore}
           onResetScores={resetScores}
+          readonly={isSpectator}
         />
       </div>
 
diff --git a/artifacts/game-client/src/apps/adepts-game-3/pages/Home.tsx b/artifacts/game-client/src/apps/adepts-game-3/pages/Home.tsx
@@ -4,6 +4,7 @@ import { Scoreboard } from "@/lib/adepts-scoreboard";
 import { QuizBoard } from "@/lib/adepts-quiz-board";
 import { QuestionModal } from "@/lib/adepts-question-modal";
 import { GamePhaseNav } from "@/components/GamePhaseArrows";
+import { useRole } from "@/hooks/useRole";
 
 function resolveUrl(url: string): string {
   if (!url) return url;
@@ -12,6 +13,7 @@ function resolveUrl(url: string): string {
 }
 
 export default function Home() {
+  const { isSpectator } = useRole();
   const {
     state,
     updatePlayerName,
@@ -67,7 +69,7 @@ export default function Home() {
           Adepts-game 3
         </span>
         <div className="ml-auto flex items-center gap-3">
-          <GamePhaseNav />
+          {!isSpectator && <GamePhaseNav />}
           <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "monospace", fontSize: 11, color: "#2ecc71" }}>
             <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#2ecc71", boxShadow: "0 0 8px #2ecc71" }} />
             Онлайн
@@ -82,6 +84,7 @@ export default function Home() {
           questions={state.questions}
           onUpdateTheme={updateThemeName}
           onQuestionClick={handleQuestionClick}
+          readonly={isSpectator}
         />
       </main>
 
@@ -91,6 +94,7 @@ export default function Home() {
           onUpdateName={updatePlayerName}
           onUpdateScore={updatePlayerScore}
           onResetScores={resetScores}
+          readonly={isSpectator}
         />
       </div>
 
diff --git a/artifacts/game-client/src/apps/adepts-game/pages/Home.tsx b/artifacts/game-client/src/apps/adepts-game/pages/Home.tsx
@@ -4,6 +4,7 @@ import { Scoreboard } from "@/lib/adepts-scoreboard";
 import { QuizBoard } from "@/lib/adepts-quiz-board";
 import { QuestionModal } from "@/lib/adepts-question-modal";
 import { GamePhaseNav } from "@/components/GamePhaseArrows";
+import { useRole } from "@/hooks/useRole";
 
 function resolveUrl(url: string): string {
   if (!url) return url;
@@ -12,6 +13,7 @@ function resolveUrl(url: string): string {
 }
 
 export default function Home() {
+  const { isSpectator } = useRole();
   const {
     state,
     updatePlayerName,
@@ -67,7 +69,7 @@ export default function Home() {
           Adepts-game
         </span>
         <div className="ml-auto flex items-center gap-3">
-          <GamePhaseNav />
+          {!isSpectator && <GamePhaseNav />}
           <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "monospace", fontSize: 11, color: "#2ecc71" }}>
             <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#2ecc71", boxShadow: "0 0 8px #2ecc71" }} />
             Онлайн
@@ -82,6 +84,7 @@ export default function Home() {
           questions={state.questions}
           onUpdateTheme={updateThemeName}
           onQuestionClick={handleQuestionClick}
+          readonly={isSpectator}
         />
       </main>
 
@@ -91,6 +94,7 @@ export default function Home() {
           onUpdateName={updatePlayerName}
           onUpdateScore={updatePlayerScore}
           onResetScores={resetScores}
+          readonly={isSpectator}
         />
       </div>
 
diff --git a/artifacts/game-client/src/components/RequireLogin.tsx b/artifacts/game-client/src/components/RequireLogin.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+const base = import.meta.env.BASE_URL.replace(/\/$/, "");
+
+/** Redirects to the login page if the user has not entered their nick. */
+export function RequireLogin({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = Boolean(localStorage.getItem("player_nick"));
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      window.location.replace(`${base}/`);
+    }
+  }, [isLoggedIn]);
+
+  if (!isLoggedIn) return null;
+
+  return <>{children}</>;
+}
diff --git a/artifacts/game-client/src/hooks/useRole.ts b/artifacts/game-client/src/hooks/useRole.ts
@@ -0,0 +1,5 @@
+/** Returns true when the current user arrived via the login page (spectator role). */
+export function useRole() {
+  const isSpectator = localStorage.getItem("player_role") === "spectator";
+  return { isSpectator };
+}
diff --git a/artifacts/game-client/src/lib/adepts-quiz-board/QuizBoard.tsx b/artifacts/game-client/src/lib/adepts-quiz-board/QuizBoard.tsx
@@ -14,6 +14,7 @@ interface QuizBoardProps {
   questions: Question[][];
   onUpdateTheme: (index: number, name: string) => void;
   onQuestionClick: (themeIndex: number, questionIndex: number) => void;
+  readonly?: boolean;
 }
 
 export function QuizBoard({
@@ -22,6 +23,7 @@ export function QuizBoard({
   questions,
   onUpdateTheme,
   onQuestionClick,
+  readonly = false,
 }: QuizBoardProps) {
   const [editingTheme, setEditingTheme] = useState<number | null>(null);
   const theme2LineBreaks = board === 2;
@@ -43,7 +45,7 @@ export function QuizBoard({
               damping: 22,
               stiffness: 180,
             }}
-            className="w-[21%] relative flex items-center rounded-xl overflow-hidden cursor-text group"
+            className={`w-[21%] relative flex items-center rounded-xl overflow-hidden group ${readonly ? "cursor-default" : "cursor-text"}`}
             style={{
               background: "linear-gradient(105deg, hsla(270,40%,12%,0.95) 0%, hsla(270,30%,9%,0.7) 100%)",
               borderLeft: "3px solid hsla(280,65%,58%,0.85)",
@@ -52,7 +54,7 @@ export function QuizBoard({
               borderLeftColor: "hsla(280,65%,58%,0.85)",
               boxShadow: "inset 0 0 30px hsla(280,60%,15%,0.4)",
             }}
-            onClick={() => setEditingTheme(tIdx)}
+            onClick={() => !readonly && setEditingTheme(tIdx)}
           >
             {/* Hover shimmer */}
             <motion.div
@@ -140,23 +142,25 @@ export function QuizBoard({
                       stiffness: 200,
                     },
                   }}
-                  whileHover={!q.used ? {
+                  whileHover={!q.used && !readonly ? {
                     scale: 1.06,
                     y: -3,
                     transition: { type: "tween", duration: 0.08, ease: "easeOut" },
                   } : {}}
-                  whileTap={!q.used ? {
+                  whileTap={!q.used && !readonly ? {
                     scale: 0.94,
                     transition: { type: "tween", duration: 0.06 },
                   } : {}}
                   transition={{ type: "tween", duration: 0.1, ease: "easeOut" }}
-                  onClick={() => onQuestionClick(tIdx, qIdx)}
+                  onClick={() => !readonly && onQuestionClick(tIdx, qIdx)}
                   className={`
                     relative w-full h-full rounded-xl border flex items-center justify-center
                     font-display font-bold transition-colors duration-150
                     ${q.used
                       ? "bg-background/20 border-border/50 text-muted-foreground/30 cursor-not-allowed"
-                      : "bg-secondary/40 border-accent/30 text-primary hover:bg-secondary hover:border-accent hover:shadow-[0_0_22px_hsla(280,65%,50%,0.45)] cursor-pointer"
+                      : readonly
+                        ? "bg-secondary/40 border-accent/30 text-primary cursor-default"
+                        : "bg-secondary/40 border-accent/30 text-primary hover:bg-secondary hover:border-accent hover:shadow-[0_0_22px_hsla(280,65%,50%,0.45)] cursor-pointer"
                     }
                   `}
                 >
diff --git a/artifacts/game-client/src/lib/adepts-scoreboard/Scoreboard.tsx b/artifacts/game-client/src/lib/adepts-scoreboard/Scoreboard.tsx
diff --git a/artifacts/game-client/src/pages/AdminGuard.tsx b/artifacts/game-client/src/pages/AdminGuard.tsx
diff --git a/artifacts/game-client/src/pages/LoginPage.tsx b/artifacts/game-client/src/pages/LoginPage.tsx
