Chore/packages cleanup (#51)

* 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
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
-
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
-
-      - name: Set up bun
-        uses: oven-sh/setup-bun@v1
+          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

@@ -11,46 +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.14.1",
-    "ga-4-react": "^0.1.281",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-screen-wake-lock": "^3.0.2",
+    "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.4.2",
-    "semver": "^7.7.1",
-    "zod": "^3.24.2"
+    "react-twc": "^1.5.1",
+    "semver": "^7.7.3",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
+    "@eslint/js": "^9.39.1",
     "@svgr/cli": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.17",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react-swc": "^3.8.0",
+    "@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": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "firebase-tools": "^13.31.2",
-    "install": "^0.13.0",
+    "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": "2.8.8",
+    "prettier": "3.6.2",
     "prop-types": "^15.8.1",
     "tailwindcss": "^4.1.17",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.14",
-    "vite-plugin-pwa": "^0.20.5"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0",
+    "vite": "^7.2.2",
+    "vite-plugin-pwa": "^1.1.0"
   }
 }

src/Components/LifeCounter/LifeCounter.tsx

@@ -195,9 +195,6 @@ 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,3 +1,5 @@
+import { ReactElement } from 'react';
+
 export const IconCheckbox = ({
   name,
   icon,
@@ -7,8 +9,8 @@ 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;

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/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/Providers/GlobalSettingsProvider.tsx

@@ -62,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);
@@ -79,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
@@ -108,48 +120,6 @@ 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(() => {
@@ -240,17 +210,20 @@ export const GlobalSettingsProvider = ({
 
     async function checkForNewVersion(source: 'settings' | 'start_menu') {
       try {
-        const result = await fetch(
-          'https://api.github.com/repos/Vikeo/LifeTrinket/releases/latest',
-          {
-            headers: {
-              Authorization: `Bearer ${
-                import.meta.env.VITE_REPO_READ_ACCESS_TOKEN
-              }`,
+        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 }
         );
         const data = await result.json();
 
@@ -299,7 +272,7 @@ export const GlobalSettingsProvider = ({
       playing,
       setPlaying: setPlayingAndLocalStorage,
       initialGameSettings,
-      setInitialGameSettings,
+      setInitialGameSettings: setInitialGameSettingsAndLocalStorage,
       settings,
       setSettings: setSettingsAndLocalStorage,
       randomizingPlayer,
@@ -331,6 +304,7 @@ export const GlobalSettingsProvider = ({
     initialGameSettings,
     settings,
     randomizingPlayer,
+    setRandomizingPlayer,
     preStartCompleted,
     savedGame,
     remoteVersion,

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) : []
@@ -96,7 +95,7 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
       startingPlayerIndex,
       setStartingPlayerIndex: setStartingPlayerIndexAndLocalStorage,
     };
-  }, [players, startingPlayerIndex]);
+  }, [players, startingPlayerIndex, setStartingPlayerIndexAndLocalStorage]);
 
   return (
     <PlayersContext.Provider value={ctxValue}>

svgr.config.cjs

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

template.js

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