Skip to content

Commit

Permalink
fixed language switcher flags
Browse files Browse the repository at this point in the history
  • Loading branch information
@MacielG1
MacielG1 committed Oct 18, 2023
1 parent fdb4bc0 commit f5c4ca6
Show file tree
Hide file tree
Showing 6 changed files with 194 additions and 18 deletions.
8 changes: 4 additions & 4 deletions src/components/LanguageSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export default function Dropdown() {
className="hover:border-b-none group flex flex-col justify-center
rounded-lg border border-gray-500 text-sm font-medium tracking-wide text-zinc-200 hover:text-white focus:outline-none "
>
<span className="relative flex w-16 items-center justify-center rounded-lg py-6 pr-1 ">
<span className="relative flex w-16 items-center justify-center rounded-lg bg-zinc-700 py-6 ">
<span className="absolute p-4">{FlagIcon}</span>
<Icons.arrowDown className="absolute right-0 h-5 w-5 transition-opacity duration-200 group-hover:opacity-100 " />
<Icons.arrowDown className="absolute right-0 h-4 w-4 transition-opacity duration-200 group-hover:opacity-100 " />
</span>

<div className=" hidden transform whitespace-nowrap rounded-md rounded-t-none bg-zinc-600 shadow-lg transition duration-1000 group-hover:block">
Expand All @@ -39,9 +39,9 @@ export default function Dropdown() {
<button
onClick={handleLanguageSelection.bind(null, c.name as localStorageType["preferredLanguage"])}
key={c.name}
className="flex w-full items-center justify-center rounded-none px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-zinc-700 last:hover:rounded-b-md "
className="flex w-full items-center justify-center rounded-none px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-zinc-700 last:hover:rounded-b-md "
>
<span className="border border-neutral-500">{c.flag}</span>
{c.flag}
</button>
);
}
Expand Down
181 changes: 172 additions & 9 deletions src/components/Progress.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,120 @@
// import useStore from "../store/useStore";

// export default function Progress() {
// const [progressBarValue, progressBarMax, currentProgressColor] = useStore((state) => [state.progressBarValue, state.progressBarMax, state.currentProgressColor]);
// const [setTotalTimePassed, totalTimePassed] = useStore((state) => [state.setTotalTimePassed, state.totalTimePassed]);

// const [currentRound, setCurrentRound] = useStore((state) => [state.currentRound, state.setCurrentRound]);
// const [whichInterval, setWhichInterval] = useStore((state) => [state.whichInterval, state.setWhichInterval]);

// const [isPaused, totalRounds] = useStore((state) => [state.isPaused, state.roundsSelected]);
// const [time, setTime] = useStore((state) => [state.time, state.setTime]);

// const [timer, resetTimer] = useStore((state) => [state.timer, state.resetTimer]);
// const [workTime, restTime] = useStore((state) => [state.workTime, state.restTime]);
// const [prepareonEveryRound, skipLastRest] = useStore((state) => [state.prepareonEveryRound, state.skipLastRest]);

// function handlePrev() {
// if (isPaused) return;

// if (whichInterval === "prepare") {
// if (currentRound === 1) {
// setTime(0);
// setTotalTimePassed(0);
// } else if (prepareonEveryRound) {
// setWhichInterval("rest");
// setTime(0);
// setTotalTimePassed(totalTimePassed - +restTime);
// setCurrentRound(currentRound - 1);
// }
// } else if (whichInterval === "work" && currentRound == 1) {
// setTotalTimePassed(0);
// setWhichInterval("prepare");
// setTime(0);
// setCurrentRound(1);
// }
// if (currentRound > 1 || (whichInterval === "rest" && currentRound == 1)) {
// if (whichInterval === "work") {
// setTotalTimePassed(totalTimePassed - time - +restTime);
// setCurrentRound(currentRound - 1);
// setWhichInterval("rest");
// setTime(0);
// } else if (whichInterval === "rest") {
// setTotalTimePassed(totalTimePassed - time - +workTime);
// setWhichInterval("work");
// setTime(0);
// }
// }
// }
// function handleNext() {
// if (isPaused) return;
// if (currentRound <= totalRounds) {
// if (whichInterval === "prepare") {
// setTime(0);
// setTotalTimePassed(0);
// setWhichInterval("work");
// } else if (whichInterval === "work") {
// setTime(0);
// setTotalTimePassed(+workTime * currentRound + +restTime * (currentRound - 1));
// setWhichInterval("rest");

