Add the blobs

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.9.98",
+  "version": "0.9.96",
   "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)
+        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)
       '@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)
+        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)
       '@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)
+        version: 3.6.0(vite@5.2.10(@types/node@20.12.2)(terser@5.30.0))
       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
+        version: 13.7.5(encoding@0.1.13)
       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
+        version: 5.2.10(@types/node@20.12.2)(terser@5.30.0)
       vite-plugin-pwa:
         specifier: ^0.20.0
-        version: 0.20.0(vite@5.2.10)(workbox-build@7.1.0)(workbox-window@7.1.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)
 
 packages:
 
@@ -5740,9 +5740,10 @@ 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:
@@ -5754,7 +5755,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)':
+  '@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)':
     dependencies:
       '@babel/runtime': 7.24.1
       '@emotion/babel-plugin': 11.11.0
@@ -5763,8 +5764,9 @@ snapshots:
       '@emotion/serialize': 1.1.4
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
       '@emotion/utils': 1.2.1
-      '@types/react': 18.3.1
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.3.1
 
   '@emotion/unitless@0.8.1': {}
 
@@ -6184,7 +6186,7 @@ snapshots:
 
   '@google-cloud/promisify@2.0.4': {}
 
-  '@google-cloud/pubsub@3.7.5':
+  '@google-cloud/pubsub@3.7.5(encoding@0.1.13)':
     dependencies:
       '@google-cloud/paginator': 4.0.1
       '@google-cloud/precise-date': 3.0.1
@@ -6196,8 +6198,8 @@ snapshots:
       '@types/long': 4.0.2
       arrify: 2.0.1
       extend: 3.0.2
-      google-auth-library: 8.9.0
+      google-auth-library: 8.9.0(encoding@0.1.13)
-      google-gax: 3.6.1
+      google-gax: 3.6.1(encoding@0.1.13)
       heap-js: 2.5.0
       is-stream-ended: 0.1.4
       lodash.snakecase: 4.1.1
@@ -6345,15 +6347,17 @@ snapshots:
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.1)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.1
-      '@types/react': 18.3.1
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.3.1
 
   '@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)
-      '@types/react': 18.3.1
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.3.1
 
   '@rollup/plugin-babel@5.3.1(@babel/core@7.24.5)(rollup@2.79.1)':
     dependencies:
@@ -6370,6 +6374,7 @@ 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)':
@@ -6380,10 +6385,11 @@ 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:
@@ -6397,6 +6403,7 @@ 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':
@@ -6502,9 +6509,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)
+      '@svgr/plugin-jsx': 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-prettier': 8.1.0(@svgr/core@8.1.0(typescript@5.4.5))
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.4.5)
+      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@5.4.5))(typescript@5.4.5)
       camelcase: 6.3.0
       chalk: 4.1.2
       commander: 9.5.0
@@ -6531,7 +6538,7 @@ snapshots:
       '@babel/types': 7.24.0
       entities: 4.5.0
 
-  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0)':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.4.5))':
     dependencies:
       '@babel/core': 7.24.3
       '@svgr/babel-preset': 8.1.0(@babel/core@7.24.3)
@@ -6541,13 +6548,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@svgr/plugin-prettier@8.1.0(@svgr/core@8.1.0)':
+  '@svgr/plugin-prettier@8.1.0(@svgr/core@8.1.0(typescript@5.4.5))':
     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)':
+  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(typescript@5.4.5))(typescript@5.4.5)':
     dependencies:
       '@svgr/core': 8.1.0(typescript@5.4.5)
       cosmiconfig: 8.3.6(typescript@5.4.5)
@@ -6670,7 +6677,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)':
+  '@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)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
       '@typescript-eslint/parser': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
@@ -6685,6 +6692,7 @@ 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
@@ -6697,6 +6705,7 @@ snapshots:
       '@typescript-eslint/visitor-keys': 7.8.0
       debug: 4.3.4
       eslint: 8.57.0
+    optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -6713,6 +6722,7 @@ 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
@@ -6729,6 +6739,7 @@ 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
@@ -6754,10 +6765,10 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-react-swc@3.6.0(vite@5.2.10)':
+  '@vitejs/plugin-react-swc@3.6.0(vite@5.2.10(@types/node@20.12.2)(terser@5.30.0))':
     dependencies:
       '@swc/core': 1.4.11
