bump

.firebase/hosting.ZGlzdA.cache

@@ -1,8 +1,8 @@
-robots.txt,1693082171694,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+index.html,1705225256081,6ef0d7e2de82bf64addbb9294fb28845fd06daaa544b010a47422c12ae3ad97f
-manifest.json,1693082171694,91ce94afb71f33a477f5d8d48c3f98bd7de422279c74f17b6500eec72003ac1a
+robots.txt,1705225255906,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-assets/index-5265c558.css,1693082171837,08c4451946bbdf520fe337edb365417a8bbf91914c018b83866723ef52d57b43
+manifest.json,1705225255906,91ce94afb71f33a477f5d8d48c3f98bd7de422279c74f17b6500eec72003ac1a
-index.html,1693082171837,09e1919fbaaa3a0bf08f43eb46c29136d62a7747b41f8b5d0f4a7ed23337c344
+assets/index-08359bdb.css,1705225256081,d2766260d28230d960d75362810713efaddf40687205e697432b52869f162af7
-logo192.png,1693082171693,4309255bccbdbb341b5ab88708677e3d43b9e171d2666528ff932295a8257e4e
+logo192.png,1705225255905,3b0fcf91fe2128f493de0bce2f6e2d35520a4260a04e05b8d855181359b3d3fe
-favicon.ico,1693082171692,48d8c1b9714dbc9bcb012d9c9f04112d229f20e6c889bda588ac159f973e6a8d
+favicon.ico,1705225255905,75661e6187b524767554b4f28ec09a64bc72b0bb102a0b453aaead88519d9ed3
-logo512.png,1693082171694,92c7c05dc98170596d04f48e5e60eaae9535f409bcaeff129fd98fef8aba9f4e
+logo512.png,1705225255906,cf49739c9e6890bbfcd4157f299dde425df60759b7320ae9188d7ab9dc51e8ca
-assets/index-5023e89e.js,1693082171838,8a6177168e95e1ca90e5ad8774252a8a02a9a78765bd329b7deae729c01aedf3
+assets/index-20658f4b.js,1705225256081,742f2c10740beea3a23f269aa6266b3c288d1fd9c7e20b6829034e8a898bf1e1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.5.42",
+  "version": "0.5.5",
   "type": "commonjs",
   "engines": {
     "node": ">=18",
@@ -13,7 +13,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "generate-icons": "npx @svgr/cli src/Icons/svgs",
-    "deploy": "bun build && firebase deploy --only hosting"
+    "deploy": "bun run build && firebase deploy --only hosting"
   },
   "dependencies": {
     "@mui/material": "^5.13.6",

src/Components/LifeCounter/LifeCounter.tsx

@@ -30,7 +30,7 @@ const PlayerLostWrapper = twc.div<RotationDivProps>((props) => [
     : '',
 ]);
 
-const DynamicText = twc.div`text-[8vmin]`;
+const DynamicText = twc.div`text-[8vmin] whitespace-nowrap`;
 
 const hasCommanderDamageReached21 = (player: Player) => {
   const commanderDamageTotals = player.commanderDamage.map(
@@ -131,7 +131,11 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
             <StartingPlayerNoticeWrapper
               style={{ rotate: `${calcRotation}deg` }}
             >
-              <DynamicText style={{ rotate: `${calcTextRotation}deg` }}>
+              <DynamicText
+                style={{
+                  rotate: `${calcTextRotation}deg`,
+                }}
+              >
                 You start!
               </DynamicText>
             </StartingPlayerNoticeWrapper>

src/Components/Misc/InfoModal.tsx

@@ -1,6 +1,7 @@
 import { Modal } from '@mui/material';
-import { theme } from '../../Data/theme';
 import { twc } from 'react-twc';
+import { Separator } from './Separator';
+import { Paragraph } from './TextComponents';
 
 export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary`;
 
@@ -14,14 +15,14 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
     <Modal open={isOpen} onClose={closeModal}>
       <ModalWrapper>
         <div>
-          <h2 style={{ textAlign: 'center' }}>📋 Usage Guide</h2>
+          <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
-          <p>
+          <Separator height="1px" />
+          <Paragraph className="my-4">
             There are some controls that you might not know about, so here's a
             short list of them.
-          </p>
+          </Paragraph>
-
+          <h3 className="text-lg font-bold mb-2">Life counter</h3>
-          <h3>Life counter</h3>
+          <ul className="list-disc ml-6 mb-4">
-          <ul>
             <li>
               <strong>Tap</strong> on a player's + or - button to add or
               subtract <strong>1 life</strong>.
@@ -32,8 +33,10 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
             </li>
           </ul>
 
-          <h3>Commander damage and other counters</h3>
+          <h3 className="text-lg font-bold mb-2">
-          <ul>
+            Commander damage and other counters
+          </h3>
+          <ul className="list-disc ml-6 mb-4">
             <li>
               <strong>Tap</strong> on the counter to add{' '}
               <strong>1 counter</strong>.
@@ -44,33 +47,21 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
             </li>
           </ul>
 
-          <h3>Other</h3>
+          <h3 className="text-lg font-bold mb-2">Other</h3>
-          <p>
+          <Paragraph className="mb-4">
             When a player is <strong>at or below 0 life</strong>, has taken{' '}
             <strong>21 or more Commander Damage</strong> or has{' '}
             <strong>10 or more poison counters</strong>, a button with a skull
-            will appear on that player's card.
+            will appear on that player's card. Tapping it will dim the player's
-          </p>
-          <p>
-            Tap on the button to mark that player as lost, dimming their player
             card.
-          </p>
+          </Paragraph>
         </div>
-        <br />
+        <div className="text-center mt-4">
-        <div
-          style={{
-            textAlign: 'center',
-            marginTop: '1rem',
-          }}
-        >
           Visit my
           <a
             href="https://github.com/Vikeo/LifeTrinket"
             target="_blank"
-            style={{
+            className="text-text-secondary underline"
-              textDecoration: 'none',
-              color: theme.palette.primary.light,
-            }}
           >
             {' '}
             GitHub{' '}

src/Components/Misc/Separator.tsx

@@ -7,7 +7,7 @@ export const Separator = ({
 }) => {
   return (
     <div
-      className={`bg-common-black bg-opacity-30 rounded-full mt-2 mb-2`}
+      className={`bg-common-white bg-opacity-30 rounded-full mt-2 mb-2`}
       style={{ width, height }}
     />
   );

src/Components/Misc/SettingsModal.tsx

@@ -44,17 +44,19 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
         const data = await result.json();
 
         if (!data.name) {
-          setIsLatestVersion(false);
           setNewVersion(undefined);
+          setIsLatestVersion(false);
           return;
         }
 
+        setNewVersion(data.name);
+
         /* @ts-expect-error is defined in vite.config.ts*/
         if (data.name === APP_VERSION) {
-          setNewVersion(data.name);
           setIsLatestVersion(true);
           return;
         }
+
         setIsLatestVersion(false);
       } catch (error) {
         console.error('error getting latest version string', error);
@@ -67,7 +69,8 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
     <Modal open={isOpen} onClose={closeModal}>
       <ModalWrapper>
         <Container>
-          <h2 style={{ textAlign: 'center' }}>⚙️ Settings ⚙️</h2>
+          <h2 className="text-center text-2xl mb-2">⚙️ Settings ⚙️</h2>
+          <Separator height="1px" />
           <SettingContainer>
             <ToggleContainer>
               <FormLabel>Show Start Player</FormLabel>

src/Components/Player/PlayerMenu.tsx

@@ -373,25 +373,27 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
         </BetterRowContainer>
         <dialog
           ref={dialogRef}
-          className="z-[9999] bg-background-default text-text-primary rounded-2xl border-none absolute top-[10%]"
+          className="z-[9999] min-h-2/4 bg-background-default text-text-primary rounded-2xl border-none absolute top-[10%]"
         >
-          <h1>Reset Game?</h1>
+          <div className="h-full flex flex-col p-4 gap-2">
-          <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
+            <h1 className="text-center">Reset Game?</h1>
-            <Button
+            <div className="flex justify-evenly gap-4">
-              variant="contained"
+              <Button
-              onClick={() => dialogRef.current?.close()}
+                variant="contained"
-            >
+                onClick={() => dialogRef.current?.close()}
-              No
+              >
-            </Button>
+                No
-            <Button
+              </Button>
-              variant="contained"
+              <Button
-              onClick={() => {
+                variant="contained"
-                handleResetGame();
+                onClick={() => {
-                dialogRef.current?.close();
+                  handleResetGame();
-              }}
+                  dialogRef.current?.close();
-            >
+                }}
-              Yes
+              >
-            </Button>
+                Yes
+              </Button>
+            </div>
           </div>
         </dialog>
       </SettingsContainer>

src/Components/Views/StartMenu/StartMenu.tsx

@@ -20,7 +20,7 @@ import { LayoutOptions } from './LayoutOptions';
 
 const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`;
 
-const StartButtonFooter = twc.div`fixed bottom-4 z-1`;
+const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4`;
 
 const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`;
 
@@ -174,87 +174,88 @@ const Start = () => {
         Life Trinket
       </h1>
 
-      <FormControl focused={false} style={{ width: '80vw' }}>
+      <div className="overflow-hidden items-center flex flex-col max-w-[548px] mb-8 px-4">
-        <FormLabel>Number of Players</FormLabel>
+        <FormControl focused={false}>
-        <Slider
+          <FormLabel>Number of Players</FormLabel>
-          title="Number of Players"
+          <Slider
-          max={6}
+            title="Number of Players"
-          min={1}
+            max={6}
-          aria-label="Custom marks"
+            min={1}
-          value={playerOptions?.numberOfPlayers ?? 4}
+            aria-label="Custom marks"
-          getAriaValueText={valuetext}
+            value={playerOptions?.numberOfPlayers ?? 4}
-          step={null}
+            getAriaValueText={valuetext}
-          marks={playerMarks}
+            step={null}
-          onChange={(_e, value) => {
+            marks={playerMarks}
-            setPlayerOptions({
+            onChange={(_e, value) => {
-              ...playerOptions,
+              setPlayerOptions({
-              numberOfPlayers: value as number,
+                ...playerOptions,
-              orientation: Orientation.Landscape,
+                numberOfPlayers: value as number,
-            });
+                orientation: Orientation.Landscape,
-          }}
+              });
-        />
+            }}
-        <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
+          />
-        <Slider
+          <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
-          title="Starting Health"
+          <Slider
-          max={60}
+            title="Starting Health"
-          min={20}
+            max={60}
-          aria-label="Custom marks"
+            min={20}
-          value={playerOptions?.startingLifeTotal ?? 40}
+            aria-label="Custom marks"
-          getAriaValueText={valuetext}
+            value={playerOptions?.startingLifeTotal ?? 40}
-          step={10}
+            getAriaValueText={valuetext}
-          marks={healthMarks}
+            step={10}
-          onChange={(_e, value) =>
+            marks={healthMarks}
-            setPlayerOptions({
+            onChange={(_e, value) =>
-              ...playerOptions,
+              setPlayerOptions({
-              startingLifeTotal: value as number,
+                ...playerOptions,
-              orientation: Orientation.Landscape,
+                startingLifeTotal: value as number,
-            })
+                orientation: Orientation.Landscape,
-          }
+              })
-        />
+            }
+          />
 
-        <ToggleButtonsWrapper className="mt-4">
+          <ToggleButtonsWrapper className="mt-4">
-          <ToggleContainer>
+            <ToggleContainer>
-            <FormLabel>Commander</FormLabel>
+              <FormLabel>Commander</FormLabel>
-            <Switch
+              <Switch
-              checked={
+                checked={
-                playerOptions.useCommanderDamage ??
+                  playerOptions.useCommanderDamage ??
-                initialGameSettings?.useCommanderDamage ??
+                  initialGameSettings?.useCommanderDamage ??
-                true
+                  true
-              }
+                }
-              onChange={(_e, value) => {
+                onChange={(_e, value) => {
-                if (value) {
+                  if (value) {
+                    setPlayerOptions({
+                      ...playerOptions,
+                      useCommanderDamage: value,
+                      numberOfPlayers: 4,
+                      startingLifeTotal: 40,
+                      orientation: Orientation.Landscape,
+                    });
+                    return;
+                  }
                   setPlayerOptions({
                     ...playerOptions,
                     useCommanderDamage: value,
-                    numberOfPlayers: 4,
+                    numberOfPlayers: 2,
-                    startingLifeTotal: 40,
+                    startingLifeTotal: 20,
                     orientation: Orientation.Landscape,
                   });
-                  return;
+                }}
-                }
+              />
-                setPlayerOptions({
+            </ToggleContainer>
-                  ...playerOptions,
+            <Button
-                  useCommanderDamage: value,
+              variant="contained"
-                  numberOfPlayers: 2,
+              style={{ height: '2rem' }}
-                  startingLifeTotal: 20,
+              onClick={() => {
-                  orientation: Orientation.Landscape,
+                setOpenSettingsModal(true);
-                });
               }}
-            />
+            >
-          </ToggleContainer>
+              <Cog /> &nbsp; Other settings
-          <Button
+            </Button>
-            variant="contained"
+          </ToggleButtonsWrapper>
-            style={{ height: '2rem' }}
-            onClick={() => {
-              setOpenSettingsModal(true);
-            }}
-          >
-            <Cog /> &nbsp; Other settings
-          </Button>
-        </ToggleButtonsWrapper>
 
-        <FormLabel>Layout</FormLabel>
+          <FormLabel>Layout</FormLabel>
-        {/* <LayoutOptions
+          {/* <LayoutOptions
           numberOfPlayers={playerOptions.numberOfPlayers}
           gridAreas={playerOptions.gridAreas}
           onChange={(gridAreas) =>
@@ -266,32 +267,32 @@ const Start = () => {
             })
           }
         /> */}
-        <LayoutOptions
+          <LayoutOptions
-          numberOfPlayers={playerOptions.numberOfPlayers}
+            numberOfPlayers={playerOptions.numberOfPlayers}
-          selectedOrientation={playerOptions.orientation}
+            selectedOrientation={playerOptions.orientation}
-          onChange={(orientation) => {
+            onChange={(orientation) => {
-            setPlayerOptions({
+              setPlayerOptions({
-              ...playerOptions,
+                ...playerOptions,
-              orientation,
+                orientation,
-            });
+              });
-          }}
+            }}
-        />
+          />
-      </FormControl>
+        </FormControl>
-
+        {!isPWA && (
-      {!isPWA && (
+          <p className="text-center text-xs text-text-primary w-11/12 mt-4">
-        <p className="text-center, max-w-[75%] text-xs text-text-primary">
+            If you're on iOS, this page works better if you{' '}
-          If you're on iOS, this page works better if you{' '}
+            <strong>hide the toolbar</strong> or{' '}
-          <strong>hide the toolbar</strong> or{' '}
+            <strong>add the app to your home screen</strong>.
-          <strong>add the app to your home screen</strong>.
+          </p>
-        </p>
+        )}
-      )}
+      </div>
 
       <StartButtonFooter>
         <Button
           size="large"
           variant="contained"
           onClick={doStartGame}
-          style={{ width: '90dvw' }}
+          fullWidth
         >
           START GAME
         </Button>

tailwind.config.ts

@@ -39,14 +39,15 @@ export default {
       },
       colors: {
         primary: {
-          main: '#7F9172',
+          main: '#3E7D78',
-          dark: '#57654F',
+          dark: '#2D5F5B',
         },
         secondary: {
-          main: '#5E714C',
+          main: '#284F4C',
+          dark: '#1B3B38',
         },
         background: {
-          default: '#495E35',
+          default: '#08253B',
           backdrop: 'rgba(0, 0, 0, 0.3)',
           settings: 'rgba(20, 20, 0, 0.9)',
         },
@@ -95,15 +96,4 @@ export default {
   },
   plugins: [tailwindcssGridAreas],
 } satisfies Config;
-
+// #98FF98
-// const fadeOut = keyframes`
-//   0% {
-//     opacity: 1;
-//   }
-//   33% {
-//     opacity: 0.6;
-//   }
-//   100% {
-//     opacity: 0;
-//   }
-// `;