fix not covering the screen

Changed forfeit button to always be visible instead of only when player can lose:
- Removed conditional check in LifeCounter (always passes onForfeit)
- Removed conditional rendering in PlayerMenu (button always shows)
- Button remains functional with safety check inside onClick handler

This makes it easier for players to forfeit at any time during the game.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/firebase-release.yml

@@ -13,22 +13,14 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Setup pnpm
+      - name: Setup bun
-        uses: pnpm/action-setup@v4
+        uses: oven-sh/setup-bun@v1
-        with:
-          version: 9
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
 
       - name: Build, lint, and deploy
         run: |
-          pnpm install
+          bun install
-          pnpm run build
+          bun run build
-          pnpm run lint
+          bun run lint
       - name: Deploy to Firebase Hosting
         uses: FirebaseExtended/action-hosting-deploy@v0
         with:

.github/workflows/lint_and_build.yml

@@ -14,24 +14,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
 
-      - name: Setup pnpm
+      - name: Set up Node.js
-        uses: pnpm/action-setup@v4
+        uses: actions/setup-node@v2
-        with:
-          version: 9
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 18
-          cache: 'pnpm'
+
+      - name: Set up bun
+        uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: pnpm install
+        run: bun install
 
       - name: Run lint
-        run: pnpm run lint
+        run: bun run lint
 
       - name: Build project
-        run: pnpm run build
+        run: bun run build

eslint.config.mjs

@@ -1,26 +0,0 @@
-import js from '@eslint/js';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  }
-);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.2",
   "type": "commonjs",
   "engines": {
     "node": ">=20",
@@ -11,45 +11,45 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "generate-icons": "npx @svgr/cli src/Icons/svgs",
-    "force-deploy": "pnpm run build && firebase deploy --only hosting",
+    "deploy": "bun run build && firebase deploy --only hosting"
-    "release": "bash scripts/create-release.sh"
   },
   "dependencies": {
-    "firebase": "^12.6.0",
+    "firebase": "^10.14.1",
-    "react": "^19.2.0",
+    "ga-4-react": "^0.1.281",
-    "react-dom": "^19.2.0",
+    "react": "^18.3.1",
-    "react-screen-wake-lock": "^3.1.1",
+    "react-dom": "^18.3.1",
+    "react-screen-wake-lock": "^3.0.2",
     "react-swipeable": "^7.0.2",
-    "react-twc": "^1.5.1",
+    "react-twc": "^1.4.2",
-    "semver": "^7.7.3",
+    "semver": "^7.7.1",
-    "zod": "^4.1.12"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@savvywombat/tailwindcss-grid-areas": "^4.0.0",
     "@svgr/cli": "^8.1.0",
-    "@tailwindcss/postcss": "^4.1.17",
+    "@types/react": "^18.3.18",
-    "@types/prop-types": "^15.7.15",
+    "@types/react-dom": "^18.3.5",
-    "@types/react": "^19.2.5",
+    "@types/semver": "^7.5.8",
-    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@types/semver": "^7.7.1",
+    "@typescript-eslint/parser": "^7.18.0",
-    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@vitejs/plugin-react-swc": "^3.8.0",
-    "@typescript-eslint/parser": "^8.47.0",
+    "autoprefixer": "^10.4.20",
-    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint": "^8.57.1",
-    "autoprefixer": "^10.4.22",
+    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint": "^9.39.1",
+    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "firebase-tools": "^13.31.2",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "install": "^0.13.0",
-    "firebase-tools": "^14.25.0",
+    "postcss": "^8.5.3",
-    "postcss": "^8.5.6",
+    "prettier": "2.8.8",
-    "prettier": "3.6.2",
     "prop-types": "^15.8.1",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^3.4.17",
-    "typescript": "^5.9.3",
+    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.47.0",
+    "vite": "^5.4.14",
-    "vite": "^7.2.2",
+    "vite-plugin-pwa": "^0.20.5"
-    "vite-plugin-pwa": "^1.1.0"
   }
 }

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 }

scripts/README.md

