fix extra counter direction

* remove unused

* upgrade packages and use pnpm instead of bun

* unauthenticated github request

* fix eslint

* eslint

.eslintrc.cjs

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

.github/workflows/lint_and_build.yml

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

eslint.config.mjs

@@ -0,0 +1,26 @@
+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.0",
+  "version": "1.0.5",
   "type": "commonjs",
   "engines": {
     "node": ">=20",
@@ -11,45 +11,45 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "generate-icons": "npx @svgr/cli src/Icons/svgs",
-    "deploy": "bun run build && firebase deploy --only hosting"
+    "force-deploy": "pnpm run build && firebase deploy --only hosting",
+    "release": "bash scripts/create-release.sh"
   },
   "dependencies": {
-    "firebase": "^10.3.0",
-    "ga-4-react": "^0.1.281",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-screen-wake-lock": "^3.0.2",
-    "react-swipeable": "^7.0.1",
-    "react-twc": "^1.3.0",
-    "semver": "^7.6.2",
-    "zod": "^3.22.4"
+    "firebase": "^12.6.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-screen-wake-lock": "^3.1.1",
+    "react-swipeable": "^7.0.2",
+    "react-twc": "^1.5.1",
+    "semver": "^7.7.3",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@savvywombat/tailwindcss-grid-areas": "^4.0.0",
+    "@eslint/js": "^9.39.1",
     "@svgr/cli": "^8.1.0",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
-    "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "firebase-tools": "^13.7.5",
-    "install": "^0.13.0",
-    "postcss": "^8.4.38",
-    "prettier": "2.8.8",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/prop-types": "^15.7.15",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/semver": "^7.7.1",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "firebase-tools": "^14.25.0",
+    "postcss": "^8.5.6",
+    "prettier": "3.6.2",
     "prop-types": "^15.8.1",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.10",
-    "vite-plugin-pwa": "^0.20.0"
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0",
+    "vite": "^7.2.2",
+    "vite-plugin-pwa": "^1.1.0"
   }
 }

postcss.config.js

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

scripts/README.md

@@ -0,0 +1,74 @@
+# 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

@@ -0,0 +1,87 @@
+#!/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/Buttons/CommanderDamage.tsx

