bump

.firebase/hosting.ZGlzdA.cache

@@ -1,12 +1,12 @@
-index.html,1711189442688,fa2549e32940c356ac5cee88c8db61076ad62fb4e599858c8e45cfc68cd901c4
-manifest.json,1711189442512,7ff5111aa04a42adff3b38924ec467b6f345ed0309dba1486dc9b783b60c2a9d
-registerSW.js,1711189442688,5b6445b5215737c53ef0d379c151d57de165a056de2d1c5812ed614f158ebcbd
-sw.js,1711189443521,9c09d33ea573bb818864bfad526fa911839637171773eca8e31905458679846d
-robots.txt,1711189442512,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-manifest.webmanifest,1711189442688,f2bf253209f6e292a6b0dbfa06fb4ac188eb5f2dba568c3ad5511b9ed52c1f51
-workbox-3e911b1d.js,1711189443521,d5dbc868a5c07af633d29de7ba3ffe37542aaaabdf33713b4298df31f92f11ff
-assets/index-WLCHZTqE.css,1711189442688,877e5ea9bfd3a1ca0e6449e8213da8a3c7717e530370f12669bb5c70dd21e700
-favicon.ico,1711189442511,8cefe5adbf00d337d8633fb744b9f2c4914f769b319be4bb7e184b7a4aa17160
-logo192.png,1711189442511,3d1e2e6f064d4fd325828f21bb6493ff0dbf2390b0e7d2aba9f2b6def4829799
-logo512.png,1711189442511,892a4da1cc5434929a83a71fcbcb0d0d80aa82f44e3c21e9b20ffe9267197133
-assets/index-OHs0lOr7.js,1711189442688,aa0dca732cd5b6f621ecb7c6dbcbfdbccde78941cfad954f6626d4ff83040c7f
+index.html,1711905081687,5707f310c48bfbf4b0777999bec2b3216159b24efaac7d4ef5b3f774031a5bd2
+manifest.webmanifest,1711905081687,f2bf253209f6e292a6b0dbfa06fb4ac188eb5f2dba568c3ad5511b9ed52c1f51
+manifest.json,1711905081475,7ff5111aa04a42adff3b38924ec467b6f345ed0309dba1486dc9b783b60c2a9d
+registerSW.js,1711905081687,5b6445b5215737c53ef0d379c151d57de165a056de2d1c5812ed614f158ebcbd
+sw.js,1711905082939,e3333155a3ccec8e315325341364c6fb441239fe35e70c1912b660bfdfbe5714
+robots.txt,1711905081475,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+assets/index-7m_Zw4yH.css,1711905081687,37997d06b32b3d0c724c054913e3c0583b86f786358121cb1615e6646ff46b56
+workbox-3e911b1d.js,1711905082939,d5dbc868a5c07af633d29de7ba3ffe37542aaaabdf33713b4298df31f92f11ff
+logo192.png,1711905081474,3d1e2e6f064d4fd325828f21bb6493ff0dbf2390b0e7d2aba9f2b6def4829799
+favicon.ico,1711905081474,8cefe5adbf00d337d8633fb744b9f2c4914f769b319be4bb7e184b7a4aa17160
+logo512.png,1711905081475,892a4da1cc5434929a83a71fcbcb0d0d80aa82f44e3c21e9b20ffe9267197133
+assets/index-B28HjoRb.js,1711905081687,7475dc6e6963e1027f4ccaa29b43412d71fbe80a2dd42baccf9c058e69485a2f

.github/workflows/firebase-release.yml

@@ -7,7 +7,8 @@ jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
     env:
