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

fix random interval

Browse Source
This commit is contained in:
Viktor Rådberg
2024-03-16 21:59:24 +01:00
parent a90dd7c9ea
commit 905912a7fd
8 changed files with 167 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -88,7 +88,6 @@ const playerCanLose = (player: Player) => {
};
type LifeCounterProps = {
stopRandom: boolean;
player: Player;
opponents: Player[];
isStartingPlayer?: boolean;
@@ -96,16 +95,11 @@ type LifeCounterProps = {
const RECENT_DIFFERENCE_TTL = 3_000;
const LifeCounter = ({
stopRandom,
player,
opponents,
isStartingPlayer,
}: LifeCounterProps) => {
const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
const { updatePlayer, updateLifeTotal } = usePlayers();
const { settings } = useGlobalSettings();
const { settings, playing, setPlaying, stopPlayerRandomization } =
useGlobalSettings();
const playingTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const [playing, setPlaying] = useState(false);
const [showPlayerMenu, setShowPlayerMenu] = useState(false);
const [recentDifference, setRecentDifference] = useState(0);
@@ -122,12 +116,10 @@ const LifeCounter = ({
trackMouse: true,
onSwipedDown: (e) => {
e.event.stopPropagation();
console.log(`User DOWN Swiped on player ${player.index}`);
setShowPlayerMenu(true);
},
onSwipedUp: (e) => {
e.event.stopPropagation();
console.log(`User UP Swiped on player ${player.index}`);
setShowPlayerMenu(false);
},
@@ -135,7 +127,6 @@ const LifeCounter = ({
onSwiping: (e) => e.event.stopPropagation(),
rotationAngle,
});
console.log('stopRandom', stopRandom);
useEffect(() => {
const timer = setTimeout(() => {
@@ -160,13 +151,26 @@ const LifeCounter = ({
}, [recentDifference, document.body.clientHeight, document.body.clientWidth]);
useEffect(() => {
playingTimerRef.current = setTimeout(() => {
localStorage.setItem('playing', 'true');
setPlaying(true);
}, 10_000);
if (
player.isStartingPlayer &&
((!playing &&
settings.useRandomStartingPlayerInterval &&
stopPlayerRandomization) ||
(!settings.useRandomStartingPlayerInterval && !playing))
) {
playingTimerRef.current = setTimeout(() => {
setPlaying(true);
}, 10_000);
}
return () => clearTimeout(playingTimerRef.current);
}, []);
}, [
player.isStartingPlayer,
playing,
setPlaying,
settings.useRandomStartingPlayerInterval,
stopPlayerRandomization,
]);
player.settings.rotation === Rotation.SideFlipped ||
player.settings.rotation === Rotation.Side;
@@ -201,19 +205,19 @@ const LifeCounter = ({
style={{ rotate: `${calcRotation}deg` }}
{...handlers}
>
{!playing && settings.showStartingPlayer && isStartingPlayer && (
{!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={{
rotate: `${calcRotation}deg`,
backgroundImage:
stopRandom || !settings.useRandomStartingPlayerInterval
stopPlayerRandomization ||
!settings.useRandomStartingPlayerInterval
? `radial-gradient(circle at center, ${player.color}, ${baseColors.primary.main})`
: 'none',
}}
onClick={() => {
clearTimeout(playingTimerRef.current);
localStorage.setItem('playing', 'true');
setPlaying(true);
}}
>
@@ -224,7 +228,8 @@ const LifeCounter = ({
>
<div className="flex flex-col justify-center items-center">
<Paragraph>👑</Paragraph>
{(stopRandom || !settings.useRandomStartingPlayerInterval) && (
{(stopPlayerRandomization ||
!settings.useRandomStartingPlayerInterval) && (
<>
<Paragraph>You start!</Paragraph>
<Paragraph className="text-xl">(Press to hide)</Paragraph>
@@ -238,12 +243,14 @@ const LifeCounter = ({
{player.hasLost && (
<PlayerLostWrapper $rotation={player.settings.rotation} />
)}
{settings.useRandomStartingPlayerInterval && !stopRandom && (
<div
className="flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none z-10"
style={{ backgroundColor: player.color }}
/>
)}
{settings.useRandomStartingPlayerInterval &&
!stopPlayerRandomization &&
!playing && (
<div
className="flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none z-10"
style={{ backgroundColor: player.color }}
/>
)}
<CommanderDamageBar
opponents={opponents}
player={player}

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

@@ -104,7 +104,14 @@ const PlayerMenu = ({
containerRef: settingsContainerRef,
});
const { fullscreen, wakeLock, goToStart, settings } = useGlobalSettings();
const {
fullscreen,
wakeLock,
goToStart,
settings,
setPlaying,
setStopPlayerRandomization,
} = useGlobalSettings();
const { updatePlayer, resetCurrentGame } = usePlayers();
const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -122,6 +129,13 @@ const PlayerMenu = ({
const handleResetGame = () => {
resetCurrentGame();
setShowPlayerMenu(false);
setPlaying(false);
setStopPlayerRandomization(false);
};
const handleGoToStart = () => {
goToStart();
setStopPlayerRandomization(false);
};
const toggleFullscreen = () => {
@@ -291,7 +305,7 @@ const PlayerMenu = ({
cursor: 'pointer',
userSelect: 'none',
}}
onClick={goToStart}
onClick={handleGoToStart}
aria-label="Back to start"
>
<Exit size={iconSize} style={{ rotate: '180deg' }} />

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

@@ -1,8 +1,9 @@
import LifeCounter from '../LifeCounter/LifeCounter';
import { Player as PlayerType } from '../../Types/Player';
import { twc } from 'react-twc';
import { useEffect, useRef, useState } from 'react';
import { twc } from 'react-twc';
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
import { usePlayers } from '../../Hooks/usePlayers';
import { Player as PlayerType } from '../../Types/Player';
import LifeCounter from '../LifeCounter/LifeCounter';
const getGridArea = (player: PlayerType) => {
switch (player.index) {
@@ -27,23 +28,63 @@ const PlayersWrapper = twc.div`w-full h-full bg-black`;
export const Players = (players: PlayerType[], gridClasses: string) => {
const randomIntervalRef = useRef<NodeJS.Timeout | null>(null);
const [randomPlayerIndex, setRandomPlayerIndex] = useState<number>(
Math.floor(Math.random() * players.length)
);
const [stopRandom, setStopRandom] = useState<boolean>(false);
const { settings } = useGlobalSettings();
const prevRandomIndexRef = useRef<number>(-1);
const {
settings,
stopPlayerRandomization,
setStopPlayerRandomization,
playing,
} = useGlobalSettings();
const { setPlayers } = usePlayers();
useEffect(() => {
if (settings.useRandomStartingPlayerInterval) {
if (
settings.useRandomStartingPlayerInterval &&
!stopPlayerRandomization &&
!playing
) {
randomIntervalRef.current = setInterval(() => {
let randomIndex: number;
do {
randomIndex = Math.floor(Math.random() * players.length);
} while (randomIndex === randomPlayerIndex);
} while (randomIndex === prevRandomIndexRef.current);
setRandomPlayerIndex(randomIndex);
}, 100);
prevRandomIndexRef.current = randomIndex;
setPlayers(
players.map((p) =>
p.index === prevRandomIndexRef.current
? {
...p,
isStartingPlayer: true,
}
: {
...p,
isStartingPlayer: false,
}
)
);
}, 200);
}
if (!settings.useRandomStartingPlayerInterval) {
const randomPlayerIndex = Math.floor(Math.random() * players.length);
setPlayers(
players.map((p) =>
p.index === randomPlayerIndex
? {
...p,
isStartingPlayer: true,
}
: {
...p,
isStartingPlayer: false,
}
)
);
}
return () => {
if (randomIntervalRef.current) {
@@ -52,27 +93,30 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
};
}, [
players.length,
randomPlayerIndex,
playing,
setPlayers,
settings.useRandomStartingPlayerInterval,
stopPlayerRandomization,
]);
return (
<PlayersWrapper>
{settings.useRandomStartingPlayerInterval && (
<div
data-stopRandom={stopRandom}
className="absolute flex justify-center items-center bg-black bg-opacity-50 size-full z-50 cursor-pointer text-5xl data-[stopRandom=true]:hidden"
onClick={() => {
if (randomIntervalRef.current) {
clearInterval(randomIntervalRef.current);
randomIntervalRef.current = null;
setStopRandom(true);
}
}}
>
CHOOSE A PLAYER
</div>
)}
{settings.useRandomStartingPlayerInterval &&
!stopPlayerRandomization &&
!playing && (
<div
className="absolute flex justify-center items-center bg-black bg-opacity-50 size-full z-50 cursor-pointer text-5xl"
onClick={() => {
if (randomIntervalRef.current) {
clearInterval(randomIntervalRef.current);
randomIntervalRef.current = null;
}
setStopPlayerRandomization(true);
}}
>
CHOOSE A PLAYER
</div>
)}
<div className={`grid w-full h-full gap-1 box-border ${gridClasses} `}>
{players.map((player) => {
const gridArea = getGridArea(player);
@@ -83,12 +127,10 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
className={`flex justify-center items-center align-middle ${gridArea}`}
>
<LifeCounter
stopRandom={stopRandom}
player={player}
opponents={players.filter(
(opponent) => opponent.index !== player.index
)}
isStartingPlayer={randomPlayerIndex === player.index}
/>
</div>
);

4
src/Contexts/GlobalSettingsContext.tsx
View File

@@ -22,6 +22,10 @@ export type GlobalSettingsContextType = {
setInitialGameSettings: (initialGameSettings: InitialGameSettings) => void;
settings: Settings;
setSettings: (settings: Settings) => void;
playing: boolean;
setPlaying: (playing: boolean) => void;
stopPlayerRandomization: boolean;
setStopPlayerRandomization: (stopRandom: boolean) => void;
isPWA: boolean;
};

2
src/Contexts/PlayersContext.tsx
View File

@@ -7,6 +7,8 @@ export type PlayersContextType = {
updatePlayer: (updatedPlayer: Player) => void;
updateLifeTotal: (player: Player, updatedLifeTotal: number) => number;
resetCurrentGame: () => void;
startingPlayerIndex: number;
setStartingPlayerIndex: (index: number) => void;
};
export const PlayersContext = createContext<PlayersContextType | null>(null);

20
src/Providers/GlobalSettingsProvider.tsx
View File

@@ -21,11 +21,23 @@ export const GlobalSettingsProvider = ({
const savedShowPlay = localStorage.getItem('showPlay');
const savedGameSettings = localStorage.getItem('initialGameSettings');
const savedSettings = localStorage.getItem('settings');
const savedPlaying = localStorage.getItem('playing');
const [playing, setPlaying] = useState<boolean>(
savedPlaying ? savedPlaying === 'true' : false
);
const setPlayingAndLocalStorage = (playing: boolean) => {
setPlaying(playing);
localStorage.setItem('playing', String(playing));
};
const [showPlay, setShowPlay] = useState<boolean>(
savedShowPlay ? savedShowPlay === 'true' : false
);
const [stopPlayerRandomization, setStopPlayerRandomization] =
useState<boolean>(false);
const [initialGameSettings, setInitialGameSettings] =
useState<InitialGameSettings | null>(
savedGameSettings ? JSON.parse(savedGameSettings) : null
@@ -48,6 +60,8 @@ export const GlobalSettingsProvider = ({
localStorage.removeItem('players');
localStorage.removeItem('playing');
localStorage.removeItem('showPlay');
setPlaying(false);
setShowPlay(false);
};
@@ -154,10 +168,14 @@ export const GlobalSettingsProvider = ({
goToStart,
showPlay,
setShowPlay,
playing,
setPlaying: setPlayingAndLocalStorage,
initialGameSettings,
setInitialGameSettings,
settings,
setSettings,
stopPlayerRandomization,
setStopPlayerRandomization,
isPWA: window?.matchMedia('(display-mode: standalone)').matches,
};
}, [
@@ -166,10 +184,12 @@ export const GlobalSettingsProvider = ({
initialGameSettings,
isFullscreen,
isSupported,
playing,
release,
request,
settings,
showPlay,
stopPlayerRandomization,
type,
]);

20
src/Providers/PlayersProvider.tsx
View File

@@ -7,6 +7,17 @@ import { InitialGameSettings } from '../Types/Settings';
export const PlayersProvider = ({ children }: { children: ReactNode }) => {
const savedPlayers = localStorage.getItem('players');
const savedStartingPlayerIndex = localStorage.getItem('startingPlayerIndex');
const [startingPlayerIndex, setStartingPlayerIndex] = useState<number>(
savedStartingPlayerIndex ? parseInt(savedStartingPlayerIndex) : -1
);
const setStartingPlayerIndexAndLocalStorage = (index: number) => {
setStartingPlayerIndex(index);
localStorage.setItem('startingPlayerIndex', String(index));
};
const [players, setPlayers] = useState<Player[]>(
savedPlayers ? JSON.parse(savedPlayers) : []
);
@@ -50,6 +61,8 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
return;
}
const newStartingPlayerIndex = Math.floor(Math.random() * players.length);
players.forEach((player: Player) => {
player.commanderDamage.map((damage) => {
damage.damageTotal = 0;
@@ -61,9 +74,10 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
});
player.lifeTotal = initialGameSettings.startingLifeTotal;
player.hasLost = false;
player.isStartingPlayer = newStartingPlayerIndex === player.index;
updatePlayer(player);
});
localStorage.setItem('playing', 'false');
@@ -75,8 +89,10 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
updatePlayer,
updateLifeTotal,
resetCurrentGame,
startingPlayerIndex,
setStartingPlayerIndex: setStartingPlayerIndexAndLocalStorage,
};
}, [players]);
}, [players, startingPlayerIndex]);
return (
<PlayersContext.Provider value={ctxValue}>

1
src/Types/Player.ts
View File

@@ -5,6 +5,7 @@ export type Player = {
settings: PlayerSettings;
commanderDamage: CommanderDamage[];
extraCounters: ExtraCounter[];
isStartingPlayer: boolean;
hasLost: boolean;
isSide: boolean;
};