bump

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.5.5",
+  "version": "0.6.0",
   "type": "commonjs",
   "engines": {
     "node": ">=18",
@@ -43,8 +43,9 @@
     "install": "^0.13.0",
     "postcss": "^8.4.32",
     "prettier": "2.8.8",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.1",
-    "typescript": "^5.0.2",
+    "typescript": "^5.3.3",
-    "vite": "^4.4.5"
+    "vite": "^5.0.12",
+    "vite-plugin-pwa": "^0.17.4"
   }
 }

src/Components/Misc/InfoModal.tsx

@@ -3,7 +3,7 @@ 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`;
+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]`;
 
 type InfoModalProps = {
   isOpen: boolean;
@@ -12,7 +12,20 @@ type InfoModalProps = {
 
 export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
   return (
-    <Modal open={isOpen} onClose={closeModal}>
+    <Modal
+      open={isOpen}
+      onClose={closeModal}
+      style={{ display: 'flex', justifyContent: 'center' }}
+    >
+      <>
+        <div className="flex relative w-full max-w-[548px]">
+          <button
+            onClick={closeModal}
+            className="flex absolute top-10 right-0 z-10 w-10 h-10 text-common-white bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
+          >
+            X
+          </button>
+        </div>
         <ModalWrapper>
           <div>
             <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
@@ -28,8 +41,8 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
                 subtract <strong>1 life</strong>.
               </li>
               <li>
-              <strong>Long press</strong> on a player's + or - button to add or
+                <strong>Long press</strong> on a player's + or - button to add
-              subtract <strong>10 life</strong>.
+                or subtract <strong>10 life</strong>.
               </li>
             </ul>
 
@@ -52,8 +65,8 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
               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. Tapping it will dim the player's
+              will appear on that player's card. Tapping it will dim the
-            card.
+              player's card.
             </Paragraph>
           </div>
           <div className="text-center mt-4">
@@ -69,6 +82,7 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
             for more info about this web app.
           </div>
         </ModalWrapper>
+      </>
     </Modal>
   );
 };

src/Components/Misc/SettingsModal.tsx

@@ -67,6 +67,15 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
 
   return (
     <Modal open={isOpen} onClose={closeModal}>
+      <>
+        <div className="flex relative w-full max-w-[548px]">
+          <button
+            onClick={closeModal}
+            className="flex absolute top-10 right-0 z-10 w-10 h-10 text-common-white bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
+          >
+            X
+          </button>
+        </div>
         <ModalWrapper>
           <Container>
             <h2 className="text-center text-2xl mb-2">⚙️ Settings ⚙️</h2>
@@ -95,13 +104,16 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                 <Switch
                   checked={settings.keepAwake}
                   onChange={() => {
-                  setSettings({ ...settings, keepAwake: !settings.keepAwake });
+                    setSettings({
+                      ...settings,
+                      keepAwake: !settings.keepAwake,
+                    });
                   }}
                 />
               </ToggleContainer>
               <Description>
-              Will prevent device from going to sleep while this app is open if
+                Will prevent device from going to sleep while this app is open
-              this is enabled.
+                if this is enabled.
               </Description>
             </SettingContainer>
             <SettingContainer>
@@ -135,8 +147,8 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                     </Paragraph>
                   </ToggleContainer>
                   <Description className="mt-1">
-                  If you do, this app will work offline and the toolbar will be
+                    If you do, this app will work offline and the toolbar will
-                  automatically hidden.
+                    be automatically hidden.
                   </Description>
                 </SettingContainer>
               </>
@@ -177,6 +189,7 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
             </Button>
           </Container>
         </ModalWrapper>
+      </>
     </Modal>
   );
 };

src/Components/Views/StartMenu/LayoutOptions.tsx

@@ -18,7 +18,7 @@ import { twc } from 'react-twc';
 import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
 import { Orientation } from '../../../Types/Settings';
 
