fix roulette card size not being the same a actual play card size

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.9.96",
+  "version": "0.9.98",
   "type": "commonjs",
   "engines": {
     "node": ">=20",

pnpm-lock.yaml

@@ -41,7 +41,7 @@ importers:
         version: 11.11.4(@types/react@18.3.1)(react@18.2.0)
       '@emotion/styled':
         specifier: ^11.11.5
-        version: 11.11.5(@emotion/react@11.11.4(@types/react@18.3.1)(react@18.2.0))(@types/react@18.3.1)(react@18.2.0)
+        version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.1)(react@18.2.0)
       '@savvywombat/tailwindcss-grid-areas':
         specifier: ^4.0.0
         version: 4.0.0(tailwindcss@3.4.3)
@@ -59,13 +59,13 @@ importers:
         version: 7.5.8
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.8.0
-        version: 7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
+        version: 7.8.0(@typescript-eslint/parser@7.8.0)(eslint@8.57.0)(typescript@5.4.5)
       '@typescript-eslint/parser':
         specifier: ^7.8.0
         version: 7.8.0(eslint@8.57.0)(typescript@5.4.5)
       '@vitejs/plugin-react-swc':
         specifier: ^3.6.0
-        version: 3.6.0(vite@5.2.10(@types/node@20.12.2)(terser@5.30.0))
+        version: 3.6.0(vite@5.2.10)
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.38)
@@ -80,7 +80,7 @@ importers:
         version: 0.4.6(eslint@8.57.0)
       firebase-tools:
         specifier: ^13.7.5
-        version: 13.7.5(encoding@0.1.13)
+        version: 13.7.5
       install:
         specifier: ^0.13.0
         version: 0.13.0
@@ -101,10 +101,10 @@ importers:
         version: 5.4.5
       vite:
         specifier: ^5.2.10
-        version: 5.2.10(@types/node@20.12.2)(terser@5.30.0)
+        version: 5.2.10
       vite-plugin-pwa:
         specifier: ^0.20.0
-        version: 0.20.0(vite@5.2.10(@types/node@20.12.2)(terser@5.30.0))(workbox-build@7.1.0)(workbox-window@7.1.0)
+        version: 0.20.0(vite@5.2.10)(workbox-build@7.1.0)(workbox-window@7.1.0)
 
 packages:
 
@@ -5740,10 +5740,9 @@ snapshots:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
       '@emotion/utils': 1.2.1
       '@emotion/weak-memoize': 0.3.1
+      '@types/react': 18.3.1
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.3.1
 
   '@emotion/serialize@1.1.4':
     dependencies:
@@ -5755,7 +5754,7 @@ snapshots:
 
   '@emotion/sheet@1.2.2': {}
 
-  '@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.1)(react@18.2.0))(@types/react@18.3.1)(react@18.2.0)':
+  '@emotion/styled@11.11.5(@emotion/react@11.11.4)(@types/react@18.3.1)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.1
       '@emotion/babel-plugin': 11.11.0
@@ -5764,9 +5763,8 @@ snapshots:
       '@emotion/serialize': 1.1.4
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
       '@emotion/utils': 1.2.1
-      react: 18.2.0
-    optionalDependencies:
       '@types/react': 18.3.1
+      react: 18.2.0
 
   '@emotion/unitless@0.8.1': {}
 
@@ -6186,7 +6184,7 @@ snapshots:
 
   '@google-cloud/promisify@2.0.4': {}
 
-  '@google-cloud/pubsub@3.7.5(encoding@0.1.13)':
+  '@google-cloud/pubsub@3.7.5':
     dependencies:
       '@google-cloud/paginator': 4.0.1
       '@google-cloud/precise-date': 3.0.1
@@ -6198,8 +6196,8 @@ snapshots:
       '@types/long': 4.0.2
       arrify: 2.0.1
       extend: 3.0.2
-      google-auth-library: 8.9.0(encoding@0.1.13)
+      google-auth-library: 8.9.0
-      google-gax: 3.6.1(encoding@0.1.13)
+      google-gax: 3.6.1
       heap-js: 2.5.0
       is-stream-ended: 0.1.4
       lodash.snakecase: 4.1.1
@@ -6347,17 +6345,15 @@ snapshots:
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.1)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.1
-      react: 18.2.0
-    optionalDependencies:
       '@types/react': 18.3.1
