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

fix width

Browse Source
This commit is contained in:
Viktor Rådberg
2024-05-10 23:23:32 +02:00
parent 92be2e56d4
commit adb79bf0e8
1 changed files with 151 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,7 @@ const standardSettings: Pick<
orientation: Orientation.Landscape, orientation: Orientation.Landscape,
}; };
const MainWrapper = twc.div`w-full h-fit pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10`; const MainWrapper = twc.div`h-fit pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10`;
const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row flex-wrap px-4 z-10 gap-4`; const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row flex-wrap px-4 z-10 gap-4`;
@@ -173,177 +173,178 @@ const Start = () => {
<InfoDialog dialogRef={infoDialogRef} /> <InfoDialog dialogRef={infoDialogRef} />
<SettingsDialog dialogRef={settingsDialogRef} /> <SettingsDialog dialogRef={settingsDialogRef} />
<div className="flex justify-center items-center w-screen">
<MainWrapper>
<Info
className="size-8 absolute top-4 left-4 text-primary-main"
onClick={() => {
openInfo();
}}
/>
<MainWrapper> <h1 className="relative flex flex-col text-3xl font-bold mt-6 mb-6 text-text-primary justify-center items-center">
<Info Life Trinket
className="size-8 absolute top-4 left-4 text-primary-main" <div className="h-[1px] w-[120%] bg-common-white opacity-50" />
onClick={() => { <div className="flex absolute text-xs font-medium -bottom-4">
openInfo(); v{version.installedVersion}
}} </div>
/> </h1>
<h1 className="relative flex flex-col text-3xl font-bold mt-6 mb-6 text-text-primary justify-center items-center"> <div className="overflow-hidden items-center flex flex-col max-w-[548px] w-full mb-8 px-4">
Life Trinket <div className="w-full">
<div className="h-[1px] w-[120%] bg-common-white opacity-50" /> <ToggleButtonsWrapper className="mt-4">
<div className="flex absolute text-xs font-medium -bottom-4"> <ToggleButton
v{version.installedVersion} label="Commander"
</div> checked={
</h1> playerOptions.useCommanderDamage ??
initialGameSettings?.useCommanderDamage ??
<div className="overflow-hidden items-center flex flex-col max-w-[548px] w-full mb-8 px-4"> true
<div className="w-full"> }
<ToggleButtonsWrapper className="mt-4"> onChange={(e) => {
<ToggleButton if (e.target.checked) {
label="Commander" setPlayerOptions({
checked={ ...playerOptions,
playerOptions.useCommanderDamage ?? useCommanderDamage: e.target.checked,
initialGameSettings?.useCommanderDamage ?? ...commanderSettings,
true });
} return;
onChange={(e) => { }
if (e.target.checked) {
setPlayerOptions({ setPlayerOptions({
...playerOptions, ...playerOptions,
useCommanderDamage: e.target.checked, useCommanderDamage: e.target.checked,
...commanderSettings, ...standardSettings,
}); });
return; }}
} />
setPlayerOptions({
...playerOptions,
useCommanderDamage: e.target.checked,
...standardSettings,
});
}}
/>
<div className="flex flex-nowrap text-nowrap relative justify-center items-start"> <div className="flex flex-nowrap text-nowrap relative justify-center items-start">
<button <button
className="flex justify-center self-center items-center mt-1 mb-1 bg-primary-main px-3 py-2 rounded-md transition-colors duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark" className="flex justify-center self-center items-center mt-1 mb-1 bg-primary-main px-3 py-2 rounded-md transition-colors duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark"
onClick={openSettings} onClick={openSettings}
> >
<span className="text-sm flex flex-row items-center text-text-primary"> <span className="text-sm flex flex-row items-center text-text-primary">
<Cog /> <Cog />
&nbsp;Game Settings &nbsp;Game Settings
</span> </span>
</button> </button>
<div <div
data-not-latest-version={ data-not-latest-version={
!version.isLatest && !!version.remoteVersion !version.isLatest && !!version.remoteVersion
} }
className="absolute flex justify-center text-text-primary text-xxs -bottom-5 bg-primary-dark px-2 rounded-md className="absolute flex justify-center text-text-primary text-xxs -bottom-5 bg-primary-dark px-2 rounded-md
opacity-0 transition-all duration-200 delay-500 opacity-0 transition-all duration-200 delay-500
data-[not-latest-version=true]:opacity-100 data-[not-latest-version=true]:opacity-100
" "
> >
<div className="absolute bg-primary-dark rotate-45 size-2 -top-[2px] z-0" /> <div className="absolute bg-primary-dark rotate-45 size-2 -top-[2px] z-0" />
<span className="z-10"> <span className="z-10">
v{version.remoteVersion} available! v{version.remoteVersion} available!
</span> </span>
</div>
</div> </div>
</div> </ToggleButtonsWrapper>
</ToggleButtonsWrapper> <LabelText className="mt-4">Number of Players</LabelText>
<LabelText className="mt-4">Number of Players</LabelText> <SliderWrapper>
<SliderWrapper> <input
<input className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer" title="Number of Players"
title="Number of Players" type="range"
type="range" max={6}
max={6} min={1}
min={1} value={playerOptions?.numberOfPlayers ?? 4}
value={playerOptions?.numberOfPlayers ?? 4} onChange={(e) => {
onChange={(e) => { setPlayerOptions({
...playerOptions,
numberOfPlayers: Number.parseInt(e.target.value),
orientation: Orientation.Landscape,
});
}}
/>
<div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</SliderWrapper>
<LabelText className="mt-4">Starting Health</LabelText>
<SliderWrapper>
<input
className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
title="Starting Health"
type="range"
max={60}
min={20}
aria-label="Custom marks"
value={playerOptions?.startingLifeTotal ?? 40}
step={10}
onChange={(e) =>
setPlayerOptions({
...playerOptions,
startingLifeTotal: Number.parseInt(e.target.value),
orientation: Orientation.Landscape,
})
}
/>
<div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
<div>20</div>
<div>30</div>
<div>40</div>
<div>50</div>
<div>60</div>
</div>
</SliderWrapper>
<LabelText className="mt-4">Layout</LabelText>
<LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers}
selectedOrientation={playerOptions.orientation}
onChange={(orientation) => {
setPlayerOptions({ setPlayerOptions({
...playerOptions, ...playerOptions,
numberOfPlayers: Number.parseInt(e.target.value), orientation,
orientation: Orientation.Landscape,
}); });
}} }}
/> />
<div className="flex w-full justify-between px-1 text-text-primary pointer-events-none"> </div>
<div>1</div> {!isPWA && (
<div>2</div> <p className="text-center text-xs text-text-primary w-11/12 mt-4">
<div>3</div> If you're on iOS, this page works better if you{' '}
<div>4</div> <strong>hide the toolbar</strong> or{' '}
<div>5</div> <strong>add the app to your home screen</strong>.
<div>6</div> </p>
</div> )}
</SliderWrapper>
<LabelText className="mt-4">Starting Health</LabelText>
<SliderWrapper>
<input
className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
title="Starting Health"
type="range"
max={60}
min={20}
aria-label="Custom marks"
value={playerOptions?.startingLifeTotal ?? 40}
step={10}
onChange={(e) =>
setPlayerOptions({
...playerOptions,
startingLifeTotal: Number.parseInt(e.target.value),
orientation: Orientation.Landscape,
})
}
/>
<div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
<div>20</div>
<div>30</div>
<div>40</div>
<div>50</div>
<div>60</div>
</div>
</SliderWrapper>
<LabelText className="mt-4">Layout</LabelText>
<LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers}
selectedOrientation={playerOptions.orientation}
onChange={(orientation) => {
setPlayerOptions({
...playerOptions,
orientation,
});
}}
/>
</div> </div>
{!isPWA && (
<p className="text-center text-xs text-text-primary w-11/12 mt-4">
If you're on iOS, this page works better if you{' '}
<strong>hide the toolbar</strong> or{' '}
<strong>add the app to your home screen</strong>.
</p>
)}
</div>
<StartButtonFooter> <StartButtonFooter>
<button
className="flex flex-grow basis-0 justify-center self-center items-center bg-primary-main px-3 py-2 rounded-md text-text-primary min-w-[150px] duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark"
onClick={doStartNewGame}
>
NEW GAME
</button>
{savedGame && (
<button <button
className="flex flex-grow basis-0 justify-center self-center items-center bg-secondary-main px-3 py-2 rounded-md text-text-primary min-w-[150px] className="flex flex-grow basis-0 justify-center self-center items-center bg-primary-main px-3 py-2 rounded-md text-text-primary min-w-[150px] duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark"
onClick={doStartNewGame}
>
NEW GAME
</button>
{savedGame && (
<button
className="flex flex-grow basis-0 justify-center self-center items-center bg-secondary-main px-3 py-2 rounded-md text-text-primary min-w-[150px]
duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-secondary-dark" duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-secondary-dark"
onClick={doResumeGame} onClick={doResumeGame}
> >
RESUME&nbsp; RESUME&nbsp;
<span className="text-xs"> <span className="text-xs">
({savedGame.players.length}&nbsp; ({savedGame.players.length}&nbsp;
{savedGame.players.length > 1 ? 'players' : 'player'}) {savedGame.players.length > 1 ? 'players' : 'player'})
</span> </span>
</button> </button>
)} )}
</StartButtonFooter> </StartButtonFooter>
</MainWrapper> </MainWrapper>
</div>
</> </>
); );
}; };