-const LayoutWrapper = twc.div`flex flex-row justify-between self-center`;
+const LayoutWrapper = twc.div`flex flex-row justify-center items-center self-center w-full`;
 
 type LayoutOptionsProps = {
   numberOfPlayers: number;
@@ -31,14 +31,16 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
   selectedOrientation,
   onChange,
 }) => {
-  const iconHeight = '30vmin';
+  const iconWidth = '21vmin';
-  const iconWidth = '20vmin';
+  const iconHeight = '40vmin';
+  const iconMaxWidth = '124px';
+  const iconMaxHeight = '196px';
 
   const renderLayoutOptions = () => {
     switch (numberOfPlayers) {
       case 1:
         return (
-          <>
+          <div>
             <FormControlLabel
               value={Orientation.Landscape}
               control={
@@ -58,6 +60,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                 />
               }
               label=""
@@ -81,11 +84,12 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                 />
               }
               label=""
             />
-          </>
+          </div>
         );
       case 2:
         return (
@@ -94,6 +98,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.Landscape}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <TwoPlayersSameSide
                       height={iconHeight}
@@ -117,6 +122,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.Portrait}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <TwoPlayersOppositePortrait
                       height={iconHeight}
@@ -140,6 +146,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.OppositeLandscape}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <TwoPlayersOppositeLandscape
                       height={iconHeight}
@@ -168,6 +175,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.Landscape}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <ThreePlayers
                       height={iconHeight}
@@ -191,6 +199,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.Portrait}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <ThreePlayersSide
                       height={iconHeight}
@@ -220,6 +229,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.Landscape}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <FourPlayers
                       height={iconHeight}
@@ -243,6 +253,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.Portrait}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <FourPlayersSide
                       height={iconHeight}
@@ -272,6 +283,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.Landscape}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <FivePlayers
                       height={iconHeight}
@@ -324,6 +336,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
               value={Orientation.Landscape}
               control={
                 <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                   icon={
                     <SixPlayers
                       height={iconHeight}

src/Components/Views/StartMenu/StartMenu.tsx

@@ -22,6 +22,8 @@ const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center
 
 const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4`;
 
+const SliderWrapper = twc.div`mx-8`;
+
 const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`;
 
 const ToggleContainer = twc.div`flex flex-col items-center`;
@@ -174,9 +176,10 @@ const Start = () => {
         Life Trinket
       </h1>
 
-      <div className="overflow-hidden items-center flex flex-col max-w-[548px] mb-8 px-4">
+      <div className="overflow-hidden items-center flex flex-col max-w-[548px] w-full mb-8 px-4">
-        <FormControl focused={false}>
+        <FormControl focused={false} style={{ width: '100%' }}>
           <FormLabel>Number of Players</FormLabel>
+          <SliderWrapper>
             <Slider
               title="Number of Players"
               max={6}
@@ -194,7 +197,10 @@ const Start = () => {
                 });
               }}
             />
+          </SliderWrapper>
+
           <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
+          <SliderWrapper>
             <Slider
               title="Starting Health"
               max={60}
@@ -212,6 +218,7 @@ const Start = () => {
                 })
               }
             />
+          </SliderWrapper>
 
           <ToggleButtonsWrapper className="mt-4">
             <ToggleContainer>

tailwind.config.ts

@@ -6,6 +6,9 @@ import type { Config } from 'tailwindcss';
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
+    screens: {
+      modalSm: '548px',
+    },
     extend: {
       gridTemplateAreas: {
         onePlayerLandscape: ['player0 player0'],
@@ -53,10 +56,10 @@ export default {
         },
         text: {
           primary: '#F5F5F5',
-          secondary: '#b3b39b',
+          secondary: '#76A6A5',
         },
         action: {
-          disabled: '#5E714C',
+          disabled: '#234A47',
         },
         common: {
           white: '#F9FFE3',

vite.config.ts

@@ -1,9 +1,19 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      workbox: {
+        clientsClaim: true,
+        skipWaiting: true,
+      },
+    }),
+  ],
   build: {
     minify: 'esbuild',
     rollupOptions: {