+      react: 18.2.0
 
   '@radix-ui/react-slot@1.0.2(@types/react@18.3.1)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
       '@types/react': 18.3.1
+      react: 18.2.0
 
   '@rollup/plugin-babel@5.3.1(@babel/core@7.24.5)(rollup@2.79.1)':
     dependencies:
@@ -6374,7 +6370,6 @@ snapshots:
       is-builtin-module: 3.2.1
       is-module: 1.0.0
       resolve: 1.22.8
-    optionalDependencies:
       rollup: 2.79.1
 
   '@rollup/plugin-replace@2.4.2(rollup@2.79.1)':
@@ -6385,11 +6380,10 @@ snapshots:
 
   '@rollup/plugin-terser@0.4.4(rollup@2.79.1)':
     dependencies:
+      rollup: 2.79.1
       serialize-javascript: 6.0.2
       smob: 1.5.0
       terser: 5.30.0
-    optionalDependencies:
-      rollup: 2.79.1
 
   '@rollup/pluginutils@3.1.0(rollup@2.79.1)':
     dependencies:
@@ -6403,7 +6397,6 @@ snapshots:
       '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
-    optionalDependencies:
       rollup: 2.79.1
 
   '@rollup/rollup-android-arm-eabi@4.13.2':
@@ -6509,9 +6502,9 @@ snapshots:
   '@svgr/cli@8.1.0(typescript@5.4.5)':
     dependencies:
       '@svgr/core': 8.1.0(typescript@5.4.5)
-      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.4.5))
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)
-      '@svgr/plugin-prettier': 8.1.0(@svgr/core@8.1.0(typescript@5.4.5))
+      '@svgr/plugin-prettier': 8.1.0(@svgr/core@8.1.0)
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@5.4.5))(typescript@5.4.5)
+      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.4.5)
       camelcase: 6.3.0
       chalk: 4.1.2
       commander: 9.5.0
@@ -6538,7 +6531,7 @@ snapshots:
       '@babel/types': 7.24.0
       entities: 4.5.0
 
-  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.4.5))':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0)':
     dependencies:
       '@babel/core': 7.24.3
       '@svgr/babel-preset': 8.1.0(@babel/core@7.24.3)
@@ -6548,13 +6541,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@svgr/plugin-prettier@8.1.0(@svgr/core@8.1.0(typescript@5.4.5))':
+  '@svgr/plugin-prettier@8.1.0(@svgr/core@8.1.0)':
     dependencies:
       '@svgr/core': 8.1.0(typescript@5.4.5)
       deepmerge: 4.3.1
       prettier: 2.8.8
 
-  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(typescript@5.4.5))(typescript@5.4.5)':
+  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0)(typescript@5.4.5)':
     dependencies:
       '@svgr/core': 8.1.0(typescript@5.4.5)
       cosmiconfig: 8.3.6(typescript@5.4.5)
@@ -6677,7 +6670,7 @@ snapshots:
 
   '@types/trusted-types@2.0.7': {}
 
-  '@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0)(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
       '@typescript-eslint/parser': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
@@ -6692,7 +6685,6 @@ snapshots:
       natural-compare: 1.4.0
       semver: 7.6.2
       ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -6705,7 +6697,6 @@ snapshots:
       '@typescript-eslint/visitor-keys': 7.8.0
       debug: 4.3.4
       eslint: 8.57.0
-    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -6722,7 +6713,6 @@ snapshots:
       debug: 4.3.4
       eslint: 8.57.0
       ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -6739,7 +6729,6 @@ snapshots:
       minimatch: 9.0.4
       semver: 7.6.2
       ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -6765,10 +6754,10 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-react-swc@3.6.0(vite@5.2.10(@types/node@20.12.2)(terser@5.30.0))':
+  '@vitejs/plugin-react-swc@3.6.0(vite@5.2.10)':
     dependencies:
       '@swc/core': 1.4.11
-      vite: 5.2.10(@types/node@20.12.2)(terser@5.30.0)
+      vite: 5.2.10
     transitivePeerDependencies:
       - '@swc/helpers'
 
@@ -6809,7 +6798,7 @@ snapshots:
     optional: true
 
   ajv-formats@2.1.1(ajv@8.12.0):
