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

Better scaling on small devices

Browse Source
This commit is contained in:
Viktor Rådberg
2024-03-23 16:05:29 +01:00
parent 355f4bd4cd
commit 3a568fc3ab
10 changed files with 186 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "life-trinket",
"private": true,
"version": "0.7.0",
"version": "0.8.0",
"type": "commonjs",
"engines": {
"node": ">=18",

4
src/Components/Counters/ExtraCountersBar.tsx
View File

@@ -21,9 +21,9 @@ const Container = twc.div<RotationDivProps>((props) => [
]);
export const ExtraCountersGrid = twc.div<RotationDivProps>((props) => [
'flex absolute flex-row flex-grow pointer-events-none',
'flex absolute flex-row flex-grow pointer-events-none overflow-x-scroll overflow-y-hidden',
props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
? 'flex-col-reverse h-full w-auto bottom-auto'
? 'flex-col-reverse h-full w-auto bottom-auto right-0'
: 'w-full bottom-0',
]);

10
src/Components/LifeCounter/LifeCounter.tsx
View File

@@ -233,6 +233,8 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
? player.settings.rotation - 180
: player.settings.rotation;
const amountOfPlayers = opponents.length + 1;
return (
<LifeCounterContentWrapper style={{ background: player.color }}>
<LifeCounterWrapper
@@ -240,7 +242,10 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
style={{ rotate: `${calcRotation}deg` }}
{...handlers}
>
{!playing && settings.showStartingPlayer && player.isStartingPlayer && (
{amountOfPlayers > 1 &&
!playing &&
settings.showStartingPlayer &&
player.isStartingPlayer && (
<div
className="z-20 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
style={{
@@ -278,7 +283,8 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
{player.hasLost && (
<PlayerLostWrapper $rotation={player.settings.rotation} />
)}
{settings.showStartingPlayer &&
{amountOfPlayers > 1 &&
settings.showStartingPlayer &&
settings.useRandomStartingPlayerInterval &&
!stopPlayerRandomization &&
!playing && (

153
src/Components/Players/PlayerMenu.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Checkbox } from '@mui/material';
import { Checkbox } from '@mui/material';
import { useRef } from 'react';
import { twc } from 'react-twc';
import { theme } from '../../Data/theme';
@@ -19,8 +19,6 @@ import {
import { Player, Rotation } from '../../Types/Player';
import { RotationDivProps } from '../Buttons/CommanderDamage';
const CheckboxContainer = twc.div``;
const PlayerMenuWrapper = twc.div`
flex
flex-col
@@ -51,7 +49,6 @@ const TogglesSection = twc.div`
flex-row
flex-wrap
relative
gap-2
h-full
justify-evenly
items-center
@@ -60,11 +57,11 @@ const TogglesSection = twc.div`
const ButtonsSections = twc.div`
flex
max-w-full
gap-4
justify-between
p-[3%]
justify-evenly
items-center
flex-wrap
mt-0
px-2
`;
const ColorPickerButton = twc.div`
@@ -79,7 +76,7 @@ const ColorPickerButton = twc.div`
`;
const SettingsContainer = twc.div<RotationDivProps>((props) => [
'flex flex-wrap h-full w-full',
'flex flex-wrap h-full w-full overflow-y-scroll',
props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
? 'flex-col'
: 'flex-row',
@@ -98,6 +95,7 @@ const PlayerMenu = ({
}: PlayerMenuProps) => {
const settingsContainerRef = useRef<HTMLDivElement | null>(null);
const resetGameDialogRef = useRef<HTMLDialogElement | null>(null);
const endGameDialogRef = useRef<HTMLDialogElement | null>(null);
const { isSide } = useSafeRotate({
rotation: player.settings.rotation,
@@ -112,6 +110,7 @@ const PlayerMenu = ({
setPlaying,
setStopPlayerRandomization,
} = useGlobalSettings();
const { updatePlayer, resetCurrentGame } = usePlayers();
const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -173,14 +172,13 @@ const PlayerMenu = ({
}}
ref={settingsContainerRef}
>
{settings.showPlayerMenuCog && (
<button
onClick={() => setShowPlayerMenu(false)}
className="flex absolute top-0 right-2 z-10 w-8 h-8 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2"
className="flex absolute top-0 right-2 z-10 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2 p-[0.2rem]"
>
<Cross size="16px" className="text-primary-main " />
<Cross size={buttonFontSize} className="text-primary-main " />
</button>
)}
<BetterRowContainer>
<TogglesSection>
<ColorPickerButton aria-label="Color picker">
@@ -192,7 +190,7 @@ const PlayerMenu = ({
/>
</ColorPickerButton>
{player.settings.useCommanderDamage && (
<CheckboxContainer>
<div>
<Checkbox
name="usePartner"
checked={player.settings.usePartner}
@@ -217,9 +215,9 @@ const PlayerMenu = ({
aria-checked={player.settings.usePartner}
aria-label="Partner"
/>
</CheckboxContainer>
</div>
)}
<CheckboxContainer>
<div>
<Checkbox
name="usePoison"
checked={player.settings.usePoison}
@@ -244,8 +242,8 @@ const PlayerMenu = ({
aria-checked={player.settings.usePoison}
aria-label="Poison"
/>
</CheckboxContainer>
<CheckboxContainer>
</div>
<div>
<Checkbox
name="useEnergy"
checked={player.settings.useEnergy}
@@ -270,8 +268,8 @@ const PlayerMenu = ({
aria-checked={player.settings.useEnergy}
aria-label="Energy"
/>
</CheckboxContainer>
<CheckboxContainer>
</div>
<div>
<Checkbox
name="useExperience"
checked={player.settings.useExperience}
@@ -296,21 +294,22 @@ const PlayerMenu = ({
aria-checked={player.settings.useExperience}
aria-label="Experience"
/>
</CheckboxContainer>
</div>
</TogglesSection>
<ButtonsSections className="mt-4">
<Button
variant="text"
style={{
cursor: 'pointer',
userSelect: 'none',
}}
onClick={handleGoToStart}
<ButtonsSections>
<button
className="text-primary-main cursor-pointer webkit-user-select-none"
onClick={() => endGameDialogRef.current?.show()}
aria-label="Back to start"
>
<Exit size={iconSize} style={{ rotate: '180deg' }} />
</Button>
<CheckboxContainer>
</button>
<div
data-fullscreen={document.fullscreenElement ? true : false}
className="flex
data-[fullscreen=true]:bg-secondary-dark rounded-lg border border-transparent
data-[fullscreen=true]:border-primary-main"
>
<Checkbox
name="fullscreen"
checked={document.fullscreenElement ? true : false}
@@ -325,65 +324,113 @@ const PlayerMenu = ({
role="checkbox"
aria-checked={document.fullscreenElement ? true : false}
aria-label="Fullscreen"
style={{ padding: '4px' }}
/>
</CheckboxContainer>
</div>
<Button
variant={wakeLock.active ? 'contained' : 'outlined'}
<button
data-wake-lock-active={settings.keepAwake}
style={{
cursor: 'pointer',
userSelect: 'none',
fontSize: buttonFontSize,
padding: '0 4px 0 4px',
}}
onClick={wakeLock.toggleWakeLock}
className="text-primary-main px-1 webkit-user-select-none cursor-pointer
data-[wake-lock-active=false]:bg-secondary-dark rounded-lg border border-transparent
data-[wake-lock-active=false]:border-primary-main
"
onClick={() => {
wakeLock.toggleWakeLock();
}}
role="checkbox"
aria-checked={wakeLock.active}
aria-checked={settings.keepAwake}
aria-label="Keep awake"
>
Keep Awake
</Button>
</button>
<Button
<button
style={{
cursor: 'pointer',
userSelect: 'none',
fontSize: buttonFontSize,
padding: '4px',
padding: '2px',
}}
className="text-primary-main"
onClick={() => resetGameDialogRef.current?.show()}
role="checkbox"
aria-checked={wakeLock.active}
aria-label="Reset Game"
>
<ResetGame size={iconSize} />
</Button>
</button>
</ButtonsSections>
</BetterRowContainer>
<dialog
ref={resetGameDialogRef}
className="z-[999] size-full bg-background-settings"
className="z-[999] size-full bg-background-settings overflow-y-scroll"
onClick={() => resetGameDialogRef.current?.close()}
>
<div className="flex size-full items-center justify-center">
<div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-2xl border-none">
<h1 className="text-center text-text-primary">Reset Game?</h1>
<div className="flex justify-evenly gap-4">
<Button
variant="contained"
<div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-xl border-none">
<h1
className="text-center text-text-primary"
style={{ fontSize: extraCountersSize }}
>
Reset Game?
</h1>
<div className="flex justify-evenly gap-2">
<button
className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
style={{ fontSize: iconSize }}
onClick={() => resetGameDialogRef.current?.close()}
>
No
</Button>
<Button
variant="contained"
</button>
<button
className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
onClick={() => {
handleResetGame();
resetGameDialogRef.current?.close();
}}
style={{ fontSize: iconSize }}
>
Yes
</Button>
</button>
</div>
</div>
</div>
</dialog>
<dialog
ref={endGameDialogRef}
className="z-[999] size-full bg-background-settings overflow-y-scroll"
onClick={() => endGameDialogRef.current?.close()}
>
<div className="flex size-full items-center justify-center">
<div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-xl border-none">
<h1
className="text-center text-text-primary"
style={{ fontSize: extraCountersSize }}
>
End Game?
</h1>
<div className="flex justify-evenly gap-2">
<button
className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
style={{ fontSize: iconSize }}
onClick={() => endGameDialogRef.current?.close()}
>
No
</button>
<button
className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
onClick={() => {
handleGoToStart();
endGameDialogRef.current?.close();
}}
style={{ fontSize: iconSize }}
>
Yes
</button>
</div>
</div>
</div>

18
src/Components/Players/Players.tsx
View File

@@ -42,6 +42,7 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
useEffect(() => {
if (
players.length > 1 &&
settings.showStartingPlayer &&
settings.useRandomStartingPlayerInterval &&
!stopPlayerRandomization &&
@@ -101,14 +102,17 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
stopPlayerRandomization,
]);
const gradientColors = players.map((player) => player.color).join(', ');
return (
<PlayersWrapper>
{settings.showStartingPlayer &&
{players.length > 1 &&
settings.showStartingPlayer &&
settings.useRandomStartingPlayerInterval &&
!stopPlayerRandomization &&
!playing && (
<div
className="absolute flex justify-center items-center bg-black bg-opacity-40 h-screen w-screen portrait:h-[100vw] portrait:w-[100vh] z-50 cursor-pointer text-5xl"
className="absolute flex justify-center items-center h-screen w-screen portrait:h-[100vw] portrait:w-[100vh] z-50 cursor-pointer text-5xl"
onClick={() => {
if (randomIntervalRef.current) {
clearInterval(randomIntervalRef.current);
@@ -117,8 +121,16 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
setStopPlayerRandomization(true);
}}
>
<div className="bg-primary-main px-8 py-2 rounded-2xl opacity-70 text-[5vmax]">
<div className="absolute flex top-[30%] justify-center items-center px-8 py-4">
<div
className="absolute size-full blur-[3px] rounded-2xl opacity-90 saturate-150"
style={{
backgroundImage: `linear-gradient(60deg, ${gradientColors})`,
}}
/>
<p className="relative z-10 text-[5vmax]">
PRESS TO SELECT PLAYER
</p>
</div>
</div>
)}

14
src/Components/Views/StartMenu/LayoutOptions.tsx
View File

@@ -3,10 +3,12 @@ import React from 'react';
import { theme } from '../../../Data/theme';
import {
FivePlayers,
FivePlayersSide,
FourPlayers,
FourPlayersSide,
OnePlayerPortrait,
SixPlayers,
SixPlayersSide,
ThreePlayers,
ThreePlayersSide,
TwoPlayersOppositeLandscape,
@@ -303,8 +305,8 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
}
label=""
/>
{/* <FormControlLabel
value={GridTemplateAreas.FivePlayersSide}
<FormControlLabel
value={Orientation.Portrait}
control={
<Radio
icon={
@@ -325,7 +327,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
/>
}
label=""
/> */}
/>
</>
);
@@ -356,8 +358,8 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
}
label=""
/>
{/* <FormControlLabel
value={GridTemplateAreas.SixPlayersSide}
<FormControlLabel
value={Orientation.Portrait}
control={
<Radio
icon={
@@ -378,7 +380,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
/>
}
label=""
/> */}
/>
</>
);

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

@@ -262,18 +262,6 @@ const Start = () => {
</ToggleButtonsWrapper>
<FormLabel>Layout</FormLabel>
{/* <LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers}
gridAreas={playerOptions.gridAreas}
onChange={(gridAreas) =>
setPlayerOptions({
...playerOptions,
gridAreas,
//TODO fix the layout selection
orientation: Orientation.Portrait,
})
}
/> */}
<LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers}
selectedOrientation={playerOptions.orientation}

22
src/Data/getInitialPlayers.ts
View File

@@ -127,15 +127,15 @@ const getOrientationRotations = (
case Orientation.Portrait:
switch (index) {
case 0:
return Rotation.Side;
return Rotation.Flipped;
case 1:
return Rotation.Side;
return Rotation.Flipped;
case 2:
return Rotation.SideFlipped;
return Rotation.Side;
case 3:
return Rotation.SideFlipped;
return Rotation.Normal;
case 4:
return Rotation.SideFlipped;
return Rotation.Normal;
default:
return Rotation.Normal;
}
@@ -163,17 +163,17 @@ const getOrientationRotations = (
case Orientation.Portrait:
switch (index) {
case 0:
return Rotation.Side;
return Rotation.SideFlipped;
case 1:
return Rotation.Side;
return Rotation.Flipped;
case 2:
return Rotation.Side;
return Rotation.Flipped;
case 3:
return Rotation.SideFlipped;
return Rotation.Side;
case 4:
return Rotation.SideFlipped;
return Rotation.Normal;
case 5:
return Rotation.SideFlipped;
return Rotation.Normal;
default:
return Rotation.Normal;
}

1
src/Hooks/useOrientation.ts
View File

@@ -23,7 +23,6 @@ export default function useOrientation(
const onChange = () => {
if (mounted) {
const { orientation } = screen;
console.log(orientation);
if (orientation) {
const { angle, type } = orientation;

4
tailwind.config.ts
View File

@@ -80,8 +80,8 @@ export default {
],
sixPlayers: ['player0 player1 player2', 'player3 player4 player5'],
sixPlayersSide: [
'player0 player1 player1 player1 player1 player2 player2 player2 player2 player3',
'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3',
'player0 player1 player1 player1 player1 player1 player1 player2 player2 player2 player2 player2 player2 player3',
'player0 player4 player4 player4 player4 player4 player4 player5 player5 player5 player5 player5 player5 player3',
],
},
colors: baseColors,