-      vite: 5.2.10
+      vite: 5.2.10(@types/node@20.12.2)(terser@5.30.0)
     transitivePeerDependencies:
       - '@swc/helpers'
 
@@ -6798,7 +6809,7 @@ snapshots:
     optional: true
 
   ajv-formats@2.1.1(ajv@8.12.0):
-    dependencies:
+    optionalDependencies:
       ajv: 8.12.0
 
   ajv@6.12.6:
@@ -7310,6 +7321,7 @@ 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: {}
@@ -7909,9 +7921,9 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  firebase-tools@13.7.5:
+  firebase-tools@13.7.5(encoding@0.1.13):
     dependencies:
-      '@google-cloud/pubsub': 3.7.5
+      '@google-cloud/pubsub': 3.7.5(encoding@0.1.13)
       abort-controller: 3.0.0
       ajv: 6.12.6
       archiver: 5.3.2
@@ -7936,7 +7948,7 @@ snapshots:
       fs-extra: 10.1.0
       fuzzy: 0.1.3
       glob: 7.2.3
-      google-auth-library: 7.14.1
+      google-auth-library: 7.14.1(encoding@0.1.13)
       inquirer: 8.2.6
       inquirer-autocomplete-prompt: 2.0.1(inquirer@8.2.6)
       jsonwebtoken: 9.0.2
@@ -7948,7 +7960,7 @@ snapshots:
       mime: 2.6.0
       minimatch: 3.1.2
       morgan: 1.10.0
-      node-fetch: 2.7.0
+      node-fetch: 2.7.0(encoding@0.1.13)
       open: 6.4.0
       ora: 5.4.1
       p-limit: 3.1.0
@@ -7961,13 +7973,13 @@ snapshots:
       stream-chain: 2.2.5
       stream-json: 1.8.0
       strip-ansi: 6.0.1
-      superstatic: 9.0.3
+      superstatic: 9.0.3(encoding@0.1.13)
       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
+      update-notifier-cjs: 5.1.6(encoding@0.1.13)
       uuid: 8.3.2
       winston: 3.13.0
       winston-transport: 4.7.0
@@ -8091,38 +8103,38 @@ snapshots:
 
   ga-4-react@0.1.281: {}
 
-  gaxios@4.3.3:
+  gaxios@4.3.3(encoding@0.1.13):
     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
+      node-fetch: 2.7.0(encoding@0.1.13)
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  gaxios@5.1.3:
+  gaxios@5.1.3(encoding@0.1.13):
     dependencies:
       extend: 3.0.2
       https-proxy-agent: 5.0.1
       is-stream: 2.0.1
-      node-fetch: 2.7.0
+      node-fetch: 2.7.0(encoding@0.1.13)
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  gcp-metadata@4.3.1:
+  gcp-metadata@4.3.1(encoding@0.1.13):
     dependencies:
-      gaxios: 4.3.3
+      gaxios: 4.3.3(encoding@0.1.13)
       json-bigint: 1.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  gcp-metadata@5.3.0:
+  gcp-metadata@5.3.0(encoding@0.1.13):
     dependencies:
-      gaxios: 5.1.3
+      gaxios: 5.1.3(encoding@0.1.13)
       json-bigint: 1.0.0
     transitivePeerDependencies:
       - encoding
@@ -8221,37 +8233,37 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
-  google-auth-library@7.14.1:
+  google-auth-library@7.14.1(encoding@0.1.13):
     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
+      gaxios: 4.3.3(encoding@0.1.13)
-      gcp-metadata: 4.3.1
+      gcp-metadata: 4.3.1(encoding@0.1.13)
-      gtoken: 5.3.2
+      gtoken: 5.3.2(encoding@0.1.13)
       jws: 4.0.0
       lru-cache: 6.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  google-auth-library@8.9.0:
+  google-auth-library@8.9.0(encoding@0.1.13):
     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
