external-repos/LifeTrinket
1
0
Fork 1
mirror of https://github.com/Vikeo/LifeTrinket.git synced 2025-11-17 00:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix errors and warnings

Browse Source
This commit is contained in:
Viktor Rådberg
2023-09-18 11:33:30 +02:00
parent 4230032d6f
commit de30682597
16 changed files with 144 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

44
src/Components/Buttons/CommanderDamage.tsx
View File

@@ -6,7 +6,7 @@ import { OutlinedText } from '../Misc/OutlinedText';
import { decrementTimeoutMs } from '../../Data/constants'; import { decrementTimeoutMs } from '../../Data/constants';
const CommanderDamageContainer = styled.div<{ const CommanderDamageContainer = styled.div<{
rotation: number; $rotation: number;
}>` }>`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -15,8 +15,8 @@ const CommanderDamageContainer = styled.div<{
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
flex-direction: column; flex-direction: column;
@@ -26,8 +26,8 @@ const CommanderDamageContainer = styled.div<{
`; `;
const CommanderDamageButton = styled.button<{ const CommanderDamageButton = styled.button<{
backgroundColor?: string; $backgroundColor?: string;
rotation: number; $rotation: number;
}>` }>`
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
@@ -36,7 +36,7 @@ const CommanderDamageButton = styled.button<{
width: 50%; width: 50%;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
background-color: ${(props) => props.backgroundColor || 'antiquewhite'}; background-color: ${(props) => props.$backgroundColor || 'antiquewhite'};
margin: 0; margin: 0;
user-select: none; user-select: none;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@@ -47,8 +47,8 @@ const CommanderDamageButton = styled.button<{
padding: 0; padding: 0;
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
width: 6vmax; width: 6vmax;
@@ -59,7 +59,7 @@ const CommanderDamageButton = styled.button<{
`; `;
const CommanderDamageTextContainer = styled.div<{ const CommanderDamageTextContainer = styled.div<{
rotation: number; $rotation: number;
}>` }>`
position: relative; position: relative;
top: 50%; top: 50%;
@@ -76,8 +76,8 @@ const CommanderDamageTextContainer = styled.div<{
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
rotate: 270deg; rotate: 270deg;
@@ -87,15 +87,15 @@ const CommanderDamageTextContainer = styled.div<{
`; `;
const PartnerDamageSeperator = styled.div<{ const PartnerDamageSeperator = styled.div<{
rotation: number; $rotation: number;
}>` }>`
width: 1px; width: 1px;
background-color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 1);
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
width: auto; width: auto;
@@ -200,11 +200,11 @@ export const CommanderDamage = ({
return ( return (
<CommanderDamageContainer <CommanderDamageContainer
key={opponentIndex} key={opponentIndex}
rotation={player.settings.rotation} $rotation={player.settings.rotation}
> >
<CommanderDamageButton <CommanderDamageButton
key={opponentIndex} key={opponentIndex}
rotation={player.settings.rotation} $rotation={player.settings.rotation}
onPointerDown={() => onPointerDown={() =>
handleDownInput({ opponentIndex, isPartner: false }) handleDownInput({ opponentIndex, isPartner: false })
} }
@@ -213,9 +213,9 @@ export const CommanderDamage = ({
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault(); e.preventDefault();
}} }}
backgroundColor={opponent.color} $backgroundColor={opponent.color}
> >
<CommanderDamageTextContainer rotation={player.settings.rotation}> <CommanderDamageTextContainer $rotation={player.settings.rotation}>
<OutlinedText <OutlinedText
fontSize={fontSize} fontSize={fontSize}
fontWeight={fontWeight} fontWeight={fontWeight}
@@ -230,10 +230,10 @@ export const CommanderDamage = ({
{opponent.settings.usePartner && ( {opponent.settings.usePartner && (
<> <>
<PartnerDamageSeperator rotation={player.settings.rotation} /> <PartnerDamageSeperator $rotation={player.settings.rotation} />
<CommanderDamageButton <CommanderDamageButton
key={opponentIndex} key={opponentIndex}
rotation={player.settings.rotation} $rotation={player.settings.rotation}
onPointerDown={() => onPointerDown={() =>
handleDownInput({ opponentIndex, isPartner: true }) handleDownInput({ opponentIndex, isPartner: true })
} }
@@ -246,9 +246,9 @@ export const CommanderDamage = ({
) => { ) => {
e.preventDefault(); e.preventDefault();
}} }}
backgroundColor={opponent.color} $backgroundColor={opponent.color}
> >
<CommanderDamageTextContainer rotation={player.settings.rotation}> <CommanderDamageTextContainer $rotation={player.settings.rotation}>
<OutlinedText <OutlinedText
fontSize={fontSize} fontSize={fontSize}
fontWeight={fontWeight} fontWeight={fontWeight}

8
src/Components/Buttons/ExtraCounter.tsx
View File

@@ -30,14 +30,14 @@ export const StyledExtraCounterButton = styled.button`
`; `;
const IconContainer = styled.div<{ const IconContainer = styled.div<{
rotation: number; $rotation: number;
}>` }>`
width: auto; width: auto;
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
rotate: -90deg; rotate: -90deg;
@@ -121,7 +121,7 @@ const ExtraCounter = ({
e.preventDefault(); e.preventDefault();
}} }}
> >
<IconContainer rotation={rotation}> <IconContainer $rotation={rotation}>
{Icon} {Icon}
<TextContainer> <TextContainer>
<OutlinedText <OutlinedText

16
src/Components/Buttons/LifeCounterButton.tsx
View File

@@ -26,17 +26,17 @@ export const StyledLifeCounterButton = styled.button`
`; `;
const TextContainer = styled.div<{ const TextContainer = styled.div<{
align?: string; $align?: string;
rotation: number; $rotation: number;
}>` }>`
position: relative; position: relative;
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
if (props.align === 'right') { if (props.$align === 'right') {
return css` return css`
rotate: -90deg; rotate: -90deg;
bottom: 25%; bottom: 25%;
@@ -49,7 +49,7 @@ const TextContainer = styled.div<{
`; `;
} }
if (props.align === 'right') { if (props.$align === 'right') {
return css` return css`
left: 25%; left: 25%;
`; `;
@@ -123,8 +123,8 @@ const LifeCounterButton = ({
style={{ fontSize }} style={{ fontSize }}
> >
<TextContainer <TextContainer
rotation={rotation} $rotation={rotation}
align={operation === 'add' ? 'right' : 'left'} $align={operation === 'add' ? 'right' : 'left'}
> >
{operation === 'add' ? '\u002B' : '\u2212'} {operation === 'add' ? '\u002B' : '\u2212'}
</TextContainer> </TextContainer>

12
src/Components/Buttons/LoseButton.tsx
View File

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
import { Skull } from '../../Icons/generated'; import { Skull } from '../../Icons/generated';
import { Rotation } from '../../Types/Player'; import { Rotation } from '../../Types/Player';
export const LoseButton = styled.button<{ rotation: Rotation }>` export const LoseButton = styled.button<{ $rotation: Rotation }>`
position: absolute; position: absolute;
flex-grow: 1; flex-grow: 1;
border: none; border: none;
@@ -21,19 +21,19 @@ export const LoseButton = styled.button<{ rotation: Rotation }>`
z-index: 1; z-index: 1;
${(props) => { ${(props) => {
if (props.rotation === Rotation.SideFlipped) { if (props.$rotation === Rotation.SideFlipped) {
return css` return css`
right: auto; right: auto;
top: 15%; top: 15%;
left: 27%; left: 27%;
rotate: ${props.rotation}deg; rotate: ${props.$rotation}deg;
`; `;
} else if (props.rotation === Rotation.Side) { } else if (props.$rotation === Rotation.Side) {
return css` return css`
right: auto; right: auto;
top: 15%; top: 15%;
left: 27%; left: 27%;
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
`; `;
} }
}} }}
@@ -46,7 +46,7 @@ type LoseButtonProps = {
export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => { export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
return ( return (
<LoseButton rotation={rotation} onClick={onClick}> <LoseButton $rotation={rotation} onClick={onClick}>
<Skull size="5vmin" color="black" opacity={0.5} /> <Skull size="5vmin" color="black" opacity={0.5} />
</LoseButton> </LoseButton>
); );

10
src/Components/Buttons/SettingsButton.tsx
View File

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
import { Rotation } from '../../Types/Player'; import { Rotation } from '../../Types/Player';
import { Cog } from '../../Icons/generated'; import { Cog } from '../../Icons/generated';
export const StyledSettingsButton = styled.button<{ rotation: number }>` export const StyledSettingsButton = styled.button<{ $rotation: Rotation }>`
position: absolute; position: absolute;
flex-grow: 1; flex-grow: 1;
border: none; border: none;
@@ -21,8 +21,8 @@ export const StyledSettingsButton = styled.button<{ rotation: number }>`
z-index: 1; z-index: 1;
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.Side || props.$rotation === Rotation.Side ||
props.rotation === Rotation.SideFlipped props.$rotation === Rotation.SideFlipped
) { ) {
return css` return css`
right: auto; right: auto;
@@ -35,12 +35,12 @@ export const StyledSettingsButton = styled.button<{ rotation: number }>`
type SettingsButtonProps = { type SettingsButtonProps = {
onClick: () => void; onClick: () => void;
rotation: number; rotation: Rotation;
}; };
const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => { const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
return ( return (
<StyledSettingsButton onClick={onClick} rotation={rotation}> <StyledSettingsButton onClick={onClick} $rotation={rotation}>
<Cog size="5vmin" color="black" opacity="0.3" /> <Cog size="5vmin" color="black" opacity="0.3" />
</StyledSettingsButton> </StyledSettingsButton>
); );

13
src/Components/Counters/CommanderDamageBar.tsx
View File

@@ -3,7 +3,7 @@ import styled from 'styled-components';
import { css } from 'styled-components'; import { css } from 'styled-components';
import { CommanderDamage } from '../Buttons/CommanderDamage'; import { CommanderDamage } from '../Buttons/CommanderDamage';
const CommanderDamageGrid = styled.div<{ rotation: number }>` const CommanderDamageGrid = styled.div<{ $rotation: number }>`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 1; flex-grow: 1;
@@ -11,8 +11,8 @@ const CommanderDamageGrid = styled.div<{ rotation: number }>`
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
flex-direction: column; flex-direction: column;
@@ -37,7 +37,10 @@ const CommanderDamageBar = ({
setLifeTotal, setLifeTotal,
}: CommanderDamageBarProps) => { }: CommanderDamageBarProps) => {
return ( return (
<CommanderDamageGrid rotation={player.settings.rotation} key={player.key}> <CommanderDamageGrid
$rotation={player.settings.rotation}
key={player.index}
>
{opponents.map((opponent) => { {opponents.map((opponent) => {
if (!opponent.settings.useCommanderDamage) { if (!opponent.settings.useCommanderDamage) {
return null; return null;
@@ -48,7 +51,7 @@ const CommanderDamageBar = ({
opponent={opponent} opponent={opponent}
setLifeTotal={setLifeTotal} setLifeTotal={setLifeTotal}
onPlayerChange={onPlayerChange} onPlayerChange={onPlayerChange}
key={opponent.key} key={opponent.index}
/> />
); );
})} })}

12
src/Components/Counters/Counters.tsx
View File

@@ -9,23 +9,23 @@ export const CountersWrapper = styled.div`
background-color: black; background-color: black;
`; `;
export const CountersGrid = styled.div<{ gridTemplateAreas: string }>` export const CountersGrid = styled.div<{ $gridTemplateAreas: string }>`
display: grid; display: grid;
gap: 4px; gap: 4px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
grid-template-areas: ${({ gridTemplateAreas }) => gridTemplateAreas}; grid-template-areas: ${({ $gridTemplateAreas }) => $gridTemplateAreas};
`; `;
export const GridItemContainer = styled.div<{ export const GridItemContainer = styled.div<{
gridArea: string; $gridArea: string;
}>` }>`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
grid-area: ${(props) => props.gridArea}; grid-area: ${(props) => props.$gridArea};
`; `;
export const SettingsButtonContainer = styled.div` export const SettingsButtonContainer = styled.div`
@@ -53,12 +53,12 @@ const Counters = ({
}: CountersProps) => { }: CountersProps) => {
return ( return (
<CountersWrapper> <CountersWrapper>
<CountersGrid gridTemplateAreas={gridAreas}> <CountersGrid $gridTemplateAreas={gridAreas}>
{players.map((player) => { {players.map((player) => {
return ( return (
<GridItemContainer <GridItemContainer
key={player.index} key={player.index}
gridArea={`player${player.index}`} $gridArea={`player${player.index}`}
> >
<LifeCounter <LifeCounter
backgroundColor={player.color} backgroundColor={player.color}

16
src/Components/Counters/ExtraCountersBar.tsx
View File

@@ -11,15 +11,15 @@ import {
Poison, Poison,
} from '../../Icons/generated'; } from '../../Icons/generated';
const Container = styled.div<{ rotation: number }>` const Container = styled.div<{ $rotation: Rotation }>`
width: 100%; width: 100%;
height: 20vmin; height: 20vmin;
display: flex; display: flex;
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
height: 100%; height: 100%;
@@ -29,7 +29,7 @@ const Container = styled.div<{ rotation: number }>`
}} }}
`; `;
const ExtraCountersGrid = styled.div<{ rotation: number }>` const ExtraCountersGrid = styled.div<{ $rotation: Rotation }>`
display: flex; display: flex;
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -40,8 +40,8 @@ const ExtraCountersGrid = styled.div<{ rotation: number }>`
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
flex-direction: column-reverse; flex-direction: column-reverse;
@@ -119,8 +119,8 @@ const ExtraCountersBar = ({
} }
return ( return (
<Container rotation={player.settings.rotation}> <Container $rotation={player.settings.rotation}>
<ExtraCountersGrid rotation={player.settings.rotation}> <ExtraCountersGrid $rotation={player.settings.rotation}>
{useCommanderDamage && ( {useCommanderDamage && (
<ExtraCounter <ExtraCounter
rotation={player.settings.rotation} rotation={player.settings.rotation}

16
src/Components/LifeCounter/Health.tsx
View File

@@ -5,7 +5,7 @@ import LifeCounterButton from '../Buttons/LifeCounterButton';
import { OutlinedText } from '../Misc/OutlinedText'; import { OutlinedText } from '../Misc/OutlinedText';
const LifeCountainer = styled.div<{ const LifeCountainer = styled.div<{
rotation: Rotation; $rotation: Rotation;
}>` }>`
position: relative; position: relative;
display: flex; display: flex;
@@ -18,8 +18,8 @@ const LifeCountainer = styled.div<{
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
flex-direction: column-reverse; flex-direction: column-reverse;
@@ -29,7 +29,7 @@ const LifeCountainer = styled.div<{
`; `;
const LifeCounterTextContainer = styled.div<{ const LifeCounterTextContainer = styled.div<{
rotation: Rotation; $rotation: Rotation;
}>` }>`
position: absolute; position: absolute;
width: 60%; width: 60%;
@@ -46,8 +46,8 @@ const LifeCounterTextContainer = styled.div<{
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
width: 100%; width: 100%;
@@ -192,7 +192,7 @@ const Health = ({
}; };
return ( return (
<LifeCountainer rotation={player.settings.rotation}> <LifeCountainer $rotation={player.settings.rotation}>
<LifeCounterButton <LifeCounterButton
lifeTotal={player.lifeTotal} lifeTotal={player.lifeTotal}
setLifeTotal={handleLifeChange} setLifeTotal={handleLifeChange}
@@ -202,7 +202,7 @@ const Health = ({
/> />
<TextWrapper> <TextWrapper>
<LifeCounterTextContainer <LifeCounterTextContainer
rotation={player.settings.rotation} $rotation={player.settings.rotation}
ref={textContainerRef} ref={textContainerRef}
> >
<OutlinedText <OutlinedText

49
src/Components/LifeCounter/LifeCounter.tsx
View File

@@ -11,7 +11,7 @@ import Health from './Health';
import { WakeLock } from '../../Types/WakeLock'; import { WakeLock } from '../../Types/WakeLock';
const LifeCounterContentWrapper = styled.div<{ const LifeCounterContentWrapper = styled.div<{
backgroundColor: string; $backgroundColor: string;
}>` }>`
position: relative; position: relative;
display: flex; display: flex;
@@ -20,7 +20,7 @@ const LifeCounterContentWrapper = styled.div<{
align-items: center; align-items: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: ${(props) => props.backgroundColor || 'antiquewhite'}; background-color: ${(props) => props.$backgroundColor || 'antiquewhite'};
@media (orientation: landscape) { @media (orientation: landscape) {
max-width: 100vmax; max-width: 100vmax;
max-height: 100vmin; max-height: 100vmin;
@@ -30,7 +30,7 @@ const LifeCounterContentWrapper = styled.div<{
`; `;
const LifeCounterWrapper = styled.div<{ const LifeCounterWrapper = styled.div<{
rotation: Rotation; $rotation: Rotation;
}>` }>`
position: relative; position: relative;
display: flex; display: flex;
@@ -43,25 +43,25 @@ const LifeCounterWrapper = styled.div<{
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
flex-direction: row; flex-direction: row;
rotate: ${props.rotation - 90}deg; rotate: ${props.$rotation - 90}deg;
`; `;
} }
return css` return css`
flex-direction: column; flex-direction: column;
rotate: ${props.rotation}deg; rotate: ${props.$rotation}deg;
`; `;
}} }}
`; `;
const PlayerNoticeWrapper = styled.div<{ const PlayerNoticeWrapper = styled.div<{
rotation: Rotation; $rotation: Rotation;
backgroundColor: string; $backgroundColor: string;
}>` }>`
z-index: 1; z-index: 1;
display: flex; display: flex;
@@ -70,7 +70,7 @@ const PlayerNoticeWrapper = styled.div<{
height: 100%; height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: ${(props) => props.backgroundColor}; background: ${(props) => props.$backgroundColor};
pointer-events: none; pointer-events: none;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@@ -81,25 +81,25 @@ const PlayerNoticeWrapper = styled.div<{
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
rotate: ${props.rotation - 90}deg; rotate: ${props.$rotation - 90}deg;
`; `;
} }
}} }}
`; `;
const DynamicText = styled.div<{ rotation: Rotation }>` const DynamicText = styled.div<{ $rotation: Rotation }>`
font-size: 8vmin; font-size: 8vmin;
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
`; `;
} }
}} }}
@@ -223,14 +223,14 @@ const LifeCounter = ({
player.settings.rotation === Rotation.Side; player.settings.rotation === Rotation.Side;
return ( return (
<LifeCounterContentWrapper backgroundColor={backgroundColor}> <LifeCounterContentWrapper $backgroundColor={backgroundColor}>
<LifeCounterWrapper rotation={player.settings.rotation}> <LifeCounterWrapper $rotation={player.settings.rotation}>
{player.isStartingPlayer && !showStartingPlayer && ( {player.isStartingPlayer && !showStartingPlayer && (
<PlayerNoticeWrapper <PlayerNoticeWrapper
rotation={player.settings.rotation} $rotation={player.settings.rotation}
backgroundColor={theme.palette.primary.main} $backgroundColor={theme.palette.primary.main}
> >
<DynamicText rotation={player.settings.rotation}> <DynamicText $rotation={player.settings.rotation}>
You start! You start!
</DynamicText> </DynamicText>
</PlayerNoticeWrapper> </PlayerNoticeWrapper>
@@ -238,8 +238,8 @@ const LifeCounter = ({
{player.hasLost && ( {player.hasLost && (
<PlayerNoticeWrapper <PlayerNoticeWrapper
rotation={player.settings.rotation} $rotation={player.settings.rotation}
backgroundColor={'#00000070'} $backgroundColor={'#00000070'}
/> />
)} )}
<CommanderDamageBar <CommanderDamageBar
@@ -247,6 +247,7 @@ const LifeCounter = ({
player={player} player={player}
onPlayerChange={onPlayerChange} onPlayerChange={onPlayerChange}
setLifeTotal={handleLifeChange} setLifeTotal={handleLifeChange}
key={player.index}
/> />
<SettingsButton <SettingsButton
onClick={() => { onClick={() => {

8
src/Components/Misc/OutlinedText.tsx
View File

@@ -17,7 +17,7 @@ const CenteredText = styled.div<{
fillColor?: string; fillColor?: string;
fontSize?: string; fontSize?: string;
fontWeight?: string; fontWeight?: string;
rotation?: Rotation; $rotation?: Rotation;
}>` }>`
position: absolute; position: absolute;
font-weight: ${(props) => props.fontWeight || ''}; font-weight: ${(props) => props.fontWeight || ''};
@@ -37,8 +37,8 @@ const CenteredText = styled.div<{
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
rotate: 270deg; rotate: 270deg;
@@ -81,7 +81,7 @@ export const OutlinedText: React.FC<OutlinedTextProps> = ({
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
strokeColor={strokeColor} strokeColor={strokeColor}
fillColor={fillColor} fillColor={fillColor}
rotation={rotation} $rotation={rotation}
> >
{children} {children}
<CenteredTextOutline aria-hidden>{children}</CenteredTextOutline> <CenteredTextOutline aria-hidden>{children}</CenteredTextOutline>

22
src/Components/PlayerMenu/PlayerMenu.tsx
View File

@@ -7,7 +7,7 @@ import { Button } from '@mui/material';
import { WakeLock } from '../../Types/WakeLock'; import { WakeLock } from '../../Types/WakeLock';
const PlayerMenuWrapper = styled.div<{ const PlayerMenuWrapper = styled.div<{
rotation: Rotation; $rotation: Rotation;
}>` }>`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -20,19 +20,19 @@ const PlayerMenuWrapper = styled.div<{
z-index: 2; z-index: 2;
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return; return;
} }
return css` return css`
rotate: ${props.rotation}deg; rotate: ${props.$rotation}deg;
`; `;
}}; }};
`; `;
const CloseButton = styled.div<{ const CloseButton = styled.div<{
rotation: Rotation; $rotation: Rotation;
}>` }>`
position: absolute; position: absolute;
top: 15%; top: 15%;
@@ -44,16 +44,16 @@ const CloseButton = styled.div<{
background-color: transparent; background-color: transparent;
${(props) => { ${(props) => {
if (props.rotation === Rotation.Side) { if (props.$rotation === Rotation.Side) {
return css` return css`
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
top: 5%; top: 5%;
right: auto; right: auto;
left: 5%; left: 5%;
`; `;
} else if (props.rotation === Rotation.SideFlipped) { } else if (props.$rotation === Rotation.SideFlipped) {
return css` return css`
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
top: auto; top: auto;
left: auto; left: auto;
bottom: 5%; bottom: 5%;
@@ -85,8 +85,8 @@ const PlayerMenu = ({
}; };
return ( return (
<PlayerMenuWrapper rotation={player.settings.rotation}> <PlayerMenuWrapper $rotation={player.settings.rotation}>
<CloseButton rotation={player.settings.rotation}> <CloseButton $rotation={player.settings.rotation}>
<Button <Button
style={{ style={{
padding: '0 8px', padding: '0 8px',

56
src/Components/PlayerMenu/Settings.tsx
View File

@@ -14,7 +14,7 @@ type SettingsProps = {
}; };
const SettingsContainer = styled.div<{ const SettingsContainer = styled.div<{
rotation: Rotation; $rotation: Rotation;
}>` }>`
display: flex; display: flex;
position: relative; position: relative;
@@ -25,8 +25,8 @@ const SettingsContainer = styled.div<{
width: 80%; width: 80%;
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
flex-direction: column-reverse; flex-direction: column-reverse;
@@ -37,7 +37,7 @@ const SettingsContainer = styled.div<{
}} }}
`; `;
const TogglesSection = styled.div<{ rotation: Rotation }>` const TogglesSection = styled.div<{ $rotation: Rotation }>`
display: flex; display: flex;
position: absolute; position: absolute;
flex-direction: row; flex-direction: row;
@@ -46,8 +46,8 @@ const TogglesSection = styled.div<{ rotation: Rotation }>`
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
flex-direction: column-reverse; flex-direction: column-reverse;
@@ -56,31 +56,31 @@ const TogglesSection = styled.div<{ rotation: Rotation }>`
}} }}
`; `;
const ButtonsSections = styled.div<{ rotation: Rotation }>` const ButtonsSections = styled.div<{ $rotation: Rotation }>`
position: absolute; position: absolute;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
bottom: 16px; bottom: 16px;
${(props) => { ${(props) => {
if (props.rotation === Rotation.Side) { if (props.$rotation === Rotation.Side) {
return css` return css`
bottom: auto; bottom: auto;
right: -6rem; right: -6rem;
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
`; `;
} else if (props.rotation === Rotation.SideFlipped) { } else if (props.$rotation === Rotation.SideFlipped) {
return css` return css`
bottom: auto; bottom: auto;
left: -6rem; left: -6rem;
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
`; `;
} }
}} }}
`; `;
const ColorPicker = styled.input<{ const ColorPicker = styled.input<{
rotation: Rotation; $rotation: Rotation;
}>` }>`
position: absolute; position: absolute;
top: 5%; top: 5%;
@@ -96,15 +96,15 @@ const ColorPicker = styled.input<{
color: #ffffff; color: #ffffff;
${(props) => { ${(props) => {
if (props.rotation === Rotation.Side) { if (props.$rotation === Rotation.Side) {
return css` return css`
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
bottom: 5%; bottom: 5%;
top: auto; top: auto;
`; `;
} else if (props.rotation === Rotation.SideFlipped) { } else if (props.$rotation === Rotation.SideFlipped) {
return css` return css`
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
top: 5%; top: 5%;
left: auto; left: auto;
right: 5%; right: 5%;
@@ -113,14 +113,14 @@ const ColorPicker = styled.input<{
}} }}
`; `;
const CheckboxContainer = styled.div<{ rotation: Rotation }>` const CheckboxContainer = styled.div<{ $rotation: Rotation }>`
${(props) => { ${(props) => {
if ( if (
props.rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side props.$rotation === Rotation.Side
) { ) {
return css` return css`
rotate: ${props.rotation - 180}deg; rotate: ${props.$rotation - 180}deg;
`; `;
} }
}} }}
@@ -177,16 +177,16 @@ const Settings = ({
const buttonFontSize = isSide ? '2vmax' : '4vmin'; const buttonFontSize = isSide ? '2vmax' : '4vmin';
return ( return (
<SettingsContainer rotation={player.settings.rotation}> <SettingsContainer $rotation={player.settings.rotation}>
<ColorPicker <ColorPicker
rotation={player.settings.rotation} $rotation={player.settings.rotation}
type="color" type="color"
value={player.color} value={player.color}
onChange={handleColorChange} onChange={handleColorChange}
/> />
<TogglesSection rotation={player.settings.rotation}> <TogglesSection $rotation={player.settings.rotation}>
{player.settings.useCommanderDamage && ( {player.settings.useCommanderDamage && (
<CheckboxContainer rotation={player.settings.rotation}> <CheckboxContainer $rotation={player.settings.rotation}>
<Checkbox <Checkbox
name="usePartner" name="usePartner"
checked={player.settings.usePartner} checked={player.settings.usePartner}
@@ -211,7 +211,7 @@ const Settings = ({
</CheckboxContainer> </CheckboxContainer>
)} )}
<CheckboxContainer rotation={player.settings.rotation}> <CheckboxContainer $rotation={player.settings.rotation}>
<Checkbox <Checkbox
name="usePoison" name="usePoison"
checked={player.settings.usePoison} checked={player.settings.usePoison}
@@ -235,7 +235,7 @@ const Settings = ({
/> />
</CheckboxContainer> </CheckboxContainer>
<CheckboxContainer rotation={player.settings.rotation}> <CheckboxContainer $rotation={player.settings.rotation}>
<Checkbox <Checkbox
name="useEnergy" name="useEnergy"
checked={player.settings.useEnergy} checked={player.settings.useEnergy}
@@ -259,7 +259,7 @@ const Settings = ({
/> />
</CheckboxContainer> </CheckboxContainer>
<CheckboxContainer rotation={player.settings.rotation}> <CheckboxContainer $rotation={player.settings.rotation}>
<Checkbox <Checkbox
name="useExperience" name="useExperience"
checked={player.settings.useExperience} checked={player.settings.useExperience}
@@ -283,7 +283,7 @@ const Settings = ({
/> />
</CheckboxContainer> </CheckboxContainer>
</TogglesSection> </TogglesSection>
<ButtonsSections rotation={player.settings.rotation}> <ButtonsSections $rotation={player.settings.rotation}>
<Button <Button
variant="contained" variant="contained"
style={{ style={{

2
src/Components/Views/StartMenu/StartMenu.tsx
View File

@@ -125,7 +125,6 @@ const Start = ({
const { enableFullscreen } = useFullscreen(); const { enableFullscreen } = useFullscreen();
const toggleWakeLock = () => { const toggleWakeLock = () => {
console.log(wakeLock.active, wakeLockActive);
if (wakeLock.active && wakeLockActive) { if (wakeLock.active && wakeLockActive) {
wakeLock.release(); wakeLock.release();
setWakeLockActive(false); setWakeLockActive(false);
@@ -149,7 +148,6 @@ const Start = ({
analytics.trackEvent('game_started', { ...initialGameSettings }); analytics.trackEvent('game_started', { ...initialGameSettings });
if (!wakeLock.active && wakeLockActive) { if (!wakeLock.active && wakeLockActive) {
console.log('yo');
wakeLock.request(); wakeLock.request();
} }

1
src/Types/Player.ts
View File

@@ -1,6 +1,5 @@
export type Player = { export type Player = {
lifeTotal: number; lifeTotal: number;
key?: number; // Deprecated, use index instead
index: number; index: number;
color: string; color: string;
settings: PlayerSettings; settings: PlayerSettings;