-    optionalDependencies:
+    dependencies:
       ajv: 8.12.0
 
   ajv@6.12.6:
@@ -7321,7 +7310,6 @@ snapshots:
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
-    optionalDependencies:
       typescript: 5.4.5
 
   crc-32@1.2.2: {}
@@ -7921,9 +7909,9 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  firebase-tools@13.7.5(encoding@0.1.13):
+  firebase-tools@13.7.5:
     dependencies:
-      '@google-cloud/pubsub': 3.7.5(encoding@0.1.13)
+      '@google-cloud/pubsub': 3.7.5
       abort-controller: 3.0.0
       ajv: 6.12.6
       archiver: 5.3.2
@@ -7948,7 +7936,7 @@ snapshots:
       fs-extra: 10.1.0
       fuzzy: 0.1.3
       glob: 7.2.3
-      google-auth-library: 7.14.1(encoding@0.1.13)
+      google-auth-library: 7.14.1
       inquirer: 8.2.6
       inquirer-autocomplete-prompt: 2.0.1(inquirer@8.2.6)
       jsonwebtoken: 9.0.2
@@ -7960,7 +7948,7 @@ snapshots:
       mime: 2.6.0
       minimatch: 3.1.2
       morgan: 1.10.0
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.7.0
       open: 6.4.0
       ora: 5.4.1
       p-limit: 3.1.0
@@ -7973,13 +7961,13 @@ snapshots:
       stream-chain: 2.2.5
       stream-json: 1.8.0
       strip-ansi: 6.0.1
-      superstatic: 9.0.3(encoding@0.1.13)
+      superstatic: 9.0.3
       tar: 6.2.1
       tcp-port-used: 1.0.2
       tmp: 0.2.3
       triple-beam: 1.4.1
       universal-analytics: 0.5.3
-      update-notifier-cjs: 5.1.6(encoding@0.1.13)
+      update-notifier-cjs: 5.1.6
       uuid: 8.3.2
       winston: 3.13.0
       winston-transport: 4.7.0
@@ -8103,38 +8091,38 @@ snapshots:
 
   ga-4-react@0.1.281: {}
 
-  gaxios@4.3.3(encoding@0.1.13):
+  gaxios@4.3.3:
     dependencies:
       abort-controller: 3.0.0
       extend: 3.0.2
       https-proxy-agent: 5.0.1
       is-stream: 2.0.1
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.7.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  gaxios@5.1.3(encoding@0.1.13):
+  gaxios@5.1.3:
     dependencies:
       extend: 3.0.2
       https-proxy-agent: 5.0.1
       is-stream: 2.0.1
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.7.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  gcp-metadata@4.3.1(encoding@0.1.13):
+  gcp-metadata@4.3.1:
     dependencies:
-      gaxios: 4.3.3(encoding@0.1.13)
+      gaxios: 4.3.3
       json-bigint: 1.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  gcp-metadata@5.3.0(encoding@0.1.13):
+  gcp-metadata@5.3.0:
     dependencies:
-      gaxios: 5.1.3(encoding@0.1.13)
+      gaxios: 5.1.3
       json-bigint: 1.0.0
     transitivePeerDependencies:
       - encoding
@@ -8233,37 +8221,37 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
-  google-auth-library@7.14.1(encoding@0.1.13):
+  google-auth-library@7.14.1:
     dependencies:
       arrify: 2.0.1
       base64-js: 1.5.1
       ecdsa-sig-formatter: 1.0.11
       fast-text-encoding: 1.0.6
-      gaxios: 4.3.3(encoding@0.1.13)
+      gaxios: 4.3.3
-      gcp-metadata: 4.3.1(encoding@0.1.13)
+      gcp-metadata: 4.3.1
-      gtoken: 5.3.2(encoding@0.1.13)
+      gtoken: 5.3.2
       jws: 4.0.0
       lru-cache: 6.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  google-auth-library@8.9.0(encoding@0.1.13):
+  google-auth-library@8.9.0:
     dependencies:
       arrify: 2.0.1
       base64-js: 1.5.1
       ecdsa-sig-formatter: 1.0.11
       fast-text-encoding: 1.0.6
-      gaxios: 5.1.3(encoding@0.1.13)
+      gaxios: 5.1.3
-      gcp-metadata: 5.3.0(encoding@0.1.13)
+      gcp-metadata: 5.3.0
-      gtoken: 6.1.2(encoding@0.1.13)
+      gtoken: 6.1.2
       jws: 4.0.0
       lru-cache: 6.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  google-gax@3.6.1(encoding@0.1.13):
