fix default values when going back to start (#11)

* add border radius

* fix settings styling a little

* move hook

* get default values from localstorage

src/App.tsx

@@ -7,7 +7,7 @@ import { Player } from './Types/Player';
 
 import { ThemeProvider } from '@mui/material';
 import { theme } from './Data/theme';
-import { useAnalytics } from './Data/useAnalytics';
+import { useAnalytics } from './Hooks/useAnalytics';
 
 const GlobalStyles = createGlobalStyle`
   html,
@@ -19,12 +19,12 @@ const GlobalStyles = createGlobalStyle`
   }
 `;
 
-const RootWrapper2 = styled.div`
+const StartWrapper = styled.div`
   max-width: fit-content;
   max-height: fit-content;
 `;
 
-const RootWrapper = styled.div`
+const PlayWrapper = styled.div`
   max-width: fit-content;
   max-height: fit-content;
   @media (orientation: portrait) {
@@ -32,6 +32,12 @@ const RootWrapper = styled.div`
   }
 `;
 
+const removeLocalStorage = async () => {
+  localStorage.removeItem('initialGameSettings');
+  localStorage.removeItem('players');
+  localStorage.removeItem('playing');
+};
+
 const App = () => {
   const analytics = useAnalytics();
   const savedPlayers = localStorage.getItem('players');
@@ -61,18 +67,16 @@ const App = () => {
     setPlayers(updatedPlayers);
   };
 
-  const resetCurrentGame = () => {
+  const resetCurrentGame = async () => {
     const currentPlayers = localStorage.getItem('players');
     if (currentPlayers) {
       analytics.trackEvent('go_to_start', {
         playersBeforeReset: currentPlayers,
       });
     }
+    await removeLocalStorage();
 
     setPlayers([]);
-    localStorage.removeItem('players');
-    localStorage.removeItem('playing');
-    localStorage.removeItem('initialGameSettings');
   };
 
   return (
@@ -80,22 +84,22 @@ const App = () => {
       <GlobalStyles />
 
       {players.length > 0 && initialGameSettings ? (
-        <RootWrapper>
+        <PlayWrapper>
           <Play
             players={players}
             onPlayerChange={handlePlayerChange}
             gridAreas={initialGameSettings?.gridAreas}
             resetCurrentGame={resetCurrentGame}
           />
-        </RootWrapper>
+        </PlayWrapper>
       ) : (
-        <RootWrapper2>
+        <StartWrapper>
           <StartMenu
             initialGameSettings={initialGameSettings}
             setInitialGameSettings={setInitialGameSettings}
             setPlayers={setPlayers}
           />
-        </RootWrapper2>
+        </StartWrapper>
       )}
     </ThemeProvider>
   );

src/Components/Misc/SupportMe.tsx

@@ -5,7 +5,7 @@ import { theme } from '../../Data/theme';
 import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
 import { Paragraph } from './TextComponents';
 import LittleGuy from '../../Icons/generated/LittleGuy';
-import { useAnalytics } from '../../Data/useAnalytics';
+import { useAnalytics } from '../../Hooks/useAnalytics';
 
 // import { ButtonBase } from '@mui/material';
 

src/Components/Views/StartMenu/StartMenu.tsx

@@ -11,7 +11,7 @@ import { Player } from '../../../Types/Player';
 import { SupportMe } from '../../Misc/SupportMe';
 import { H2, Paragraph } from '../../Misc/TextComponents';
 import LayoutOptions from './LayoutOptions';
-import { useAnalytics } from '../../../Data/useAnalytics';
+import { useAnalytics } from '../../../Hooks/useAnalytics';
 
 const MainWrapper = styled.div`
   width: 100vw;
@@ -101,6 +101,7 @@ const Start = ({
       gridAreas: GridTemplateAreas.FourPlayers,
     }
   );
+
   const doStartGame = () => {
     if (!initialGameSettings) {
       return;
@@ -166,7 +167,7 @@ const Start = ({
           max={6}
           min={1}
           aria-label="Custom marks"
-          defaultValue={4}
+          defaultValue={initialGameSettings?.numberOfPlayers ?? 4}
           getAriaValueText={valuetext}
           step={null}
           marks={playerMarks}
@@ -183,7 +184,7 @@ const Start = ({
           max={60}
           min={20}
           aria-label="Custom marks"
-          defaultValue={40}
+          defaultValue={initialGameSettings?.startingLifeTotal ?? 40}
           getAriaValueText={valuetext}
           step={10}
           marks={healthMarks}
@@ -197,7 +198,7 @@ const Start = ({
         <FormLabel>Commander</FormLabel>
         <Switch
           checked={playerOptions.useCommanderDamage}
-          defaultChecked
+          defaultChecked={initialGameSettings?.useCommanderDamage ?? true}
           onChange={(_e, value) =>
             setPlayerOptions({
               ...playerOptions,