fix slider not updating immediately

.firebase/hosting.ZGlzdA.cache

@@ -1,12 +1,12 @@
-index.html,1711905710499,4b604b23faec8d63a58e07b96d724a1aea56a7c86d57c9af791832ce87a552e7
-manifest.webmanifest,1711905710499,f2bf253209f6e292a6b0dbfa06fb4ac188eb5f2dba568c3ad5511b9ed52c1f51
-manifest.json,1711905710294,7ff5111aa04a42adff3b38924ec467b6f345ed0309dba1486dc9b783b60c2a9d
-sw.js,1711905711506,1ef2f4f40ec8dca15cc42d547462ade1e84314ea9722276f5994ccee7bbdf80f
-robots.txt,1711905710294,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-registerSW.js,1711905710499,5b6445b5215737c53ef0d379c151d57de165a056de2d1c5812ed614f158ebcbd
-workbox-3e911b1d.js,1711905711507,d5dbc868a5c07af633d29de7ba3ffe37542aaaabdf33713b4298df31f92f11ff
-assets/index-7m_Zw4yH.css,1711905710499,37997d06b32b3d0c724c054913e3c0583b86f786358121cb1615e6646ff46b56
-favicon.ico,1711905710294,8cefe5adbf00d337d8633fb744b9f2c4914f769b319be4bb7e184b7a4aa17160
-logo192.png,1711905710294,3d1e2e6f064d4fd325828f21bb6493ff0dbf2390b0e7d2aba9f2b6def4829799
-logo512.png,1711905710294,892a4da1cc5434929a83a71fcbcb0d0d80aa82f44e3c21e9b20ffe9267197133
-assets/index-CLJVONOc.js,1711905710499,22f3835412f82bb3f8a62e74a7f4602a9c43b447224790365dbcc6cbffb4e665
+index.html,1716462527631,3daeb4b4b2f195883f1e266f94c16156ee3c60a29c3eb8c44a8dcfdbb1fa0a03
+manifest.webmanifest,1716462527631,10e89b44378da695cb672bf7d801a4ade909383751f1665416f561bbe1434e5d
+manifest.json,1716462527513,91ce94afb71f33a477f5d8d48c3f98bd7de422279c74f17b6500eec72003ac1a
+logo192.png,1716462527512,14ac21c3975e11951c1eb7793eec18e1cc3274bfe7cf7858636d547a9a4efc1c
+registerSW.js,1716462527631,8db45a5ae8765ce12ec241d6c5bd5d30eb81dd9163b2685c5e1b867a0e487018
+robots.txt,1716462527513,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+sw.js,1716462528602,b681e1b343578a0de67032920144d05430677997580429b7e2b749f6afff69ed
+workbox-3e911b1d.js,1716462528602,666146b896084273226c83dca0b93f99accb195688330d6aa5c8c570bd48a4ac
+assets/index-D9CdzROR.css,1716462527631,610c77754d47a35446b00c0a50488070c943f3a05e6d57658faefd943bc3fc46
+favicon.ico,1716462527511,c3d2b7ac7f6263cca7ee26f91725eb32e7539bf0564f3b31a1bfc23cc88e9739
+logo512.png,1716462527512,a9ebde1252bb76a5b474130ef07a7ed744448fde84221f715f3fec849eccbcd2
+assets/index-DgCoW5us.js,1716462527631,06a6d92ff20d7f9e1f5e0c4d3ad8f931d7d0636f109b5e2dbbe28abd3707bb50

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.9.92",
+  "version": "0.9.94",
   "type": "commonjs",
   "engines": {
     "node": ">=20",

src/Components/Dialogs/SettingsDialog.tsx

@@ -11,7 +11,7 @@ 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 Description = twc.p`mr-16 text-xs text-left text-text-secondary`;
+const Description = twc.p`mr-16 text-xs text-left text-text-secondary mt-1`;
 
 const baseGithubReleasesUrl =
   'https://github.com/Vikeo/LifeTrinket/releases/tag/';
@@ -220,6 +220,27 @@ export const SettingsDialog = ({
           Will enter fullscreen mode when starting a game if this is enabled.
         </Description>
       </SettingContainer>
+
+      <SettingContainer>
+        <ToggleContainer>
+          <label>Show animations</label>
+          <ToggleButton
+            checked={settings.showAnimations}
+            onChange={() => {
+              setSettings({
+                ...settings,
+                showAnimations: !settings.showAnimations,
+              });
+            }}
+          />
+        </ToggleContainer>
+        <Description>
+          Disables the following animation:
+          <ul className="pl-1 list-inside">
+            <li className="list-disc">Glow effect on start menu</li>
+          </ul>
+        </Description>
+      </SettingContainer>
       <Separator height="1px" />
       <div className="flex w-full justify-center">
         <button

src/Components/Views/StartMenu/StartMenu.tsx

@@ -12,10 +12,11 @@ import {
   defaultInitialGameSettings,
 } from '../../../Types/Settings';
 
-import { LayoutOptions } from './LayoutOptions';
+import { baseColors } from '../../../../tailwind.config';
 import { InfoDialog } from '../../Dialogs/InfoDialog';
 import { SettingsDialog } from '../../Dialogs/SettingsDialog';
 import { ToggleButton } from '../../Misc/ToggleButton';
+import { LayoutOptions } from './LayoutOptions';
 
 const commanderSettings: Pick<
   InitialGameSettings,
@@ -67,6 +68,8 @@ const Start = () => {
 
   const infoDialogRef = useRef<HTMLDialogElement | null>(null);
   const settingsDialogRef = useRef<HTMLDialogElement | null>(null);
+  const playersSliderRef = useRef<HTMLInputElement | null>(null);
+  const healthSliderRef = useRef<HTMLInputElement | null>(null);
 
   const [playerOptions, setPlayerOptions] = useState<InitialGameSettings>(
     initialGameSettings || defaultInitialGameSettings
@@ -81,6 +84,68 @@ const Start = () => {
     }
   });
 
+  useEffect(() => {
+    if (!playersSliderRef.current) {
+      return;
+    }
+
+    let progress = 0;
+
+    switch (playerOptions?.numberOfPlayers) {
+      case 1:
+        progress = 0;
+        break;
+      case 2:
+        progress = 20;
+        break;
+      case 3:
+        progress = 40;
+        break;
+      case 4:
+        progress = 60;
+        break;
+      case 5:
+        progress = 80;
+        break;
+      case 6:
+        progress = 100;
+        break;
+      default:
+        break;
+    }
+
+    playersSliderRef.current.style.background = `linear-gradient(to right, ${baseColors.secondary.main} ${progress}%, ${baseColors.secondary.dark} ${progress}%)`;
+  }, [playerOptions?.numberOfPlayers]);
+
+  useEffect(() => {
+    if (!healthSliderRef.current) {
+      return;
+    }
+
+    let progress = 0;
+    switch (playerOptions?.startingLifeTotal) {
+      case 20:
+        progress = 0;
+        break;
+      case 30:
+        progress = 25;
+        break;
+      case 40:
+        progress = 50;
+        break;
+      case 50:
+        progress = 75;
+        break;
+      case 60:
+        progress = 100;
+        break;
+      default:
+        break;
+    }
+
+    healthSliderRef.current.style.background = `linear-gradient(to right, ${baseColors.secondary.main} ${progress}%, ${baseColors.secondary.dark} ${progress}%)`;
+  }, [playerOptions?.startingLifeTotal]);
+
   useEffect(() => {
     setInitialGameSettings(playerOptions);
   }, [playerOptions, setInitialGameSettings]);
@@ -171,6 +236,12 @@ const Start = () => {
   return (
     <>
       <InfoDialog dialogRef={infoDialogRef} />
+      {settings.showAnimations && (
+        <>
+          <div className="spotlight1" />
+          <div className="spotlight2" />
+        </>
+      )}
 
       <SettingsDialog dialogRef={settingsDialogRef} />
       <div className="flex justify-center items-center w-screen">
@@ -250,6 +321,7 @@ const Start = () => {
               <LabelText className="mt-4">Number of Players</LabelText>
               <SliderWrapper>
                 <input
+                  ref={playersSliderRef}
                   className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
                   title="Number of Players"
                   type="range"
@@ -264,7 +336,7 @@ const Start = () => {
                     });
                   }}
                 />
-                <div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
+                <div className="flex w-full justify-between px-[6px] text-text-primary pointer-events-none">
                   <div>1</div>
                   <div>2</div>
                   <div>3</div>
@@ -277,6 +349,7 @@ const Start = () => {
               <LabelText className="mt-4">Starting Health</LabelText>
               <SliderWrapper>
                 <input
+                  ref={healthSliderRef}
                   className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
                   title="Starting Health"
                   type="range"
@@ -293,7 +366,7 @@ const Start = () => {
                     })
                   }
                 />
-                <div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
+                <div className="flex w-full justify-between text-text-primary pointer-events-none">
                   <div>20</div>
                   <div>30</div>
                   <div>40</div>

src/Types/Settings.ts

@@ -25,6 +25,7 @@ export type Settings = {
   showPlayerMenuCog: boolean;
   goFullscreenOnStart: boolean;
   preStartMode: PreStartMode;
+  showAnimations: boolean;
 };
 
 export type InitialGameSettings = {
@@ -57,6 +58,7 @@ export const settingsSchema = z.object({
   showPlayerMenuCog: z.boolean(),
   goFullscreenOnStart: z.boolean(),
   preStartMode: z.nativeEnum(PreStartMode),
+  showAnimations: z.boolean(),
 });
 
 export const defaultSettings: Settings = {
@@ -65,4 +67,5 @@ export const defaultSettings: Settings = {
   showStartingPlayer: true,
   showPlayerMenuCog: true,
   preStartMode: PreStartMode.None,
+  showAnimations: true,
 };

src/index.css

@@ -80,3 +80,152 @@ code {
     -ms-overflow-style: auto;
   }
 }
+
+@keyframes background-orb {
+  0% {
+    bottom: 10%;
+  }
+  50% {
+    bottom: 90%;
+  }
+
+  100% {
+    bottom: 10%;
+  }
+}
+
+@keyframes move-right-left {
+  0% {
+    rotate: 0deg;
+    right: 10%;
+  }
+
+  25% {
+    right: 70%;
+  }
+
+  50% {
+    rotate: 360deg;
+    right: 10%;
+  }
+
+  75% {
+    right: 90%;
+  }
+
+  100% {
+    rotate: 0deg;
+    right: 10%;
+  }
+}
+
+.spotlight1 {
+  background: theme('colors.primary.dark');
+
+  position: fixed;
+  height: 100px;
+  width: 300px;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 30s, 60s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: alternate, alternate;
+  animation-timing-function: ease-in-out;
+
+  animation-delay: -15s, -15s;
+
+  opacity: 0.8;
+  mix-blend-mode: screen;
+
+  filter: blur(125px);
+}
+
+.spotlight2 {
+  background: theme('colors.primary.dark');
+
+  position: fixed;
+  height: 300px;
+  width: 100px;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 60s, 120s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: reverse, reverse;
+  animation-timing-function: ease-in-out;
+
+  opacity: 0.8;
+  mix-blend-mode: screen;
+
+  filter: blur(125px);
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+  transition: background 0ms ease-in;
+  margin: 10px 0;
+  width: 100%;
+  background: theme('colors.secondary.main');
+}
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.875rem;
+  cursor: pointer;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 25px;
+  border: 0px solid #000101;
+}
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 100px;
+  background: theme('colors.primary.main');
+  cursor: pointer;
+  margin-top: -3px;
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 0.875rem;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 25px;
+  border: 0px solid #000101;
+}
+input[type='range']::-moz-range-thumb {
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 100px;
+  background: theme('colors.primary.main');
+  cursor: pointer;
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 0.875rem;
+  cursor: pointer;
+  animate: 0.2s;
+  background: transparent;
+  border-color: transparent;
+  border-width: 39px 0;
+  color: transparent;
+}
+input[type='range']::-ms-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 100px;
+  background: theme('colors.primary.main');
+  cursor: pointer;
+  margin-top: -3px;
+}