From a90dd7c9ea44b568e87aeb873c879db1cb5fbc51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 16 Mar 2024 14:40:18 +0100 Subject: [PATCH] wip --- src/Components/LifeCounter/LifeCounter.tsx | 76 ++++++++------ src/Components/Misc/SettingsModal.tsx | 20 ++++ src/Components/Player/Player.tsx | 50 ---------- .../{Player => Players}/PlayerMenu.tsx | 0 src/Components/Players/Players.tsx | 99 +++++++++++++++++++ src/Components/Views/Play.tsx | 28 +++--- src/Data/getInitialPlayers.ts | 4 - src/Providers/GlobalSettingsProvider.tsx | 1 + src/Providers/PlayersProvider.tsx | 12 --- src/Types/Player.ts | 2 - src/Types/Settings.ts | 1 + 11 files changed, 183 insertions(+), 110 deletions(-) delete mode 100644 src/Components/Player/Player.tsx rename src/Components/{Player => Players}/PlayerMenu.tsx (100%) create mode 100644 src/Components/Players/Players.tsx diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 0e5be1b..52700b0 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -13,7 +13,7 @@ import { LoseGameButton } from '../Buttons/LoseButton'; import CommanderDamageBar from '../Counters/CommanderDamageBar'; import ExtraCountersBar from '../Counters/ExtraCountersBar'; import { Paragraph } from '../Misc/TextComponents'; -import PlayerMenu from '../Player/PlayerMenu'; +import PlayerMenu from '../Players/PlayerMenu'; import Health from './Health'; import { baseColors } from '../../../tailwind.config'; @@ -88,16 +88,24 @@ const playerCanLose = (player: Player) => { }; type LifeCounterProps = { + stopRandom: boolean; player: Player; opponents: Player[]; + isStartingPlayer?: boolean; }; const RECENT_DIFFERENCE_TTL = 3_000; -const LifeCounter = ({ player, opponents }: LifeCounterProps) => { +const LifeCounter = ({ + stopRandom, + player, + opponents, + isStartingPlayer, +}: LifeCounterProps) => { const { updatePlayer, updateLifeTotal } = usePlayers(); const { settings } = useGlobalSettings(); const playingTimerRef = useRef(undefined); + const [playing, setPlaying] = useState(false); const [showPlayerMenu, setShowPlayerMenu] = useState(false); const [recentDifference, setRecentDifference] = useState(0); @@ -127,6 +135,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { onSwiping: (e) => e.event.stopPropagation(), rotationAngle, }); + console.log('stopRandom', stopRandom); useEffect(() => { const timer = setTimeout(() => { @@ -153,6 +162,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { useEffect(() => { playingTimerRef.current = setTimeout(() => { localStorage.setItem('playing', 'true'); + setPlaying(true); }, 10_000); return () => clearTimeout(playingTimerRef.current); @@ -191,39 +201,49 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { style={{ rotate: `${calcRotation}deg` }} {...handlers} > - {settings.showStartingPlayer && - player.isStartingPlayer && - player.showStartingPlayer && ( -
{ + clearTimeout(playingTimerRef.current); + localStorage.setItem('playing', 'true'); + setPlaying(true); + }} + > + { - clearTimeout(playingTimerRef.current); - localStorage.setItem('playing', 'true'); - player.showStartingPlayer = false; - updatePlayer(player); + rotate: `${calcTextRotation}deg`, }} > - -
- 👑 - You start! - (Press to hide) -
- -
- )} +
+ 👑 + {(stopRandom || !settings.useRandomStartingPlayerInterval) && ( + <> + You start! + (Press to hide) + + )} +
+ + + )} {player.hasLost && ( )} + {settings.useRandomStartingPlayerInterval && !stopRandom && ( +
+ )} { this is enabled. + + + Randomize starting player with interval + { + setSettings({ + ...settings, + useRandomStartingPlayerInterval: + !settings.useRandomStartingPlayerInterval, + }); + }} + /> + + + Will randomize between all players at when starting a game, + pressing the screen aborts the interval and chooses the player + that has the crown. + + Keep Awake diff --git a/src/Components/Player/Player.tsx b/src/Components/Player/Player.tsx deleted file mode 100644 index ee009c1..0000000 --- a/src/Components/Player/Player.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import LifeCounter from '../LifeCounter/LifeCounter'; -import { Player as PlayerType } from '../../Types/Player'; -import { twc } from 'react-twc'; - -const getGridArea = (player: PlayerType) => { - switch (player.index) { - case 0: - return 'grid-in-player0'; - case 1: - return 'grid-in-player1'; - case 2: - return 'grid-in-player2'; - case 3: - return 'grid-in-player3'; - case 4: - return 'grid-in-player4'; - case 5: - return 'grid-in-player5'; - default: - throw new Error('Invalid player index'); - } -}; - -const PlayerWrapper = twc.div`w-full h-full bg-black`; - -export const Player = (players: PlayerType[], gridClasses: string) => { - return ( - -
- {players.map((player) => { - const gridArea = getGridArea(player); - - return ( -
- opponent.index !== player.index - )} - /> -
- ); - })} -
- - ); -}; diff --git a/src/Components/Player/PlayerMenu.tsx b/src/Components/Players/PlayerMenu.tsx similarity index 100% rename from src/Components/Player/PlayerMenu.tsx rename to src/Components/Players/PlayerMenu.tsx diff --git a/src/Components/Players/Players.tsx b/src/Components/Players/Players.tsx new file mode 100644 index 0000000..e177d3f --- /dev/null +++ b/src/Components/Players/Players.tsx @@ -0,0 +1,99 @@ +import LifeCounter from '../LifeCounter/LifeCounter'; +import { Player as PlayerType } from '../../Types/Player'; +import { twc } from 'react-twc'; +import { useEffect, useRef, useState } from 'react'; +import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; + +const getGridArea = (player: PlayerType) => { + switch (player.index) { + case 0: + return 'grid-in-player0'; + case 1: + return 'grid-in-player1'; + case 2: + return 'grid-in-player2'; + case 3: + return 'grid-in-player3'; + case 4: + return 'grid-in-player4'; + case 5: + return 'grid-in-player5'; + default: + throw new Error('Invalid player index'); + } +}; + +const PlayersWrapper = twc.div`w-full h-full bg-black`; + +export const Players = (players: PlayerType[], gridClasses: string) => { + const randomIntervalRef = useRef(null); + const [randomPlayerIndex, setRandomPlayerIndex] = useState( + Math.floor(Math.random() * players.length) + ); + const [stopRandom, setStopRandom] = useState(false); + const { settings } = useGlobalSettings(); + + useEffect(() => { + if (settings.useRandomStartingPlayerInterval) { + randomIntervalRef.current = setInterval(() => { + let randomIndex: number; + + do { + randomIndex = Math.floor(Math.random() * players.length); + } while (randomIndex === randomPlayerIndex); + + setRandomPlayerIndex(randomIndex); + }, 100); + } + return () => { + if (randomIntervalRef.current) { + clearInterval(randomIntervalRef.current); + } + }; + }, [ + players.length, + randomPlayerIndex, + settings.useRandomStartingPlayerInterval, + ]); + + return ( + + {settings.useRandomStartingPlayerInterval && ( +
{ + if (randomIntervalRef.current) { + clearInterval(randomIntervalRef.current); + randomIntervalRef.current = null; + setStopRandom(true); + } + }} + > + CHOOSE A PLAYER +
+ )} +
+ {players.map((player) => { + const gridArea = getGridArea(player); + + return ( +
+ opponent.index !== player.index + )} + isStartingPlayer={randomPlayerIndex === player.index} + /> +
+ ); + })} +
+ + ); +}; diff --git a/src/Components/Views/Play.tsx b/src/Components/Views/Play.tsx index c52dc2a..17c6e1e 100644 --- a/src/Components/Views/Play.tsx +++ b/src/Components/Views/Play.tsx @@ -1,7 +1,7 @@ import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { usePlayers } from '../../Hooks/usePlayers'; import { Orientation } from '../../Types/Settings'; -import { Player } from '../Player/Player'; +import { Players } from '../Players/Players'; import { twc } from 'react-twc'; const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden`; @@ -14,52 +14,52 @@ export const Play = () => { switch (players.length) { case 1: if (initialGameSettings?.orientation === Orientation.Portrait) { - Layout = Player(players, 'grid-areas-onePlayerPortrait'); + Layout = Players(players, 'grid-areas-onePlayerPortrait'); } - Layout = Player(players, 'grid-areas-onePlayerLandscape'); + Layout = Players(players, 'grid-areas-onePlayerLandscape'); break; case 2: switch (initialGameSettings?.orientation) { case Orientation.Portrait: - Layout = Player(players, 'grid-areas-twoPlayersOppositePortrait'); + Layout = Players(players, 'grid-areas-twoPlayersOppositePortrait'); break; default: case Orientation.Landscape: - Layout = Player(players, 'grid-areas-twoPlayersSameSideLandscape'); + Layout = Players(players, 'grid-areas-twoPlayersSameSideLandscape'); break; case Orientation.OppositeLandscape: - Layout = Player(players, 'grid-areas-twoPlayersOppositeLandscape'); + Layout = Players(players, 'grid-areas-twoPlayersOppositeLandscape'); break; } break; case 3: if (initialGameSettings?.orientation === Orientation.Portrait) { - Layout = Player(players, 'grid-areas-threePlayersSide'); + Layout = Players(players, 'grid-areas-threePlayersSide'); break; } - Layout = Player(players, 'grid-areas-threePlayers'); + Layout = Players(players, 'grid-areas-threePlayers'); break; default: case 4: if (initialGameSettings?.orientation === Orientation.Portrait) { - Layout = Player(players, 'grid-areas-fourPlayerPortrait'); + Layout = Players(players, 'grid-areas-fourPlayerPortrait'); break; } - Layout = Player(players, 'grid-areas-fourPlayer'); + Layout = Players(players, 'grid-areas-fourPlayer'); break; case 5: if (initialGameSettings?.orientation === Orientation.Portrait) { - Layout = Player(players, 'grid-areas-fivePlayersSide'); + Layout = Players(players, 'grid-areas-fivePlayersSide'); break; } - Layout = Player(players, 'grid-areas-fivePlayers'); + Layout = Players(players, 'grid-areas-fivePlayers'); break; case 6: if (initialGameSettings?.orientation === Orientation.Portrait) { - Layout = Player(players, 'grid-areas-sixPlayersSide'); + Layout = Players(players, 'grid-areas-sixPlayersSide'); break; } - Layout = Player(players, 'grid-areas-sixPlayers'); + Layout = Players(players, 'grid-areas-sixPlayers'); break; } diff --git a/src/Data/getInitialPlayers.ts b/src/Data/getInitialPlayers.ts index 3584f43..203b8e5 100644 --- a/src/Data/getInitialPlayers.ts +++ b/src/Data/getInitialPlayers.ts @@ -191,10 +191,8 @@ export const createInitialPlayers = ({ }: InitialGameSettings): Player[] => { const players: Player[] = []; const availableColors = [...presetColors]; // Create a copy of the colors array - const firstPlayerIndex = Math.floor(Math.random() * numberOfPlayers); for (let i = 0; i <= numberOfPlayers - 1; i++) { - const isStartingPlayer = i === firstPlayerIndex; const colorIndex = Math.floor(Math.random() * availableColors.length); const color = availableColors[colorIndex]; @@ -224,8 +222,6 @@ export const createInitialPlayers = ({ usePoison: false, rotation, }, - isStartingPlayer, - showStartingPlayer: isStartingPlayer, extraCounters: [], commanderDamage, hasLost: false, diff --git a/src/Providers/GlobalSettingsProvider.tsx b/src/Providers/GlobalSettingsProvider.tsx index bd2b794..59746d3 100644 --- a/src/Providers/GlobalSettingsProvider.tsx +++ b/src/Providers/GlobalSettingsProvider.tsx @@ -39,6 +39,7 @@ export const GlobalSettingsProvider = ({ keepAwake: true, showStartingPlayer: true, showPlayerMenuCog: true, + useRandomStartingPlayerInterval: false, } ); diff --git a/src/Providers/PlayersProvider.tsx b/src/Providers/PlayersProvider.tsx index 7e27b5e..84a11e9 100644 --- a/src/Providers/PlayersProvider.tsx +++ b/src/Providers/PlayersProvider.tsx @@ -50,10 +50,6 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => { return; } - const startingPlayerIndex = Math.floor( - Math.random() * initialGameSettings.numberOfPlayers - ); - players.forEach((player: Player) => { player.commanderDamage.map((damage) => { damage.damageTotal = 0; @@ -68,14 +64,6 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => { player.hasLost = false; - const isStartingPlayer = player.index === startingPlayerIndex; - - player.isStartingPlayer = isStartingPlayer; - - if (player.isStartingPlayer) { - player.showStartingPlayer = true; - } - updatePlayer(player); }); localStorage.setItem('playing', 'false'); diff --git a/src/Types/Player.ts b/src/Types/Player.ts index 93ecd3f..6797d8b 100644 --- a/src/Types/Player.ts +++ b/src/Types/Player.ts @@ -5,8 +5,6 @@ export type Player = { settings: PlayerSettings; commanderDamage: CommanderDamage[]; extraCounters: ExtraCounter[]; - isStartingPlayer: boolean; - showStartingPlayer: boolean; hasLost: boolean; isSide: boolean; }; diff --git a/src/Types/Settings.ts b/src/Types/Settings.ts index 48e025c..e697560 100644 --- a/src/Types/Settings.ts +++ b/src/Types/Settings.ts @@ -17,6 +17,7 @@ export type Settings = { showStartingPlayer: boolean; showPlayerMenuCog: boolean; goFullscreenOnStart: boolean; + useRandomStartingPlayerInterval: boolean; }; export type InitialGameSettings = {