diff --git a/src/App.tsx b/src/App.tsx index a22727c..f3fd7c1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -79,6 +79,7 @@ const App = () => { const newGame = () => { localStorage.removeItem('players'); + localStorage.removeItem('playing'); localStorage.removeItem('initialGameSettings'); window.location.reload(); diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index a947025..4f3e5a9 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -78,6 +78,37 @@ const LifeCountainer = styled.div<{ }} `; +const StartingPlayer = styled.div<{ + rotation: Rotation; +}>` + z-index: 1; + display: flex; + position: absolute; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + font-size: 8vmin; + background: turquoise; + pointer-events: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; + user-select: none; + -moz-user-select: -moz-none; + -webkit-user-select: none; + -ms-user-select: none; + ${(props) => { + if ( + props.rotation === Rotation.SideFlipped || + props.rotation === Rotation.Side + ) { + return css` + flex-direction: column-reverse; + `; + } + }} +`; + const LifeCounterTextContainer = styled.p<{ rotation: Rotation; }>` @@ -155,16 +186,30 @@ const LifeCounter = ({ const [showPlayerMenu, setShowPlayerMenu] = useState(false); const [recentDifference, setRecentDifference] = useState(0); + const [showStartingPlayer, setShowStartingPlayer] = useState( + localStorage.getItem('playing') === 'true' + ); const [key, setKey] = useState(Date.now()); useEffect(() => { const timer = setTimeout(() => { setRecentDifference(0); - }, 3000); + }, 3_000); return () => clearTimeout(timer); }, [recentDifference]); + useEffect(() => { + if (!showStartingPlayer) { + const playingTimer = setTimeout(() => { + localStorage.setItem('playing', 'true'); + setShowStartingPlayer(localStorage.getItem('playing') === 'true'); + }, 3_000); + + return () => clearTimeout(playingTimer); + } + }, [showStartingPlayer]); + const size = 30; const fontSize = `${size}vmin`; const strokeWidth = `${size / 20}vmin`; @@ -172,6 +217,12 @@ const LifeCounter = ({ return ( + {player.isStartingPlayer && !showStartingPlayer && ( + + You start! + + )} + { const handleNewGame = () => { localStorage.removeItem('players'); + localStorage.removeItem('playing'); localStorage.removeItem('initialGameSettings'); window.location.reload(); diff --git a/src/Data/getInitialPlayers.ts b/src/Data/getInitialPlayers.ts index 375282b..ac4d29a 100644 --- a/src/Data/getInitialPlayers.ts +++ b/src/Data/getInitialPlayers.ts @@ -200,8 +200,10 @@ export const createInitialPlayers = ({ }: InitialSettings): 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]; @@ -231,7 +233,7 @@ export const createInitialPlayers = ({ usePoison: false, rotation, }, - + isStartingPlayer: isStartingPlayer, extraCounters: [], commanderDamage, }; diff --git a/src/Types/Player.ts b/src/Types/Player.ts index 6150151..a1f044a 100644 --- a/src/Types/Player.ts +++ b/src/Types/Player.ts @@ -6,6 +6,7 @@ export type Player = { settings: PlayerSettings; commanderDamage: CommanderDamage[]; extraCounters: ExtraCounter[]; + isStartingPlayer: boolean; }; export type PlayerSettings = {