+  google-gax@3.6.1:
     dependencies:
       '@grpc/grpc-js': 1.8.21
       '@grpc/proto-loader': 0.7.12
@@ -8272,9 +8260,9 @@ snapshots:
       abort-controller: 3.0.0
       duplexify: 4.1.3
       fast-text-encoding: 1.0.6
-      google-auth-library: 8.9.0(encoding@0.1.13)
+      google-auth-library: 8.9.0
       is-stream-ended: 0.1.4
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.7.0
       object-hash: 3.0.0
       proto3-json-serializer: 1.1.1
       protobufjs: 7.2.4
@@ -8302,18 +8290,18 @@ snapshots:
 
   graphemer@1.4.0: {}
 
-  gtoken@5.3.2(encoding@0.1.13):
+  gtoken@5.3.2:
     dependencies:
-      gaxios: 4.3.3(encoding@0.1.13)
+      gaxios: 4.3.3
       google-p12-pem: 3.1.4
       jws: 4.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  gtoken@6.1.2(encoding@0.1.13):
+  gtoken@6.1.2:
     dependencies:
-      gaxios: 5.1.3(encoding@0.1.13)
+      gaxios: 5.1.3
       google-p12-pem: 4.0.1
       jws: 4.0.0
     transitivePeerDependencies:
@@ -8607,9 +8595,9 @@ snapshots:
   isexe@3.1.1:
     optional: true
 
-  isomorphic-fetch@3.0.0(encoding@0.1.13):
+  isomorphic-fetch@3.0.0:
     dependencies:
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.7.0
       whatwg-fetch: 3.6.20
     transitivePeerDependencies:
       - encoding
@@ -9055,11 +9043,9 @@ snapshots:
     dependencies:
       lodash: 4.17.21
 
-  node-fetch@2.7.0(encoding@0.1.13):
+  node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
-    optionalDependencies:
-      encoding: 0.1.13
 
   node-forge@1.3.1: {}
 
@@ -9273,9 +9259,8 @@ snapshots:
   postcss-load-config@4.0.2(postcss@8.4.38):
     dependencies:
       lilconfig: 3.1.1
-      yaml: 2.4.1
-    optionalDependencies:
       postcss: 8.4.38
+      yaml: 2.4.1
 
   postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
@@ -9897,7 +9882,7 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  superstatic@9.0.3(encoding@0.1.13):
+  superstatic@9.0.3:
     dependencies:
       basic-auth-connect: 1.0.0
       commander: 10.0.1
@@ -9916,7 +9901,7 @@ snapshots:
       on-headers: 1.0.2
       path-to-regexp: 1.8.0
       router: 1.3.8
-      update-notifier-cjs: 5.1.6(encoding@0.1.13)
+      update-notifier-cjs: 5.1.6
     optionalDependencies:
       re2: 1.20.10
     transitivePeerDependencies:
@@ -10185,7 +10170,7 @@ snapshots:
       escalade: 3.1.2
       picocolors: 1.0.0
 
-  update-notifier-cjs@5.1.6(encoding@0.1.13):
+  update-notifier-cjs@5.1.6:
     dependencies:
       boxen: 5.1.2
       chalk: 4.1.2
@@ -10196,7 +10181,7 @@ snapshots:
       is-installed-globally: 0.4.0
       is-npm: 5.0.0
       is-yarn-global: 0.3.0
-      isomorphic-fetch: 3.0.0(encoding@0.1.13)
+      isomorphic-fetch: 3.0.0
       pupa: 2.1.1
       registry-auth-token: 5.0.2
       registry-url: 5.1.0
@@ -10222,26 +10207,24 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vite-plugin-pwa@0.20.0(vite@5.2.10(@types/node@20.12.2)(terser@5.30.0))(workbox-build@7.1.0)(workbox-window@7.1.0):
+  vite-plugin-pwa@0.20.0(vite@5.2.10)(workbox-build@7.1.0)(workbox-window@7.1.0):
     dependencies:
       debug: 4.3.4
       fast-glob: 3.3.2
       pretty-bytes: 6.1.1
