feat: add game overlay menu, fix tablet paddings

Author: jsardev

src/modules/game/ui/GameOverlay.tsx

@@ -1,5 +1,6 @@
 import { GameNextTurnButton } from './GameNextTurnButton'
-import { PlayerScore } from './PlayerScore'
+import { GameOverlayMenu } from './GameOverlayMenu'
+import { GameOverlayScore } from './GameOverlayScore'
 import { useCurrentPlayer, usePlayers } from '..'
 
 const playerIndexToClassesMap: Record<number, string> = {
@@ -14,24 +15,28 @@ export const GameOverlay = () => {
   const currentPlayer = useCurrentPlayer()
 
   return (
-    <div className="fixed inset-0 grid grid-cols-1 grid-rows-1 p-12 [&>*]:col-span-full [&>*]:row-span-full">
-      {players.map((player, index) => {
-        const horizontalPlacement = [0, 3].includes(index) ? 'left' : 'right'
-        const verticalPlacement = [2, 3].includes(index) ? 'bottom' : 'top'
+    <div className="fixed inset-0 grid grid-cols-1 grid-rows-1 [&>*]:col-span-full [&>*]:row-span-full">
+      <GameOverlayMenu />
 
-        return (
-          <PlayerScore
-            key={player.id}
-            player={player}
-            itsTurn={player === currentPlayer}
-            horizontalPlacement={horizontalPlacement}
-            verticalPlacement={verticalPlacement}
-            className={playerIndexToClassesMap[index]}
-          />
-        )
-      })}
+      <div className="grid grid-cols-1 grid-rows-1 p-6 [&>*]:col-span-full [&>*]:row-span-full xl:p-12">
+        {players.map((player, index) => {
+          const horizontalPlacement = [0, 3].includes(index) ? 'left' : 'right'
+          const verticalPlacement = [2, 3].includes(index) ? 'bottom' : 'top'
 
-      <GameNextTurnButton className="self-end justify-self-center" />
+          return (
+            <GameOverlayScore
+              key={player.id}
+              player={player}
+              itsTurn={player === currentPlayer}
+              horizontalPlacement={horizontalPlacement}
+              verticalPlacement={verticalPlacement}
+              className={playerIndexToClassesMap[index]}
+            />
+          )
+        })}
+
+        <GameNextTurnButton className="self-end justify-self-center" />
+      </div>
     </div>
   )
 }

src/modules/game/ui/GameOverlayMenu.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom'
+
+export const GameOverlayMenu = () => {
+  const navigate = useNavigate()
+
+  const onExitClick = () => {
+    navigate('/')
+  }
+
+  return (
+    <div className="z-1 flex self-start justify-self-center gap-4">
+      <button
+        className="group flex items-center gap-2 rounded-b from-slate-100 to-slate-200 bg-gradient-to-r p-4 text-slate-400 hover:from-slate-100 hover:to-slate-300 hover:text-slate-500"
+        onClick={onExitClick}
+      >
+        <i className="i-lucide-door-closed group-hover:i-lucide-door-open block text-2xl" />
+        Exit
+      </button>
+    </div>
+  )
+}

src/modules/game/ui/PlayerScore.tsx renamed to src/modules/game/ui/GameOverlayScore.tsx

@@ -12,7 +12,7 @@ type PlayerScoreProps = {
   className?: string
 }
 
-export const PlayerScore = ({
+export const GameOverlayScore = ({
   player,
   itsTurn,
   horizontalPlacement,
@@ -33,8 +33,8 @@ export const PlayerScore = ({
           'flex-row-reverse': isOnRightSide,
         })}
       >
-        <div className="text-xl font-medium text-slate">
-          Player #{player.id}
+        <div className="text-xl font-medium text-slate-400">
+          Player #{player.id + 1}
         </div>
         {itsTurn && (
           <div className="h-5 w-5 animate-pulse rounded-full from-primary-400 to-primary-500 bg-gradient-to-r" />

src/pages/GamePage.tsx

@@ -10,7 +10,7 @@ export function GamePage() {
   const areCardsLoading = useAreCardsLoading()
 
   return (
-    <main className="relative h-screen w-screen flex items-center justify-center gap-4 p-48">
+    <main className="relative h-screen w-screen flex items-center justify-center gap-4 p-12 landscape:p-28 xl:p-40">
       {areCardsLoading ? (
         <Loader>
           We're preparing <br />