-      REPO_READ_ACCESS_TOKEN: ${{ secrets.REPO_READ_ACCESS_TOKEN }}
+      VITE_REPO_READ_ACCESS_TOKEN: ${{ secrets.REPO_READ_ACCESS_TOKEN }}
+      VITE_FIREBASE_ANALYTICS_API_KEY: ${{ secrets.FIREBASE_ANALYTICS_API_KEY }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3

.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

env.d.ts

@@ -1 +0,0 @@
-declare const APP_VERSION: string;

package.json

@@ -1,11 +1,12 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.42",
   "type": "commonjs",
   "engines": {
     "node": ">=18",
-    "npm": "please use bun or yarn :) "
+    "yarn": "use pnpm",
+    "npm": "please use pnpm"
   },
   "scripts": {
     "dev": "vite",

src/Components/LifeCounter/LifeCounter.tsx

@@ -133,10 +133,12 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
     trackMouse: true,
     onSwipedDown: (e) => {
       e.event.stopPropagation();
+      analytics.trackEvent('open_player_menu_swipe');
       setShowPlayerMenu(true);
     },
     onSwipedUp: (e) => {
       e.event.stopPropagation();
+      analytics.trackEvent('close_player_menu_swipe');
       setShowPlayerMenu(false);
     },
 
@@ -227,6 +229,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
         {settings.showPlayerMenuCog && (
           <SettingsButton
             onClick={() => {
+              analytics.trackEvent('open_player_menu_button');
               setShowPlayerMenu(!showPlayerMenu);
             }}
             rotation={player.settings.rotation}

src/Components/Misc/InfoModal.tsx

@@ -3,6 +3,8 @@ import { twc } from 'react-twc';
 import { Separator } from './Separator';
 import { Paragraph } from './TextComponents';
 import { Cross } from '../../Icons/generated';
+import { useEffect } from 'react';
+import { useAnalytics } from '../../Hooks/useAnalytics';
 
 export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary w-[95vw] max-w-[548px]`;
 
@@ -12,6 +14,17 @@ type InfoModalProps = {
 };
 
 export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
+  const analytics = useAnalytics();
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    analytics.trackEvent('info_opened');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   return (
     <Modal
       open={isOpen}

src/Components/Misc/SettingsModal.tsx

@@ -1,5 +1,5 @@
-import { Button, Modal, Switch } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { Modal, Switch } from '@mui/material';
+import { useEffect } from 'react';
 import { twc } from 'react-twc';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { Cross } from '../../Icons/generated';
@@ -7,76 +7,55 @@ import { PreStartMode } from '../../Types/Settings';
 import { ModalWrapper } from './InfoModal';
 import { Separator } from './Separator';
 import { Paragraph } from './TextComponents';
+import { useAnalytics } from '../../Hooks/useAnalytics';
 
 const SettingContainer = twc.div`w-full flex flex-col mb-2`;
 
 const ToggleContainer = twc.div`flex flex-row justify-between items-center -mb-1`;
 
-const Container = twc.div`flex flex-col items-center w-full`;
+const Container = twc.div`flex flex-col items-start w-full`;
 
 const Description = twc.p`mr-16 text-xs text-left text-text-secondary`;
 
+const baseGithubReleasesUrl =
+  'https://github.com/Vikeo/LifeTrinket/releases/tag/';
+
 type SettingsModalProps = {
   isOpen: boolean;
   closeModal: () => void;
 };
 
 export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
-  const { settings, setSettings, isPWA } = useGlobalSettings();
-  const [isLatestVersion, setIsLatestVersion] = useState(false);
-  const [newVersion, setNewVersion] = useState<string | undefined>(undefined);
+  const { settings, setSettings, isPWA, version } = useGlobalSettings();
+  const analytics = useAnalytics();
 
   useEffect(() => {
     if (!isOpen) {
       return;
     }
-    async function checkIfLatestVersion() {
-      try {
-        const result = await fetch(
-          'https://api.github.com/repos/Vikeo/LifeTrinket/releases/latest',
-          {
-            headers: {
-              /* @ts-expect-error is defined in vite.config.ts*/
-              Authorization: `Bearer ${REPO_READ_ACCESS_TOKEN}`,
-              Accept: 'application/vnd.github+json',
-              'X-GitHub-Api-Version': '2022-11-28',
-            },
-          }
-        );
-        const data = await result.json();
 
-        if (!data.name) {
-          setNewVersion(undefined);
-          setIsLatestVersion(false);
-          return;
-        }
-
-        setNewVersion(data.name);
-
-        /* @ts-expect-error is defined in vite.config.ts*/
-        if (data.name === APP_VERSION) {
-          setIsLatestVersion(true);
-          return;
-        }
-
-        setIsLatestVersion(false);
-      } catch (error) {
-        console.error('error getting latest version string', error);
-      }
-    }
-    checkIfLatestVersion();
+    analytics.trackEvent('settings_opened');
+    version.checkForNewVersion('settings');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
   return (
     <Modal
       open={isOpen}
-      onClose={closeModal}
+      onClose={() => {
+        analytics.trackEvent('settings_outside_clicked');
+
+        closeModal();
+      }}
       className="w-full flex justify-center"
     >
       <>
         <div className="flex justify-center items-center relative w-full max-w-[532px]">
           <button
-            onClick={closeModal}
+            onClick={() => {
+              analytics.trackEvent('settings_cross_clicked');
+              closeModal();
+            }}
             className="flex absolute top-12 right-0 z-10 w-10 h-10 bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
           >
             <Cross size="16px" className="text-text-primary " />
@@ -84,31 +63,71 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
         </div>
         <ModalWrapper>
           <Container>
-            <h2 className="text-center text-2xl mb-2">⚙️ Settings ⚙️</h2>
-            <SettingContainer>
-              <Paragraph>
-                {/* @ts-expect-error is defined in vite.config.ts*/}
-                Current version: {APP_VERSION}{' '}
-                {isLatestVersion && (
+            <h2 className="text-center text-2xl mb-2 w-full">⚙️ Settings ⚙️</h2>
+            <div className="flex flex-col mb-2 w-full">
+              <div className="text-text-primary flex items-center gap-2">
+                Current version: {version.installedVersion}{' '}
+                {version.isLatest && (
                   <span className="text-sm text-text-secondary">(latest)</span>
                 )}
-              </Paragraph>
-              {!isLatestVersion && newVersion && (
-                <Paragraph className="text-text-secondary text-lg text-center">
-                  New version ({newVersion}) is available!{' '}
-                </Paragraph>
+                <div className="text-xs text-text-primary opacity-75">
+                  (
+                  <a
+                    href={baseGithubReleasesUrl + version.installedVersion}
+                    target="_blank"
+                    className="underline"
+                    onClick={() => {
+                      analytics.trackEvent(
+                        `current_change_log_clicked_v${version.installedVersion}`
+                      );
+                    }}
+                  >
+                    Release notes
+                  </a>
+                  )
+                </div>
+              </div>
+              {!version.isLatest && version.remoteVersion && (
+                <>
+                  <div className="flex gap-2 items-center mt-2">
+                    <Paragraph className="text-text-secondary">
+                      {version.remoteVersion} available!
+                    </Paragraph>
+                    <div className="text-xs text-text-primary opacity-75">
+                      (
+                      <a
+                        href={baseGithubReleasesUrl + version.remoteVersion}
+                        target="_blank"
+                        className="underline"
+                        onClick={() => {
+                          analytics.trackEvent(
+                            `new_change_log_clicked_v${version.remoteVersion}`
+                          );
+                        }}
+                      >
+                        Release notes
+                      </a>
+                      )
+                    </div>
+                  </div>
+                  <button
+                    className="flex justify-center items-center self-start mt-2 bg-primary-main px-3 py-1 rounded-md"
+                    onClick={() => {
+                      {
+                        analytics.trackEvent(`pressed_update`, {
+                          toVersion: version.remoteVersion,
+                          fromVersion: version.installedVersion,
+                        });
+                        window?.location?.reload();
+                      }
+                    }}
+                  >
+                    <span className="text-sm">Update</span>
+                    <span className="text-xs">&nbsp;(reload app)</span>
+                  </button>
+                </>
               )}
-            </SettingContainer>
-            {!isLatestVersion && newVersion && (
-              <Button
-                variant="contained"
-                style={{ marginTop: '0.25rem', marginBottom: '0.25rem' }}
-                onClick={() => window?.location?.reload()}
-              >
-                <span>Update</span>
-                <span className="text-xs">&nbsp;(reload app)</span>
-              </Button>
-            )}
+            </div>
             <Separator height="1px" />
 
             <SettingContainer>
@@ -149,7 +168,7 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
             </SettingContainer>
             <SettingContainer>
               <div className="flex flex-row justify-between items-center mb-1">
-                <label htmlFor="pre-start-modes">Pre-Start mode</label>
+                <label htmlFor="pre-start-modes">Player selection style</label>
                 <select
                   name="pre-start-modes"
                   id="pre-start-modes"
@@ -163,9 +182,12 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                   }}
                   disabled={!settings.showStartingPlayer}
                 >
-                  <option value={PreStartMode.None}>None</option>
-                  <option value={PreStartMode.RandomKing}>Random King</option>
-                  <option value={PreStartMode.FingerGame}>Finger Game</option>
+                  <option value={PreStartMode.None}>Instant</option>
+                  <option value={PreStartMode.RandomKing}>Royal Shuffle</option>
+                  <option value={PreStartMode.FingerGame}>
+                    Touch Roulette
+                  </option>
+                  <option value={PreStartMode.Trivia}>Group Trivia</option>
                 </select>
               </div>
               <div className="text-xs text-left text-text-secondary">
@@ -175,13 +197,13 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
 
               {settings.preStartMode === PreStartMode.None && (
                 <div className="text-xs text-left text-text-secondary mt-1">
-                  <span className="text-text-primary">None:</span> The starting
-                  player will simply be shown.
+                  <span className="text-text-primary">Instant:</span> A random
+                  starting player will simply be shown on start.
                 </div>
               )}
               {settings.preStartMode === PreStartMode.RandomKing && (
                 <div className="text-xs text-left text-text-secondary mt-1">
-                  <span className="text-text-primary">Random King:</span>{' '}
+                  <span className="text-text-primary">Royal Shuffle:</span>{' '}
                   Randomly pass a crown between all players, press the screen to
                   stop it. The player who has the crown when it stops gets to
                   start.
@@ -189,11 +211,19 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
               )}
               {settings.preStartMode === PreStartMode.FingerGame && (
                 <div className="text-xs text-left text-text-secondary mt-1">
-                  <span className="text-text-primary">Finger Game:</span> All
+                  <span className="text-text-primary">Touch Roulette:</span> All
                   players put a finger on the screen, one will be chosen at
                   random.
                 </div>
               )}
+
+              {settings.preStartMode === PreStartMode.Trivia && (
+                <div className="text-xs text-left text-text-secondary mt-1">
+                  <span className="text-text-primary">Group Trivia:</span> A
+                  random "who is the most ..." type question will be shown, the
+                  group decides which player fits the question best.
+                </div>
+              )}
             </SettingContainer>
             <SettingContainer>
               <ToggleContainer>
@@ -234,6 +264,16 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                 enabled.
               </Description>
             </SettingContainer>
+            <Separator height="1px" />
+            <button
+              className="flex justify-center self-center items-center mt-1 mb-1 bg-primary-main px-3 py-1 rounded-md"
+              onClick={() => {
+                analytics.trackEvent('settings_save_clicked');
+                closeModal();
+              }}
+            >
+              <span className="text-sm">Save and Close</span>
+            </button>
             {!isPWA && (
               <>
                 <Separator height="1px" />
@@ -254,14 +294,6 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
               </>
             )}
             <Separator height="1px" />
-
-            <Button
-              variant="contained"
-              onClick={closeModal}
-              style={{ marginTop: '0.25rem' }}
-            >
-              Save and Close
-            </Button>
           </Container>
         </ModalWrapper>
       </>

src/Components/Players/PlayerMenu.tsx

@@ -18,6 +18,7 @@ import {
 } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
 import { RotationDivProps } from '../Buttons/CommanderDamage';
+import { useAnalytics } from '../../Hooks/useAnalytics';
 
 const PlayerMenuWrapper = twc.div`
   flex
@@ -111,6 +112,8 @@ const PlayerMenu = ({
     setRandomizingPlayer,
   } = useGlobalSettings();
 
+  const analytics = useAnalytics();
+
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -130,6 +133,7 @@ const PlayerMenu = ({
     setShowPlayerMenu(false);
     setPlaying(false);
     setRandomizingPlayer(true);
+    analytics.trackEvent('reset_game');
   };
 
   const handleGoToStart = () => {
@@ -173,7 +177,10 @@ const PlayerMenu = ({
         ref={settingsContainerRef}
       >
         <button
-          onClick={() => setShowPlayerMenu(false)}
+          onClick={() => {
+            analytics.trackEvent('close_player_menu_button');
+            setShowPlayerMenu(false);
+          }}
           className="flex absolute top-0 right-2 z-10 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2 p-[0.2rem]"
         >
           <Cross size={buttonFontSize} className="text-primary-main " />
@@ -187,6 +194,11 @@ const PlayerMenu = ({
                 type="color"
                 className="size-[200%] absolute -left-2 -top-2"
                 value={player.color}
+                onClick={() => {
+                  analytics.trackEvent('color_picker_opened', {
+                    player: player.index,
+                  });
+                }}
               />
             </ColorPickerButton>
             {player.settings.useCommanderDamage && (
@@ -210,7 +222,12 @@ const PlayerMenu = ({
                       strokeWidth="30"
                     />
                   }
-                  onChange={handleSettingsChange}
+                  onChange={(e) => {
+                    analytics.trackEvent('toggle_partner', {
+                      checked: e.target.checked,
+                    });
+                    handleSettingsChange(e);
+                  }}
                   role="checkbox"
                   aria-checked={player.settings.usePartner}
                   aria-label="Partner"
@@ -237,7 +254,12 @@ const PlayerMenu = ({
                     strokeWidth="30"
                   />
                 }
-                onChange={handleSettingsChange}
+                onChange={(e) => {
+                  analytics.trackEvent('toggle_poison', {
+                    checked: e.target.checked,
+                  });
+                  handleSettingsChange(e);
+                }}
                 role="checkbox"
                 aria-checked={player.settings.usePoison}
                 aria-label="Poison"
@@ -263,7 +285,12 @@ const PlayerMenu = ({
                     strokeWidth="15"
                   />
                 }
-                onChange={handleSettingsChange}
+                onChange={(e) => {
+                  analytics.trackEvent('toggle_energy', {
+                    checked: e.target.checked,
+                  });
+                  handleSettingsChange(e);
+                }}
                 role="checkbox"
                 aria-checked={player.settings.useEnergy}
                 aria-label="Energy"
@@ -289,7 +316,12 @@ const PlayerMenu = ({
                     strokeWidth="15"
                   />
                 }
-                onChange={handleSettingsChange}
+                onChange={(e) => {
+                  analytics.trackEvent('toggle_experience', {
+                    checked: e.target.checked,
+                  });
+                  handleSettingsChange(e);
+                }}
                 role="checkbox"
                 aria-checked={player.settings.useExperience}
                 aria-label="Experience"

src/Components/PreStartGame/Games/Trivia.tsx

@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
+
+const questions = [
+  'Who has the most siblings?',
+  'Who has the most pets?',
+  'Who has the most tattoos?',
+  'Who has the most piercings?',
+  'Who has the most expensive shoes?',
+  'Who has the most most amount of teeth?',
+  'Who has the most least amount of teeth?',
+  'Who has the most least amount of teeth?',
+  'Who lives closest to the equator?',
+  'Who is the tallest person in the group?',
+  'Who is the shortest person in the group?',
+  'Who speaks the most languages?',
+  'Who has traveled to the most countries?',
+  'Who has the earliest birthday in the year?',
+  'Who has won the most awards or trophies?',
+  'Who is the best cook among you?',
+  'Who is the fastest runner?',
+  'Who has the most unique hobby?',
+  'Who is the biggest movie buff?',
+  'Who is the most tech-savvy?',
+  'Who is the best at solving puzzles?',
+  'Who has the most extensive music collection?',
+  'Who has the most impressive collection of books?',
+  'Who has the most experience in a particular sport or activity?',
+  'Who has the most interesting job or profession?',
+  'Who has the most artistic talent?',
+  'Who is the most organized person?',
+  'Who is the best at keeping secrets?',
+  'Who has the most fascinating family history?',
+  'Who has the most embarrassing childhood nickname?',
+  'Who has the most unusual talent or skill?',
+  'Who has the most interesting family tradition?',
+  'Who has the most impressive celebrity encounter?',
+  'Who has the most unusual phobia?',
+  'Who has the most adventurous spirit?',
+  'Who has the most unique item in their wallet/purse?',
+  'Who has the most daring fashion sense?',
+  'Who has the most impressive party trick?',
+  'Who has the most memorable encounter with a wild animal?',
+  'Who has the most adventurous palate?',
+  'Who has the most unusual collection?',
+  'Who has the most unique bucket list item?',
+  'Who has the most inspiring life motto or mantra?',
+  'Who is the most likely to break out into song or dance in public?',
+  'Who is the most likely to be found binge-watching TV shows?',
+  'Who is the biggest procrastinator?',
+  'Who is the most likely to cry during a movie?',
+  'Who is the most adventurous when it comes to trying new foods?',
+  "Who is the most likely to forget someone's birthday?",
+  'Who is the best at giving advice?',
+  'Who is the worst at giving advice?',
+  'Who is the most likely to be found reading a book at a party?',
+  'Who is the most likely to win in a game of charades?',
+  'Who is the most likely to get lost in their own neighborhood?',
+  'Who is the most sentimental?',
+  'Who is the most likely to become famous?',
+  'Who is the most likely to become a millionaire?',
+  'Who is the most likely to start their own business?',
+  'Who is the most likely to become president?',
+  'Who is the most likely to go viral on social media?',
+  'Who is the most likely to win a Nobel Prize?',
+  'Who is the most likely to be a superhero in disguise?',
+  'Who is the most likely to survive a zombie apocalypse?',
+  'Who is the most likely to believe in aliens?',
+  'Who is the most likely to spend all their money on something silly?',
+  'Who is the most likely to write a bestselling novel?',
+  'Who is the most likely to be a secret agent?',
+  'Who is the most likely to be a professional athlete?',
+  'Who is the most likely to win a game of trivia?',
+
+  'Who is the most likely to win the upcoming game?',
+  'Who is the most likely to win at a game of Pokémon TCG?',
+  'Who has the most valuable card in their collection?',
+  'Who is the best at building decks?',
+  'Who has won the most games?',
+  'Who has the largest collection of cards?',
+  'Who is the most knowledgeable about Magic the Gathering lore?',
+  'Who is the most strategic?',
+  'Who is the most likely to trade away their most valuable card for something silly?',
+  'Who is the most competitive?',
+  'Who would be the most creative when it comes to making up new Magic the Gathering rules?',
+  'Who is the most likely to organize a Magic the Gathering draft tournament?',
+  'Who is the most enthusiastic about opening booster packs?',
+  'Who has the most unique and unusual Magic the Gathering deck?',
+  'Who is the most likely to cosplay as their favorite Magic the Gathering character?',
+  'Who is the most likely to forget to bring their Magic the Gathering deck to a game night?',
+  'Who is the most generous when it comes to lending out their decks?',
+  'Who is the most likely to start their own Magic the Gathering YouTube channel?',
+  'Who is the most skilled at bluffing during a game of Magic the Gathering?',
+  'Who is the most likely to spend all their money on Magic the Gathering cards?',
+  'Who is the most likely to rage quit during a game of Magic the Gathering?',
+  'Who is the most likely to win in a Magic the Gathering trivia contest?',
+  'Who is the most likely to build a themed Magic the Gathering deck?',
+  'Who is the most likely to organize a Magic the Gathering cube draft?',
+  'Who is the most likely to teach new players how to play Magic the Gathering?',
+  'Who is the most likely to build a commander deck with a ridiculous theme?',
+  'Who is the most likely to collect foreign-language Magic the Gathering cards?',
+  'Who is the most likely to participate in a Magic the Gathering charity event?',
+  'Who is the most likely to cosplay as their Magic the Gathering commander?',
+  'Who is the most likely to organize a Magic the Gathering charity tournament?',
+];
+
+export const Trivia = () => {
+  const { setPlaying, goToStart } = useGlobalSettings();
+
+  const [randomQuestion, setRandomQuestion] = useState(
+    questions[Math.floor(Math.random() * questions.length)]
+  );
+
+  const setUniqueRandomQuestion = () => {
+    let newRandomQuestion =
+      questions[Math.floor(Math.random() * questions.length)];
+    while (newRandomQuestion === randomQuestion) {
+      newRandomQuestion =
+        questions[Math.floor(Math.random() * questions.length)];
+    }
+    setRandomQuestion(newRandomQuestion);
+  };
+
+  return (
+    <div
+      className="absolute flex justify-center items-center w-full h-full portrait:h-[100dvw] portrait:w-[100dvh] z-50 bg-secondary-main overflow-hidden"
+      onClick={() => setPlaying(true)}
+    >
+      <button
+        className="absolute flex top-4 left-4 rounded-lg px-2 py-1 justify-center bg-primary-main text-text-primary text-xs"
+        onClick={goToStart}
+      >
+        <div className="text-xl leading-[0.80rem]">{'<'}&nbsp;</div>
+        Back
+      </button>
+
+      <button
+        className="absolute flex top-4 right-4 rounded-lg px-2 py-1 justify-center bg-primary-main text-text-primary text-xs"
+        onClick={(e) => {
+          e.stopPropagation();
+          setUniqueRandomQuestion();
+        }}
+      >
+        Reroll
+      </button>
+
+      <div className="size-full flex flex-col  justify-between items-center whitespace-nowrap pointer-events-none webkit-user-select-none text-wrap text-center py-[10vmin] px-[10vmax]">
+        <div className="text-[6vmin]">Decide who starts by answering:</div>
+        <div className="flex flex-col">
+          <div className="text-[8vmin] rotate-180 text-text-primary opacity-40">
+            {randomQuestion}
+          </div>
+          <div className="text-[8vmin]">{randomQuestion}</div>
+        </div>
+
+        <div className="text-[6vmin]">(Tap the screen to dismiss)</div>
+      </div>
+    </div>
+  );
+};

src/Components/PreStartGame/PreStart.tsx

@@ -4,6 +4,7 @@ import { GridLayout } from '../Views/Play';
 import { FingerGame } from './Games/FingerGame';
 import { RandomKingPlayers } from './Games/RandomKing/RandomKingPlayers';
 import { RandomKingSelectWrapper } from './Games/RandomKing/RandomKingSelectWrapper';
+import { Trivia } from './Games/Trivia';
 
 export const PreStart = ({ gridLayout }: { gridLayout: GridLayout }) => {
   const { settings, randomizingPlayer, goToStart } = useGlobalSettings();
@@ -25,6 +26,10 @@ export const PreStart = ({ gridLayout }: { gridLayout: GridLayout }) => {
     return <FingerGame />;
   }
 
+  if (settings.preStartMode === PreStartMode.Trivia) {
+    return <Trivia />;
+  }
+
   goToStart();
   return null;
 };

src/Components/Views/StartMenu/StartMenu.tsx

@@ -9,10 +9,10 @@ import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../../Hooks/usePlayers';
 import { Cog, Info } from '../../../Icons/generated';
 import {
-  GameFormat,
   InitialGameSettings,
   Orientation,
   PreStartMode,
+  defaultInitialGameSettings,
 } from '../../../Types/Settings';
 import { InfoModal } from '../../Misc/InfoModal';
 import { SettingsModal } from '../../Misc/SettingsModal';
@@ -91,27 +91,49 @@ const Start = () => {
     settings,
     isPWA,
     setRandomizingPlayer,
+    version,
   } = useGlobalSettings();
 
   const [openInfoModal, setOpenInfoModal] = useState(false);
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
 
   const [playerOptions, setPlayerOptions] = useState<InitialGameSettings>(
-    initialGameSettings || {
-      numberOfPlayers: 4,
-      startingLifeTotal: 40,
-      useCommanderDamage: true,
-      orientation: Orientation.Portrait,
-      gameFormat: GameFormat.Commander,
-    }
+    initialGameSettings || defaultInitialGameSettings
   );
 
+  let tracked = false;
+  // Check for new version on mount
+  useEffect(() => {
+    if (!tracked) {
+      console.log('checking version');
+      version.checkForNewVersion('start_menu');
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      tracked = true;
+    }
+  }, []);
+
+  useEffect(() => {
+    setInitialGameSettings(playerOptions);
+  }, [playerOptions, setInitialGameSettings]);
+
+  useEffect(() => {
+    setPlayerOptions({
+      ...playerOptions,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playerOptions.numberOfPlayers]);
+
   const doStartGame = () => {
     if (!initialGameSettings) {
       return;
     }
 
-    analytics.trackEvent('game_started', { ...initialGameSettings });
+    analytics.trackEvent('game_started', {
+      ...initialGameSettings,
+      ...settings,
+      isPWA,
+    });
 
     try {
       if (settings.goFullscreenOnStart) {
@@ -133,21 +155,10 @@ const Start = () => {
     localStorage.setItem('showPlay', 'true');
   };
 
-  useEffect(() => {
-    setInitialGameSettings(playerOptions);
-  }, [playerOptions, setInitialGameSettings]);
-
-  const valuetext = (value: number) => {
+  const valueText = (value: number) => {
     return `${value}`;
   };
 
-  useEffect(() => {
-    setPlayerOptions({
-      ...playerOptions,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playerOptions.numberOfPlayers]);
-
   return (
     <MainWrapper>
       <Info
@@ -175,8 +186,12 @@ const Start = () => {
 
       <SupportMe />
 
-      <h1 className="text-3xl block font-bold mt-6 mb-5 text-text-primary">
+      <h1 className="relative flex flex-col text-3xl font-bold mt-6 mb-6 text-text-primary justify-center items-center">
         Life Trinket
+        <div className="h-[1px] w-[120%] bg-common-white opacity-50" />
+        <div className="flex absolute text-xs font-medium -bottom-4">
+          v{version.installedVersion}
+        </div>
       </h1>
 
       <div className="overflow-hidden items-center flex flex-col max-w-[548px] w-full mb-8 px-4">
@@ -189,7 +204,7 @@ const Start = () => {
               min={1}
               aria-label="Custom marks"
               value={playerOptions?.numberOfPlayers ?? 4}
-              getAriaValueText={valuetext}
+              getAriaValueText={valueText}
               step={null}
               marks={playerMarks}
               onChange={(_e, value) => {
@@ -210,7 +225,7 @@ const Start = () => {
               min={20}
               aria-label="Custom marks"
               value={playerOptions?.startingLifeTotal ?? 40}
-              getAriaValueText={valuetext}
+              getAriaValueText={valueText}
               step={10}
               marks={healthMarks}
               onChange={(_e, value) =>
@@ -253,15 +268,32 @@ const Start = () => {
                 }}
               />
             </ToggleContainer>
-            <Button
-              variant="contained"
-              style={{ height: '2rem' }}
-              onClick={() => {
-                setOpenSettingsModal(true);
-              }}
-            >
-              <Cog /> &nbsp; Other settings
-            </Button>
+            <div className="flex flex-nowrap text-nowrap relative justify-center items-start">
+              <Button
+                variant="contained"
+                style={{ height: '2rem' }}
+                onClick={() => {
+                  setOpenSettingsModal(true);
+                }}
+              >
+                <Cog /> &nbsp; Game Settings
+              </Button>
+
+              <div
+                data-not-latest-version={
+                  !version.isLatest && !!version.remoteVersion
+                }
+                className="absolute flex justify-center text-text-primary text-xxs -bottom-5 bg-primary-dark px-2 rounded-md
+                opacity-0 transition-all duration-200 delay-500
+                data-[not-latest-version=true]:opacity-100
+                "
+              >
+                <div className="absolute bg-primary-dark rotate-45 size-2 -top-[2px] z-0" />
+                <span className="z-10">
+                  v{version.remoteVersion} available!
+                </span>
+              </div>
+            </div>
           </ToggleButtonsWrapper>
 
           <FormLabel>Layout</FormLabel>

src/Contexts/GlobalSettingsContext.tsx

@@ -1,6 +1,13 @@
 import { createContext } from 'react';
 import { InitialGameSettings, Settings } from '../Types/Settings';
 
+type Version = {
+  installedVersion: string;
+  isLatest: boolean;
+  checkForNewVersion: (source: 'settings' | 'start_menu') => Promise<void>;
+  remoteVersion?: string;
+};
+
 export type GlobalSettingsContextType = {
   fullscreen: {
     isFullscreen: boolean;
@@ -29,6 +36,8 @@ export type GlobalSettingsContextType = {
   isPWA: boolean;
   preStartCompleted: boolean;
   setPreStartCompleted: (completed: boolean) => void;
+
+  version: Version;
 };
 
 export const GlobalSettingsContext =

src/Hooks/useAnalytics.ts

@@ -2,7 +2,7 @@ import { initializeApp } from 'firebase/app';
 import { getAnalytics, logEvent } from 'firebase/analytics';
 
 const firebaseConfig = {
-  apiKey: 'AIzaSyCZ1AHMb5zmWS4VoRnC-OBxTswUfrJ0mlY',
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
   authDomain: 'life-trinket.firebaseapp.com',
   projectId: 'life-trinket',
   storageBucket: 'life-trinket.appspot.com',
@@ -23,7 +23,12 @@ export const useAnalytics = () => {
       return;
     }
 
-    logEvent(analytics, eventName, eventParams);
+    const paramsWithVersion = {
+      ...eventParams,
+      app_version: import.meta.env.VITE_APP_VERSION,
+    };
+
+    logEvent(analytics, eventName, paramsWithVersion);
   };
 
   return { trackEvent };

src/Providers/GlobalSettingsProvider.tsx

@@ -7,9 +7,10 @@ import {
 import { useAnalytics } from '../Hooks/useAnalytics';
 import {
   InitialGameSettings,
-  initialGameSettingsSchema,
-  PreStartMode,
   Settings,
+  defaultInitialGameSettings,
+  defaultSettings,
+  initialGameSettingsSchema,
   settingsSchema,
 } from '../Types/Settings';
 
@@ -53,19 +54,18 @@ export const GlobalSettingsProvider = ({
       savedGameSettings ? JSON.parse(savedGameSettings) : null
     );
 
-  const parsedSettings = settingsSchema.safeParse(
-    JSON.parse(savedSettings ?? '')
-  );
+  const setInitialGameSettingsAndLocalStorage = (
+    initialGameSettings: InitialGameSettings
+  ) => {
+    setInitialGameSettings(initialGameSettings);
+    localStorage.setItem(
+      'initialGameSettings',
+      JSON.stringify(initialGameSettings)
+    );
+  };
+
   const [settings, setSettings] = useState<Settings>(
-    parsedSettings.success
-      ? parsedSettings.data
-      : {
-          goFullscreenOnStart: true,
-          keepAwake: true,
-          showStartingPlayer: true,
-          showPlayerMenuCog: true,
-          preStartMode: PreStartMode.None,
-        }
+    savedSettings ? JSON.parse(savedSettings) : defaultSettings
   );
 
   const setSettingsAndLocalStorage = (settings: Settings) => {
@@ -85,10 +85,29 @@ export const GlobalSettingsProvider = ({
     setPreStartCompleted(false);
   };
 
+  // Set settings if they are not valid
   useEffect(() => {
-    if (savedGameSettings && JSON.parse(savedGameSettings).gridAreas) {
-      removeLocalStorage();
-      window.location.reload();
+    // 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;
     }
 
@@ -97,14 +116,14 @@ export const GlobalSettingsProvider = ({
       initialGameSettingsSchema.safeParse(initialGameSettings);
 
     if (!parsedInitialGameSettings.success) {
-      removeLocalStorage();
-      window.location.reload();
+      console.error('invalid game settings, resetting to default settings');
+      setInitialGameSettingsAndLocalStorage(defaultInitialGameSettings);
       return;
     }
 
     localStorage.setItem(
       'initialGameSettings',
-      JSON.stringify(initialGameSettings)
+      JSON.stringify(parsedInitialGameSettings.data)
     );
   }, [initialGameSettings, savedGameSettings]);
 
@@ -123,6 +142,11 @@ export const GlobalSettingsProvider = ({
     };
   }, []);
 
+  const [isLatestVersion, setIsLatestVersion] = useState(false);
+  const [remoteVersion, setRemoteVersion] = useState<string | undefined>(
+    undefined
+  );
+
   const { isSupported, release, released, request, type } = useWakeLock();
 
   const active = settings.keepAwake;
@@ -176,6 +200,46 @@ export const GlobalSettingsProvider = ({
       localStorage.setItem('playing', String(playing));
     };
 
+    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
+              }`,
+              Accept: 'application/vnd.github+json',
+              'X-GitHub-Api-Version': '2022-11-28',
+            },
+          }
+        );
+        const data = await result.json();
+
+        if (!data.name) {
+          setRemoteVersion(undefined);
+          setIsLatestVersion(false);
+          return;
+        }
+
+        setRemoteVersion(data.name);
+
+        if (data.name === import.meta.env.VITE_APP_VERSION) {
+          setIsLatestVersion(true);
+          return;
+        }
+
+        analytics.trackEvent(`${source}_has_new_version`, {
+          remoteVersion: data.name,
+          installedVersion: import.meta.env.VITE_APP_VERSION,
+        });
+
+        setIsLatestVersion(false);
+      } catch (error) {
+        console.error('error getting latest version string', error);
+      }
+    }
+
     return {
       fullscreen: { isFullscreen, enableFullscreen, disableFullscreen },
       wakeLock: {
@@ -200,6 +264,13 @@ export const GlobalSettingsProvider = ({
       isPWA: window?.matchMedia('(display-mode: standalone)').matches,
       preStartCompleted,
       setPreStartCompleted: setPreStartCompletedAndLocalStorage,
+
+      version: {
+        installedVersion: import.meta.env.VITE_APP_VERSION,
+        remoteVersion,
+        isLatest: isLatestVersion,
+        checkForNewVersion,
+      },
     };
   }, [
     isFullscreen,
@@ -214,6 +285,8 @@ export const GlobalSettingsProvider = ({
     settings,
     randomizingPlayer,
     preStartCompleted,
+    remoteVersion,
+    isLatestVersion,
     analytics,
   ]);
 

src/Types/Settings.ts

@@ -16,6 +16,7 @@ export enum PreStartMode {
   None = 'none',
   RandomKing = 'random-king',
   FingerGame = 'finger-game',
+  Trivia = 'trivia',
 }
 
 export type Settings = {
@@ -35,17 +36,33 @@ export type InitialGameSettings = {
 };
 
 export const initialGameSettingsSchema = z.object({
-  startingLifeTotal: z.number().min(1).max(200).default(20),
-  useCommanderDamage: z.boolean().default(false),
-  gameFormat: z.nativeEnum(GameFormat).optional(),
-  numberOfPlayers: z.number().min(1).max(6).default(2),
-  orientation: z.nativeEnum(Orientation).default(Orientation.Landscape),
+  startingLifeTotal: z.number().min(1).max(200),
+  useCommanderDamage: z.boolean(),
+  gameFormat: z.nativeEnum(GameFormat),
+  numberOfPlayers: z.number().min(1).max(6),
+  orientation: z.nativeEnum(Orientation),
 });
 
+export const defaultInitialGameSettings = {
+  numberOfPlayers: 4,
+  startingLifeTotal: 40,
+  useCommanderDamage: true,
+  orientation: Orientation.Landscape,
+  gameFormat: GameFormat.Commander,
+};
+
 export const settingsSchema = z.object({
-  keepAwake: z.boolean().default(true),
-  showStartingPlayer: z.boolean().default(true),
-  showPlayerMenuCog: z.boolean().default(true),
-  goFullscreenOnStart: z.boolean().default(true),
-  preStartMode: z.nativeEnum(PreStartMode).default(PreStartMode.None),
+  keepAwake: z.boolean(),
+  showStartingPlayer: z.boolean(),
+  showPlayerMenuCog: z.boolean(),
+  goFullscreenOnStart: z.boolean(),
+  preStartMode: z.nativeEnum(PreStartMode),
 });
+
+export const defaultSettings: Settings = {
+  goFullscreenOnStart: true,
+  keepAwake: true,
+  showStartingPlayer: true,
+  showPlayerMenuCog: true,
+  preStartMode: PreStartMode.None,
+};

src/vite-env.d.ts

@@ -1 +1,11 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_VERSION: string;
+  readonly VITE_REPO_READ_ACCESS_TOKEN: string;
+  readonly VITE_FIREBASE_ANALYTICS_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

tailwind.config.ts

@@ -103,6 +103,9 @@ export default {
       animation: {
         fadeOut: 'fadeOut 3s 1s ease-out forwards',
       },
+      fontSize: {
+        xxs: ['0.625rem', '1rem'],
+      },
     },
   },
   plugins: [tailwindcssGridAreas],

vite.config.ts

@@ -21,7 +21,14 @@ export default defineConfig({
     },
   },
   define: {
-    APP_VERSION: JSON.stringify(process.env.npm_package_version),
-    REPO_READ_ACCESS_TOKEN: JSON.stringify(process.env.REPO_READ_ACCESS_TOKEN),
+    'import.meta.env.VITE_APP_VERSION': JSON.stringify(
+      process.env.npm_package_version
+    ),
+    VITE_REPO_READ_ACCESS_TOKEN: JSON.stringify(
+      process.env.VITE_REPO_READ_ACCESS_TOKEN
+    ),
+    VITE_FIREBASE_ANALYTICS_API_KEY: JSON.stringify(
+      process.env.VITE_FIREBASE_ANALYTICS_API_KEY
+    ),
   },
 });