More Pre-Start modes. (#34)

* do

* parse settings before setting

src/Components/PreStartGame/Games/RandomKing/RoulettePlayerCard.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef } from 'react';
+import { useGlobalSettings } from '../../../../Hooks/useGlobalSettings';
+import { Player, Rotation } from '../../../../Types/Player';
+import { Paragraph } from '../../../Misc/TextComponents';
+import { DynamicText } from '../../StartingPlayerCard';
+
+export const RoulettePlayerCard = ({ player }: { player: Player }) => {
+  const startPlayingTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const { settings, randomizingPlayer, playing, setPlaying } =
+    useGlobalSettings();
+
+  useEffect(() => {
+    if (
+      player.isStartingPlayer &&
+      ((!playing && randomizingPlayer) || !playing)
+    ) {
+      startPlayingTimerRef.current = setTimeout(() => {
+        setPlaying(true);
+      }, 10_000);
+    }
+
+    return () => clearTimeout(startPlayingTimerRef.current);
+  }, [
+    player.isStartingPlayer,
+    playing,
+    setPlaying,
+    settings.preStartMode,
+    randomizingPlayer,
+  ]);
+
+  const calcTextRotation =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? player.settings.rotation - 180
+      : player.settings.rotation;
+
+  return (
+    <div className="relative flex flex-grow flex-col items-center w-full h-full overflow-hidden">
+      <div
+        className="flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none z-10"
+        style={{ backgroundColor: player.color }}
+      >
+        {player.isStartingPlayer && (
+          <DynamicText
+            style={{
+              rotate: `${calcTextRotation}deg`,
+            }}
+          >
+            <div className="flex flex-col justify-center items-center">
+              <Paragraph>👑</Paragraph>
+            </div>
+          </DynamicText>
+        )}
+      </div>
+    </div>
+  );
+};