@@ -30,7 +30,7 @@ const CommanderDamageButton = twc.button<RotationButtonProps>((props) => [
 ]);
 
 const CommanderDamageTextContainer = twc.div<RotationDivProps>((props) => [
-  'relative top-1/2 left-1/2 tabular-nums pointer-events-none select-none webkit-user-select-none',
+  'relative -translate-y-1/2 top-1/2 left-1/2 tabular-nums pointer-events-none select-none webkit-user-select-none',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
     ? 'rotate-[270deg]'
     : '',

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-row flex-grow pointer-events-none overflow-x-scroll overflow-y-hidden ',
+  'flex absolute flex-grow pointer-events-none',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? 'flex-col-reverse h-full w-auto bottom-auto right-0'
-    : 'w-full bottom-0',
+    ? 'flex-col h-full w-auto overflow-y-scroll overflow-x-hidden bottom-auto right-0'
+    : 'flex-row w-full overflow-x-scroll overflow-y-hidden bottom-0',
 ]);
 
 type ExtraCountersBarProps = {

src/Components/Dialogs/SettingsDialog.tsx

@@ -242,6 +242,23 @@ export const SettingsDialog = ({
           </ul>
         </Description>
       </SettingContainer>
+      <SettingContainer>
+        <ToggleContainer>
+          <label>Show Match Score</label>
+          <ToggleButton
+            checked={settings.showMatchScore}
+            onChange={() => {
+              setSettings({
+                ...settings,
+                showMatchScore: !settings.showMatchScore,
+              });
+            }}
+          />
+        </ToggleContainer>
+        <Description>
+          Shows a score badge on each player's card to track wins across multiple games.
+        </Description>
+      </SettingContainer>
       <Separator height="1px" />
       <div className="flex w-full justify-center">
         <button

src/Components/GameOver/GameOver.tsx

@@ -0,0 +1,85 @@
+import { twc } from 'react-twc';
+import { Player } from '../../Types/Player';
+
+const Overlay = twc.div`
+  fixed top-0 left-0 w-[100dvmax] h-[100dvmin]
+  bg-black/80 backdrop-blur-sm
+  flex items-center justify-center
+  z-50
+`;
+
+const Modal = twc.div`
+  bg-background-default
+  rounded-2xl p-8
+  max-w-md w-[90%]
+  shadow-2xl
+  flex flex-col gap-6
+`;
+
+const Title = twc.h2`
+  text-[7vmin] font-bold text-center
+  text-text-primary
+  -mb-4
+`;
+
+const ButtonContainer = twc.div`
+  flex flex-col gap-3
+`;
+
+const WinnerName = twc.div`
+  text-[6vmin] font-bold text-center
+  py-[2vmin] px-[3vmin] rounded-xl
+  text-white
+  mb-0
+`;
+
+const PrimaryButton = twc.button`
+  py-[2vmin] px-[3vmin] rounded-xl
+  text-[4vmin] font-semibold
+  bg-interface-primary
+  text-white
+  transition-all duration-200
+  hover:scale-105 active:scale-95
+  border-3 border-white/50
+  shadow-lg shadow-interface-primary/50
+`;
+
+const SecondaryButton = twc.button`
+  py-[2vmin] px-[3vmin] rounded-xl
+  text-[4vmin] font-semibold
+  bg-secondary-main
+  text-text-primary
+  transition-all duration-200
+  hover:scale-105 active:scale-95
+  border-3 border-primary-main
+  shadow-lg shadow-secondary-main/50
+`;
+
+type GameOverProps = {
+  winner: Player;
+  onStartNextGame: () => void;
+  onStay: () => void;
+};
+
+export const GameOver = ({
+  winner,
+  onStartNextGame,
+  onStay,
+}: GameOverProps) => {
+  return (
+    <Overlay>
+      <Modal>
+        <Title>Winner</Title>
+        <WinnerName style={{ backgroundColor: winner.color }}>
+          {winner.name || `Player ${winner.index + 1}`}
+        </WinnerName>
+        <ButtonContainer>
+          <SecondaryButton onClick={onStartNextGame}>
+            Start Next Game
+          </SecondaryButton>
+          <PrimaryButton onClick={onStay}>Close</PrimaryButton>
+        </ButtonContainer>
+      </Modal>
+    </Overlay>
+  );
+};

src/Components/LifeCounter/LifeCounter.tsx

@@ -24,6 +24,27 @@ const SettingsButtonTwc = twc.button<RotationButtonProps>((props) => [
     : 'top-1/4 right-[1vmax]',
 ]);
 
+type MatchScoreBadgeProps = RotationDivProps & {
+  $useCommanderDamage: boolean;
+};
+
+const MatchScoreBadge = twc.div<MatchScoreBadgeProps>((props) => [
+  'absolute flex items-center justify-center',
+  'bg-black/70 backdrop-blur-sm',
+  'rounded-full',
+  'w-[5vmin] h-[5vmin]',
+  'text-white font-bold',
+  'text-[3vmin]',
+  'z-[1]',
+  'pointer-events-none',
+  'select-none webkit-user-select-none',
+  props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped
+    ? `left-[6.5vmax] bottom-[1vmax]`
+    : props.$useCommanderDamage
+      ? 'left-[0.5vmax] top-[11.5vmin]'
+      : 'left-[0.5vmax] top-[1vmax]',
+]);
+
 type SettingsButtonProps = {
   onClick: () => void;
   rotation: Rotation;
@@ -98,11 +119,12 @@ type LifeCounterProps = {
   player: Player;
   opponents: Player[];
   isStartingPlayer?: boolean;
+  matchScore?: number;
 };
 
 const RECENT_DIFFERENCE_TTL = 3_000;
 
-const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
+const LifeCounter = ({ player, opponents, matchScore }: LifeCounterProps) => {
   const { updatePlayer, updateLifeTotal } = usePlayers();
   const { settings, playing } = useGlobalSettings();
   const recentDifferenceTimerRef = useRef<NodeJS.Timeout | undefined>(
@@ -173,9 +195,6 @@ const LifeCounter = ({ player, opponents }: 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);
@@ -215,6 +234,21 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
           key={player.index}
           handleLifeChange={handleLifeChange}
         />
+        {matchScore !== undefined && matchScore > 0 && (
+          <MatchScoreBadge
+            $rotation={player.settings.rotation}
+            $useCommanderDamage={player.settings.useCommanderDamage}
+            style={{
+              rotate:
+                player.settings.rotation === Rotation.Side ||
+                player.settings.rotation === Rotation.SideFlipped
+                  ? `-90deg`
+                  : '0deg',
+            }}
+          >
+            {matchScore}
+          </MatchScoreBadge>
+        )}
         {settings.showPlayerMenuCog && (
           <SettingsButton
             onClick={() => {
@@ -244,6 +278,8 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
           isShown={showPlayerMenu}
           player={player}
           setShowPlayerMenu={setShowPlayerMenu}
+          onForfeit={toggleGameLost}
+          totalPlayers={opponents.length + 1}
         />
       </LifeCounterWrapper>
     </LifeCounterContentWrapper>

src/Components/Misc/IconCheckbox.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 export const IconCheckbox = ({
   name,
   icon,
@@ -7,14 +9,14 @@ export const IconCheckbox = ({
   className,
 }: {
   name: string;
-  icon: JSX.Element;
-  checkedIcon: JSX.Element;
+  icon: ReactElement;
+  checkedIcon: ReactElement;
   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,9 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, 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);
 
@@ -11,7 +10,6 @@ export const InstallPWAButton = () => {
 
   const handler = (e: BeforeInstallPromptEvent) => {
     e.preventDefault();
-    supportsPWARef.current = true;
     setPromptInstall(e);
   };
 
@@ -21,7 +19,7 @@ export const InstallPWAButton = () => {
     return () => window.removeEventListener('transitionend', handler);
   }, []);
 
-  if (!supportsPWARef.current) {
+  if (!promptInstall) {
     return null;
   }
 

src/Components/Misc/OutlinedText.tsx

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

src/Components/Misc/TextComponents.tsx

@@ -2,5 +2,4 @@ import { twc } from 'react-twc';
 
 export const Paragraph = twc.p`text-text-primary`;
 
-// eslint-disable-next-line react-refresh/only-export-components
 export const H1 = twc.h1`text-text-primary;`;

src/Components/Players/PlayerMenu.tsx

@@ -16,6 +16,7 @@ import {
   PartnerTax,
   Poison,
   ResetGame,
+  Skull,
 } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
 import { PreStartMode } from '../../Types/Settings';
@@ -90,16 +91,21 @@ type PlayerMenuProps = {
   player: Player;
   setShowPlayerMenu: (showPlayerMenu: boolean) => void;
   isShown: boolean;
+  onForfeit?: () => void;
+  totalPlayers: number;
 };
 
 const PlayerMenu = ({
   player,
   setShowPlayerMenu,
   isShown,
+  onForfeit,
+  totalPlayers,
 }: PlayerMenuProps) => {
   const settingsContainerRef = useRef<HTMLDivElement | null>(null);
   const resetGameDialogRef = useRef<HTMLDialogElement | null>(null);
   const endGameDialogRef = useRef<HTMLDialogElement | null>(null);
+  const forfeitGameDialogRef = useRef<HTMLDialogElement | null>(null);
 
   const { isSide } = useSafeRotate({
     rotation: player.settings.rotation,
@@ -117,6 +123,7 @@ const PlayerMenu = ({
     saveCurrentGame,
     initialGameSettings,
     setPreStartCompleted,
+    gameScore,
   } = useGlobalSettings();
 
   const analytics = useAnalytics();
@@ -159,7 +166,7 @@ const PlayerMenu = ({
   };
 
   const handleGoToStart = () => {
-    saveCurrentGame({ players, initialGameSettings });
+    saveCurrentGame({ players, initialGameSettings, gameScore });
     goToStart();
     setRandomizingPlayer(true);
   };
@@ -479,6 +486,32 @@ const PlayerMenu = ({
             >
               <ResetGame size={iconSize} />
             </button>
+
+            <button
+              style={{
+                cursor: 'pointer',
+                userSelect: 'none',
+                fontSize: buttonFontSize,
+                padding: '2px',
+              }}
+              className="text-red-500"
+              onClick={() => {
+                if (totalPlayers === 2) {
+                  forfeitGameDialogRef.current?.show();
+                } else {
+                  if (onForfeit) {
+                    analytics.trackEvent('forfeit_game', {
+                      player: player.index,
+                    });
+                    onForfeit();
+                    setShowPlayerMenu(false);
+                  }
+                }
+              }}
+              aria-label="Forfeit Game"
+            >
+              <Skull size={iconSize} />
+            </button>
           </ButtonsSections>
         </BetterRowContainer>
 
@@ -559,6 +592,48 @@ const PlayerMenu = ({
             </div>
           </div>
         </dialog>
+
+        <dialog
+          ref={forfeitGameDialogRef}
+          className="z-[999] size-full bg-background-settings overflow-y-scroll"
+          onClick={() => forfeitGameDialogRef.current?.close()}
+        >
+          <div className="flex size-full items-center justify-center">
+            <div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-xl border-none">
+              <h1
+                className="text-center text-text-primary"
+                style={{ fontSize: extraCountersSize }}
+              >
+                Forfeit Game?
+              </h1>
+              <div className="flex justify-evenly gap-2">
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
+                  style={{ fontSize: iconSize }}
+                  onClick={() => forfeitGameDialogRef.current?.close()}
+                >
+                  No
+                </button>
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
+                  onClick={() => {
+                    if (onForfeit) {
+                      analytics.trackEvent('forfeit_game', {
+                        player: player.index,
+                      });
+                      onForfeit();
+                      setShowPlayerMenu(false);
+                      forfeitGameDialogRef.current?.close();
+                    }
+                  }}
+                  style={{ fontSize: iconSize }}
+                >
+                  Yes
+                </button>
+              </div>
+            </div>
+          </div>
+        </dialog>
       </SettingsContainer>
     </PlayerMenuWrapper>
   );

src/Components/Players/Players.tsx

@@ -31,7 +31,7 @@ const PlayersWrapper = twc.div`w-full h-full bg-black`;
 export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
   const { players } = usePlayers();
 
-  const { playing, settings, preStartCompleted } = useGlobalSettings();
+  const { playing, settings, preStartCompleted, gameScore } = useGlobalSettings();
 
   return (
     <PlayersWrapper>
@@ -48,6 +48,11 @@ export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
                 opponents={players.filter(
                   (opponent) => opponent.index !== player.index
                 )}
+                matchScore={
+                  settings.showMatchScore
+                    ? gameScore[player.index]
+                    : undefined
+                }
               />
 
               {settings.preStartMode === PreStartMode.RandomKing &&

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/ScoreDisplay/ScoreDisplay.tsx

@@ -0,0 +1,71 @@
+import { twc } from 'react-twc';
+import { Player } from '../../Types/Player';
+import { GameScore } from '../../Contexts/GlobalSettingsContext';
+
+const ScoreContainer = twc.div`
+  absolute bottom-4 left-1/2 -translate-x-1/2
+  bg-background-default/90 backdrop-blur-sm
+  rounded-lg p-4
+  shadow-lg
+  z-40
+  min-w-[200px]
+`;
+
+const Title = twc.h3`
+  text-sm font-semibold text-text-secondary
+  uppercase tracking-wide mb-3
+`;
+
+const ScoreList = twc.div`
+  flex flex-col gap-2
+`;
+
+const ScoreItem = twc.div`
+  flex items-center justify-between gap-4
+`;
+
+const PlayerInfo = twc.div`
+  flex items-center gap-2
+`;
+
+const PlayerColor = twc.div`
+  w-4 h-4 rounded-full
+`;
+
+const PlayerName = twc.span`
+  text-text-primary font-medium
+`;
+
+const Score = twc.span`
+  text-text-primary font-bold text-lg
+`;
+
+type ScoreDisplayProps = {
+  players: Player[];
+  gameScore: GameScore;
+};
+
+export const ScoreDisplay = ({ players, gameScore }: ScoreDisplayProps) => {
+  const hasAnyScore = Object.values(gameScore).some((score) => score > 0);
+
+  if (!hasAnyScore) {
+    return null;
+  }
+
+  return (
+    <ScoreContainer>
+      <Title>Match Score</Title>
+      <ScoreList>
+        {players.map((player) => (
+          <ScoreItem key={player.index}>
+            <PlayerInfo>
+              <PlayerColor style={{ backgroundColor: player.color }} />
+              <PlayerName>{player.name || `Player ${player.index + 1}`}</PlayerName>
+            </PlayerInfo>
+            <Score>{gameScore[player.index] || 0}</Score>
+          </ScoreItem>
+        ))}
+      </ScoreList>
+    </ScoreContainer>
+  );
+};

src/Components/Views/Play.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { twc } from 'react-twc';
 import { twGridTemplateAreas } from '../../../tailwind.config';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
@@ -6,6 +6,7 @@ import { usePlayers } from '../../Hooks/usePlayers';
 import { Orientation, PreStartMode } from '../../Types/Settings';
 import { Players } from '../Players/Players';
 import { PreStart } from '../PreStartGame/PreStart';
+import { GameOver } from '../GameOver/GameOver';
 
 const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden, setPlayers`;
 
@@ -14,9 +15,10 @@ type GridTemplateAreasKeys = keyof typeof twGridTemplateAreas;
 export type GridLayout = `grid-areas-${GridTemplateAreasKeys}`;
 
 export const Play = () => {
-  const { players, setPlayers } = usePlayers();
-  const { initialGameSettings, playing, settings, preStartCompleted } =
+  const { players, setPlayers, resetCurrentGame, setStartingPlayerIndex } = usePlayers();
+  const { initialGameSettings, playing, settings, preStartCompleted, gameScore, setGameScore } =
     useGlobalSettings();
+  const [winner, setWinner] = useState<number | null>(null);
 
   let gridLayout: GridLayout;
   switch (players.length) {
@@ -94,6 +96,57 @@ export const Play = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Check for game over when only one player remains
+  useEffect(() => {
+    if (players.length < 2 || winner !== null || !settings.showMatchScore) {
+      return;
+    }
+
+    const activePlayers = players.filter((p) => !p.hasLost);
+
+    // If only one player is alive, they are the winner
+    if (activePlayers.length === 1) {
+      setWinner(activePlayers[0].index);
+    }
+  }, [players, winner, settings.showMatchScore]);
+
+  const handleStartNextGame = () => {
+    if (winner === null) return;
+
+    // Update score
+    const newScore = { ...gameScore };
+    newScore[winner] = (newScore[winner] || 0) + 1;
+    setGameScore(newScore);
+
+    // Set the loser as the starting player for next game
+    const loserIndex = players.find((p) => p.index !== winner)?.index ?? 0;
+    setStartingPlayerIndex(loserIndex);
+
+    // Reset game
+    resetCurrentGame();
+    setWinner(null);
+  };
+
+  const handleStay = () => {
+    if (winner === null) return;
+
+    // Update score
+    const newScore = { ...gameScore };
+    newScore[winner] = (newScore[winner] || 0) + 1;
+    setGameScore(newScore);
+
+    // Reset hasLost state for all players
+    setPlayers(
+      players.map((p) => ({
+        ...p,
+        hasLost: false,
+      }))
+    );
+
+    // Clear winner to allow new game over detection
+    setWinner(null);
+  };
+
   return (
     <MainWrapper>
       {players.length > 1 &&
@@ -103,6 +156,14 @@ export const Play = () => {
         settings.showStartingPlayer && <PreStart />}
 
       <Players gridLayout={gridLayout} />
+
+      {winner !== null && (
+        <GameOver
+          winner={players[winner]}
+          onStartNextGame={handleStartNextGame}
+          onStay={handleStay}
+        />
+      )}
     </MainWrapper>
   );
 };

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-primary-main hover:bg-opacity-5 rounded-2xl cursor-pointer`;
+const Label = twc.label`flex flex-row relative max-w-[118px] hover:bg-white/[0.03] rounded-2xl cursor-pointer`;
 
 const Input = twc.input`peer sr-only`;
 

src/Components/Views/StartMenu/StartMenu.tsx

@@ -64,6 +64,7 @@ const Start = () => {
     setPlaying,
     savedGame,
     saveCurrentGame,
+    setGameScore,
   } = useGlobalSettings();
 
   const infoDialogRef = useRef<HTMLDialogElement | null>(null);
@@ -213,6 +214,9 @@ const Start = () => {
 
     setInitialGameSettings(savedGame.initialGameSettings);
     setPlayers(savedGame.players);
+    if (savedGame.gameScore) {
+      setGameScore(savedGame.gameScore);
+    }
     saveCurrentGame(null);
     setRandomizingPlayer(false);
     setShowPlay(true);
@@ -407,15 +411,31 @@ const Start = () => {
             {savedGame && (
               <button
                 className="flex flex-grow basis-0 justify-center self-center items-center bg-secondary-main px-3 py-2 rounded-md text-text-primary min-w-[150px]
-              
+
               duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-secondary-dark font-bold"
                 onClick={doResumeGame}
               >
-                RESUME&nbsp;
-                <span className="text-xs">
-                  ({savedGame.players.length}&nbsp;
-                  {savedGame.players.length > 1 ? 'players' : 'player'})
-                </span>
+                <div className="flex flex-col items-center">
+                  <div>
+                    RESUME&nbsp;
+                    <span className="text-xs">
+                      ({savedGame.players.length}&nbsp;
+                      {savedGame.players.length > 1 ? 'players' : 'player'})
+                    </span>
+                  </div>
+                  {savedGame.gameScore && Object.keys(savedGame.gameScore).length > 0 && (
+                    <div className="text-xs opacity-75">
+                      Score: {Object.entries(savedGame.gameScore)
+                        .map(([playerIndex, score]) => {
+                          const player = savedGame.players.find(
+                            (p) => p.index === Number(playerIndex)
+                          );
+                          return `${player?.name || `P${Number(playerIndex) + 1}`}: ${score}`;
+                        })
+                        .join(' | ')}
+                    </div>
+                  )}
+                </div>
               </button>
             )}
           </StartButtonFooter>

src/Contexts/GlobalSettingsContext.tsx

@@ -12,8 +12,13 @@ type Version = {
 export type SavedGame = {
   initialGameSettings: InitialGameSettings;
   players: Player[];
+  gameScore?: GameScore;
 } | null;
 
+export type GameScore = {
+  [playerIndex: number]: number;
+};
+
 export type GlobalSettingsContextType = {
   fullscreen: {
     isFullscreen: boolean;
@@ -45,6 +50,9 @@ export type GlobalSettingsContextType = {
   version: Version;
   savedGame: SavedGame;
   saveCurrentGame: (currentGame: SavedGame) => void;
+  gameScore: GameScore;
+  setGameScore: (score: GameScore) => void;
+  resetGameScore: () => void;
 };
 
 export const GlobalSettingsContext =

src/Providers/GlobalSettingsProvider.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { useWakeLock } from 'react-screen-wake-lock';
 import {
+  GameScore,
   GlobalSettingsContext,
   GlobalSettingsContextType,
   SavedGame,
@@ -61,14 +62,20 @@ export const GlobalSettingsProvider = ({
   };
 
   const savedSettings = localStorage.getItem('settings');
-  const [randomizingPlayer, setRandomizingPlayer] = useState<boolean>(
-    savedSettings
-      ? Boolean(JSON.parse(savedSettings).preStartMode === 'random-king')
-      : true
-  );
-  const [settings, setSettings] = useState<Settings>(
-    savedSettings ? JSON.parse(savedSettings) : defaultSettings
-  );
+  const [randomizingPlayer, setRandomizingPlayer] = useState<boolean>(() => {
+    if (!savedSettings) return true;
+    const parsed = JSON.parse(savedSettings);
+    return Boolean(parsed.preStartMode === 'random-king');
+  });
+  const [settings, setSettings] = useState<Settings>(() => {
+    if (!savedSettings) return 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);
@@ -78,11 +85,17 @@ export const GlobalSettingsProvider = ({
   const savedGameSettings = localStorage.getItem('initialGameSettings');
 
   const [initialGameSettings, setInitialGameSettings] =
-    useState<InitialGameSettings>(
-      savedGameSettings
-        ? JSON.parse(savedGameSettings)
-        : defaultInitialGameSettings
-    );
+    useState<InitialGameSettings>(() => {
+      if (!savedGameSettings) return defaultInitialGameSettings;
+      const parsed = initialGameSettingsSchema.safeParse(
+        JSON.parse(savedGameSettings)
+      );
+      if (!parsed.success) {
+        console.error('invalid game settings, using default settings');
+        return defaultInitialGameSettings;
+      }
+      return parsed.data;
+    });
 
   const setInitialGameSettingsAndLocalStorage = (
     initialGameSettings: InitialGameSettings
@@ -94,47 +107,18 @@ export const GlobalSettingsProvider = ({
     );
   };
 
-  // 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 savedGameScore = localStorage.getItem('gameScore');
+  const [gameScore, setGameScore] = useState<GameScore>(
+    savedGameScore ? JSON.parse(savedGameScore) : {}
+  );
+  const setGameScoreAndLocalStorage = (score: GameScore) => {
+    setGameScore(score);
+    localStorage.setItem('gameScore', JSON.stringify(score));
+  };
+  const resetGameScore = () => {
+    setGameScore({});
+    localStorage.removeItem('gameScore');
+  };
 
   const [isFullscreen, setIsFullscreen] = useState(false);
 
@@ -171,11 +155,13 @@ export const GlobalSettingsProvider = ({
       localStorage.removeItem('playing');
       localStorage.removeItem('showPlay');
       localStorage.removeItem('preStartComplete');
+      localStorage.removeItem('gameScore');
 
       setPlaying(false);
       setShowPlay(false);
       setPreStartCompleted(false);
       setSettings({ ...settings, useMonarch: false });
+      setGameScore({});
     };
 
     const goToStart = async () => {
@@ -224,17 +210,20 @@ 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: {
-              Authorization: `Bearer ${
-                import.meta.env.VITE_REPO_READ_ACCESS_TOKEN
-              }`,
-              Accept: 'application/vnd.github+json',
-              'X-GitHub-Api-Version': '2022-11-28',
-            },
-          }
+          { headers }
         );
         const data = await result.json();
 
@@ -283,7 +272,7 @@ export const GlobalSettingsProvider = ({
       playing,
       setPlaying: setPlayingAndLocalStorage,
       initialGameSettings,
-      setInitialGameSettings,
+      setInitialGameSettings: setInitialGameSettingsAndLocalStorage,
       settings,
       setSettings: setSettingsAndLocalStorage,
       randomizingPlayer,
@@ -299,6 +288,9 @@ export const GlobalSettingsProvider = ({
         isLatest: isLatestVersion,
         checkForNewVersion,
       },
+      gameScore,
+      setGameScore: setGameScoreAndLocalStorage,
+      resetGameScore,
     };
   }, [
     isFullscreen,
@@ -312,11 +304,13 @@ export const GlobalSettingsProvider = ({
     initialGameSettings,
     settings,
     randomizingPlayer,
+    setRandomizingPlayer,
     preStartCompleted,
     savedGame,
     remoteVersion,
     isLatestVersion,
     analytics,
+    gameScore,
   ]);
 
   return (

src/Providers/PlayersProvider.tsx

@@ -1,6 +1,5 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { Player } from '../Types/Player';
-import { useMemo, useState } from 'react';
 import { PlayersContextType, PlayersContext } from '../Contexts/PlayersContext';
 import { InitialGameSettings } from '../Types/Settings';
 
@@ -13,10 +12,10 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
     savedStartingPlayerIndex ? parseInt(savedStartingPlayerIndex) : -1
   );
 
-  const setStartingPlayerIndexAndLocalStorage = (index: number) => {
+  const setStartingPlayerIndexAndLocalStorage = useCallback((index: number) => {
     setStartingPlayerIndex(index);
     localStorage.setItem('startingPlayerIndex', String(index));
-  };
+  }, []);
 
   const [players, setPlayers] = useState<Player[]>(
     savedPlayers ? JSON.parse(savedPlayers) : []
@@ -61,7 +60,11 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
         return;
       }
 
-      const newStartingPlayerIndex = Math.floor(Math.random() * players.length);
+      // Use the saved starting player index if available, otherwise random
+      const newStartingPlayerIndex =
+        startingPlayerIndex >= 0
+          ? startingPlayerIndex
+          : Math.floor(Math.random() * players.length);
 
       players.forEach((player: Player) => {
         player.commanderDamage.map((damage) => {
@@ -92,7 +95,7 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
       startingPlayerIndex,
       setStartingPlayerIndex: setStartingPlayerIndexAndLocalStorage,
     };
-  }, [players, startingPlayerIndex]);
+  }, [players, startingPlayerIndex, setStartingPlayerIndexAndLocalStorage]);
 
   return (
     <PlayersContext.Provider value={ctxValue}>

src/Types/Settings.ts

@@ -27,6 +27,7 @@ export type Settings = {
   preStartMode: PreStartMode;
   showAnimations: boolean;
   useMonarch: boolean;
+  showMatchScore: boolean;
 };
 
 export type InitialGameSettings = {
@@ -61,6 +62,7 @@ export const settingsSchema = z.object({
   preStartMode: z.nativeEnum(PreStartMode),
   showAnimations: z.boolean(),
   useMonarch: z.boolean().default(false),
+  showMatchScore: z.boolean().default(true),
 });
 
 export const defaultSettings: Settings = {
@@ -71,4 +73,5 @@ export const defaultSettings: Settings = {
   preStartMode: PreStartMode.None,
   showAnimations: true,
   useMonarch: false,
+  showMatchScore: true,
 };

src/index.css

@@ -1,6 +1,32 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --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;
@@ -14,7 +40,7 @@ html,
 body {
   height: 100%;
   position: relative;
-  background-color: theme('colors.background.default');
+  background-color: var(--color-background-default);
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -31,7 +57,7 @@ code {
     monospace;
 }
 
-// hide scrollbar globally
+/* hide scrollbar globally */
 ::-webkit-scrollbar {
   display: none;
 }
@@ -43,18 +69,18 @@ code {
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background-color: theme('colors.background.default');
+  background-color: var(--color-background-default);
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: theme('colors.primary.dark');
+  background: var(--color-primary-dark);
   border-radius: 32px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: theme('colors.primary.main');
+  background: var(--color-primary-main);
 }
 
 * {
@@ -79,6 +105,67 @@ 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 {
@@ -120,7 +207,7 @@ code {
 }
 
 .spotlight1 {
-  background: theme('colors.background.default');
+  background: var(--color-background-default);
 
   position: fixed;
   height: 10vmax;
@@ -142,7 +229,7 @@ code {
 }
 
 .spotlight2 {
-  background: theme('colors.background.default');
+  background: var(--color-background-default);
 
   position: fixed;
   height: 30vmax;
@@ -166,7 +253,7 @@ input[type='range'] {
   transition: background 0ms ease-in;
   margin: 10px 0;
   width: 100%;
-  background: theme('colors.secondary.main');
+  background: var(--color-secondary-main);
 }
 input[type='range']:focus {
   outline: none;
@@ -187,7 +274,7 @@ input[type='range']::-webkit-slider-thumb {
   height: 20px;
   width: 20px;
   border-radius: 100px;
-  background: theme('colors.primary.main');
+  background: var(--color-primary-main);
   cursor: pointer;
   margin-top: -3px;
 }
@@ -207,7 +294,7 @@ input[type='range']::-moz-range-thumb {
   height: 20px;
   width: 20px;
   border-radius: 100px;
-  background: theme('colors.primary.main');
+  background: var(--color-primary-main);
   cursor: pointer;
 }
 
@@ -225,7 +312,7 @@ input[type='range']::-ms-thumb {
   height: 20px;
   width: 20px;
   border-radius: 100px;
-  background: theme('colors.primary.main');
+  background: var(--color-primary-main);
   cursor: pointer;
   margin-top: -3px;
 }

svgr.config.cjs

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

tailwind.config.ts

@@ -1,5 +1,3 @@
-//@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 = {
@@ -107,6 +105,6 @@ export default {
       },
     },
   },
-  plugins: [tailwindcssGridAreas],
+  plugins: [],
 } satisfies Config;
 // #98FF98

template.js

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