fix aria and minify

This commit is contained in:
Viktor Rådberg
2023-09-18 12:16:09 +02:00
parent de30682597
commit 22c6852644
8 changed files with 46 additions and 8 deletions

View File

@@ -201,6 +201,7 @@ export const CommanderDamage = ({
<CommanderDamageContainer
key={opponentIndex}
$rotation={player.settings.rotation}
aria-label={`Commander damage bar ${player.index}`}
>
<CommanderDamageButton
key={opponentIndex}
@@ -214,6 +215,7 @@ export const CommanderDamage = ({
e.preventDefault();
}}
$backgroundColor={opponent.color}
aria-label={`Commander damage. Player ${player.index}, opponent ${opponent.index}`}
>
<CommanderDamageTextContainer $rotation={player.settings.rotation}>
<OutlinedText
@@ -247,6 +249,7 @@ export const CommanderDamage = ({
e.preventDefault();
}}
$backgroundColor={opponent.color}
aria-label={`Partner Commander damage. Player ${player.index}, opponent ${opponent.index}`}
>
<CommanderDamageTextContainer $rotation={player.settings.rotation}>
<OutlinedText

View File

@@ -59,6 +59,7 @@ type ExtraCounterProps = {
type: CounterType;
setCounterTotal: (updatedCounterTotal: number, type: CounterType) => void;
rotation: number;
playerIndex: number;
};
const ExtraCounter = ({
@@ -67,6 +68,7 @@ const ExtraCounter = ({
setCounterTotal,
type,
rotation,
playerIndex,
}: ExtraCounterProps) => {
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
const [timeoutFinished, setTimeoutFinished] = useState(false);
@@ -120,6 +122,7 @@ const ExtraCounter = ({
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
}}
aria-label={`Player ${playerIndex} extra counter: ${type}`}
>
<IconContainer $rotation={rotation}>
{Icon}

View File

@@ -121,6 +121,7 @@ const LifeCounterButton = ({
e.preventDefault();
}}
style={{ fontSize }}
aria-label={`${operation === 'add' ? 'Add' : 'Subtract'} life`}
>
<TextContainer
$rotation={rotation}

View File

@@ -46,7 +46,7 @@ type LoseButtonProps = {
export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
return (
<LoseButton $rotation={rotation} onClick={onClick}>
<LoseButton $rotation={rotation} onClick={onClick} aria-label={`Lose Game`}>
<Skull size="5vmin" color="black" opacity={0.5} />
</LoseButton>
);

View File

@@ -40,7 +40,11 @@ type SettingsButtonProps = {
const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
return (
<StyledSettingsButton onClick={onClick} $rotation={rotation}>
<StyledSettingsButton
onClick={onClick}
$rotation={rotation}
aria-label={`Settings`}
>
<Cog size="5vmin" color="black" opacity="0.3" />
</StyledSettingsButton>
);

View File

@@ -132,6 +132,7 @@ const ExtraCountersBar = ({
)?.value
}
setCounterTotal={handleCounterChange}
playerIndex={player.index}
/>
)}
{Boolean(useCommanderDamage && usePartner) && (
@@ -145,6 +146,7 @@ const ExtraCountersBar = ({
)?.value
}
setCounterTotal={handleCounterChange}
playerIndex={player.index}
/>
)}
{usePoison && (
@@ -157,6 +159,7 @@ const ExtraCountersBar = ({
?.value
}
setCounterTotal={handleCounterChange}
playerIndex={player.index}
/>
)}
{useEnergy && (
@@ -169,6 +172,7 @@ const ExtraCountersBar = ({
?.value
}
setCounterTotal={handleCounterChange}
playerIndex={player.index}
/>
)}
{useExperience && (
@@ -182,6 +186,7 @@ const ExtraCountersBar = ({
)?.value
}
setCounterTotal={handleCounterChange}
playerIndex={player.index}
/>
)}
</ExtraCountersGrid>

View File

@@ -183,6 +183,8 @@ const Settings = ({
type="color"
value={player.color}
onChange={handleColorChange}
role="button"
aria-label="Color picker"
/>
<TogglesSection $rotation={player.settings.rotation}>
{player.settings.useCommanderDamage && (
@@ -207,6 +209,9 @@ const Settings = ({
/>
}
onChange={handleSettingsChange}
role="checkbox"
aria-checked={player.settings.usePartner}
aria-label="Partner"
/>
</CheckboxContainer>
)}
@@ -232,6 +237,9 @@ const Settings = ({
/>
}
onChange={handleSettingsChange}
role="checkbox"
aria-checked={player.settings.usePoison}
aria-label="Poison"
/>
</CheckboxContainer>
@@ -256,6 +264,9 @@ const Settings = ({
/>
}
onChange={handleSettingsChange}
role="checkbox"
aria-checked={player.settings.useEnergy}
aria-label="Energy"
/>
</CheckboxContainer>
@@ -280,6 +291,9 @@ const Settings = ({
/>
}
onChange={handleSettingsChange}
role="checkbox"
aria-checked={player.settings.useExperience}
aria-label="Experience"
/>
</CheckboxContainer>
</TogglesSection>
@@ -293,6 +307,7 @@ const Settings = ({
padding: '0 4px 0 4px',
}}
onClick={handleNewGame}
aria-label="Back to start"
>
Back to Start
</Button>
@@ -305,6 +320,9 @@ const Settings = ({
padding: '0 4px 0 4px',
}}
onClick={toggleFullscreen}
role="checkbox"
aria-checked={document.fullscreenElement ? true : false}
aria-label="Fullscreen toggle"
>
Fullscreen
</Button>
@@ -317,6 +335,9 @@ const Settings = ({
padding: '0 4px 0 4px',
}}
onClick={handleWakeLock}
role="checkbox"
aria-checked={wakeLock.active}
aria-label="Keep awake"
>
Keep Awake
</Button>

View File

@@ -1,12 +1,13 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
minify: 'esbuild',
rollupOptions: {
external: ['babel-plugin-macros']
}
}
})
external: ['babel-plugin-macros'],
},
},
});