More Pre-Start modes. (#34)

* do

* parse settings before setting

src/Components/Views/Play.tsx

@@ -1,67 +1,115 @@
+import { useEffect } from 'react';
+import { twc } from 'react-twc';
+import { twGridTemplateAreas } from '../../../tailwind.config';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
-import { Orientation } from '../../Types/Settings';
+import { Orientation, PreStartMode } from '../../Types/Settings';
 import { Players } from '../Players/Players';
-import { twc } from 'react-twc';
+import { PreStart } from '../PreStartGame/PreStart';
 
-const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden`;
+const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden, setPlayers`;
+
+type GridTemplateAreasKeys = keyof typeof twGridTemplateAreas;
+
+export type GridLayout = `grid-areas-${GridTemplateAreasKeys}`;
 
 export const Play = () => {
-  const { players } = usePlayers();
-  const { initialGameSettings } = useGlobalSettings();
+  const { players, setPlayers } = usePlayers();
+  const { initialGameSettings, playing, settings, preStartCompleted } =
+    useGlobalSettings();
 
-  let Layout: JSX.Element;
+  let gridLayout: GridLayout;
   switch (players.length) {
     case 1:
       if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Players(players, 'grid-areas-onePlayerPortrait');
+        gridLayout = 'grid-areas-onePlayerPortrait';
       }
-      Layout = Players(players, 'grid-areas-onePlayerLandscape');
+      gridLayout = 'grid-areas-onePlayerLandscape';
       break;
     case 2:
       switch (initialGameSettings?.orientation) {
         case Orientation.Portrait:
-          Layout = Players(players, 'grid-areas-twoPlayersOppositePortrait');
+          gridLayout = 'grid-areas-twoPlayersOppositePortrait';
           break;
         default:
         case Orientation.Landscape:
-          Layout = Players(players, 'grid-areas-twoPlayersSameSideLandscape');
+          gridLayout = 'grid-areas-twoPlayersSameSideLandscape';
           break;
         case Orientation.OppositeLandscape:
-          Layout = Players(players, 'grid-areas-twoPlayersOppositeLandscape');
+          gridLayout = 'grid-areas-twoPlayersOppositeLandscape';
           break;
       }
       break;
     case 3:
       if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Players(players, 'grid-areas-threePlayersSide');
+        gridLayout = 'grid-areas-threePlayersSide';
         break;
       }
-      Layout = Players(players, 'grid-areas-threePlayers');
+      gridLayout = 'grid-areas-threePlayers';
       break;
     default:
     case 4:
       if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Players(players, 'grid-areas-fourPlayerPortrait');
+        gridLayout = 'grid-areas-fourPlayerPortrait';
         break;
       }
-      Layout = Players(players, 'grid-areas-fourPlayer');
+      gridLayout = 'grid-areas-fourPlayer';
       break;
     case 5:
       if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Players(players, 'grid-areas-fivePlayersSide');
+        gridLayout = 'grid-areas-fivePlayersSide';
         break;
       }
-      Layout = Players(players, 'grid-areas-fivePlayers');
+      gridLayout = 'grid-areas-fivePlayers';
       break;
     case 6:
       if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Players(players, 'grid-areas-sixPlayersSide');
+        gridLayout = 'grid-areas-sixPlayersSide';
         break;
       }
-      Layout = Players(players, 'grid-areas-sixPlayers');
+      gridLayout = 'grid-areas-sixPlayers';
       break;
   }
 
-  return <MainWrapper>{Layout}</MainWrapper>;
+  useEffect(() => {
+    if (settings.preStartMode !== PreStartMode.None) {
+      return;
+    }
+
+    const randomIndex = Math.floor(Math.random() * players.length);
+
+    setPlayers(
+      players.map((p) =>
+        p.index === randomIndex
+          ? {
+              ...p,
+              isStartingPlayer: true,
+            }
+          : {
+              ...p,
+              isStartingPlayer: false,
+            }
+      )
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (
+    !preStartCompleted &&
+    settings.preStartMode !== PreStartMode.None &&
+    !playing &&
+    settings.showStartingPlayer
+  ) {
+    return (
+      <MainWrapper>
+        <PreStart gridLayout={gridLayout} />
+      </MainWrapper>
+    );
+  }
+
+  return (
+    <MainWrapper>
+      <Players gridLayout={gridLayout} />
+    </MainWrapper>
+  );
 };