From 561caccbd8160266486bbc64a86a0e4d81647da0 Mon Sep 17 00:00:00 2001
From: DevAlissu <alison.silva8741@gmail.com>
Date: Sun, 19 Apr 2026 13:23:08 -0400
Subject: [PATCH] compacta ui do snake game

- move HighScoreBadge para a linha dos tabs no topo
- reduz painel lateral de 180px para 150px
- botoes direcionais 40px no desktop e 44px no mobile
- hint de controle simplificado em uma linha
- gap e padding reduzidos no painel lateral
---
 src/features/snake-game/SnakeGame.tsx         | 46 +++++++++----------
 .../snake-game/components/GameControls.tsx    | 25 +++++-----
 2 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/features/snake-game/SnakeGame.tsx b/src/features/snake-game/SnakeGame.tsx
index efdd855..5dcabf5 100644
--- a/src/features/snake-game/SnakeGame.tsx
+++ b/src/features/snake-game/SnakeGame.tsx
@@ -70,13 +70,16 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
       <div className="absolute inset-[-1px] pointer-events-none rounded-[inherit] shadow-[inset_0px_2px_0px_0px_rgba(255,255,255,0.3)]" />
 
       <div className="relative flex flex-col gap-3 w-full lg:w-auto">
-        <GameTabs
-          difficulty={difficulty}
-          mode={mode}
-          disabled={isPlaying}
-          onDifficulty={actions.setDifficulty}
-          onMode={actions.setMode}
-        />
+        <div className="flex items-center justify-between gap-2">
+          <GameTabs
+            difficulty={difficulty}
+            mode={mode}
+            disabled={isPlaying}
+            onDifficulty={actions.setDifficulty}
+            onMode={actions.setMode}
+          />
+          {highScore > 0 && <HighScoreBadge highScore={highScore} />}
+        </div>
 
         <div className="relative" {...swipeHandlers}>
           <GameCanvas
@@ -101,35 +104,28 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
           )}
 
           {status === 'idle' && (
-            <>
-              {highScore > 0 && (
-                <div className="absolute top-3 right-3 sm:top-6 sm:right-6 pointer-events-none">
-                  <HighScoreBadge highScore={highScore} />
-                </div>
-              )}
-              <div className="absolute bottom-8 sm:bottom-12 left-1/2 -translate-x-1/2">
-                <button
-                  onClick={handleStartClick}
-                  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"
-                >
-                  iniciar
-                </button>
-              </div>
-            </>
+            <div className="absolute bottom-8 sm:bottom-12 left-1/2 -translate-x-1/2">
+              <button
+                onClick={handleStartClick}
+                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"
+              >
+                iniciar
+              </button>
+            </div>
           )}
 
         </div>
       </div>
 
-      <div className="flex flex-col items-end justify-between w-full lg:w-[180px] gap-6">
-        <div className="flex flex-col gap-6 w-full">
+      <div className="flex flex-col items-end justify-between w-full lg:w-[150px] gap-4">
+        <div className="flex flex-col gap-4 w-full">
           <GameControls status={status} onDirection={handleDirectionClick} />
           <ScoreDisplay score={score} mode={mode} combo={combo} lastEatTime={lastEatTime} />
         </div>
 
         <button
           onClick={actions.resetGame}
-          className="border border-[#f8fafc] hover:bg-[#f8fafc]/10 transition-colors px-3 py-2.5 rounded-lg font-['Fira_Code',sans-serif] text-[#f8fafc] text-sm w-full focus-visible:outline-2 focus-visible:outline-[#ffb86a] focus-visible:outline-offset-2"
+          className="border border-[#f8fafc] hover:bg-[#f8fafc]/10 transition-colors px-3 py-2 rounded-lg font-['Fira_Code',sans-serif] text-[#f8fafc] text-xs w-full focus-visible:outline-2 focus-visible:outline-[#ffb86a] focus-visible:outline-offset-2"
         >
           pular
         </button>
diff --git a/src/features/snake-game/components/GameControls.tsx b/src/features/snake-game/components/GameControls.tsx
index a3b1d0f..8c33008 100644
--- a/src/features/snake-game/components/GameControls.tsx
+++ b/src/features/snake-game/components/GameControls.tsx
@@ -18,32 +18,35 @@ export const GameControls = memo(function GameControls({ status, onDirection }:
   const disabled = status !== 'playing';
 
   const buttonClass =
-    'bg-[#0a0a0a] border border-[#314158] hover:border-[#43D9AD] disabled:hover:border-[#314158] disabled:opacity-50 transition-colors rounded-lg w-12 h-12 flex items-center justify-center';
+    'bg-[#0a0a0a] border border-[#314158] hover:border-[#43D9AD] disabled:hover:border-[#314158] disabled:opacity-50 transition-colors rounded-lg w-11 h-11 sm:w-10 sm:h-10 flex items-center justify-center';
 
   return (
     <div className="bg-[#1d293d] rounded-lg p-3">
-      <p className="font-['Fira_Code',sans-serif] text-[#f8fafc] text-sm leading-relaxed mb-0">
-        // use o teclado
-      </p>
-      <p className="font-['Fira_Code',sans-serif] text-[#f8fafc] text-sm leading-relaxed">
-        // setas para jogar
+      <p className="font-['Fira_Code',sans-serif] text-[#f8fafc] text-xs leading-tight">
+        // use teclado ou swipe
       </p>
 
-      <div className="flex flex-col gap-2 items-center mt-3">
-        <button onClick={() => onDirection('UP')} disabled={disabled} className={buttonClass}>
-          <svg className="w-[18px] h-[18px] rotate-180" fill="none" viewBox="0 0 32 32">
+      <div className="flex flex-col gap-1.5 items-center mt-3">
+        <button
+          onClick={() => onDirection('UP')}
+          disabled={disabled}
+          aria-label="Cima"
+          className={buttonClass}
+        >
+          <svg className="w-[14px] h-[14px] rotate-180" fill="none" viewBox="0 0 32 32">
             <path d={ARROW_PATH} fill="#F8FAFC" />
           </svg>
         </button>
-        <div className="flex gap-2">
+        <div className="flex gap-1.5">
           {ROW_BUTTONS.map(({ direction, rotation }) => (
             <button
               key={direction}
               onClick={() => onDirection(direction)}
               disabled={disabled}
+              aria-label={direction.toLowerCase()}
               className={buttonClass}
             >
-              <svg className={`w-[18px] h-[18px] ${rotation}`} fill="none" viewBox="0 0 32 32">
+              <svg className={`w-[14px] h-[14px] ${rotation}`} fill="none" viewBox="0 0 32 32">
                 <path d={ARROW_PATH} fill="#F8FAFC" />
               </svg>
             </button>