@@ -1,74 +0,0 @@
-# Release Scripts
-
-## create-release.sh
-
-This script automates the process of creating a new release for LifeTrinket.
-
-### Usage
-
-```bash
-npm run release
-# or
-pnpm release
-# or
-bash scripts/create-release.sh
-```
-
-### What it does
-
-1. **Reads the current version** from `package.json`
-2. **Checks for existing tags** - If a tag with the current version already exists, it will prompt you to update the version in `package.json` first
-3. **Warns about uncommitted changes** - Prompts for confirmation if you have uncommitted changes
-4. **Prompts for release description** - You can enter a multi-line description for the release
-5. **Creates an annotated git tag** with the version and description
-6. **Pushes the tag to remote** - This triggers the GitHub Actions workflow that builds and deploys the app
-
-### Workflow
-
-When you push a tag, the following happens:
-
-1. The `firebase-release.yml` workflow is triggered
-2. The app is built and deployed to Firebase Hosting
-3. A GitHub release is created with the version number
-
-### Before running
-
-Make sure to:
-
-1. **Update the version** in `package.json` if needed
-2. **Commit all changes** you want to include in the release
-3. **Test the build** with `npm run build` to ensure everything works
-
-### Example
-
-```bash
-# 1. Update version in package.json to 1.0.3
-# 2. Commit your changes
-git add .
-git commit -m "feat: add new features for v1.0.3"
-
-# 3. Run the release script
-npm run release
-
-# The script will:
-# - Show current version: 1.0.3
-# - Prompt for confirmation
-# - Ask for release description
-# - Create and push the tag
-# - Trigger the deployment workflow
-```
-
-### Troubleshooting
-
-**"Tag already exists" error:**
-
-- Update the version in `package.json` before creating a new release
-
-**"Failed to push tag" error:**
-
-- Check your git remote permissions
-- Try pushing manually: `git push origin <version>`
-
-**Script won't run:**
-
-- Make sure the script is executable: `chmod +x scripts/create-release.sh`

scripts/create-release.sh

@@ -1,87 +0,0 @@
-#!/bin/bash
-
-# Color codes for output
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-BLUE='\033[0;34m'
-NC='\033[0m' # No Color
-
-echo -e "${BLUE}=== LifeTrinket Release Script ===${NC}\n"
-
-# Get current version from package.json
-CURRENT_VERSION=$(node -p "require('./package.json').version")
-
-if [ -z "$CURRENT_VERSION" ]; then
-  echo -e "${RED}Error: Could not read version from package.json${NC}"
-  exit 1
-fi
-
-echo -e "${BLUE}Current version in package.json:${NC} ${GREEN}$CURRENT_VERSION${NC}"
-
-# Check if we're on a clean working tree
-if [[ -n $(git status -s) ]]; then
-  echo -e "${YELLOW}Warning: You have uncommitted changes.${NC}"
-fi
-
-# Fetch latest tags from remote
-echo -e "\n${BLUE}Fetching latest tags from remote...${NC}"
-git fetch --tags
-
-# Check if tag already exists locally or remotely
-if git rev-parse "$CURRENT_VERSION" >/dev/null 2>&1; then
-  echo -e "${RED}Error: Tag '$CURRENT_VERSION' already exists!${NC}"
-  echo -e "${YELLOW}Please update the version in package.json before creating a new release.${NC}"
-  echo -e "${YELLOW}Current version: $CURRENT_VERSION${NC}"
-  exit 1
-fi
-
-# Get the latest tag (if any)
-LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null)
-
-if [ -n "$LATEST_TAG" ]; then
-  echo -e "${BLUE}Latest existing tag:${NC} ${YELLOW}$LATEST_TAG${NC}"
-
-  # Compare versions
-  if [ "$LATEST_TAG" = "$CURRENT_VERSION" ]; then
-    echo -e "${RED}Error: Latest tag matches current version ($CURRENT_VERSION)${NC}"
-    echo -e "${YELLOW}Please update the version in package.json before creating a new release.${NC}"
-    exit 1
-  fi
-else
-  echo -e "${YELLOW}No existing tags found. This will be the first release.${NC}"
-fi
-
-# Get release description from user
-echo -e "\n${BLUE}Enter release description (optional, press Enter to skip):${NC}"
-read -r RELEASE_DESCRIPTION
-
-if [ -z "$RELEASE_DESCRIPTION" ]; then
-  RELEASE_DESCRIPTION="Release $CURRENT_VERSION"
-fi
-
-# Create annotated tag with description
-echo -e "\n${BLUE}Creating tag '$CURRENT_VERSION'...${NC}"
-git tag -a "$CURRENT_VERSION" -m "$RELEASE_DESCRIPTION"
-
-if [ $? -ne 0 ]; then
-  echo -e "${RED}Error: Failed to create tag${NC}"
-  exit 1
-fi
-
-echo -e "${GREEN}✓ Tag created successfully${NC}"
-
-# Push tag to remote
-echo -e "\n${BLUE}Pushing tag to remote...${NC}"
-git push origin "$CURRENT_VERSION"
-
-if [ $? -ne 0 ]; then
-  echo -e "${RED}Error: Failed to push tag${NC}"
-  echo -e "${YELLOW}Tag was created locally. You can try pushing manually:${NC}"
-  echo -e "  git push origin $CURRENT_VERSION"
-  exit 1
-fi
-
-echo -e "\n${GREEN}✓ Tag pushed successfully!${NC}"
-echo -e "${BLUE}GitHub Actions will now build and deploy version $CURRENT_VERSION${NC}"
-echo -e "${BLUE}Check the progress at:${NC} https://github.com/Vikeo/LifeTrinket/actions"

