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

fix styling

Browse Source
This commit is contained in:
Viktor Rådberg
2024-01-14 12:31:57 +01:00
parent f5a80e573e
commit d25da5d97b
4 changed files with 115 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/Components/Misc/InfoModal.tsx
View File

@@ -1,6 +1,7 @@
import { Modal } from '@mui/material'; import { Modal } from '@mui/material';
import { theme } from '../../Data/theme';
import { twc } from 'react-twc'; import { twc } from 'react-twc';
import { Separator } from './Separator';
import { Paragraph } from './TextComponents';
export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary`; export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary`;
@@ -14,14 +15,14 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
<Modal open={isOpen} onClose={closeModal}> <Modal open={isOpen} onClose={closeModal}>
<ModalWrapper> <ModalWrapper>
<div> <div>
<h2 style={{ textAlign: 'center' }}>📋 Usage Guide</h2> <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
<p> <Separator height="1px" />
<Paragraph className="my-4">
There are some controls that you might not know about, so here's a There are some controls that you might not know about, so here's a
short list of them. short list of them.
</p> </Paragraph>
<h3 className="text-lg font-bold mb-2">Life counter</h3>
<h3>Life counter</h3> <ul className="list-disc ml-6 mb-4">
<ul>
<li> <li>
<strong>Tap</strong> on a player's + or - button to add or <strong>Tap</strong> on a player's + or - button to add or
subtract <strong>1 life</strong>. subtract <strong>1 life</strong>.
@@ -32,8 +33,10 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
</li> </li>
</ul> </ul>
<h3>Commander damage and other counters</h3> <h3 className="text-lg font-bold mb-2">
<ul> Commander damage and other counters
</h3>
<ul className="list-disc ml-6 mb-4">
<li> <li>
<strong>Tap</strong> on the counter to add{' '} <strong>Tap</strong> on the counter to add{' '}
<strong>1 counter</strong>. <strong>1 counter</strong>.
@@ -44,33 +47,21 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
</li> </li>
</ul> </ul>
<h3>Other</h3> <h3 className="text-lg font-bold mb-2">Other</h3>
<p> <Paragraph className="mb-4">
When a player is <strong>at or below 0 life</strong>, has taken{' '} When a player is <strong>at or below 0 life</strong>, has taken{' '}
<strong>21 or more Commander Damage</strong> or has{' '} <strong>21 or more Commander Damage</strong> or has{' '}
<strong>10 or more poison counters</strong>, a button with a skull <strong>10 or more poison counters</strong>, a button with a skull
will appear on that player's card. will appear on that player's card. Tapping it will dim the player's
</p>
<p>
Tap on the button to mark that player as lost, dimming their player
card. card.
</p> </Paragraph>
</div> </div>
<br /> <div className="text-center mt-4">
<div
style={{
textAlign: 'center',
marginTop: '1rem',
}}
>
Visit my Visit my
<a <a
href="https://github.com/Vikeo/LifeTrinket" href="https://github.com/Vikeo/LifeTrinket"
target="_blank" target="_blank"
style={{ className="text-text-secondary underline"
textDecoration: 'none',
color: theme.palette.primary.light,
}}
> >
{' '} {' '}
GitHub{' '} GitHub{' '}

3
src/Components/Misc/SettingsModal.tsx
View File

@@ -69,7 +69,8 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
<Modal open={isOpen} onClose={closeModal}> <Modal open={isOpen} onClose={closeModal}>
<ModalWrapper> <ModalWrapper>
<Container> <Container>
<h2 style={{ textAlign: 'center' }}>⚙️ Settings ⚙️</h2> <h2 className="text-center text-2xl mb-2">⚙️ Settings ⚙️</h2>
<Separator height="1px" />
<SettingContainer> <SettingContainer>
<ToggleContainer> <ToggleContainer>
<FormLabel>Show Start Player</FormLabel> <FormLabel>Show Start Player</FormLabel>

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

