From fd2442c73fc5c4aabba98ac63c583c0e2fec188e Mon Sep 17 00:00:00 2001
From: DevAlissu <alison.silva8741@gmail.com>
Date: Sun, 19 Apr 2026 14:21:45 -0400
Subject: [PATCH 1/2] adiciona legenda de comidas no painel lateral

- novo componente FoodLegend exibindo tipos de food com cores e valores
- wire-up no painel lateral do SnakeGame abaixo do botao pular
---
 src/features/snake-game/SnakeGame.tsx         | 15 ++++++------
 .../snake-game/components/FoodLegend.tsx      | 23 +++++++++++++++++++
 2 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 src/features/snake-game/components/FoodLegend.tsx

diff --git a/src/features/snake-game/SnakeGame.tsx b/src/features/snake-game/SnakeGame.tsx
index 3e6d657..049c9b5 100644
--- a/src/features/snake-game/SnakeGame.tsx
+++ b/src/features/snake-game/SnakeGame.tsx
@@ -12,6 +12,7 @@ import { GameTabs } from './components/GameTabs';
 import { HighScoreBadge } from './components/HighScoreBadge';
 import { Countdown } from './components/Countdown';
 import { PauseOverlay } from './components/PauseOverlay';
+import { FoodLegend } from './components/FoodLegend';
 import { useSwipe } from './hooks/useSwipe';
 
 interface SnakeGameProps {
@@ -53,7 +54,7 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
 
   return (
     <div
-      className={`backdrop-blur-[32px] content-stretch flex flex-col lg:flex-row gap-4 sm:gap-8 items-start p-4 sm:p-6 relative rounded-lg min-w-0 max-w-full ${className}`}
+      className={`backdrop-blur-[32px] content-stretch flex flex-col lg:flex-row gap-4 sm:gap-6 items-start p-4 sm:p-5 relative rounded-lg min-w-0 max-w-full ${className}`}
       style={{
         backgroundImage:
           'linear-gradient(152.11deg, rgba(52, 3, 78, 0.7) 1.7049%, rgba(33, 2, 60, 0.09) 81.819%)',
@@ -70,7 +71,7 @@ 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">
+      <div className="relative flex flex-col gap-3 w-full lg:w-auto min-w-0">
         <div className="flex items-center justify-between gap-2 pl-2 sm:pl-4">
           <GameTabs
             difficulty={difficulty}
@@ -115,15 +116,13 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
         </div>
       </div>
 
-      <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>
-
+      <div className="flex flex-col w-full lg:w-[140px] lg:shrink-0 gap-3 lg:self-stretch lg:justify-center">
+        <GameControls status={status} onDirection={handleDirectionClick} />
+        <ScoreDisplay score={score} mode={mode} combo={combo} lastEatTime={lastEatTime} />
         <button onClick={actions.resetGame} className="snake-btn snake-btn-ghost snake-btn-compact w-full">
           pular
         </button>
+        <FoodLegend />
       </div>
     </div>
   );
diff --git a/src/features/snake-game/components/FoodLegend.tsx b/src/features/snake-game/components/FoodLegend.tsx
new file mode 100644
index 0000000..71512c7
--- /dev/null
+++ b/src/features/snake-game/components/FoodLegend.tsx
@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { FOOD_TYPES } from '../constants';
+import type { FoodType } from '../types';
+
+const ORDER: FoodType[] = ['function', 'class', 'async'];
+
+export const FoodLegend = memo(function FoodLegend() {
+  return (
+    <div className="w-full font-['Fira_Code',sans-serif] text-[10px] text-[#90a1b9] space-y-0.5">
+      <p className="text-[#f8fafc] text-[11px]">// comidas</p>
+      {ORDER.map((type) => {
+        const { points, color, label } = FOOD_TYPES[type];
+        return (
+          <div key={type} className="flex items-center gap-1.5">
+            <span className="shrink-0 w-2 h-2 rounded-full" style={{ backgroundColor: color }} />
+            <span className="truncate">{label}</span>
+            <span className="ml-auto tabular-nums text-[#f8fafc]">+{points}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+});

From 1f05039dca2951c468b8f55ef982d80e9cc0db07 Mon Sep 17 00:00:00 2001
From: DevAlissu <alison.silva8741@gmail.com>
Date: Sun, 19 Apr 2026 14:21:55 -0400
Subject: [PATCH 2/2] ajusta layout do snake game para responsividade e zoom

- oculta jogo no mobile (hidden lg:flex)
- grid do HomePage com [1fr_auto] para snake com largura fit-content
- canvas com max-width responsivo baseado em altura (min 400px 50vh)
- outer canvas com padding maior gerando moldura lateral visivel
- painel lateral direito com largura fixa 140px shrink-0 e altura estendida
- GameControls compactado (botoes 36px 40px padding menor)
- left col com w-auto e min-w-0 para shrink natural
---
 src/features/home/HomePage.tsx                      |  6 +++---
 src/features/snake-game/components/GameCanvas.tsx   |  4 ++--
 src/features/snake-game/components/GameControls.tsx | 10 +++++-----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/features/home/HomePage.tsx b/src/features/home/HomePage.tsx
index dd9dd42..dd544ba 100644
--- a/src/features/home/HomePage.tsx
+++ b/src/features/home/HomePage.tsx
@@ -7,8 +7,8 @@ const SnakeGame = lazy(() =>
 export function HomePage() {
   return (
     <div className="min-h-full relative">
-      <div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10 lg:py-16">
-        <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+      <div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10 lg:py-10">
+        <div className="grid lg:grid-cols-[1fr_auto] gap-8 lg:gap-10 items-center">
           <div className="space-y-8 lg:space-y-12">
             <div className="space-y-4">
               <p className="font-['Fira_Code',sans-serif] text-[#90a1b9] text-lg">
@@ -44,7 +44,7 @@ export function HomePage() {
             </div>
           </div>
 
-          <div className="flex justify-end min-w-0">
+          <div className="hidden lg:flex justify-end min-w-0">
             <Suspense fallback={<div className="w-full" />}>
               <SnakeGame className="w-full" />
             </Suspense>
diff --git a/src/features/snake-game/components/GameCanvas.tsx b/src/features/snake-game/components/GameCanvas.tsx
index 2018120..353a58c 100644
--- a/src/features/snake-game/components/GameCanvas.tsx
+++ b/src/features/snake-game/components/GameCanvas.tsx
@@ -86,8 +86,8 @@ export const GameCanvas = memo(function GameCanvas({ food, gridSize, particles,
   }, [gridSize]);
 
   return (
-    <div ref={containerRef} className="bg-[#1d293d] rounded-lg shadow-[inset_1px_5px_11px_0px_rgba(2,18,27,0.71)] p-3 sm:p-6 w-full">
-      <div className="relative bg-[#0a1628] rounded-sm overflow-hidden w-full max-w-[400px] aspect-square mx-auto">
+    <div ref={containerRef} className="bg-[#1d293d] rounded-lg shadow-[inset_1px_5px_11px_0px_rgba(2,18,27,0.71)] p-3 sm:p-5 w-full" style={{ maxWidth: 'min(440px, calc(50vh + 40px))' }}>
+      <div className="relative bg-[#0a1628] rounded-sm overflow-hidden w-full aspect-square mx-auto" style={{ maxWidth: 'min(400px, 50vh)' }}>
         <svg
           className="absolute inset-0 w-full h-full"
           viewBox="0 0 400 400"
diff --git a/src/features/snake-game/components/GameControls.tsx b/src/features/snake-game/components/GameControls.tsx
index 0399cc2..acd2bd4 100644
--- a/src/features/snake-game/components/GameControls.tsx
+++ b/src/features/snake-game/components/GameControls.tsx
@@ -18,15 +18,15 @@ export const GameControls = memo(function GameControls({ status, onDirection }:
   const disabled = status !== 'playing';
 
   const buttonClass =
-    'snake-arrow-btn w-11 h-11 sm:w-10 sm:h-10 flex items-center justify-center';
+    'snake-arrow-btn w-10 h-10 sm:w-9 sm:h-9 flex items-center justify-center';
 
   return (
-    <div className="bg-[#1d293d] rounded-lg p-3">
-      <p className="font-['Fira_Code',sans-serif] text-[#f8fafc] text-xs leading-tight">
-        // use teclado ou swipe
+    <div className="bg-[#1d293d] rounded-lg p-2.5">
+      <p className="font-['Fira_Code',sans-serif] text-[#f8fafc] text-[11px] leading-tight">
+        // teclado ou swipe
       </p>
 
-      <div className="flex flex-col gap-1.5 items-center mt-3">
+      <div className="flex flex-col gap-1.5 items-center mt-2">
         <button
           onClick={() => onDirection('UP')}
           disabled={disabled}