diff --git a/src/Components/Counters/CommanderDamageBar.tsx b/src/Components/Counters/CommanderDamageBar.tsx index f0e1cd7..dcbf07c 100644 --- a/src/Components/Counters/CommanderDamageBar.tsx +++ b/src/Components/Counters/CommanderDamageBar.tsx @@ -37,7 +37,7 @@ const CommanderDamageBar = ({ setLifeTotal, }: CommanderDamageBarProps) => { return ( - + {opponents.map((opponent) => { if (!opponent.settings.useCommanderDamage) { return null; @@ -48,6 +48,7 @@ const CommanderDamageBar = ({ opponent={opponent} setLifeTotal={setLifeTotal} onPlayerChange={onPlayerChange} + key={opponent.key} /> ); })} diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 8b5f5e0..5c8901d 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/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 ( - - - {player.isStartingPlayer && !showStartingPlayer && ( - - - You start! - - - )} + + {player.isStartingPlayer && !showStartingPlayer && ( + + + You start! + + + )} - {player.hasLost && ( - - )} - - { - setShowPlayerMenu(!showPlayerMenu); - }} + {player.hasLost && ( + - {playerCanLose(player) && ( - - )} - + { + setShowPlayerMenu(!showPlayerMenu); + }} + rotation={player.settings.rotation} + /> + {playerCanLose(player) && ( + - - - + )} + + + + {showPlayerMenu && ( ` + width: ${(props) => props.width}; + height: ${(props) => props.height}; +`; diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx index c4e0117..ef5bb78 100644 --- a/src/Components/PlayerMenu/Settings.tsx +++ b/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} diff --git a/src/Components/Views/StartMenu/LayoutOptions.tsx b/src/Components/Views/StartMenu/LayoutOptions.tsx index c3420f8..c73c529 100644 --- a/src/Components/Views/StartMenu/LayoutOptions.tsx +++ b/src/Components/Views/StartMenu/LayoutOptions.tsx @@ -34,7 +34,7 @@ const LayoutOptions: React.FC = ({ gridAreas, onChange, }) => { - const iconHeight = '33vmin'; + const iconHeight = '30vmin'; const iconWidth = '20vmin'; const renderLayoutOptions = () => { @@ -94,18 +94,18 @@ const LayoutOptions: React.FC = ({ return ( <> } checkedIcon={ - = ({ label="" /> } checkedIcon={ - { - 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 = ({ }) } /> - Commander - - setPlayerOptions({ - ...playerOptions, - useCommanderDamage: value, - }) - } - /> - Keep Awake - toggleWakeLock({ active: wakeLock.active })} - /> + + + + Commander + { + if (value) { + setPlayerOptions({ + ...playerOptions, + useCommanderDamage: value, + numberOfPlayers: 4, + startingLifeTotal: 40, + }); + return; + } + setPlayerOptions({ + ...playerOptions, + useCommanderDamage: value, + numberOfPlayers: 2, + startingLifeTotal: 20, + }); + }} + /> + + + + Keep Awake + toggleWakeLock()} + /> + + Layout -