@@ -20,7 +20,7 @@ import { LayoutOptions } from './LayoutOptions';
const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`; const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`;
const StartButtonFooter = twc.div`fixed bottom-4 z-1`; const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4`;
const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`; const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`;
@@ -174,87 +174,88 @@ const Start = () => {
Life Trinket Life Trinket
</h1> </h1>
<FormControl focused={false} style={{ width: '80vw' }}> <div className="overflow-hidden items-center flex flex-col max-w-[548px] mb-8 px-4">
<FormLabel>Number of Players</FormLabel> <FormControl focused={false}>
<Slider <FormLabel>Number of Players</FormLabel>
title="Number of Players" <Slider
max={6} title="Number of Players"
min={1} max={6}
aria-label="Custom marks" min={1}
value={playerOptions?.numberOfPlayers ?? 4} aria-label="Custom marks"
getAriaValueText={valuetext} value={playerOptions?.numberOfPlayers ?? 4}
step={null} getAriaValueText={valuetext}
marks={playerMarks} step={null}
onChange={(_e, value) => { marks={playerMarks}
setPlayerOptions({ onChange={(_e, value) => {
...playerOptions, setPlayerOptions({
numberOfPlayers: value as number, ...playerOptions,
orientation: Orientation.Landscape, numberOfPlayers: value as number,
}); orientation: Orientation.Landscape,
}} });
/> }}
<FormLabel className="mt-[0.7rem]">Starting Health</FormLabel> />
<Slider <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
title="Starting Health" <Slider
max={60} title="Starting Health"
min={20} max={60}
aria-label="Custom marks" min={20}
value={playerOptions?.startingLifeTotal ?? 40} aria-label="Custom marks"
getAriaValueText={valuetext} value={playerOptions?.startingLifeTotal ?? 40}
step={10} getAriaValueText={valuetext}
marks={healthMarks} step={10}
onChange={(_e, value) => marks={healthMarks}
setPlayerOptions({ onChange={(_e, value) =>
...playerOptions, setPlayerOptions({
startingLifeTotal: value as number, ...playerOptions,
orientation: Orientation.Landscape, startingLifeTotal: value as number,
}) orientation: Orientation.Landscape,
} })
/> }
/>
<ToggleButtonsWrapper className="mt-4"> <ToggleButtonsWrapper className="mt-4">
<ToggleContainer> <ToggleContainer>
<FormLabel>Commander</FormLabel> <FormLabel>Commander</FormLabel>
<Switch <Switch
checked={ checked={
playerOptions.useCommanderDamage ?? playerOptions.useCommanderDamage ??
initialGameSettings?.useCommanderDamage ?? initialGameSettings?.useCommanderDamage ??
true true
} }
onChange={(_e, value) => { onChange={(_e, value) => {
if (value) { if (value) {
setPlayerOptions({
...playerOptions,
useCommanderDamage: value,
numberOfPlayers: 4,
startingLifeTotal: 40,
orientation: Orientation.Landscape,
});
return;
}
setPlayerOptions({ setPlayerOptions({
...playerOptions, ...playerOptions,
useCommanderDamage: value, useCommanderDamage: value,
numberOfPlayers: 4, numberOfPlayers: 2,
startingLifeTotal: 40, startingLifeTotal: 20,
orientation: Orientation.Landscape, orientation: Orientation.Landscape,
}); });
return; }}
} />
setPlayerOptions({ </ToggleContainer>
...playerOptions, <Button
useCommanderDamage: value, variant="contained"
numberOfPlayers: 2, style={{ height: '2rem' }}
startingLifeTotal: 20, onClick={() => {
orientation: Orientation.Landscape, setOpenSettingsModal(true);
});
}} }}
/> >
</ToggleContainer> <Cog /> &nbsp; Other settings
<Button </Button>
variant="contained" </ToggleButtonsWrapper>
style={{ height: '2rem' }}
onClick={() => {
setOpenSettingsModal(true);
}}
>
<Cog /> &nbsp; Other settings
</Button>
</ToggleButtonsWrapper>
<FormLabel>Layout</FormLabel> <FormLabel>Layout</FormLabel>
{/* <LayoutOptions {/* <LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers} numberOfPlayers={playerOptions.numberOfPlayers}
gridAreas={playerOptions.gridAreas} gridAreas={playerOptions.gridAreas}
onChange={(gridAreas) => onChange={(gridAreas) =>
@@ -266,32 +267,32 @@ const Start = () => {
}) })
} }
/> */} /> */}
<LayoutOptions <LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers} numberOfPlayers={playerOptions.numberOfPlayers}
selectedOrientation={playerOptions.orientation} selectedOrientation={playerOptions.orientation}
onChange={(orientation) => { onChange={(orientation) => {
setPlayerOptions({ setPlayerOptions({
...playerOptions, ...playerOptions,
orientation, orientation,
}); });
}} }}
/> />
</FormControl> </FormControl>
{!isPWA && (
{!isPWA && ( <p className="text-center text-xs text-text-primary w-11/12 mt-4">
<p className="text-center, max-w-[75%] text-xs text-text-primary"> If you're on iOS, this page works better if you{' '}
If you're on iOS, this page works better if you{' '} <strong>hide the toolbar</strong> or{' '}
<strong>hide the toolbar</strong> or{' '} <strong>add the app to your home screen</strong>.
<strong>add the app to your home screen</strong>. </p>
</p> )}
)} </div>
<StartButtonFooter> <StartButtonFooter>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
onClick={doStartGame} onClick={doStartGame}
style={{ width: '90dvw' }} fullWidth
> >
START GAME START GAME
</Button> </Button>

12
tailwind.config.ts
View File

@@ -95,15 +95,3 @@ export default {
}, },
plugins: [tailwindcssGridAreas], plugins: [tailwindcssGridAreas],
} satisfies Config; } satisfies Config;
// const fadeOut = keyframes`
// 0% {
// opacity: 1;
// }
// 33% {
// opacity: 0.6;
// }
// 100% {
// opacity: 0;
// }
// `;