From 7c3f8bc15b4f1889e056d9445f19213ef9eaba6f Mon Sep 17 00:00:00 2001
From: DevAlissu <alison.silva8741@gmail.com>
Date: Sat, 18 Apr 2026 23:56:57 -0400
Subject: [PATCH] permite trocar dificuldade e modo no game over e melhora
 botao de restart

- store aceita setDifficulty e setMode em idle/game-over/victory
- overlay mostra pills de dificuldade e modo atuais clicaveis
- botao de restart agora e CTA laranja consistente com o iniciar
---
 src/features/snake-game/SnakeGame.tsx         |  3 +
 .../snake-game/components/GameOverlay.tsx     | 58 ++++++++++++++++---
 src/features/snake-game/store/useGameStore.ts |  4 +-
 3 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/features/snake-game/SnakeGame.tsx b/src/features/snake-game/SnakeGame.tsx
index 71e8f75..9f93734 100644
--- a/src/features/snake-game/SnakeGame.tsx
+++ b/src/features/snake-game/SnakeGame.tsx
@@ -89,9 +89,12 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
             status={status}
             score={score}
             mode={mode}
+            difficulty={difficulty}
             leaderboard={leaderboard}
             onStart={handleStartClick}
             onSaveScore={actions.saveToLeaderboard}
+            onSetDifficulty={actions.setDifficulty}
+            onSetMode={actions.setMode}
           />
 
           {status === 'countdown' && <Countdown onFinish={actions.startGame} />}
diff --git a/src/features/snake-game/components/GameOverlay.tsx b/src/features/snake-game/components/GameOverlay.tsx
index 0cc0bc8..61ddafd 100644
--- a/src/features/snake-game/components/GameOverlay.tsx
+++ b/src/features/snake-game/components/GameOverlay.tsx
@@ -1,25 +1,33 @@
 import { memo, useState } from 'react';
-import type { GameStatus, GameMode, LeaderboardEntry } from '../types';
-import { DIFFICULTY_LABELS } from '../constants';
+import type { GameStatus, GameMode, LeaderboardEntry, Difficulty } from '../types';
+import { DIFFICULTY_LABELS, MODE_LABELS } from '../constants';
 
 const MEDALS = ['#FFD700', '#C0C0C0', '#CD7F32'] as const;
+const DIFFICULTIES: Difficulty[] = ['easy', 'normal', 'hard'];
+const MODES: GameMode[] = ['casual', 'competitive'];
 
 interface GameOverlayProps {
   status: GameStatus;
   score: number;
   mode: GameMode;
+  difficulty: Difficulty;
   leaderboard: LeaderboardEntry[];
   onStart: () => void;
   onSaveScore: (name: string) => void;
+  onSetDifficulty: (d: Difficulty) => void;
+  onSetMode: (m: GameMode) => void;
 }
 
 export const GameOverlay = memo(function GameOverlay({
   status,
   score,
   mode,
+  difficulty,
   leaderboard,
   onStart,
   onSaveScore,
+  onSetDifficulty,
+  onSetMode,
 }: GameOverlayProps) {
   const [playerName, setPlayerName] = useState('');
   const [saved, setSaved] = useState(false);
@@ -43,6 +51,8 @@ export const GameOverlay = memo(function GameOverlay({
     onStart();
   };
 
+  const buttonLabel = status === 'victory' ? 'jogar novamente' : 'tentar novamente';
+
   return (
     <div className="absolute inset-0 bg-[#0a1628]/90 rounded-lg flex items-center justify-center z-20 overflow-y-auto">
       <div className="text-center space-y-4 relative z-30 p-4 max-h-full">
@@ -134,12 +144,44 @@ export const GameOverlay = memo(function GameOverlay({
           </div>
         )}
 
-        <button
-          onClick={handleRestart}
-          className="font-['Fira_Code',sans-serif] text-[#90a1b9] hover:text-[#f8fafc] transition-colors underline text-sm focus-visible:outline-2 focus-visible:outline-[#ffb86a]"
-        >
-          {status === 'victory' ? 'jogar-novamente' : 'tentar-novamente'}
-        </button>
+        <div className="pt-2 space-y-3">
+          <div className="flex flex-wrap items-center justify-center gap-1.5 font-['Fira_Code',sans-serif] text-[11px]">
+            {DIFFICULTIES.map((d) => (
+              <button
+                key={d}
+                onClick={() => onSetDifficulty(d)}
+                className={`px-2 py-1 rounded transition-colors ${
+                  difficulty === d
+                    ? 'bg-[#43D9AD] text-[#020618]'
+                    : 'text-[#90a1b9] hover:text-[#f8fafc] border border-[#314158]'
+                }`}
+              >
+                {DIFFICULTY_LABELS[d]}
+              </button>
+            ))}
+            <span className="text-[#314158] mx-0.5">|</span>
+            {MODES.map((m) => (
+              <button
+                key={m}
+                onClick={() => onSetMode(m)}
+                className={`px-2 py-1 rounded transition-colors ${
+                  mode === m
+                    ? 'bg-[#9d4edd] text-[#f8fafc]'
+                    : 'text-[#90a1b9] hover:text-[#f8fafc] border border-[#314158]'
+                }`}
+              >
+                {MODE_LABELS[m]}
+              </button>
+            ))}
+          </div>
+
+          <button
+            onClick={handleRestart}
+            className="bg-[#ffb86a] hover:bg-[#ffb86a]/90 transition-colors px-6 py-2.5 rounded-lg font-['Fira_Code',sans-serif] font-[450] text-[#020618] text-sm focus-visible:outline-2 focus-visible:outline-[#f8fafc] focus-visible:outline-offset-2"
+          >
+            {buttonLabel}
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/features/snake-game/store/useGameStore.ts b/src/features/snake-game/store/useGameStore.ts
index d3717f3..7cc8f7f 100644
--- a/src/features/snake-game/store/useGameStore.ts
+++ b/src/features/snake-game/store/useGameStore.ts
@@ -122,13 +122,13 @@ export const useGameStore = create<GameStore>((set, get) => ({
 
   setDifficulty: (difficulty: Difficulty) => {
     const { status } = get();
-    if (status !== 'idle') return;
+    if (status === 'playing' || status === 'paused' || status === 'countdown') return;
     set({ difficulty });
   },
 
   setMode: (mode: GameMode) => {
     const { status } = get();
-    if (status !== 'idle') return;
+    if (status === 'playing' || status === 'paused' || status === 'countdown') return;
     set({ mode });
   },