Better scaling on small devices

.firebase/hosting.ZGlzdA.cache

@@ -1,8 +1,12 @@
-index.html,1705225256081,6ef0d7e2de82bf64addbb9294fb28845fd06daaa544b010a47422c12ae3ad97f
-robots.txt,1705225255906,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-manifest.json,1705225255906,91ce94afb71f33a477f5d8d48c3f98bd7de422279c74f17b6500eec72003ac1a
-assets/index-08359bdb.css,1705225256081,d2766260d28230d960d75362810713efaddf40687205e697432b52869f162af7
-logo192.png,1705225255905,3b0fcf91fe2128f493de0bce2f6e2d35520a4260a04e05b8d855181359b3d3fe
-favicon.ico,1705225255905,75661e6187b524767554b4f28ec09a64bc72b0bb102a0b453aaead88519d9ed3
-logo512.png,1705225255906,cf49739c9e6890bbfcd4157f299dde425df60759b7320ae9188d7ab9dc51e8ca
-assets/index-20658f4b.js,1705225256081,742f2c10740beea3a23f269aa6266b3c288d1fd9c7e20b6829034e8a898bf1e1
+index.html,1711189442688,fa2549e32940c356ac5cee88c8db61076ad62fb4e599858c8e45cfc68cd901c4
+manifest.json,1711189442512,7ff5111aa04a42adff3b38924ec467b6f345ed0309dba1486dc9b783b60c2a9d
+registerSW.js,1711189442688,5b6445b5215737c53ef0d379c151d57de165a056de2d1c5812ed614f158ebcbd
+sw.js,1711189443521,9c09d33ea573bb818864bfad526fa911839637171773eca8e31905458679846d
+robots.txt,1711189442512,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+manifest.webmanifest,1711189442688,f2bf253209f6e292a6b0dbfa06fb4ac188eb5f2dba568c3ad5511b9ed52c1f51
+workbox-3e911b1d.js,1711189443521,d5dbc868a5c07af633d29de7ba3ffe37542aaaabdf33713b4298df31f92f11ff
+assets/index-WLCHZTqE.css,1711189442688,877e5ea9bfd3a1ca0e6449e8213da8a3c7717e530370f12669bb5c70dd21e700
+favicon.ico,1711189442511,8cefe5adbf00d337d8633fb744b9f2c4914f769b319be4bb7e184b7a4aa17160
+logo192.png,1711189442511,3d1e2e6f064d4fd325828f21bb6493ff0dbf2390b0e7d2aba9f2b6def4829799
+logo512.png,1711189442511,892a4da1cc5434929a83a71fcbcb0d0d80aa82f44e3c21e9b20ffe9267197133
+assets/index-OHs0lOr7.js,1711189442688,aa0dca732cd5b6f621ecb7c6dbcbfdbccde78941cfad954f6626d4ff83040c7f

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "commonjs",
   "engines": {
     "node": ">=18",

src/Components/Counters/ExtraCountersBar.tsx

@@ -21,9 +21,9 @@ const Container = twc.div<RotationDivProps>((props) => [
 ]);
 
 export const ExtraCountersGrid = twc.div<RotationDivProps>((props) => [
-  'flex absolute flex-row flex-grow pointer-events-none',
+  'flex absolute flex-row flex-grow pointer-events-none overflow-x-scroll overflow-y-hidden',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? 'flex-col-reverse h-full w-auto bottom-auto'
+    ? 'flex-col-reverse h-full w-auto bottom-auto right-0'
     : 'w-full bottom-0',
 ]);
 

src/Components/LifeCounter/LifeCounter.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import { twc } from 'react-twc';
 import { baseColors } from '../../../tailwind.config';
+import { useAnalytics } from '../../Hooks/useAnalytics';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { Cog } from '../../Icons/generated';
@@ -118,6 +119,9 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   const { settings, playing, setPlaying, stopPlayerRandomization } =
     useGlobalSettings();
   const playingTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const recentDifferenceTimerRef = useRef<NodeJS.Timeout | undefined>(
+    undefined
+  );
 
   const [showPlayerMenu, setShowPlayerMenu] = useState(false);
   const [recentDifference, setRecentDifference] = useState(0);
@@ -145,28 +149,41 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
     onSwiping: (e) => e.event.stopPropagation(),
     rotationAngle,
   });
