Skip to content

Commit

Permalink
fixed color and logic around rest between sets
Browse files Browse the repository at this point in the history
  • Loading branch information
andorsk committed May 5, 2024
1 parent dbb6f31 commit 44865ae
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 6 deletions.
4 changes: 2 additions & 2 deletions src/lib/workout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const createSteps = (config: RoutineConfiguration): Step[] => {
totalSets: config.Sets.value,
totalCycles: config.Cycles.value,
});
if (j <= config.Cycles.value - 1) {
if (j <= config.Cycles.value - 1 && i <= config.Sets.value) {
steps.push({
name: config.Rest.name,
duration: config.Rest.duration,
Expand All @@ -38,7 +38,7 @@ export const createSteps = (config: RoutineConfiguration): Step[] => {
steps.push({
name: config.RestBetweenSteps.name,
duration: config.RestBetweenSteps.duration,
color: "bg-green-200",
color: "bg-teal-500",
cycle: 0,
totalSets: config.Sets.value,
totalCycles: config.Cycles.value,
Expand Down
21 changes: 17 additions & 4 deletions src/pages/PlayScreen/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { WorkoutState } from "@/lib/reducers/workout";
import { Step } from "@/models/workout";
Expand All @@ -15,11 +15,13 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import PauseIcon from "@mui/icons-material/Pause";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
import "./styles.css";

function StepView() {
const workoutState = useSelector((state: RootState) => state.workout);
const [currentStep, setCurrentStep] = useState<Step>();
const [currentStepIndex, setCurrentStepIndex] = useState<number>();
const selectedStepRef = useRef<HTMLButtonElement>(null);

const handleClickedStep = (index: number) => {
if (workoutState.manager?.workout?.steps.length === 0) {
Expand All @@ -28,6 +30,16 @@ function StepView() {
workoutState.manager?.setStep(index);
};

useEffect(() => {
// Scroll to the selected step when it changes
if (selectedStepRef.current) {
selectedStepRef.current.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}, [currentStepIndex]);

useEffect(() => {
setCurrentStepIndex(workoutState?.manager.currentStep);
setCurrentStep(
Expand All @@ -42,6 +54,7 @@ function StepView() {
<div className="justify-center items-center">
{workoutState?.manager.workout?.steps.map((step, index) => (
<button
ref={index === currentStepIndex ? selectedStepRef : null}
key={index}
onClick={() => handleClickedStep(index)}
className={`w-full rounded ${
Expand Down Expand Up @@ -230,19 +243,19 @@ export default function PlayScreen() {
<div>
<Header router={router} handleToggleWorkout={toggleWorkout} />
</div>
<div className="h-4/6 overflow-y-auto">
<div className="h-3/6 overflow-y-auto">
<StepView />
<div className="h-3/6"></div>
</div>
<div className="absolute bottom-0 w-full">
<div className="footer">
{" "}
<Footer />{" "}
</div>
</>
) : (
<div className="flex items-center justify-center h-screen overflow-hidden">
<div className="text-center rounded p-4 border-gray-500 shadow-lg border m-4">
<h1 className="text-3xl mb-4 rounded border-gray-500">
<h1 className="text-3xl mb-4 rounded border-gray-500">
Finished!
</h1>
<div className="m-4">
Expand Down
5 changes: 5 additions & 0 deletions src/pages/PlayScreen/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
2 changes: 2 additions & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const config: Config = {
"bg-red-500",
"bg-yellow-500",
"bg-orange-500",
"bg-teal-500",

"bg-green-500",
"bg-blue-500",
"bg-green-200",
Expand Down

0 comments on commit 44865ae

Please sign in to comment.