+      gaxios: 5.1.3(encoding@0.1.13)
-      gcp-metadata: 5.3.0
+      gcp-metadata: 5.3.0(encoding@0.1.13)
-      gtoken: 6.1.2
+      gtoken: 6.1.2(encoding@0.1.13)
       jws: 4.0.0
       lru-cache: 6.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  google-gax@3.6.1:
+  google-gax@3.6.1(encoding@0.1.13):
     dependencies:
       '@grpc/grpc-js': 1.8.21
       '@grpc/proto-loader': 0.7.12
@@ -8260,9 +8272,9 @@ snapshots:
       abort-controller: 3.0.0
       duplexify: 4.1.3
       fast-text-encoding: 1.0.6
-      google-auth-library: 8.9.0
+      google-auth-library: 8.9.0(encoding@0.1.13)
       is-stream-ended: 0.1.4
-      node-fetch: 2.7.0
+      node-fetch: 2.7.0(encoding@0.1.13)
       object-hash: 3.0.0
       proto3-json-serializer: 1.1.1
       protobufjs: 7.2.4
@@ -8290,18 +8302,18 @@ snapshots:
 
   graphemer@1.4.0: {}
 
-  gtoken@5.3.2:
+  gtoken@5.3.2(encoding@0.1.13):
     dependencies:
-      gaxios: 4.3.3
+      gaxios: 4.3.3(encoding@0.1.13)
       google-p12-pem: 3.1.4
       jws: 4.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  gtoken@6.1.2:
+  gtoken@6.1.2(encoding@0.1.13):
     dependencies:
-      gaxios: 5.1.3
+      gaxios: 5.1.3(encoding@0.1.13)
       google-p12-pem: 4.0.1
       jws: 4.0.0
     transitivePeerDependencies:
@@ -8595,9 +8607,9 @@ snapshots:
   isexe@3.1.1:
     optional: true
 
-  isomorphic-fetch@3.0.0:
+  isomorphic-fetch@3.0.0(encoding@0.1.13):
     dependencies:
-      node-fetch: 2.7.0
+      node-fetch: 2.7.0(encoding@0.1.13)
       whatwg-fetch: 3.6.20
     transitivePeerDependencies:
       - encoding
@@ -9043,9 +9055,11 @@ snapshots:
     dependencies:
       lodash: 4.17.21
 
-  node-fetch@2.7.0:
+  node-fetch@2.7.0(encoding@0.1.13):
     dependencies:
       whatwg-url: 5.0.0
+    optionalDependencies:
+      encoding: 0.1.13
 
   node-forge@1.3.1: {}
 
@@ -9259,8 +9273,9 @@ snapshots:
   postcss-load-config@4.0.2(postcss@8.4.38):
     dependencies:
       lilconfig: 3.1.1
-      postcss: 8.4.38
       yaml: 2.4.1
+    optionalDependencies:
+      postcss: 8.4.38
 
   postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
@@ -9882,7 +9897,7 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  superstatic@9.0.3:
+  superstatic@9.0.3(encoding@0.1.13):
     dependencies:
       basic-auth-connect: 1.0.0
       commander: 10.0.1
@@ -9901,7 +9916,7 @@ snapshots:
       on-headers: 1.0.2
       path-to-regexp: 1.8.0
       router: 1.3.8
-      update-notifier-cjs: 5.1.6
+      update-notifier-cjs: 5.1.6(encoding@0.1.13)
     optionalDependencies:
       re2: 1.20.10
     transitivePeerDependencies:
@@ -10170,7 +10185,7 @@ snapshots:
       escalade: 3.1.2
       picocolors: 1.0.0
 
-  update-notifier-cjs@5.1.6:
+  update-notifier-cjs@5.1.6(encoding@0.1.13):
     dependencies:
       boxen: 5.1.2
       chalk: 4.1.2
@@ -10181,7 +10196,7 @@ snapshots:
       is-installed-globally: 0.4.0
       is-npm: 5.0.0
       is-yarn-global: 0.3.0
-      isomorphic-fetch: 3.0.0
+      isomorphic-fetch: 3.0.0(encoding@0.1.13)
       pupa: 2.1.1
       registry-auth-token: 5.0.2
       registry-url: 5.1.0
