fix errors and warnings

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

View File

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