wake lock on by default

src/Components/Counters/CommanderDamageBar.tsx

@@ -37,7 +37,7 @@ const CommanderDamageBar = ({
   setLifeTotal,
 }: CommanderDamageBarProps) => {
   return (
-    <CommanderDamageGrid rotation={player.settings.rotation}>
+    <CommanderDamageGrid rotation={player.settings.rotation} key={player.key}>
       {opponents.map((opponent) => {
         if (!opponent.settings.useCommanderDamage) {
           return null;
@@ -48,6 +48,7 @@ const CommanderDamageBar = ({
             opponent={opponent}
             setLifeTotal={setLifeTotal}
             onPlayerChange={onPlayerChange}
+            key={opponent.key}
           />
         );
       })}

src/Components/LifeCounter/LifeCounter.tsx

@@ -10,12 +10,6 @@ import PlayerMenu from '../PlayerMenu/PlayerMenu';
 import Health from './Health';
 import { WakeLock } from '../../Types/WakeLock';
 
-const Lmao = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-`;
-
 const LifeCounterContentWrapper = styled.div<{
   backgroundColor: string;
 }>`
@@ -230,53 +224,52 @@ const LifeCounter = ({
 
   return (
     <LifeCounterContentWrapper backgroundColor={backgroundColor}>
-      <Lmao>
-        <LifeCounterWrapper rotation={player.settings.rotation}>
-          {player.isStartingPlayer && !showStartingPlayer && (
-            <PlayerNoticeWrapper
-              rotation={player.settings.rotation}
-              backgroundColor={theme.palette.primary.main}
-            >
-              <DynamicText rotation={player.settings.rotation}>
-                You start!
-              </DynamicText>
-            </PlayerNoticeWrapper>
-          )}
+      <LifeCounterWrapper rotation={player.settings.rotation}>
+        {player.isStartingPlayer && !showStartingPlayer && (
+          <PlayerNoticeWrapper
+            rotation={player.settings.rotation}
+            backgroundColor={theme.palette.primary.main}
+          >
+            <DynamicText rotation={player.settings.rotation}>
+              You start!
+            </DynamicText>
+          </PlayerNoticeWrapper>
+        )}
 
-          {player.hasLost && (
-            <PlayerNoticeWrapper
-              rotation={player.settings.rotation}
-              backgroundColor={'#00000070'}
-            />
-          )}
-          <CommanderDamageBar
-            opponents={opponents}
-            player={player}
-            onPlayerChange={onPlayerChange}
-            setLifeTotal={handleLifeChange}
-          />
-          <SettingsButton
-            onClick={() => {
-              setShowPlayerMenu(!showPlayerMenu);
-            }}
+        {player.hasLost && (
+          <PlayerNoticeWrapper
             rotation={player.settings.rotation}
+            backgroundColor={'#00000070'}
           />
-          {playerCanLose(player) && (
-            <LoseGameButton
-              rotation={player.settings.rotation}
-              onClick={toggleGameLost}
-            />
-          )}
-          <Health
-            player={player}
-            onPlayerChange={onPlayerChange}
-            differenceKey={differenceKey}
-            setDifferenceKey={setDifferenceKey}
+        )}
+        <CommanderDamageBar
+          opponents={opponents}
+          player={player}
+          onPlayerChange={onPlayerChange}
+          setLifeTotal={handleLifeChange}
+        />
+        <SettingsButton
+          onClick={() => {
+            setShowPlayerMenu(!showPlayerMenu);
+          }}
+          rotation={player.settings.rotation}
+        />
+        {playerCanLose(player) && (
+          <LoseGameButton
             rotation={player.settings.rotation}
+            onClick={toggleGameLost}
           />
-          <ExtraCountersBar player={player} onPlayerChange={onPlayerChange} />
-        </LifeCounterWrapper>
-      </Lmao>
+        )}
+        <Health
+          player={player}
+          onPlayerChange={onPlayerChange}
+          differenceKey={differenceKey}
+          setDifferenceKey={setDifferenceKey}
+          rotation={player.settings.rotation}
+        />
+        <ExtraCountersBar player={player} onPlayerChange={onPlayerChange} />
+      </LifeCounterWrapper>
+
       {showPlayerMenu && (
         <PlayerMenu
           player={player}

src/Components/Misc/Spacer.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Spacer = styled.div<{ width?: string; height?: string }>`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+`;

src/Components/PlayerMenu/Settings.tsx

@@ -195,7 +195,7 @@ const Settings = ({
                   size="6vmax"
                   color="black"
                   stroke="white"
-                  stroke-width="30"
+                  strokeWidth="30"
                 />
               }
               checkedIcon={
@@ -203,7 +203,7 @@ const Settings = ({
                   size="6vmax"
                   color={player.color}
                   stroke="white"
-                  stroke-width="30"
+                  strokeWidth="30"
                 />
               }
               onChange={handleSettingsChange}
@@ -220,7 +220,7 @@ const Settings = ({
                 size="6vmax"
                 color="black"
                 stroke="white"
-                stroke-width="30"
+                strokeWidth="30"
               />
             }
             checkedIcon={
@@ -228,7 +228,7 @@ const Settings = ({
                 size="6vmax"
                 color={player.color}
                 stroke="white"
-                stroke-width="30"
+                strokeWidth="30"
               />
             }
             onChange={handleSettingsChange}
@@ -244,7 +244,7 @@ const Settings = ({
                 size="6vmax"
                 color="black"
                 stroke="white"
-                stroke-width="15"
+                strokeWidth="15"
               />
             }
             checkedIcon={
@@ -252,7 +252,7 @@ const Settings = ({
                 size="6vmax"
                 color={player.color}
                 stroke="white"
-                stroke-width="15"
+                strokeWidth="15"
               />
             }
             onChange={handleSettingsChange}
@@ -268,7 +268,7 @@ const Settings = ({
                 size="6vmax"
                 color="black"
                 stroke="white"
-                stroke-width="15"
+                strokeWidth="15"
               />
             }
             checkedIcon={
@@ -276,7 +276,7 @@ const Settings = ({
                 size="6vmax"
                 color={player.color}
                 stroke="white"
-                stroke-width="15"
+                strokeWidth="15"
               />
             }
             onChange={handleSettingsChange}

src/Components/Views/StartMenu/LayoutOptions.tsx

@@ -34,7 +34,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
   gridAreas,
   onChange,
 }) => {
-  const iconHeight = '33vmin';
+  const iconHeight = '30vmin';
   const iconWidth = '20vmin';
 
   const renderLayoutOptions = () => {
@@ -94,18 +94,18 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
         return (
           <>
             <FormControlLabel
-              value={GridTemplateAreas.TwoPlayersOppositeLandscape}
+              value={GridTemplateAreas.TwoPlayersSameSide}
               control={
                 <Radio
                   icon={
-                    <TwoPlayersOppositeLandscape
+                    <TwoPlayersSameSide
                       height={iconHeight}
                       width={iconWidth}
                       fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
-                    <TwoPlayersOppositeLandscape
+                    <TwoPlayersSameSide
                       height={iconHeight}
                       width={iconWidth}
                       fill={theme.palette.primary.main}
@@ -140,18 +140,18 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               label=""
             />
             <FormControlLabel
-              value={GridTemplateAreas.TwoPlayersSameSide}
+              value={GridTemplateAreas.TwoPlayersOppositeLandscape}
               control={
                 <Radio
                   icon={
-                    <TwoPlayersSameSide
+                    <TwoPlayersOppositeLandscape
                       height={iconHeight}
                       width={iconWidth}
                       fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
-                    <TwoPlayersSameSide
+                    <TwoPlayersOppositeLandscape
                       height={iconHeight}
                       width={iconWidth}
                       fill={theme.palette.primary.main}

src/Components/Views/StartMenu/StartMenu.tsx

@@ -17,17 +17,16 @@ import { SupportMe } from '../../Misc/SupportMe';
 import { H2, Paragraph } from '../../Misc/TextComponents';
 import LayoutOptions from './LayoutOptions';
 import { useFullscreen } from '../../../Hooks/useFullscreen';
+import { Spacer } from '../../Misc/Spacer';
 
 const MainWrapper = styled.div`
-  width: 100vw;
-  height: 100vh;
+  width: 100dvw;
+  height: fit-content;
   padding-bottom: 58px;
   overflow: hidden;
   align-items: center;
-  justify-content: center;
   display: flex;
   flex-direction: column;
-  height: fit-content;
 `;
 
 const StartButtonFooter = styled.div`
@@ -36,6 +35,18 @@ const StartButtonFooter = styled.div`
   translate: -50%, -50%;
 `;
 
+const ToggleButtonsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+`;
+
+const ToggleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const playerMarks = [
   {
     value: 1,
@@ -109,15 +120,25 @@ const Start = ({
       gridAreas: GridTemplateAreas.FourPlayers,
     }
   );
+  const [wakeLockActive, setWakeLockActive] = useState(true);
 
   const { enableFullscreen } = useFullscreen();
 
-  const toggleWakeLock = ({ active }: { active: boolean }) => {
-    if (active) {
+  const toggleWakeLock = () => {
+    console.log(wakeLock.active, wakeLockActive);
+    if (wakeLock.active && wakeLockActive) {
       wakeLock.release();
-    } else {
-      wakeLock.request();
+      setWakeLockActive(false);
+      return;
     }
+
+    if (!wakeLock.active && !wakeLockActive) {
+      wakeLock.request();
+      setWakeLockActive(true);
+      return;
+    }
+
+    setWakeLockActive(wakeLock.active);
   };
 
   const doStartGame = () => {
@@ -127,6 +148,11 @@ const Start = ({
 
     analytics.trackEvent('game_started', { ...initialGameSettings });
 
+    if (!wakeLock.active && wakeLockActive) {
+      console.log('yo');
+      wakeLock.request();
+    }
+
     try {
       enableFullscreen();
     } catch (error) {
@@ -150,7 +176,7 @@ const Start = ({
       case 1:
         return GridTemplateAreas.OnePlayerLandscape;
       case 2:
-        return GridTemplateAreas.TwoPlayersOppositeLandscape;
+        return GridTemplateAreas.TwoPlayersSameSide;
       case 3:
         return GridTemplateAreas.ThreePlayers;
       case 4:
@@ -203,7 +229,7 @@ const Start = ({
           max={6}
           min={1}
           aria-label="Custom marks"
-          defaultValue={initialGameSettings?.numberOfPlayers ?? 4}
+          value={playerOptions?.numberOfPlayers ?? 4}
           getAriaValueText={valuetext}
           step={null}
           marks={playerMarks}
@@ -220,7 +246,7 @@ const Start = ({
           max={60}
           min={20}
           aria-label="Custom marks"
-          defaultValue={initialGameSettings?.startingLifeTotal ?? 40}
+          value={playerOptions?.startingLifeTotal ?? 40}
           getAriaValueText={valuetext}
           step={10}
           marks={healthMarks}
@@ -231,26 +257,46 @@ const Start = ({
             })
           }
         />
-        <FormLabel>Commander</FormLabel>
-        <Switch
-          checked={playerOptions.useCommanderDamage}
-          defaultChecked={initialGameSettings?.useCommanderDamage ?? true}
-          onChange={(_e, value) =>
-            setPlayerOptions({
-              ...playerOptions,
-              useCommanderDamage: value,
-            })
-          }
-        />
-        <FormLabel>Keep Awake</FormLabel>
-        <Switch
-          checked={wakeLock.active}
-          defaultChecked={wakeLock.active}
-          onChange={() => toggleWakeLock({ active: wakeLock.active })}
-        />
+
+        <ToggleButtonsWrapper>
+          <ToggleContainer>
+            <FormLabel>Commander</FormLabel>
+            <Switch
+              checked={
+                playerOptions.useCommanderDamage ??
+                initialGameSettings?.useCommanderDamage ??
+                true
+              }
+              onChange={(_e, value) => {
+                if (value) {
+                  setPlayerOptions({
+                    ...playerOptions,
+                    useCommanderDamage: value,
+                    numberOfPlayers: 4,
+                    startingLifeTotal: 40,
+                  });
+                  return;
+                }
+                setPlayerOptions({
+                  ...playerOptions,
+                  useCommanderDamage: value,
+                  numberOfPlayers: 2,
+                  startingLifeTotal: 20,
+                });
+              }}
+            />
+          </ToggleContainer>
+          <Spacer width="2rem" />
+          <ToggleContainer>
+            <FormLabel>Keep Awake</FormLabel>
+            <Switch
+              checked={wakeLockActive}
+              onChange={() => toggleWakeLock()}
+            />
+          </ToggleContainer>
+        </ToggleButtonsWrapper>
 
         <FormLabel>Layout</FormLabel>
-
         <LayoutOptions
           numberOfPlayers={playerOptions.numberOfPlayers}
           gridAreas={playerOptions.gridAreas}