// if (currentRound === totalRounds && skipLastRest) {
// timer?.stop();
// resetTimer();
// return;
// }
// } else if (whichInterval === "rest") {
// setCurrentRound(currentRound + 1);
// if (currentRound === totalRounds) {
// timer?.stop();
// resetTimer();
// return;
// } else {
// setTotalTimePassed(+workTime * currentRound + +restTime * currentRound);

// if (prepareonEveryRound) {
// setWhichInterval("prepare");
// setTime(0);
// } else {
// setWhichInterval("work");
// setTime(0);
// }
// }
// }
// }
// }

// return (
// <div className="mt-1 flex items-center justify-center gap-4 text-5xl sm:px-4 2xl:mt-10 ">
// <button
// onClick={handlePrev}
// type="button"
// className={`${isPaused || !timer ? "invisible" : "visible"} rounded-lg py-2 text-gray-300 transition duration-300
// hover:scale-105 sm:px-3`}
// id="previousBtn"
// >
// <span>◀</span>
// </button>

// <div className="h-9 w-full max-w-lg overflow-hidden rounded-xl bg-neutral-500 ">
// <div className="h-9 rounded-xl" style={{ width: `${(+progressBarValue / +progressBarMax) * 100 || 0}%`, backgroundColor: currentProgressColor }}></div>
// </div>

// <button
// onClick={handleNext}
// type="button"
// className={`${isPaused || !timer ? "invisible" : "visible"} rounded-lg py-2 text-gray-300 transition duration-300
// hover:scale-105 sm:px-3`}
// id="nextBtn"
// >
// <span>▶</span>
// </button>
// </div>
// );
// }

import useStore from "../store/useStore";
import Timer from "../utils/Timer";