-      vite: 5.2.10(@types/node@20.12.2)(terser@5.30.0)
+      vite: 5.2.10
       workbox-build: 7.1.0
       workbox-window: 7.1.0
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.2.10(@types/node@20.12.2)(terser@5.30.0):
+  vite@5.2.10:
     dependencies:
       esbuild: 0.20.2
       postcss: 8.4.38
       rollup: 4.13.2
     optionalDependencies:
-      '@types/node': 20.12.2
       fsevents: 2.3.3
-      terser: 5.30.0
 
   wcwidth@1.0.1:
     dependencies:

src/Components/Buttons/ExtraCounter.tsx

@@ -3,7 +3,7 @@ import { twc } from 'react-twc';
 import { decrementTimeoutMs } from '../../Data/constants';
 import { CounterType, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Misc/OutlinedText';
-import { MAX_TAP_MOVE_DISTANCE, RotationDivProps } from './CommanderDamage';
+import { MAX_TAP_MOVE_DISTANCE } from './CommanderDamage';
 
 const ExtraCounterContainer = twc.div`
   flex
@@ -28,17 +28,14 @@ const ExtraCounterButton = twc.button`
   webkit-user-select-none
   `;
 
-const IconContainer = twc.div<RotationDivProps>((props) => [
+const IconContainer = twc.div`
-  'w-auto opacity-50',
+  w-auto opacity-50 data-[rotation-is-side=true]:-rotate-90`;
-  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? 'rotate-[-90deg]'
-    : '',
-]);
 
 const TextContainer = twc.div`
   absolute
   top-1/2
   left-1/2 
+  data-[rotation-is-side=true]:-rotate-90
   `;
 
 type ExtraCounterProps = {
@@ -115,6 +112,9 @@ const ExtraCounter = ({
   const fontWeight = 'bold';
   const strokeWidth = isSide ? '0.4vmax' : '0.7vmin';
 
+  const rotationIsSide =
+    rotation === Rotation.SideFlipped || rotation === Rotation.Side;
+
   return (
     <ExtraCounterContainer>
       <ExtraCounterButton
@@ -126,8 +126,10 @@ const ExtraCounter = ({
         }}
         aria-label={`Player ${playerIndex} extra counter: ${type}`}
       >
-        <IconContainer $rotation={rotation}>{Icon}</IconContainer>
+        <IconContainer data-rotation-is-side={rotationIsSide}>
-        <TextContainer>
+          {Icon}
+        </IconContainer>
+        <TextContainer data-rotation-is-side={rotationIsSide}>
           <OutlinedText
             fontSize={fontSize}
             fontWeight={fontWeight}

src/Components/Players/Players.tsx

@@ -1,7 +1,10 @@
 import { twc } from 'react-twc';
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { Player as PlayerType } from '../../Types/Player';
+import { PreStartMode } from '../../Types/Settings';
 import LifeCounter from '../LifeCounter/LifeCounter';
+import { RoulettePlayerCard } from '../PreStartGame/Games/RandomKing/RoulettePlayerCard';
 import { GridLayout } from '../Views/Play';
 
 const getGridArea = (player: PlayerType) => {
@@ -28,6 +31,8 @@ const PlayersWrapper = twc.div`w-full h-full bg-black`;
 export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
   const { players } = usePlayers();
 
+  const { playing, settings, preStartCompleted } = useGlobalSettings();
+
   return (
     <PlayersWrapper>
       <div className={`grid w-full h-full gap-1 box-border ${gridLayout} `}>
@@ -36,7 +41,7 @@ export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
           return (
             <div
               key={player.index}
-              className={`flex justify-center items-center align-middle ${gridArea}`}
+              className={`relative flex justify-center items-center align-middle ${gridArea}`}
             >
               <LifeCounter
                 player={player}
@@ -44,6 +49,15 @@ export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
                   (opponent) => opponent.index !== player.index
                 )}
               />
+
+              {settings.preStartMode === PreStartMode.RandomKing &&
+                !preStartCompleted &&
+                !playing &&
+                settings.showStartingPlayer && (
+                  <div className="absolute size-full z-20">
+                    <RoulettePlayerCard player={player} />
+                  </div>
+                )}
             </div>
           );
         })}

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

@@ -1,49 +0,0 @@
-import { usePlayers } from '../../../../Hooks/usePlayers';
-import { Player } from '../../../../Types/Player';
-import { GridLayout } from '../../../Views/Play';
-import { RoulettePlayerCard } from './RoulettePlayerCard';
-
-const getGridArea = (player: Player) => {
-  switch (player.index) {
-    case 0:
-      return 'grid-in-player0';
-    case 1:
-      return 'grid-in-player1';
-    case 2:
-      return 'grid-in-player2';
-    case 3:
-      return 'grid-in-player3';
-    case 4:
-      return 'grid-in-player4';
-    case 5:
-      return 'grid-in-player5';
-    default:
-      throw new Error('Invalid player index');
-  }
-};
-
-export const RandomKingPlayers = ({
-  gridLayout,
-}: {
-  gridLayout: GridLayout;
-}) => {
-  const { players } = usePlayers();
-
-  return (
-    <div className="w-full h-full bg-black">
-      <div className={`grid w-full h-full gap-1 box-border ${gridLayout} `}>
-        {players.map((player) => {
-          const gridArea = getGridArea(player);
-          return (
-            <div
-              key={player.index}
-              className={`flex justify-center items-center align-middle ${gridArea}`}
-            >
-              <RoulettePlayerCard player={player} />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};

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

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import { useGlobalSettings } from '../../../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../../../Hooks/usePlayers';
 
-export const RandomKingSelectWrapper = () => {
+export const RandomKingRandomizer = () => {
   const { setRandomizingPlayer } = useGlobalSettings();
 
   const randomIntervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -87,7 +87,7 @@ export const RandomKingSelectWrapper = () => {
             backgroundImage: `linear-gradient(60deg, ${gradientColors})`,
           }}
         />
-        <p className="relative z-10 text-[5vmax]">PRESS TO SELECT PLAYER</p>
+        <p className="relative z-10 text-[5vmax]">PRESS TO START</p>
       </div>
     </div>
   );

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

@@ -36,7 +36,7 @@ export const RoulettePlayerCard = ({ player }: { player: Player }) => {
       : player.settings.rotation;
 
   return (
-    <div className="relative flex flex-grow flex-col items-center w-full h-full overflow-hidden">
+    <div className="relative flex flex-grow flex-col items-center w-full h-full overflow-hidden bg-black">
       <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 }}

src/Components/PreStartGame/PreStart.tsx

@@ -1,12 +1,11 @@
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { PreStartMode } from '../../Types/Settings';
-import { GridLayout } from '../Views/Play';
 import { FingerGame } from './Games/FingerGame';
-import { RandomKingPlayers } from './Games/RandomKing/RandomKingPlayers';
+
-import { RandomKingSelectWrapper } from './Games/RandomKing/RandomKingSelectWrapper';
+import { RandomKingRandomizer } from './Games/RandomKing/RandomKingSelectWrapper';
 import { Trivia } from './Games/Trivia';
 
-export const PreStart = ({ gridLayout }: { gridLayout: GridLayout }) => {
+export const PreStart = () => {
   const { settings, randomizingPlayer, goToStart } = useGlobalSettings();
 
   if (settings.preStartMode === PreStartMode.RandomKing) {
@@ -14,12 +13,7 @@ export const PreStart = ({ gridLayout }: { gridLayout: GridLayout }) => {
       return null;
     }
 
-    return (
+    return <RandomKingRandomizer />;
-      <>
-        <RandomKingSelectWrapper />
-        <RandomKingPlayers gridLayout={gridLayout} />
-      </>
-    );
   }
 
   if (settings.preStartMode === PreStartMode.FingerGame) {

src/Components/Views/Play.tsx

@@ -94,22 +94,14 @@ export const Play = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (
-    players.length > 1 &&
-    !preStartCompleted &&
-    settings.preStartMode !== PreStartMode.None &&
-    !playing &&
-    settings.showStartingPlayer
-  ) {
-    return (
-      <MainWrapper>
-        <PreStart gridLayout={gridLayout} />
-      </MainWrapper>
-    );
-  }
-
   return (
     <MainWrapper>
+      {players.length > 1 &&
+        !preStartCompleted &&
+        settings.preStartMode !== PreStartMode.None &&
+        !playing &&
+        settings.showStartingPlayer && <PreStart />}
+
       <Players gridLayout={gridLayout} />
     </MainWrapper>
   );