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

config vite

Browse Source
This commit is contained in:
Viktor Rådberg
2023-08-26 13:23:30 +02:00
parent 549b069ca5
commit 7e0175aeed
63 changed files with 4516 additions and 6782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,9 @@
import { Checkbox } from '@mui/material';
import { Player, Rotation } from '../../Types/Player';
import { useWakeLock } from 'react-screen-wake-lock';
import styled, { css } from 'styled-components/macro';
// import { useWakeLock } from 'react-screen-wake-lock';
import styled from 'styled-components';
import { css } from 'styled-components';
import { Energy, Experience, PartnerTax, Poison } from '../../Icons/generated';
import { Player, Rotation } from '../../Types/Player';
type SettingsProps = {
player: Player;
@@ -28,18 +29,18 @@ const SettingsContainer = styled.div<{
props.rotation === Rotation.Side
) {
return css`
flex-direction: row;
padding-top: 36px;
flex-direction: column-reverse;
/* padding-top: 36px; */
`;
} else {
return css`
padding-top: 36px;
/* padding-top: 36px; */
`;
}
}}
`;
const SettingsSection = styled.div<{ rotation: Rotation }>`
const TogglesSection = styled.div<{ rotation: Rotation }>`
display: flex;
flex-direction: row;
justify-content: space-evenly;
@@ -58,6 +59,26 @@ const SettingsSection = styled.div<{ rotation: Rotation }>`
}}
`;
const ButtonsSections = styled.div<{ rotation: Rotation }>`
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 1rem;
${(props) => {
if (
props.rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side
) {
return css`
rotate: ${props.rotation}deg;
flex-direction: column-reverse;
`;
}
}}
`;
const ColorPicker = styled.input<{
rotation: Rotation;
}>`
@@ -128,8 +149,8 @@ const CheckboxContainer = styled.div<{ rotation: Rotation }>`
`;
const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
const { released, request, release } = useWakeLock();
const handleWakeLock = () => (released === false ? release() : request());
// const { released, request, release } = useWakeLock();
// const handleWakeLock = () => (released === false ? release() : request());
const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const updatedPlayer = { ...player, color: event.target.value };
@@ -171,7 +192,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
value={player.color}
onChange={handleColorChange}
/>
<SettingsSection rotation={player.settings.rotation}>
<TogglesSection rotation={player.settings.rotation}>
{player.settings.useCommanderDamage && (
<CheckboxContainer rotation={player.settings.rotation}>
<Checkbox
@@ -269,9 +290,9 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
onChange={handleSettingsChange}
/>
</CheckboxContainer>
</SettingsSection>
</TogglesSection>
<SettingsSection rotation={player.settings.rotation}>
<ButtonsSections rotation={player.settings.rotation}>
<Button rotation={player.settings.rotation} onClick={handleResetGame}>
Reset All
</Button>
@@ -281,10 +302,10 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
<Button rotation={player.settings.rotation} onClick={toggleFullscreen}>
Fullscreen
</Button>
<Button rotation={player.settings.rotation} onClick={handleWakeLock}>
{/* <Button rotation={player.settings.rotation} onClick={handleWakeLock}>
{released === false ? 'Release' : 'Request'} nosleep
</Button>
</SettingsSection>
</Button> */}
</ButtonsSections>
</SettingsContainer>
);
};