export default function Progress() {
const [progressBarValue, progressBarMax, currentProgressColor] = useStore((state) => [state.progressBarValue, state.progressBarMax, state.currentProgressColor]);
Expand All @@ -10,53 +126,93 @@ export default function Progress() {
const [isPaused, totalRounds] = useStore((state) => [state.isPaused, state.roundsSelected]);
const [time, setTime] = useStore((state) => [state.time, state.setTime]);

const [timer, resetTimer] = useStore((state) => [state.timer, state.resetTimer]);
const [timer, resetTimer, setTimer] = useStore((state) => [state.timer, state.resetTimer, state.setTimer]);
const [workTime, restTime] = useStore((state) => [state.workTime, state.restTime]);
const [prepareonEveryRound, skipLastRest] = useStore((state) => [state.prepareonEveryRound, state.skipLastRest]);
const [timeIncrease, changeInterval] = useStore((state) => [state.timeIncrease, state.changeInterval]);

function handlePrev() {
if (isPaused) return;

timer?.stop();
setTimer(null);
if (whichInterval === "prepare") {
if (currentRound === 1) {
setTime(0);
setTotalTimePassed(0);
changeInterval();
setTimer(
new Timer(1000, () => {
timeIncrease();
}),
);
} else if (prepareonEveryRound) {
setWhichInterval("rest");
setTime(0);
setTotalTimePassed(totalTimePassed - +restTime);
setCurrentRound(currentRound - 1);
changeInterval();
setTimer(
new Timer(1000, () => {
timeIncrease();
}),
);
}
} else if (whichInterval === "work" && currentRound == 1) {
setTotalTimePassed(0);
setWhichInterval("prepare");
setTime(0);
setCurrentRound(1);
changeInterval();
setTimer(
new Timer(1000, () => {
timeIncrease();
}),
);
}
if (currentRound > 1 || (whichInterval === "rest" && currentRound == 1)) {
if (whichInterval === "work") {
setTotalTimePassed(totalTimePassed - time - +restTime);
setCurrentRound(currentRound - 1);
setWhichInterval("rest");
setTime(0);
changeInterval();
setTimer(
new Timer(1000, () => {
timeIncrease();
}),
);
} else if (whichInterval === "rest") {
setTotalTimePassed(totalTimePassed - time - +workTime);
setWhichInterval("work");
setTime(0);
changeInterval();
setTimer(
new Timer(1000, () => {
timeIncrease();
}),
);
}
}
}
function handleNext() {
if (isPaused) return;
timer?.stop();
setTimer(null);
if (currentRound <= totalRounds) {
if (whichInterval === "prepare") {
setTime(0);
setTotalTimePassed(0);
setWhichInterval("work");
changeInterval();
setTimer(
new Timer(1000, () => {
timeIncrease();
}),
);
} else if (whichInterval === "work") {
setTime(0);
setTotalTimePassed(+workTime * currentRound + +restTime * (currentRound - 1));
setWhichInterval("rest");
changeInterval();

setTimer(
new Timer(1000, () => {
timeIncrease();
}),
);

if (currentRound === totalRounds && skipLastRest) {
timer?.stop();
Expand All @@ -71,6 +227,13 @@ export default function Progress() {
return;
} else {
setTotalTimePassed(+workTime * currentRound + +restTime * currentRound);
changeInterval();

setTimer(
new Timer(1000, () => {
timeIncrease();
}),
);

if (prepareonEveryRound) {
setWhichInterval("prepare");
Expand Down
2 changes: 1 addition & 1 deletion src/components/SaveTimer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function SaveTimer() {
};

return (
<div className="mt-7 flex justify-center gap-4 ">
<div className="mt-4 flex justify-center gap-4 md:mt-7 ">
<input
type="text"
className="placeholder:text-text-gray-300 } ml-2 w-2/4 text-ellipsis rounded-2xl border-2 border-gray-600 bg-black px-1 py-2 text-center text-white transition duration-300 hover:bg-neutral-900 focus-visible:border-gray-500 focus-visible:bg-neutral-800 focus-visible:outline-none focus-visible:placeholder:text-transparent xs:w-5/12
Expand Down
4 changes: 2 additions & 2 deletions src/components/TimerApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ export default function TimerApp() {

return (
<section
className="relative mx-auto mt-3 flex w-full max-w-sm flex-col rounded-xl border border-gray-500 bg-neutral-950 px-0 py-2 text-center xs:max-w-lg xs:px-2
sm:mt-5 sm:max-w-xl sm:px-4 lg:max-w-[41rem] 2xl:mt-10 2xl:max-w-3xl 2xl:py-12"
className="relative mx-auto mt-3 flex w-full max-w-sm flex-col rounded-xl border border-gray-500 bg-neutral-950 px-0 py-2 text-center max-md:pb-4 xs:max-w-lg xs:px-2
sm:mt-5 sm:max-w-xl sm:px-4 lg:max-w-[41rem] 2xl:mt-10 2xl:max-w-3xl 2xl:py-12"
style={{
borderColor: enableBackgroundColors && removeBorders ? "transparent" : mainTimerBorder,
borderWidth: mainTimerBorder === "#787777" ? "1px" : "3px",
Expand Down
9 changes: 9 additions & 0 deletions src/store/slices/TimerStatus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,14 @@ const timerStatusSlice: StateCreator<
timer: null,
});
},
changeInterval: () => {
set({
time: -1,
progressBarValue: "0",
currentBackgroundColor: "#0a0a0a",
mainTimerBorder: get().whichInterval === "work" ? get().WorkColor : get().RestColor,
});
},

clearInputFields: () => {
set({
Expand Down Expand Up @@ -122,4 +130,5 @@ export type timerStatusType = {
SetIsLoadingSavedTimer: (value: boolean) => void;
resetTimer: () => void;
clearInputFields: () => void;
changeInterval: () => void;
};
8 changes: 6 additions & 2 deletions src/store/slices/localStorage.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import { StateCreator } from "zustand";
import { timerStatusType } from "./TimerStatus";

const storageSlice: StateCreator<localStorageType> = (set) => ({
const storageSlice: StateCreator<localStorageType & timerStatusType, [], [], localStorageType> = (set, get) => ({
// saved timers
savedWorkouts: [],
setSavedWorkouts: (value) => set({ savedWorkouts: value }),

// saved settings
skipLastRest: true,
setSkipLastRest: (value) => set({ skipLastRest: value }),
setSkipLastRest: (value) => {
set({ skipLastRest: value });
get().updateWorkoutFullTime();
},

enableBackgroundColors: false,
setEnableBackgroundColors: (value) => set({ enableBackgroundColors: value }),
Expand Down

0 comments on commit f5c4ca6

Please sign in to comment.