src/Components/Counters/ExtraCountersBar.tsx

@@ -19,10 +19,10 @@ const Container = twc.div<RotationDivProps>((props) => [
 ]);
 
 export const ExtraCountersGrid = twc.div<RotationDivProps>((props) => [
-  'flex absolute flex-grow pointer-events-none',
+  'flex absolute flex-row flex-grow pointer-events-none overflow-x-scroll overflow-y-hidden ',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? 'flex-col h-full w-auto overflow-y-scroll overflow-x-hidden bottom-auto right-0'
+    ? 'flex-col-reverse h-full w-auto bottom-auto right-0'
-    : 'flex-row w-full overflow-x-scroll overflow-y-hidden bottom-0',
+    : 'w-full bottom-0',
 ]);
 
 type ExtraCountersBarProps = {

src/Components/LifeCounter/LifeCounter.tsx

@@ -195,6 +195,9 @@ const LifeCounter = ({ player, opponents, matchScore }: LifeCounterProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [document.body.clientHeight, document.body.clientWidth]);
 
+  player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side;
+
   const handleLifeChange = (updatedLifeTotal: number) => {
     const difference = updateLifeTotal(player, updatedLifeTotal);
     setRecentDifference(recentDifference + difference);

src/Components/Misc/IconCheckbox.tsx

@@ -1,5 +1,3 @@
-import { ReactElement } from 'react';
-
 export const IconCheckbox = ({
   name,
   icon,
@@ -9,14 +7,14 @@ export const IconCheckbox = ({
   className,
 }: {
   name: string;
-  icon: ReactElement;
+  icon: JSX.Element;
-  checkedIcon: ReactElement;
+  checkedIcon: JSX.Element;
   checked: boolean;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   className?: string;
 }) => {
   return (
-    <div className={className}>
+    <div className={className} >
       <label>
         <input
           name={name}

src/Components/Misc/InstallPWAButton.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { BeforeInstallPromptEvent } from '../../global';
 import { useAnalytics } from '../../Hooks/useAnalytics';
 
 export const InstallPWAButton = () => {
+  const supportsPWARef = useRef<boolean>(false);
   const [promptInstall, setPromptInstall] =
     useState<BeforeInstallPromptEvent | null>(null);
 
@@ -10,6 +11,7 @@ export const InstallPWAButton = () => {
 
   const handler = (e: BeforeInstallPromptEvent) => {
     e.preventDefault();
+    supportsPWARef.current = true;
     setPromptInstall(e);
   };
 
@@ -19,7 +21,7 @@ export const InstallPWAButton = () => {
     return () => window.removeEventListener('transitionend', handler);
   }, []);
 
-  if (!promptInstall) {
+  if (!supportsPWARef.current) {
     return null;
   }
 

src/Components/Misc/OutlinedText.tsx

@@ -2,7 +2,10 @@ import { Rotation } from '../../Types/Player';
 
 import { twc } from 'react-twc';
 //TODO Create provider for this
-import { baseColors } from './../../../tailwind.config';
+import tailwindConfig from './../../../tailwind.config';
+import resolveConfig from 'tailwindcss/resolveConfig';
+
+const fullConfig = resolveConfig(tailwindConfig);
 
 const Container = twc.div`
   flex
@@ -56,12 +59,12 @@ export const OutlinedText: React.FC<OutlinedTextProps> = ({
           fontSize,
           fontWeight,
           strokeWidth: strokeWidth || '1vmin',
-          color: fillColor || baseColors.common.black,
+          color: fillColor || fullConfig.theme.colors.common.black,
           WebkitTextStroke: `${strokeWidth || '1vmin'} ${
-            strokeColor || baseColors.common.white
+            strokeColor || fullConfig.theme.colors.common.white
           }`,
           WebkitTextFillColor:
-            fillColor || baseColors.common.black,
+            fillColor || fullConfig.theme.colors.common.black,
           rotate: `${calcRotation}deg`,
         }}
       >

src/Components/PreStartGame/Games/Trivia.tsx

@@ -107,7 +107,7 @@ export const Trivia = () => {
   const { setPlaying, goToStart } = useGlobalSettings();
 
   const [randomQuestion, setRandomQuestion] = useState(
-    () => questions[Math.floor(Math.random() * questions.length)]
+    questions[Math.floor(Math.random() * questions.length)]
   );
 
   const setUniqueRandomQuestion = () => {

src/Components/Views/StartMenu/LayoutOptions.tsx

@@ -18,7 +18,7 @@ import { Orientation } from '../../../Types/Settings';
 
 const LayoutsRadioGroup = twc.div`flex flex-row justify-center items-center gap-4 self-center w-full`;
 
-const Label = twc.label`flex flex-row relative max-w-[118px] hover:bg-white/[0.03] rounded-2xl cursor-pointer`;
+const Label = twc.label`flex flex-row relative max-w-[118px] hover:bg-primary-main hover:bg-opacity-5 rounded-2xl cursor-pointer`;
 
 const Input = twc.input`peer sr-only`;
 

src/Providers/GlobalSettingsProvider.tsx

@@ -62,20 +62,14 @@ export const GlobalSettingsProvider = ({
   };
 
   const savedSettings = localStorage.getItem('settings');
-  const [randomizingPlayer, setRandomizingPlayer] = useState<boolean>(() => {
+  const [randomizingPlayer, setRandomizingPlayer] = useState<boolean>(
-    if (!savedSettings) return true;
+    savedSettings
-    const parsed = JSON.parse(savedSettings);
+      ? Boolean(JSON.parse(savedSettings).preStartMode === 'random-king')
-    return Boolean(parsed.preStartMode === 'random-king');
+      : true
-  });
+  );
-  const [settings, setSettings] = useState<Settings>(() => {
+  const [settings, setSettings] = useState<Settings>(
-    if (!savedSettings) return defaultSettings;
+    savedSettings ? JSON.parse(savedSettings) : defaultSettings
-    const parsed = settingsSchema.safeParse(JSON.parse(savedSettings));
+  );
-    if (!parsed.success) {
-      console.error('invalid settings, using default settings');
-      return defaultSettings;
-    }
-    return parsed.data;
-  });
 
   const setSettingsAndLocalStorage = (settings: Settings) => {
     setSettings(settings);
@@ -85,17 +79,11 @@ export const GlobalSettingsProvider = ({
   const savedGameSettings = localStorage.getItem('initialGameSettings');
 
   const [initialGameSettings, setInitialGameSettings] =
-    useState<InitialGameSettings>(() => {
+    useState<InitialGameSettings>(
-      if (!savedGameSettings) return defaultInitialGameSettings;
+      savedGameSettings
-      const parsed = initialGameSettingsSchema.safeParse(
+        ? JSON.parse(savedGameSettings)
-        JSON.parse(savedGameSettings)
+        : defaultInitialGameSettings
     );
-      if (!parsed.success) {
-        console.error('invalid game settings, using default settings');
-        return defaultInitialGameSettings;
-      }
-      return parsed.data;
-    });
 
   const setInitialGameSettingsAndLocalStorage = (
     initialGameSettings: InitialGameSettings
@@ -120,6 +108,48 @@ export const GlobalSettingsProvider = ({
     localStorage.removeItem('gameScore');
   };
 
+  // Set settings if they are not valid
+  useEffect(() => {
+    // If there are no saved settings, set default settings
+    if (!savedSettings) {
+      setSettingsAndLocalStorage(defaultSettings);
+      return;
+    }
+
+    const parsedSettings = settingsSchema.safeParse(JSON.parse(savedSettings));
+
+    // If saved settings are not valid, remove them
+    if (!parsedSettings.success) {
+      console.error('invalid settings, resetting to default settings');
+      setSettingsAndLocalStorage(defaultSettings);
+      return;
+    }
+    localStorage.setItem('settings', JSON.stringify(parsedSettings.data));
+  }, [settings, savedSettings]);
+
+  // Set initial game settings if they are not valid
+  useEffect(() => {
+    if (!savedGameSettings) {
+      setInitialGameSettingsAndLocalStorage(defaultInitialGameSettings);
+      return;
+    }
+
+    //parse existing game settings with zod schema
+    const parsedInitialGameSettings =
+      initialGameSettingsSchema.safeParse(initialGameSettings);
+
+    if (!parsedInitialGameSettings.success) {
+      console.error('invalid game settings, resetting to default settings');
+      setInitialGameSettingsAndLocalStorage(defaultInitialGameSettings);
+      return;
+    }
+
+    localStorage.setItem(
+      'initialGameSettings',
+      JSON.stringify(parsedInitialGameSettings.data)
+    );
+  }, [initialGameSettings, savedGameSettings]);
+
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   useEffect(() => {
@@ -210,20 +240,17 @@ export const GlobalSettingsProvider = ({
 
     async function checkForNewVersion(source: 'settings' | 'start_menu') {
       try {
-        const token = import.meta.env.VITE_REPO_READ_ACCESS_TOKEN;
-        const headers: HeadersInit = {
-          Accept: 'application/vnd.github+json',
-          'X-GitHub-Api-Version': '2022-11-28',
-        };
-
-        // Only add authorization if token is available
-        if (token) {
-          headers.Authorization = `Bearer ${token}`;
-        }
-
         const result = await fetch(
           'https://api.github.com/repos/Vikeo/LifeTrinket/releases/latest',
-          { headers }
+          {
+            headers: {
+              Authorization: `Bearer ${
+                import.meta.env.VITE_REPO_READ_ACCESS_TOKEN
+              }`,
+              Accept: 'application/vnd.github+json',
+              'X-GitHub-Api-Version': '2022-11-28',
+            },
+          }
         );
         const data = await result.json();
 
@@ -272,7 +299,7 @@ export const GlobalSettingsProvider = ({
       playing,
       setPlaying: setPlayingAndLocalStorage,
       initialGameSettings,
-      setInitialGameSettings: setInitialGameSettingsAndLocalStorage,
+      setInitialGameSettings,
       settings,
       setSettings: setSettingsAndLocalStorage,
       randomizingPlayer,
@@ -304,7 +331,6 @@ export const GlobalSettingsProvider = ({
     initialGameSettings,
     settings,
     randomizingPlayer,
-    setRandomizingPlayer,
     preStartCompleted,
     savedGame,
     remoteVersion,

src/Providers/PlayersProvider.tsx

@@ -1,5 +1,6 @@
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { Player } from '../Types/Player';
+import { useMemo, useState } from 'react';
 import { PlayersContextType, PlayersContext } from '../Contexts/PlayersContext';
 import { InitialGameSettings } from '../Types/Settings';
 
@@ -12,10 +13,10 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
     savedStartingPlayerIndex ? parseInt(savedStartingPlayerIndex) : -1
   );
 
-  const setStartingPlayerIndexAndLocalStorage = useCallback((index: number) => {
+  const setStartingPlayerIndexAndLocalStorage = (index: number) => {
     setStartingPlayerIndex(index);
     localStorage.setItem('startingPlayerIndex', String(index));
-  }, []);
+  };
 
   const [players, setPlayers] = useState<Player[]>(
     savedPlayers ? JSON.parse(savedPlayers) : []
@@ -95,7 +96,7 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
       startingPlayerIndex,
       setStartingPlayerIndex: setStartingPlayerIndexAndLocalStorage,
     };
-  }, [players, startingPlayerIndex, setStartingPlayerIndexAndLocalStorage]);
+  }, [players, startingPlayerIndex]);
 
   return (
     <PlayersContext.Provider value={ctxValue}>

src/index.css

@@ -1,32 +1,6 @@
-@import 'tailwindcss';
+@tailwind base;
-
+@tailwind components;
-@theme {
+@tailwind utilities;
-  --color-primary-main: #78A083;
-  --color-primary-dark: #608069;
-  --color-secondary-main: #5D7965;
-  --color-secondary-dark: #4a6151;
-  --color-background-default: #2E3041;
-  --color-background-spotlight: #777BA7;
-  --color-background-backdrop: rgba(0, 0, 0, 0.3);
-  --color-background-settings: rgba(0, 0, 0, 0.8);
-  --color-icons-dark: #000000;
-  --color-icons-light: #F9FFE3;
-  --color-icons-gold: #FFD700;
-  --color-text-primary: #F9FFE3;
-  --color-text-secondary: #c7ccb6;
-  --color-common-white: #F9FFE3;
-  --color-common-black: #000000;
-  --color-lifeCounter-text: rgba(0, 0, 0, 0.4);
-  --color-lifeCounter-lostWrapper: #000000;
-  --color-interface-loseButton-background: #43434380;
-  --color-interface-recentDifference-background: rgba(255, 255, 255, 0.6);
-  --color-interface-recentDifference-text: #333333;
-
-  --font-size-xxs: 0.625rem;
-  --line-height-xxs: 1rem;
-
-  --breakpoint-modalSm: 548px;
-}
 
 html {
   overflow: hidden;
@@ -40,7 +14,7 @@ html,
 body {
   height: 100%;
   position: relative;
-  background-color: var(--color-background-default);
+  background-color: theme('colors.background.default');
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -57,7 +31,7 @@ code {
     monospace;
 }
 
-/* hide scrollbar globally */
+// hide scrollbar globally
 ::-webkit-scrollbar {
   display: none;
 }
@@ -69,18 +43,18 @@ code {
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background-color: var(--color-background-default);
+  background-color: theme('colors.background.default');
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: var(--color-primary-dark);
+  background: theme('colors.primary.dark');
   border-radius: 32px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-primary-main);
+  background: theme('colors.primary.main');
 }
 
 * {
@@ -105,67 +79,6 @@ code {
     scrollbar-width: auto;
     -ms-overflow-style: auto;
   }
-
-  /* Grid template areas */
-  .grid-areas-onePlayerLandscape {
-    grid-template-areas: 'player0 player0';
-  }
-  .grid-areas-onePlayerPortrait {
-    grid-template-areas: 'player0' 'player0';
-  }
-  .grid-areas-twoPlayersOppositeLandscape {
-    grid-template-areas: 'player0' 'player1';
-  }
-  .grid-areas-twoPlayersOppositePortrait {
-    grid-template-areas: 'player0 player1' 'player0 player1';
-  }
-  .grid-areas-twoPlayersSameSideLandscape {
-    grid-template-areas: 'player0 player1';
-  }
-  .grid-areas-threePlayers {
-    grid-template-areas: 'player0 player0' 'player1 player2';
-  }
-  .grid-areas-threePlayersSide {
-    grid-template-areas: 'player0 player0 player0 player2' 'player1 player1 player1 player2';
-  }
-  .grid-areas-fourPlayerPortrait {
-    grid-template-areas: 'player0 player1 player1 player1 player1 player3' 'player0 player2 player2 player2 player2 player3';
-  }
-  .grid-areas-fourPlayer {
-    grid-template-areas: 'player0 player1' 'player2 player3';
-  }
-  .grid-areas-fivePlayers {
-    grid-template-areas: 'player0 player0 player0 player1 player1 player1' 'player2 player2 player3 player3 player4 player4';
-  }
-  .grid-areas-fivePlayersSide {
-    grid-template-areas: 'player0 player0 player0 player0 player0 player1 player1 player1 player1 player1 player2' 'player3 player3 player3 player3 player3 player4 player4 player4 player4 player4 player2';
-  }
-  .grid-areas-sixPlayers {
-    grid-template-areas: 'player0 player1 player2' 'player3 player4 player5';
-  }
-  .grid-areas-sixPlayersSide {
-    grid-template-areas: 'player0 player1 player1 player1 player1 player1 player1  player2 player2 player2 player2 player2 player2 player3' 'player0 player4 player4 player4 player4 player4 player4 player5 player5 player5 player5 player5 player5 player3';
-  }
-
-  /* Grid area assignments */
-  .grid-in-player0 {
-    grid-area: player0;
-  }
-  .grid-in-player1 {
-    grid-area: player1;
-  }
-  .grid-in-player2 {
-    grid-area: player2;
-  }
-  .grid-in-player3 {
-    grid-area: player3;
-  }
-  .grid-in-player4 {
-    grid-area: player4;
-  }
-  .grid-in-player5 {
-    grid-area: player5;
-  }
 }
 
 @keyframes background-orb {
@@ -207,7 +120,7 @@ code {
 }
 
 .spotlight1 {
-  background: var(--color-background-default);
+  background: theme('colors.background.default');
 
   position: fixed;
   height: 10vmax;
@@ -229,7 +142,7 @@ code {
 }
 
 .spotlight2 {
-  background: var(--color-background-default);
+  background: theme('colors.background.default');
 
   position: fixed;
   height: 30vmax;
@@ -253,7 +166,7 @@ input[type='range'] {
   transition: background 0ms ease-in;
   margin: 10px 0;
   width: 100%;
-  background: var(--color-secondary-main);
+  background: theme('colors.secondary.main');
 }
 input[type='range']:focus {
   outline: none;
@@ -274,7 +187,7 @@ input[type='range']::-webkit-slider-thumb {
   height: 20px;
   width: 20px;
   border-radius: 100px;
-  background: var(--color-primary-main);
+  background: theme('colors.primary.main');
   cursor: pointer;
   margin-top: -3px;
 }
@@ -294,7 +207,7 @@ input[type='range']::-moz-range-thumb {
   height: 20px;
   width: 20px;
   border-radius: 100px;
-  background: var(--color-primary-main);
+  background: theme('colors.primary.main');
   cursor: pointer;
 }
 
@@ -312,7 +225,7 @@ input[type='range']::-ms-thumb {
   height: 20px;
   width: 20px;
   border-radius: 100px;
-  background: var(--color-primary-main);
+  background: theme('colors.primary.main');
   cursor: pointer;
   margin-top: -3px;
 }

svgr.config.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+/* eslint-disable-next-line no-undef */
 module.exports = {
   template: require('./template'),
   titleProp: true,

tailwind.config.ts

@@ -1,3 +1,5 @@
+//@ts-expect-error - tailwindcss-grid-areas does not have typescript support
+import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas';
 import type { Config } from 'tailwindcss';
 
 export const baseColors = {
@@ -105,6 +107,6 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [tailwindcssGridAreas],
 } satisfies Config;
 // #98FF98

template.js

@@ -34,5 +34,7 @@ const propTypesTemplate = (
   export default ${title}`;
 };
 
+
+// eslint-disable-next-line no-undef
 module.exports = propTypesTemplate;