+  const analytics = useAnalytics();
 
   useEffect(() => {
-    const timer = setTimeout(() => {
+    if (recentDifference === 0) {
+      clearTimeout(recentDifferenceTimerRef.current);
+      return;
+    }
+
+    recentDifferenceTimerRef.current = setTimeout(() => {
+      analytics.trackEvent('life_changed', {
+        lifeChangedAmount: recentDifference,
+      });
       setRecentDifference(0);
     }, RECENT_DIFFERENCE_TTL);
 
+    return () => {
+      clearTimeout(recentDifferenceTimerRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recentDifference]);
+
+  useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
       if (document.body.clientWidth > document.body.clientHeight)
         setIsLandscape(true);
       else setIsLandscape(false);
-      return;
+      return () => {
+        // Cleanup: disconnect the ResizeObserver when the component unmounts.
+        resizeObserver.disconnect();
+      };
     });
 
     resizeObserver.observe(document.body);
-
-    return () => {
-      clearTimeout(timer);
-      // Cleanup: disconnect the ResizeObserver when the component unmounts.
-      resizeObserver.disconnect();
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recentDifference, document.body.clientHeight, document.body.clientWidth]);
+  }, [document.body.clientHeight, document.body.clientWidth]);
 
   useEffect(() => {
     if (
@@ -216,6 +233,8 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
       ? player.settings.rotation - 180
       : player.settings.rotation;
 
+  const amountOfPlayers = opponents.length + 1;
+
   return (
     <LifeCounterContentWrapper style={{ background: player.color }}>
       <LifeCounterWrapper
@@ -223,45 +242,49 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
         style={{ rotate: `${calcRotation}deg` }}
         {...handlers}
       >
-        {!playing && settings.showStartingPlayer && player.isStartingPlayer && (
-          <div
-            className="z-20 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
-            style={{
-              rotate: `${calcRotation}deg`,
-              backgroundImage:
-                stopPlayerRandomization ||
-                !settings.useRandomStartingPlayerInterval
-                  ? `radial-gradient(circle at center, ${player.color}, ${baseColors.primary.main})`
-                  : 'none',
-            }}
-            onClick={() => {
-              clearTimeout(playingTimerRef.current);
-              setPlaying(true);
-            }}
-          >
-            <DynamicText
+        {amountOfPlayers > 1 &&
+          !playing &&
+          settings.showStartingPlayer &&
+          player.isStartingPlayer && (
+            <div
+              className="z-20 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
               style={{
-                rotate: `${calcTextRotation}deg`,
+                rotate: `${calcRotation}deg`,
+                backgroundImage:
+                  stopPlayerRandomization ||
+                  !settings.useRandomStartingPlayerInterval
+                    ? `radial-gradient(circle at center, ${player.color}, ${baseColors.primary.main})`
+                    : 'none',
+              }}
+              onClick={() => {
+                clearTimeout(playingTimerRef.current);
+                setPlaying(true);
               }}
             >
-              <div className="flex flex-col justify-center items-center">
-                <Paragraph>👑</Paragraph>
-                {(stopPlayerRandomization ||
-                  !settings.useRandomStartingPlayerInterval) && (
-                  <>
-                    <Paragraph>You start!</Paragraph>
-                    <Paragraph className="text-xl">(Press to hide)</Paragraph>
-                  </>
-                )}
-              </div>
-            </DynamicText>
-          </div>
-        )}
+              <DynamicText
+                style={{
+                  rotate: `${calcTextRotation}deg`,
+                }}
+              >
+                <div className="flex flex-col justify-center items-center">
+                  <Paragraph>👑</Paragraph>
+                  {(stopPlayerRandomization ||
+                    !settings.useRandomStartingPlayerInterval) && (
+                    <>
+                      <Paragraph>You start!</Paragraph>
+                      <Paragraph className="text-xl">(Press to hide)</Paragraph>
+                    </>
+                  )}
+                </div>
+              </DynamicText>
+            </div>
+          )}
 
         {player.hasLost && (
           <PlayerLostWrapper $rotation={player.settings.rotation} />
         )}
-        {settings.showStartingPlayer &&
+        {amountOfPlayers > 1 &&
+          settings.showStartingPlayer &&
           settings.useRandomStartingPlayerInterval &&
           !stopPlayerRandomization &&
           !playing && (

src/Components/Players/PlayerMenu.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox } from '@mui/material';
+import { Checkbox } from '@mui/material';
 import { useRef } from 'react';
 import { twc } from 'react-twc';
 import { theme } from '../../Data/theme';
@@ -19,8 +19,6 @@ import {
 import { Player, Rotation } from '../../Types/Player';
 import { RotationDivProps } from '../Buttons/CommanderDamage';
 
-const CheckboxContainer = twc.div``;
-
 const PlayerMenuWrapper = twc.div`
   flex
   flex-col
@@ -51,7 +49,6 @@ const TogglesSection = twc.div`
   flex-row
   flex-wrap
   relative
-  gap-2
   h-full
   justify-evenly
   items-center
@@ -60,11 +57,11 @@ const TogglesSection = twc.div`
 const ButtonsSections = twc.div`
   flex
   max-w-full
-  gap-4
-  justify-between
-  p-[3%]
+  justify-evenly
   items-center
   flex-wrap
+  mt-0
+  px-2
 `;
 
 const ColorPickerButton = twc.div`
@@ -79,7 +76,7 @@ const ColorPickerButton = twc.div`
 `;
 
 const SettingsContainer = twc.div<RotationDivProps>((props) => [
-  'flex flex-wrap h-full w-full',
+  'flex flex-wrap h-full w-full overflow-y-scroll',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
     ? 'flex-col'
     : 'flex-row',
@@ -98,6 +95,7 @@ const PlayerMenu = ({
 }: PlayerMenuProps) => {
   const settingsContainerRef = useRef<HTMLDivElement | null>(null);
   const resetGameDialogRef = useRef<HTMLDialogElement | null>(null);
+  const endGameDialogRef = useRef<HTMLDialogElement | null>(null);
 
   const { isSide } = useSafeRotate({
     rotation: player.settings.rotation,
@@ -112,6 +110,7 @@ const PlayerMenu = ({
     setPlaying,
     setStopPlayerRandomization,
   } = useGlobalSettings();
+
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -173,14 +172,13 @@ const PlayerMenu = ({
         }}
         ref={settingsContainerRef}
       >
-        {settings.showPlayerMenuCog && (
-          <button
-            onClick={() => setShowPlayerMenu(false)}
-            className="flex absolute top-0 right-2 z-10 w-8 h-8 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2"
-          >
-            <Cross size="16px" className="text-primary-main " />
-          </button>
-        )}
+        <button
+          onClick={() => setShowPlayerMenu(false)}
+          className="flex absolute top-0 right-2 z-10 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2 p-[0.2rem]"
+        >
+          <Cross size={buttonFontSize} className="text-primary-main " />
+        </button>
+
         <BetterRowContainer>
           <TogglesSection>
             <ColorPickerButton aria-label="Color picker">
@@ -192,7 +190,7 @@ const PlayerMenu = ({
               />
             </ColorPickerButton>
             {player.settings.useCommanderDamage && (
-              <CheckboxContainer>
+              <div>
                 <Checkbox
                   name="usePartner"
                   checked={player.settings.usePartner}
@@ -217,9 +215,9 @@ const PlayerMenu = ({
                   aria-checked={player.settings.usePartner}
                   aria-label="Partner"
                 />
-              </CheckboxContainer>
+              </div>
             )}
-            <CheckboxContainer>
+            <div>
               <Checkbox
                 name="usePoison"
                 checked={player.settings.usePoison}
@@ -244,8 +242,8 @@ const PlayerMenu = ({
                 aria-checked={player.settings.usePoison}
                 aria-label="Poison"
               />
-            </CheckboxContainer>
-            <CheckboxContainer>
+            </div>
+            <div>
               <Checkbox
                 name="useEnergy"
                 checked={player.settings.useEnergy}
@@ -270,8 +268,8 @@ const PlayerMenu = ({
                 aria-checked={player.settings.useEnergy}
                 aria-label="Energy"
               />
-            </CheckboxContainer>
-            <CheckboxContainer>
+            </div>
+            <div>
               <Checkbox
                 name="useExperience"
                 checked={player.settings.useExperience}
@@ -296,21 +294,22 @@ const PlayerMenu = ({
                 aria-checked={player.settings.useExperience}
                 aria-label="Experience"
               />
-            </CheckboxContainer>
+            </div>
           </TogglesSection>
-          <ButtonsSections className="mt-4">
-            <Button
-              variant="text"
-              style={{
-                cursor: 'pointer',
-                userSelect: 'none',
-              }}
-              onClick={handleGoToStart}
+          <ButtonsSections>
+            <button
+              className="text-primary-main cursor-pointer webkit-user-select-none"
+              onClick={() => endGameDialogRef.current?.show()}
               aria-label="Back to start"
             >
               <Exit size={iconSize} style={{ rotate: '180deg' }} />
-            </Button>
-            <CheckboxContainer>
+            </button>
+            <div
+              data-fullscreen={document.fullscreenElement ? true : false}
+              className="flex
+                data-[fullscreen=true]:bg-secondary-dark rounded-lg border border-transparent
+              data-[fullscreen=true]:border-primary-main"
+            >
               <Checkbox
                 name="fullscreen"
                 checked={document.fullscreenElement ? true : false}
@@ -325,65 +324,113 @@ const PlayerMenu = ({
                 role="checkbox"
                 aria-checked={document.fullscreenElement ? true : false}
                 aria-label="Fullscreen"
+                style={{ padding: '4px' }}
               />
-            </CheckboxContainer>
+            </div>
 
-            <Button
-              variant={wakeLock.active ? 'contained' : 'outlined'}
+            <button
+              data-wake-lock-active={settings.keepAwake}
               style={{
-                cursor: 'pointer',
-                userSelect: 'none',
                 fontSize: buttonFontSize,
-                padding: '0 4px 0 4px',
               }}
-              onClick={wakeLock.toggleWakeLock}
+              className="text-primary-main px-1 webkit-user-select-none cursor-pointer 
+              data-[wake-lock-active=false]:bg-secondary-dark rounded-lg border border-transparent
+              data-[wake-lock-active=false]:border-primary-main
+              "
+              onClick={() => {
+                wakeLock.toggleWakeLock();
+              }}
               role="checkbox"
-              aria-checked={wakeLock.active}
+              aria-checked={settings.keepAwake}
               aria-label="Keep awake"
             >
               Keep Awake
-            </Button>
+            </button>
 
-            <Button
+            <button
               style={{
                 cursor: 'pointer',
                 userSelect: 'none',
                 fontSize: buttonFontSize,
-                padding: '4px',
+                padding: '2px',
               }}
+              className="text-primary-main"
               onClick={() => resetGameDialogRef.current?.show()}
               role="checkbox"
-              aria-checked={wakeLock.active}
               aria-label="Reset Game"
             >
               <ResetGame size={iconSize} />
-            </Button>
+            </button>
           </ButtonsSections>
         </BetterRowContainer>
+
         <dialog
           ref={resetGameDialogRef}
-          className="z-[999] size-full bg-background-settings"
+          className="z-[999] size-full bg-background-settings overflow-y-scroll"
           onClick={() => resetGameDialogRef.current?.close()}
         >
           <div className="flex size-full items-center justify-center">
-            <div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-2xl border-none">
-              <h1 className="text-center text-text-primary">Reset Game?</h1>
-              <div className="flex justify-evenly gap-4">
-                <Button
-                  variant="contained"
+            <div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-xl border-none">
+              <h1
+                className="text-center text-text-primary"
+                style={{ fontSize: extraCountersSize }}
+              >
+                Reset Game?
+              </h1>
+              <div className="flex justify-evenly gap-2">
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
+                  style={{ fontSize: iconSize }}
                   onClick={() => resetGameDialogRef.current?.close()}
                 >
                   No
-                </Button>
-                <Button
-                  variant="contained"
+                </button>
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
                   onClick={() => {
                     handleResetGame();
                     resetGameDialogRef.current?.close();
                   }}
+                  style={{ fontSize: iconSize }}
                 >
                   Yes
-                </Button>
+                </button>
+              </div>
+            </div>
+          </div>
+        </dialog>
+
+        <dialog
+          ref={endGameDialogRef}
+          className="z-[999] size-full bg-background-settings overflow-y-scroll"
+          onClick={() => endGameDialogRef.current?.close()}
+        >
+          <div className="flex size-full items-center justify-center">
+            <div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-xl border-none">
+              <h1
+                className="text-center text-text-primary"
+                style={{ fontSize: extraCountersSize }}
+              >
+                End Game?
+              </h1>
+              <div className="flex justify-evenly gap-2">
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
+                  style={{ fontSize: iconSize }}
+                  onClick={() => endGameDialogRef.current?.close()}
+                >
+                  No
+                </button>
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
+                  onClick={() => {
+                    handleGoToStart();
+                    endGameDialogRef.current?.close();
+                  }}
+                  style={{ fontSize: iconSize }}
+                >
+                  Yes
+                </button>
               </div>
             </div>
           </div>

src/Components/Players/Players.tsx

@@ -42,6 +42,7 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
 
   useEffect(() => {
     if (
+      players.length > 1 &&
       settings.showStartingPlayer &&
       settings.useRandomStartingPlayerInterval &&
       !stopPlayerRandomization &&
@@ -101,14 +102,17 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
     stopPlayerRandomization,
   ]);
 
+  const gradientColors = players.map((player) => player.color).join(', ');
+
   return (
     <PlayersWrapper>
-      {settings.showStartingPlayer &&
+      {players.length > 1 &&
+        settings.showStartingPlayer &&
         settings.useRandomStartingPlayerInterval &&
         !stopPlayerRandomization &&
         !playing && (
           <div
-            className="absolute flex justify-center items-center bg-black bg-opacity-40 h-screen w-screen portrait:h-[100vw] portrait:w-[100vh] z-50 cursor-pointer text-5xl"
+            className="absolute flex justify-center items-center h-screen w-screen portrait:h-[100vw] portrait:w-[100vh] z-50 cursor-pointer text-5xl"
             onClick={() => {
               if (randomIntervalRef.current) {
                 clearInterval(randomIntervalRef.current);
@@ -117,8 +121,16 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
               setStopPlayerRandomization(true);
             }}
           >
-            <div className="bg-primary-main px-8 py-2 rounded-2xl opacity-70 text-[5vmax]">
-              PRESS TO SELECT PLAYER
+            <div className="absolute flex top-[30%] justify-center items-center px-8 py-4">
+              <div
+                className="absolute size-full blur-[3px] rounded-2xl opacity-90 saturate-150"
+                style={{
+                  backgroundImage: `linear-gradient(60deg, ${gradientColors})`,
+                }}
+              />
+              <p className="relative z-10 text-[5vmax]">
+                PRESS TO SELECT PLAYER
+              </p>
             </div>
           </div>
         )}

src/Components/Views/StartMenu/LayoutOptions.tsx

@@ -3,10 +3,12 @@ import React from 'react';
 import { theme } from '../../../Data/theme';
 import {
   FivePlayers,
+  FivePlayersSide,
   FourPlayers,
   FourPlayersSide,
   OnePlayerPortrait,
   SixPlayers,
+  SixPlayersSide,
   ThreePlayers,
   ThreePlayersSide,
   TwoPlayersOppositeLandscape,
@@ -303,20 +305,20 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               }
               label=""
             />
-            {/* <FormControlLabel
-              value={GridTemplateAreas.FivePlayersSide}
+            <FormControlLabel
+              value={Orientation.Portrait}
               control={
                 <Radio
                   icon={
                     <FivePlayersSide
-                                            height={iconHeight}
+                      height={iconHeight}
                       width={iconWidth}
                       fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <FivePlayersSide
-                                            height={iconHeight}
+                      height={iconHeight}
                       width={iconWidth}
                       fill={theme.palette.primary.main}
                     />
@@ -325,7 +327,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 />
               }
               label=""
-            /> */}
+            />
           </>
         );
 
@@ -356,20 +358,20 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               }
               label=""
             />
-            {/* <FormControlLabel
-              value={GridTemplateAreas.SixPlayersSide}
+            <FormControlLabel
+              value={Orientation.Portrait}
               control={
                 <Radio
                   icon={
                     <SixPlayersSide
-                                            height={iconHeight}
+                      height={iconHeight}
                       width={iconWidth}
                       fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <SixPlayersSide
-                                            height={iconHeight}
+                      height={iconHeight}
                       width={iconWidth}
                       fill={theme.palette.primary.main}
                     />
@@ -378,7 +380,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 />
               }
               label=""
-            /> */}
+            />
           </>
         );
 

src/Components/Views/StartMenu/StartMenu.tsx

@@ -262,18 +262,6 @@ const Start = () => {
           </ToggleButtonsWrapper>
 
           <FormLabel>Layout</FormLabel>
-          {/* <LayoutOptions
-          numberOfPlayers={playerOptions.numberOfPlayers}
-          gridAreas={playerOptions.gridAreas}
-          onChange={(gridAreas) =>
-            setPlayerOptions({
-              ...playerOptions,
-              gridAreas,
-              //TODO fix the layout selection
-              orientation: Orientation.Portrait,
-            })
-          }
-        /> */}
           <LayoutOptions
             numberOfPlayers={playerOptions.numberOfPlayers}
             selectedOrientation={playerOptions.orientation}

src/Data/getInitialPlayers.ts

@@ -127,15 +127,15 @@ const getOrientationRotations = (
         case Orientation.Portrait:
           switch (index) {
             case 0:
-              return Rotation.Side;
+              return Rotation.Flipped;
             case 1:
-              return Rotation.Side;
+              return Rotation.Flipped;
             case 2:
-              return Rotation.SideFlipped;
+              return Rotation.Side;
             case 3:
-              return Rotation.SideFlipped;
+              return Rotation.Normal;
             case 4:
-              return Rotation.SideFlipped;
+              return Rotation.Normal;
             default:
               return Rotation.Normal;
           }
@@ -163,17 +163,17 @@ const getOrientationRotations = (
         case Orientation.Portrait:
           switch (index) {
             case 0:
-              return Rotation.Side;
+              return Rotation.SideFlipped;
             case 1:
-              return Rotation.Side;
+              return Rotation.Flipped;
             case 2:
-              return Rotation.Side;
+              return Rotation.Flipped;
             case 3:
-              return Rotation.SideFlipped;
+              return Rotation.Side;
             case 4:
-              return Rotation.SideFlipped;
+              return Rotation.Normal;
             case 5:
-              return Rotation.SideFlipped;
+              return Rotation.Normal;
             default:
               return Rotation.Normal;
           }

src/Hooks/useAnalytics.ts

@@ -18,6 +18,11 @@ export const useAnalytics = () => {
     eventName: string,
     eventParams?: { [key: string]: unknown }
   ) => {
+    if (process.env.NODE_ENV === 'development') {
+      console.info('Event not tracked:', { eventName, eventParams });
+      return;
+    }
+
     logEvent(analytics, eventName, eventParams);
   };
 

src/Hooks/useOrientation.ts

@@ -23,7 +23,6 @@ export default function useOrientation(
     const onChange = () => {
       if (mounted) {
         const { orientation } = screen;
-        console.log(orientation);
 
         if (orientation) {
           const { angle, type } = orientation;

tailwind.config.ts

@@ -80,8 +80,8 @@ export default {
         ],
         sixPlayers: ['player0 player1 player2', 'player3 player4 player5'],
         sixPlayersSide: [
-          'player0 player1 player1 player1 player1 player2 player2 player2 player2 player3',
-          'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3',
+          'player0 player1 player1 player1 player1 player1 player1  player2 player2 player2 player2 player2 player2 player3',
+          'player0 player4 player4 player4 player4 player4 player4 player5 player5 player5 player5 player5 player5 player3',
         ],
       },
       colors: baseColors,