@@ -10207,24 +10222,26 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vite-plugin-pwa@0.20.0(vite@5.2.10)(workbox-build@7.1.0)(workbox-window@7.1.0):
+  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):
     dependencies:
       debug: 4.3.4
       fast-glob: 3.3.2
       pretty-bytes: 6.1.1
-      vite: 5.2.10
+      vite: 5.2.10(@types/node@20.12.2)(terser@5.30.0)
       workbox-build: 7.1.0
       workbox-window: 7.1.0
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.2.10:
+  vite@5.2.10(@types/node@20.12.2)(terser@5.30.0):
     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 } from './CommanderDamage';
+import { MAX_TAP_MOVE_DISTANCE, RotationDivProps } from './CommanderDamage';
 
 const ExtraCounterContainer = twc.div`
   flex
@@ -28,14 +28,17 @@ const ExtraCounterButton = twc.button`
   webkit-user-select-none
   `;
 
-const IconContainer = twc.div`
+const IconContainer = twc.div<RotationDivProps>((props) => [
-  w-auto opacity-50 data-[rotation-is-side=true]:-rotate-90`;
+  'w-auto opacity-50',
+  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 = {
@@ -112,9 +115,6 @@ const ExtraCounter = ({
   const fontWeight = 'bold';
   const strokeWidth = isSide ? '0.4vmax' : '0.7vmin';
 
-  const rotationIsSide =
-    rotation === Rotation.SideFlipped || rotation === Rotation.Side;
-
   return (
     <ExtraCounterContainer>
       <ExtraCounterButton
@@ -126,10 +126,8 @@ const ExtraCounter = ({
         }}
         aria-label={`Player ${playerIndex} extra counter: ${type}`}
       >
-        <IconContainer data-rotation-is-side={rotationIsSide}>
+        <IconContainer $rotation={rotation}>{Icon}</IconContainer>
-          {Icon}
+        <TextContainer>
-        </IconContainer>
-        <TextContainer data-rotation-is-side={rotationIsSide}>
           <OutlinedText
             fontSize={fontSize}
             fontWeight={fontWeight}

src/Components/Players/Players.tsx

@@ -1,10 +1,7 @@
 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) => {
@@ -31,8 +28,6 @@ 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} `}>
@@ -41,7 +36,7 @@ export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
           return (
             <div
               key={player.index}
-              className={`relative flex justify-center items-center align-middle ${gridArea}`}
+              className={`flex justify-center items-center align-middle ${gridArea}`}
             >
               <LifeCounter
                 player={player}
@@ -49,15 +44,6 @@ 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

@@ -0,0 +1,49 @@
+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 RandomKingRandomizer = () => {
+export const RandomKingSelectWrapper = () => {
   const { setRandomizingPlayer } = useGlobalSettings();
 
   const randomIntervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -87,7 +87,7 @@ export const RandomKingRandomizer = () => {
             backgroundImage: `linear-gradient(60deg, ${gradientColors})`,
           }}
         />
-        <p className="relative z-10 text-[5vmax]">PRESS TO START</p>
+        <p className="relative z-10 text-[5vmax]">PRESS TO SELECT PLAYER</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 bg-black">
+    <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 }}

src/Components/PreStartGame/PreStart.tsx

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

src/Components/Views/Play.tsx

@@ -94,14 +94,22 @@ 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>
   );

src/Components/Views/StartMenu/StartMenu.tsx

@@ -36,9 +36,9 @@ const standardSettings: Pick<
   orientation: Orientation.Landscape,
 };
 
-const MainWrapper = twc.div`h-fit w-full pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10`;
+const MainWrapper = twc.div`h-fit w-full pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10 z-10`;
 
-const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row flex-wrap px-4 z-10 gap-4`;
+const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-10 items-center flex flex-row flex-wrap px-4 gap-4`;
 
 const SliderWrapper = twc.div`mx-8 relative`;
 
@@ -237,14 +237,14 @@ const Start = () => {
     <>
       <InfoDialog dialogRef={infoDialogRef} />
       {settings.showAnimations && (
-        <>
+        <div className="blob-container">
           <div className="spotlight1" />
           <div className="spotlight2" />
-        </>
+        </div>
       )}
 
       <SettingsDialog dialogRef={settingsDialogRef} />
-      <div className="flex justify-center items-center w-screen">
+      <div className="flex justify-center items-center w-screen z-10">
         <MainWrapper>
           <Info
             className="size-8 absolute top-7 left-4 text-primary-main"

src/index.css

@@ -81,86 +81,6 @@ code {
   }
 }
 
