wip start menu

my-app/src/App.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
 import './App.css';
 import { Player } from './Types/Player';
-import { createInitialPlayers } from './Data/getInitialPlayers';
 import Play from './Components/Views/Play';
+import StartMenu from './Components/Views/StartMenu';
+import { InitialSettings } from './Data/getInitialPlayers';
 import { GridTemplateAreas } from './Data/getGridTemplateAreas';
 
 export const initialPlayerOptions = {
@@ -15,13 +16,12 @@ export const initialPlayerOptions = {
 const App = () => {
   const savedPlayers = localStorage.getItem('players');
 
-  const [players, setPlayers] = useState<Player[]>(
+  const [initialPlayerOptions, setInitialPlayerOptions] =
-    savedPlayers
+    useState<InitialSettings | null>(null);
-      ? JSON.parse(savedPlayers)
-      : createInitialPlayers(initialPlayerOptions)
-  );
 
-  const [gridAreas, setGridAreas] = useState(initialPlayerOptions.gridAreas);
+  const [players, setPlayers] = useState<Player[]>(
+    savedPlayers ? JSON.parse(savedPlayers) : []
+  );
 
   useEffect(() => {
     localStorage.setItem('players', JSON.stringify(players));
@@ -34,21 +34,20 @@ const App = () => {
     setPlayers(updatedPlayers);
   };
 
-  if (players) {
+  if (players && initialPlayerOptions) {
     return (
       <Play
         players={players}
         onPlayerChange={handlePlayerChange}
-        gridAreas={gridAreas}
+        gridAreas={initialPlayerOptions?.gridAreas}
       />
     );
   }
 
   return (
-    <Play
+    <StartMenu
-      players={players}
+      setInitialPlayerOptions={setInitialPlayerOptions}
-      onPlayerChange={handlePlayerChange}
+      setPlayers={setPlayers}
-      gridAreas={gridAreas}
     />
   );
 };

my-app/src/Components/Views/StartMenu.tsx

@@ -1,4 +1,7 @@
+import { useState } from 'react';
 import styled from 'styled-components';
+import { GridTemplateAreas } from '../../Data/getGridTemplateAreas';
+import { InitialSettings } from '../../Data/getInitialPlayers';
 import { Player } from '../../Types/Player';
 
 const MainWrapper = styled.div`
@@ -8,12 +11,26 @@ const MainWrapper = styled.div`
 `;
 
 type StartProps = {
-  players: Player[];
+  setInitialPlayerOptions: (options: InitialSettings) => void;
   setPlayers: (updatedPlayer: Player[]) => void;
 };
 
-const Start = ({ players, setPlayers }: StartProps) => {
+const Start = ({ setInitialPlayerOptions, setPlayers }: StartProps) => {
-  return <MainWrapper></MainWrapper>;
+  const [playerOptions, setPlayerOptions] = useState<InitialSettings>({
+    numberOfPlayers: 4,
+    startingLifeTotal: 40,
+    useCommanderDamage: true,
+    gridAreas: GridTemplateAreas.FourPlayers,
+  });
+  const handleFourPlayersSet = () => {
+    setInitialPlayerOptions(playerOptions);
+  };
+
+  return (
+    <MainWrapper>
+      <button onClick={handleFourPlayersSet}>4 Players</button>
+    </MainWrapper>
+  );
 };
 
 export default Start;

my-app/src/Data/getInitialPlayers.ts

@@ -1,7 +1,7 @@
 import { Player, Rotation } from '../Types/Player';
 import { GridTemplateAreas } from './getGridTemplateAreas';
 
-type InitialSettings = {
+export type InitialSettings = {
   startingLifeTotal: number;
   useCommanderDamage: boolean;
   numberOfPlayers: number;