fix keep away state

fix keep awake toggle and layout styling
Better scaling on small devices
2024-03-23 16:23:03 +01:00 · 2024-03-23 16:22:48 +01:00 · 2024-03-23 16:05:29 +01:00 · 2024-03-23 12:39:07 +01:00 · 2024-03-23 11:24:14 +01:00 · 2024-03-23 11:23:46 +01:00
12 changed files with 255 additions and 154 deletions
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.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
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "life-trinket",
  "private": true,
-  "version": "0.6.9",
+  "version": "0.8.1",
  "type": "commonjs",
  "engines": {
    "node": ">=18",
--- a/src/Components/Counters/ExtraCountersBar.tsx
+++ b/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',
 ]);

--- a/src/Components/LifeCounter/LifeCounter.tsx
+++ b/src/Components/LifeCounter/LifeCounter.tsx
@@ -1,10 +1,13 @@
 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';
 import { Player, Rotation } from '../../Types/Player';
+import { checkContrast } from '../../Utils/checkContrast';
 import {
  RotationButtonProps,
  RotationDivProps,
@@ -15,7 +18,6 @@ import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import { Paragraph } from '../Misc/TextComponents';
 import PlayerMenu from '../Players/PlayerMenu';
 import Health from './Health';
-import { baseColors } from '../../../tailwind.config';

 const SettingsButtonTwc = twc.button<RotationButtonProps>((props) => [
  'absolute flex-grow border-none outline-none cursor-pointer bg-transparent z-[1] select-none  webkit-user-select-none',
@@ -27,16 +29,33 @@ const SettingsButtonTwc = twc.button<RotationButtonProps>((props) => [
 type SettingsButtonProps = {
  onClick: () => void;
  rotation: Rotation;
+  color: string;
 };

-const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
+const SettingsButton = ({ onClick, rotation, color }: SettingsButtonProps) => {
+  const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark');
+
+  useEffect(() => {
+    const contrast = checkContrast(color, '#00000080');
+
+    if (contrast === 'Fail') {
+      setIconColor('light');
+    } else {
+      setIconColor('dark');
+    }
+  }, [color]);
+
  return (
    <SettingsButtonTwc
      onClick={onClick}
      $rotation={rotation}
      aria-label={`Settings`}
    >
-      <Cog size="5vmin" color="black" opacity="0.3" />
+      <Cog
+        size="5vmin"
+        data-contrast={iconColor}
+        className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+      />
    </SettingsButtonTwc>
  );
 };
@@ -100,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);
@@ -127,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 (
@@ -198,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
@@ -205,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 && (
@@ -264,6 +305,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
              setShowPlayerMenu(!showPlayerMenu);
            }}
            rotation={player.settings.rotation}
+            color={player.color}
          />
        )}
        {playerCanLose(player) && (
--- a/src/Components/Players/PlayerMenu.tsx
+++ b/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=true]:bg-secondary-dark rounded-lg border border-transparent
+              data-[wake-lock-active=true]: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>
--- a/src/Components/Players/Players.tsx
+++ b/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>
        )}
--- a/src/Components/Views/StartMenu/LayoutOptions.tsx
+++ b/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,
@@ -40,7 +42,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
    switch (numberOfPlayers) {
      case 1:
        return (
-          <div>
+          <>
            <FormControlLabel
              value={Orientation.Landscape}
              control={
@@ -89,7 +91,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              }
              label=""
            />
-          </div>
+          </>
        );
      case 2:
        return (
@@ -303,20 +305,21 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              }
              label=""
            />
-            {/* <FormControlLabel
-              value={GridTemplateAreas.FivePlayersSide}
+            <FormControlLabel
+              value={Orientation.Portrait}
              control={
                <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                  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 +328,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                />
              }
              label=""
-            /> */}
+            />
          </>
        );

@@ -356,20 +359,21 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              }
              label=""
            />
-            {/* <FormControlLabel
-              value={GridTemplateAreas.SixPlayersSide}
+            <FormControlLabel
+              value={Orientation.Portrait}
              control={
                <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                  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 +382,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                />
              }
              label=""
-            /> */}
+            />
          </>
        );

--- a/src/Components/Views/StartMenu/StartMenu.tsx
+++ b/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}
--- a/src/Data/getInitialPlayers.ts
+++ b/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;
          }
--- a/src/Hooks/useAnalytics.ts
+++ b/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);
  };

--- a/src/Hooks/useOrientation.ts
+++ b/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;
--- a/tailwind.config.ts
+++ b/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,
Author	SHA1	Message	Date
Viktor Rådberg	fa5829b402	fix keep away state	2024-03-23 16:23:03 +01:00
Viktor Rådberg	71f26d0dc5	fix keep awake toggle and layout styling	2024-03-23 16:22:48 +01:00
Viktor Rådberg	3a568fc3ab	Better scaling on small devices	2024-03-23 16:05:29 +01:00
Viktor Rådberg	355f4bd4cd	track only on prod, and add life changed amount tracking	2024-03-23 12:39:07 +01:00
Viktor Rådberg	17e174bfe1	new deploy	2024-03-23 11:24:14 +01:00
Viktor Rådberg	e1e8da858b	remove prod check	2024-03-23 11:23:46 +01:00
Viktor Rådberg	e02f071415	new deploy	2024-03-23 11:23:06 +01:00
Viktor Rådberg	e04f31bb67	prod log	2024-03-23 11:22:12 +01:00
Viktor Rådberg	e5386d08a4	fix settings cog color	2024-03-17 19:01:15 +01:00