-@keyframes background-orb {
-  0% {
-    bottom: 10%;
-  }
-  50% {
-    bottom: 90%;
-  }
-
-  100% {
-    bottom: 10%;
-  }
-}
-
-@keyframes move-right-left {
-  0% {
-    rotate: 0deg;
-    right: 10%;
-  }
-
-  25% {
-    right: 70%;
-  }
-
-  50% {
-    rotate: 360deg;
-    right: 10%;
-  }
-
-  75% {
-    right: 90%;
-  }
-
-  100% {
-    rotate: 0deg;
-    right: 10%;
-  }
-}
-
-.spotlight1 {
-  background: theme('colors.background.default');
-
-  position: fixed;
-  height: 10vmax;
-  width: 30vmax;
-  border-radius: 100%;
-  transform: translate(50%, 50%);
-  animation-duration: 30s, 60s;
-  animation-name: background-orb, move-right-left;
-  animation-iteration-count: infinite, infinite;
-  animation-direction: alternate, alternate;
-  animation-timing-function: ease-in-out;
-
-  animation-delay: -15s, -15s;
-
-  opacity: 0.8;
-  mix-blend-mode: screen;
-
-  filter: blur(10vmax);
-}
-
-.spotlight2 {
-  background: theme('colors.background.default');
-
-  position: fixed;
-  height: 30vmax;
-  width: 10vmax;
-  border-radius: 100%;
-  transform: translate(50%, 50%);
-  animation-duration: 60s, 120s;
-  animation-name: background-orb, move-right-left;
-  animation-iteration-count: infinite, infinite;
-  animation-direction: reverse, reverse;
-  animation-timing-function: ease-in-out;
-
-  opacity: 0.8;
-  mix-blend-mode: screen;
-
-  filter: blur(10vmax);
-}
-
 input[type='range'] {
   -webkit-appearance: none;
   transition: background 0ms ease-in;
@@ -229,3 +149,92 @@ input[type='range']::-ms-thumb {
   cursor: pointer;
   margin-top: -3px;
 }
+
+.blob-container {
+  margin: auto;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  filter: blur(10vmax) contrast(10);
+  z-index: 9;
+  background: theme('colors.background.default');
+  mix-blend-mode: screen;
+
+  opacity: 30%;
+}
+
+@keyframes background-orb {
+  0% {
+    bottom: 10%;
+  }
+  50% {
+    bottom: 70%;
+  }
+
+  100% {
+    bottom: 10%;
+  }
+}
+
+@keyframes move-right-left {
+  0% {
+    rotate: 0deg;
+    right: 10%;
+  }
+
+  25% {
+    right: 20%;
+  }
+
+  50% {
+    rotate: 360deg;
+    right: 10%;
+  }
+
+  75% {
+    right: 30%;
+  }
+
+  100% {
+    rotate: 0deg;
+    right: 10%;
+  }
+}
+
+.spotlight1 {
+  background: theme('colors.background.spotlight');
+
+  position: fixed;
+  height: 20vmax;
+  width: 70vmax;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 15s, 50s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: alternate, alternate;
+  animation-timing-function: ease-in-out;
+
+  animation-delay: -15s, -15s;
+
+  /* filter: blur(5vmax); */
+}
+
+.spotlight2 {
+  background: theme('colors.background.spotlight');
+
+  position: fixed;
+  height: 70vmax;
+  width: 20vmax;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 30s, 100s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: reverse, reverse;
+  animation-timing-function: ease-in-out;
+
+  /* filter: blur(5vmax); */
+}

tailwind.config.ts

@@ -13,7 +13,7 @@ export const baseColors = {
   },
   background: {
     default: '#2E3041', // Orig: #35374B
-    spotlight: '#777BA7',
+    spotlight: 'hsl(110, 80.4%, 32.1%)',
     backdrop: 'rgba(0, 0, 0, 0.3)',
     settings: 'rgba(0, 0, 0, 0.8)',
   },