diff --git a/src/components/MainMenu.tsx b/src/components/MainMenu.tsx index 8d7122b..8d511db 100644 --- a/src/components/MainMenu.tsx +++ b/src/components/MainMenu.tsx @@ -8,6 +8,8 @@ import vibrate from "../utils/Vibrate"; import sound1 from "../assets/sounds/sound1.mp3"; import sound2 from "../assets/sounds/sound2.mp3"; import { inputSettings as lang } from "../utils/lang"; +import { changeFavicon } from "../utils/changeFavicon"; +import convertSecToMinSec from "../utils/convertSecToMinSec"; export default function MainMenu() { const [totalRounds, currentRound, currentRoundIncrease] = useStore((state) => [state.roundsSelected, state.currentRound, state.currentRoundIncrease]); @@ -32,6 +34,10 @@ export default function MainMenu() { const [enableSounds, enableVibrate, prepareonEveryRound] = useStore((state) => [state.enableSounds, state.enableVibrate, state.prepareonEveryRound]); const preferredLanguage = useStore((state) => state.preferredLanguage); + const totalTimePassed = useStore((state) => state.totalTimePassed); + + const changeTitle = (title: string) => (document.title = title); + useEffect(() => { let isMounted = true; // used in the cleanup function @@ -45,6 +51,8 @@ export default function MainMenu() { if (whichInterval === "prepare") { setProgressBarMax(prepTime); setCurrentProgressColor(prepColor); + changeFavicon("timer.svg"); + if (enableBackgroundColors) { setCurrentBackgroundColor(prepColor); setRemoveUIBorders(true); @@ -54,6 +62,7 @@ export default function MainMenu() { } else if (whichInterval === "work") { setProgressBarMax(workTime); setCurrentProgressColor(workColor); + changeFavicon("timer-green.svg"); if (enableBackgroundColors) { setCurrentBackgroundColor(workColor); setRemoveUIBorders(true); @@ -63,6 +72,9 @@ export default function MainMenu() { } else if (whichInterval === "rest") { setProgressBarMax(restTime); setCurrentProgressColor(restColor); + changeFavicon("timer-red.svg"); + changeTitle("Timer Interval"); + if (enableBackgroundColors) { setCurrentBackgroundColor(restColor); setRemoveUIBorders(true); @@ -93,12 +105,17 @@ export default function MainMenu() { if (currentRound === totalRounds && skipLastRest) { timer?.stop(); resetTimer(); + changeFavicon("timer.svg"); + changeTitle("Timer Interval"); return; } } else if (whichInterval === "rest" && time > +restTime) { if (currentRound === totalRounds) { timer?.stop(); resetTimer(); + changeFavicon("timer.svg"); + changeTitle("Timer Interval"); + return; } else { currentRoundIncrease(); @@ -112,11 +129,15 @@ export default function MainMenu() { } else if (time !== 0 && (whichInterval === "work" || whichInterval === "rest") && currentRound <= totalRounds) { increaseTotalTimePassed(); } + changeTitle(convertSecToMinSec(time)); + setProgressBarValue(`${time}`); } return () => { isMounted = false; + changeFavicon("timer.svg"); + changeTitle("Interval Timer"); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [time]); diff --git a/src/components/Progress.tsx b/src/components/Progress.tsx index 8957713..b508ea5 100644 --- a/src/components/Progress.tsx +++ b/src/components/Progress.tsx @@ -94,19 +94,20 @@ export default function Progress() { setWhichInterval("rest"); changeInterval(); - setTimer( - new Timer(1000, () => { - timeIncrease(); - }), - ); - if (currentRound === totalRounds && skipLastRest) { timer?.stop(); resetTimer(); return; + } else { + setTimer( + new Timer(1000, () => { + timeIncrease(); + }), + ); } } else if (whichInterval === "rest") { setCurrentRound(currentRound + 1); + if (currentRound === totalRounds) { timer?.stop(); resetTimer(); diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx index be45f08..66a340a 100644 --- a/src/components/SidebarItem.tsx +++ b/src/components/SidebarItem.tsx @@ -39,6 +39,7 @@ export default function SidebarItem({ item }: { item: savedWorkoutType }) { PrepareSeconds: timer.PrepareSeconds, PrepColor: timer.PrepColor, }); + localStorage.setItem("latestTimer", JSON.stringify(timer)); // adds an effect to the inputs when the button is clicked SetIsLoadingSavedTimer(true); diff --git a/src/components/TimerApp.tsx b/src/components/TimerApp.tsx index 46787d4..82148cb 100644 --- a/src/components/TimerApp.tsx +++ b/src/components/TimerApp.tsx @@ -5,11 +5,14 @@ import SaveTimer from "./SaveTimer"; import useStore from "../store/useStore"; import MenuButtons from "./MenuButtons"; import { useState, useEffect } from "react"; +import { changeFavicon } from "../utils/changeFavicon"; export default function TimerApp() { const [removeBorders, mainTimerBorder] = useStore((state) => [state.removeUIBorders, state.mainTimerBorder]); const [enableBackgroundColors, savedWorkouts] = useStore((state) => [state.enableBackgroundColors, state.savedWorkouts]); const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia("(max-width: 600px)").matches); + const whichInterval = useStore((state) => state.whichInterval); + const timer = useStore((state) => state.timer); function handleMediaQueryChange(mediaQuery: MediaQueryListEvent) { if (mediaQuery.matches) { diff --git a/src/components/inputs/InputNumber.tsx b/src/components/inputs/InputNumber.tsx index 54510c8..ffa2ab4 100644 --- a/src/components/inputs/InputNumber.tsx +++ b/src/components/inputs/InputNumber.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import useStore from "../../store/useStore"; import pad from "../../utils/PadNum"; @@ -13,12 +13,21 @@ export default function InputNumber(props: InputNumberProps) { const { label, className, nogap, inputStoreType, maxLength = 3 } = props; const [isFocused, setIsFocused] = useState(false); - const count = useStore((state) => state[inputStoreType]); + let count = useStore((state) => state[inputStoreType]); const increase = useStore((state) => state[`increase${inputStoreType}`]); const decrease = useStore((state) => state[`decrease${inputStoreType}`]); const setCount = useStore((state) => state[`set${inputStoreType}`]); const isLoadingSavedTimer = useStore((state) => state.isLoadingSavedTimer); + useEffect(() => { + const latestTimer = localStorage.getItem("latestTimer"); + + if (latestTimer) { + const parsedTimer = JSON.parse(latestTimer); + setCount(parsedTimer[inputStoreType]); + } + }, []); + const timerRef = useRef(null); function incrementHold() { diff --git a/src/store/slices/TimerStatus.ts b/src/store/slices/TimerStatus.ts index 9fcf476..38ffd7e 100644 --- a/src/store/slices/TimerStatus.ts +++ b/src/store/slices/TimerStatus.ts @@ -107,8 +107,8 @@ export type timerStatusType = { time: number; setTime: (value: number) => void; timeIncrease: () => void; - whichInterval: string; - setWhichInterval: (value: string) => void; + whichInterval: "work" | "rest" | "prepare"; + setWhichInterval: (value: "work" | "rest" | "prepare") => void; currentRound: number; setCurrentRound: (value: number) => void; currentRoundIncrease: () => void; diff --git a/src/store/slices/localStorage.ts b/src/store/slices/localStorage.ts index aef0cfa..830507b 100644 --- a/src/store/slices/localStorage.ts +++ b/src/store/slices/localStorage.ts @@ -37,6 +37,7 @@ export default storageSlice; export type localStorageType = { savedWorkouts: savedWorkoutType[]; setSavedWorkouts: (value: savedWorkoutType[]) => void; + skipLastRest: boolean; setSkipLastRest: (value: boolean) => void; enableBackgroundColors: boolean; diff --git a/src/utils/changeFavicon.ts b/src/utils/changeFavicon.ts new file mode 100644 index 0000000..dd07e0a --- /dev/null +++ b/src/utils/changeFavicon.ts @@ -0,0 +1,7 @@ +export function changeFavicon(url: string) { + const link = (document.querySelector("link[rel*='icon']") || document.createElement("link")) as HTMLLinkElement; + link.type = "image/x-icon"; + link.rel = "shortcut icon"; + link.href = url; + document.getElementsByTagName("head")[0].appendChild(link); +}