add glow on start menu

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.9.92",
+  "version": "0.9.93",
   "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 450ms 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;
+}