fix: improve responsiveness

jsardev · jsardev · commit ebf4f51f812f · 2023-10-07T10:52:00.000+02:00
diff --git a/src/modules/game/ui/GameOverlay.tsx b/src/modules/game/ui/GameOverlay.tsx
@@ -1,4 +1,3 @@
-import { GameNextTurnButton } from './GameNextTurnButton'
 import { GameOverlayMenu } from './GameOverlayMenu'
 import { GameOverlayScore } from './GameOverlayScore'
 import { useCurrentPlayer, usePlayers } from '..'
@@ -15,10 +14,10 @@ export const GameOverlay = () => {
   const currentPlayer = useCurrentPlayer()
 
   return (
-    <div className="fixed inset-0 grid grid-cols-1 grid-rows-1 [&>*]:col-span-full [&>*]:row-span-full">
+    <div className="absolute inset-0 grid grid-cols-1 grid-rows-1 [&>*]:col-span-full [&>*]:row-span-full">
       <GameOverlayMenu />
 
-      <div className="grid grid-cols-1 grid-rows-1 p-6 [&>*]:col-span-full [&>*]:row-span-full xl:p-12">
+      <div className="grid grid-cols-1 grid-rows-1 p-4 [&>*]:col-span-full [&>*]:row-span-full lg:p-12 sm:p-8">
         {players.map((player, index) => {
           const horizontalPlacement = [0, 3].includes(index) ? 'left' : 'right'
           const verticalPlacement = [2, 3].includes(index) ? 'bottom' : 'top'
@@ -34,8 +33,6 @@ export const GameOverlay = () => {
             />
           )
         })}
-
-        <GameNextTurnButton className="self-end justify-self-center" />
       </div>
     </div>
   )
diff --git a/src/modules/game/ui/GameOverlayMenu.tsx b/src/modules/game/ui/GameOverlayMenu.tsx
@@ -8,13 +8,13 @@ export const GameOverlayMenu = () => {
   }
 
   return (
-    <div className="z-1 flex self-start justify-self-center gap-4">
+    <div className="z-20 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"
+        className="group flex items-center gap-2 rounded-b from-slate-100 to-slate-200 bg-gradient-to-r p-2 text-slate-400 hover:from-slate-100 hover:to-slate-300 sm:p-4 hover:text-slate-500"
         onClick={onExitClick}
       >
         <i className="i-lucide-door-closed group-hover:i-lucide-door-open block text-2xl" />
-        Exit
+        <span className="hidden sm:block">Exit</span>
       </button>
     </div>
   )
diff --git a/src/modules/game/ui/GameOverlayScore.tsx b/src/modules/game/ui/GameOverlayScore.tsx
@@ -24,20 +24,20 @@ export const GameOverlayScore = ({
 
   return (
     <div
-      className={clsx(className, 'flex flex-col gap-4', {
+      className={clsx(className, 'flex flex-col gap-2 sm:gap-4', {
         'flex-col-reverse': isOnBottom,
       })}
     >
       <div
-        className={clsx('flex gap-4 items-center', {
+        className={clsx('flex gap-2 sm:gap-4 items-center', {
           'flex-row-reverse': isOnRightSide,
         })}
       >
         <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" />
+          <div className="h-3 w-3 animate-pulse rounded-full from-primary-400 to-primary-500 bg-gradient-to-r sm:h-5 sm:w-5" />
         )}
       </div>
       <div
diff --git a/src/modules/game/ui/GameScoreboard.tsx b/src/modules/game/ui/GameScoreboard.tsx
@@ -2,11 +2,16 @@ import { Scoreboard } from '@/shared/ui/Scoreboard'
 
 import { usePlayers } from '..'
 
-export const GameScoreboard = () => {
+type GameScoreboardProps = {
+  className?: string
+}
+
+export const GameScoreboard = ({ className }: GameScoreboardProps) => {
   const players = usePlayers()
 
   return (
     <Scoreboard
+      className={className}
       items={players.map((player) => ({
         name: `Player #${player.id + 1}`,
         score: player.cards.length,
diff --git a/src/modules/game/ui/index.ts b/src/modules/game/ui/index.ts
@@ -2,4 +2,5 @@ export * from './GameManager'
 export * from './GameBoard'
 export * from './GameOverlay'
 export * from './GameStartButton'
+export * from './GameNextTurnButton'
 export * from './GameScoreboard'
diff --git a/src/pages/GameEndPage.tsx b/src/pages/GameEndPage.tsx
@@ -3,12 +3,14 @@ import { Button } from '@/shared/ui/Button'
 
 export function GameEndPage() {
   return (
-    <main className="relative h-screen w-screen flex items-center justify-center">
-      <div className="flex flex-col items-center gap-16">
-        <div className="text-6xl font-medium text-slate-400">
-          Yay! All cats found! 😺
+    <main className="relative h-screen w-screen flex items-center justify-center p-8">
+      <div className="w-full flex flex-col items-center gap-16">
+        <div className="text-center text-2xl font-medium text-slate-400 sm:text-6xl">
+          Yay! 😺
+          <br />
+          All cats found!
         </div>
-        <GameScoreboard />
+        <GameScoreboard className="w-full" />
         <div className="flex flex-col gap-4">
           <GameStartButton>Play again</GameStartButton>
           <Button icon="i-lucide-settings" navigateTo="/" variant="secondary">
diff --git a/src/pages/GamePage.tsx b/src/pages/GamePage.tsx
@@ -2,6 +2,7 @@ import {
   GameBoard,
   GameManager,
   GameOverlay,
+  GameNextTurnButton,
   useAreCardsLoading,
 } from '@/modules/game'
 import { Loader } from '@/shared/ui/Loader'
@@ -10,7 +11,7 @@ export function GamePage() {
   const areCardsLoading = useAreCardsLoading()
 
   return (
-    <main className="relative h-screen w-screen flex items-center justify-center gap-4 p-12 landscape:p-28 xl:p-40">
+    <main className="relative h-[100dvh] w-auto flex items-center justify-center px-4 pb-16 pt-24 lg:px-12 sm:px-8 lg:pb-12 sm:pb-16 sm:pt-32">
       {areCardsLoading ? (
         <Loader>
           We're preparing <br />
@@ -20,7 +21,11 @@ export function GamePage() {
         <>
           <GameManager />
           <GameOverlay />
-          <GameBoard className="z-10" />
+
+          <div className="grid grid-cols-1 grid-rows-1 max-h-full w-full place-items-center gap-8 lg:justify-start">
+            <GameBoard className="z-10" />
+            <GameNextTurnButton className="z-10" />
+          </div>
         </>
       )}
     </main>
diff --git a/src/pages/GameSettingsPage.tsx b/src/pages/GameSettingsPage.tsx
@@ -6,7 +6,7 @@ import {
 
 export function GameSettingsPage() {
   return (
-    <main className="h-screen w-screen flex flex-col items-center justify-center gap-6">
+    <main className="h-[100dvh] w-screen flex flex-col items-center justify-center gap-6">
       <h1 className="mb-8 from-primary-300 to-primary-600 bg-gradient-to-r bg-clip-text text-6xl font-medium text-transparent">
         petmemo
       </h1>
diff --git a/src/shared/ui/Board.tsx b/src/shared/ui/Board.tsx
@@ -13,7 +13,7 @@ export const Board = ({ className, children }: BoardProps) => {
     <div
       className={clsx(
         className,
-        'grid h-full w-full content-center justify-center gap-8',
+        'grid h-full w-full content-center justify-center gap-2 sm:gap-4',
       )}
       style={{
         gridTemplateColumns: `repeat(${matrixSize}, minmax(0, max-content))`,
diff --git a/src/shared/ui/BoardCard.tsx b/src/shared/ui/BoardCard.tsx
@@ -30,21 +30,25 @@ export const BoardCard = ({
   }
 
   return (
-    <img
+    <div
       tabIndex={0}
-      src={imageUrl}
-      width={width}
-      height={height}
       className={clsx(
         className,
-        'rounded-xl object-cover border-slate-2 border-3 transition-shadow transition-opacity select-none aspect-square w-full h-full max-w-[250px]',
+        'rounded-xl object-cover border-slate-2 border-3 transition-shadow transition-opacity select-none aspect-square w-full h-full overflow-hidden',
         {
           'cursor-pointer hover:shadow-md': !isDisabled,
         },
       )}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      draggable={false}
-    />
+    >
+      <img
+        className="h-full w-full object-cover"
+        src={imageUrl}
+        width={width}
+        height={height}
+        draggable={false}
+      />
+    </div>
   )
 }
diff --git a/src/shared/ui/ImageStack.tsx b/src/shared/ui/ImageStack.tsx
@@ -25,7 +25,7 @@ export const ImageStack = ({
         <div
           key={`image-stack-${index}`}
           className={clsx(
-            'relative w-8 h-8 rounded border-2 select-none overflow-hidden',
+            'relative w-6 h-6 sm:w-8 sm:h-8 rounded border-2 select-none overflow-hidden',
             {
               '-ml-4 first:ml-0': !isReverse,
               '-mr-4 first:mr-0': isReverse,
@@ -38,7 +38,7 @@ export const ImageStack = ({
             draggable={false}
           />
           {withCount && index === images.length - 1 && (
-            <div className="text-md absolute inset-0 flex items-center justify-center font-bold text-white">
+            <div className="sm:text-md absolute inset-0 flex items-center justify-center text-sm font-bold text-white">
               {images.length}
             </div>
           )}
diff --git a/src/shared/ui/Scoreboard.tsx b/src/shared/ui/Scoreboard.tsx
@@ -1,6 +1,9 @@
+import clsx from 'clsx'
+
 import { ImageStack } from './ImageStack'
 
 type ScoreboardProps = {
+  className?: string
   items: Array<{
     name: string
     score: number
@@ -9,14 +12,23 @@ type ScoreboardProps = {
   itemScoreText: string
 }
 
-export const Scoreboard = ({ items, itemScoreText }: ScoreboardProps) => {
+export const Scoreboard = ({
+  className,
+  items,
+  itemScoreText,
+}: ScoreboardProps) => {
   const sortedItems = [...items].sort((a, b) => b.score - a.score)
 
   return (
-    <div className="flex flex-col gap-8">
+    <div
+      className={clsx(
+        className,
+        'grid gap-4 sm:gap-8 justify-center items-center',
+      )}
+    >
       {sortedItems.map((item, index) => (
-        <div className="relative flex items-center gap-6 text-2xl text-slate-700">
-          <div className="absolute left-[-4rem] text-5xl font-bold text-slate-200">
+        <div className="text-md relative flex items-center gap-6 text-slate-700 sm:text-2xl">
+          <div className="absolute left-[-2rem] text-2xl font-bold text-slate-200 sm:left-[-4rem] sm:text-5xl">
             {index + 1}.
           </div>
           <div className="flex items-center gap-2">

Original file line number	Diff line number	Diff line change
`@@ -8,13 +8,13 @@ export const GameOverlayMenu = () => {`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`return (`
`11`		`- <div className="z-1 flex self-start justify-self-center gap-4">`
	`11`	`+ <div className="z-20 flex self-start justify-self-center gap-4">`
`12`	`12`	`<button`
`13`		`- 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"`
	`13`	`+ className="group flex items-center gap-2 rounded-b from-slate-100 to-slate-200 bg-gradient-to-r p-2 text-slate-400 hover:from-slate-100 hover:to-slate-300 sm:p-4 hover:text-slate-500"`
`14`	`14`	`onClick={onExitClick}`
`15`	`15`	`>`
`16`	`16`	`<i className="i-lucide-door-closed group-hover:i-lucide-door-open block text-2xl" />`
`17`		`- Exit`
	`17`	`+ <span className="hidden sm:block">Exit</span>`
`18`	`18`	`</button>`
`19`	`19`	`</div>`
`20`	`20`	`)`