improve 25 5 Clock App

Eli-FreeCodeCamp-Projects · Oct 20, 2023 · 2196989 · 2196989
1 parent a4f17b8
commit 2196989
Show file tree

Hide file tree

Showing 16 changed files with 406 additions and 289 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,27 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+assets/css/25_5Clock.css
+assets/css/25_5Clock.css.map
+assets/css/25_5Clock.min.css
+assets/css/25_5Clock.min.css.map
+assets/css/drumMachine.css
+assets/css/drumMachine.css.map
+assets/css/drumMachine.min.css
+assets/css/drumMachine.min.css.map
+assets/css/jsCalc.css
+assets/css/jsCalc.css.map
+assets/css/jsCalc.min.css
+assets/css/jsCalc.min.css.map
+assets/css/main.css
+assets/css/main.css.map
+assets/css/main.min.css
+assets/css/main.min.css.map
+assets/css/mdPreviewer.css
+assets/css/mdPreviewer.css.map
+assets/css/mdPreviewer.min.css
+assets/css/mdPreviewer.min.css.map
+assets/css/quote_machine.css
+assets/css/quote_machine.css.map
+assets/css/quote_machine.min.css
+assets/css/quote_machine.min.css.map
diff --git a/src/components/25_5Clock/App.jsx b/src/components/25_5Clock/App.jsx
@@ -13,7 +13,13 @@ import Beep from './assets/sounds/BeepSound.wav'
  * @constructor
  */
 export default function App(){
+    const handleTimerValueChange = (action, value) => {
+        console.log(`display has changed: -- action : ${action} -- value : ${value}`)
+    };
 
+    const handleTimerLabelChange = (action, value) => {
+        console.log(`display has changed: -- action : ${action} -- value : ${value}`)
+    };
     return(
         <Provider store={Store}>
             <section id="clock-container" className="container-fluid">
@@ -22,7 +28,7 @@ export default function App(){
                     <SessionSelector />
                 </div>
                 <div className="clock-body">
-                    <TimerDisplay />
+                    <TimerDisplay  timerValueChange={handleTimerValueChange} />
                     <TimerControls />
                 </div>
                 <div className="clock-footer">

diff --git a/src/components/25_5Clock/timerDisplay.jsx b/src/components/25_5Clock/timerDisplay.jsx
@@ -1,17 +1,18 @@
 import {useSelector, useDispatch} from "react-redux";
 import {
-    CurrentTimerRun,
+    CurrentTimerRun, setTimerValue, TimerStatus, startTimerId,
     selectTimerRun, selectTimerStatus,
-    selectTimerValue, setTimerValue,
-    TimerStatus, startTimerId, selectTimerId
+    selectTimerValue, selectTimerMax, selectTimerId
 } from "./features/clock25_5Slice.js";
 import {useEffect} from "react";
 import {ut} from "../../utils/utils.js";
 
-export default function TimerDisplay(){
+
+export default function TimerDisplay({timerValueChange, timerLabelChange}){
     const dispatch = useDispatch()
     const timerRun = useSelector(selectTimerRun)
     const timerValue = useSelector(selectTimerValue)
+    const timerMax = useSelector(selectTimerMax)
     const timerStatus = useSelector(selectTimerStatus)
     const timerId = useSelector(selectTimerId)
 
@@ -30,6 +31,7 @@ export default function TimerDisplay(){
             audio.play();
         }
     }
+
     const runTimer = () => {
         switch (timerStatus) {
             case TimerStatus.START.toString():
@@ -56,27 +58,46 @@ export default function TimerDisplay(){
         return `${val}`
     }
 
-    const formatTimerValue = (val) => {
-        if(val > 60*60){
-            val = 60*60
-        }else if(val < 0){
-            val = 0
+    const handleTimerValueChange = (data) => {
+        if(ut.isFunction(timerValueChange)){
+            timerValueChange(data)
+        }
+    }
+
+    const handleTimerLabelChange = (data) => {
+        if(ut.isFunction(timerLabelChange)){
+            timerLabelChange(data)
         }
-        if(timerValue === 0){
+    }
+
+    const formatTimerValue = (val) => {
+        if(val === 0){
             playSound()
         }
+        handleTimerValueChange({timerValue: val})
         const min = formatNumberString(Math.floor(val / 60))
         const sec = formatNumberString(val - (min * 60))
         return `${min}:${sec}`
     }
+    /**
+     * Get the current timer css class.
+     * @param {string} value 
+     * @returns {string} return the current timer css class.
+     */
     let getBgClass = (value) => {
         switch (value) {
             case CurrentTimerRun.SESSION.toString():
-                return 'bg-session-body'
+                return 'bg-session-clock'
             case CurrentTimerRun.BREAK.toString():
-                return 'bg-break-body'
+                return 'bg-break-clock'
         }
     }
+
+    /**
+     * Get the current timer label.
+     * @param {string} value 
+     * @returns {string} Return the current timer label
+     */
     const getTimerLabel = (value) => {
         switch (value) {
             case CurrentTimerRun.SESSION.toString():
@@ -85,8 +106,15 @@ export default function TimerDisplay(){
                 return "Break"
         }
     }
+
+    const getTimerValueToDeg = (value, max) => {
+        const percentVal = Math.ceil( (value * 100) / max);
+        const PercentDeg =  Math.ceil(360 - (percentVal * 360) / 100)
+        return PercentDeg;
+    }
+    const clockStyle = {"--clock-current-deg": `${getTimerValueToDeg(timerValue, timerMax)}deg`}
     return(
-        <div className={`timer-display ${getBgClass(timerRun)}`}>
+        <div className={`timer-display ${getBgClass(timerRun)}`} style={clockStyle}>
             <div id="timer-label" className="timer-label">{getTimerLabel(timerRun)}</div>
             <div id="time-left" className="time-left">{formatTimerValue(timerValue)}</div>
         </div>

diff --git a/src/components/25_5Clock/timerSelect.jsx b/src/components/25_5Clock/timerSelect.jsx
@@ -32,16 +32,6 @@ export function TimerSelector({
     const btnDownDisabled = (timerValue <= minValue);
     return(
         <div className="timer-selector">
-            <BtRange
-                onlyInput={true}
-                disabled={false}
-                inputId={`${inputId}-range`}
-                inputValue={timerValue}
-                minValue={minValue}
-                maxValue={maxValue}
-                stepValue={stepValue}
-                handleChange={handleRangeChange}
-            />
             <div className="tSel-label"><label id={labelId} htmlFor={inputId}>{label}</label></div>
             <div className="input-group">
                 <button
@@ -64,6 +54,16 @@ export function TimerSelector({
                     <i className="fas fa-arrow-down"></i>
                 </button>
             </div>
+            <BtRange
+                onlyInput={true}
+                disabled={false}
+                inputId={`${inputId}-range`}
+                inputValue={timerValue}
+                minValue={minValue}
+                maxValue={maxValue}
+                stepValue={stepValue}
+                handleChange={handleRangeChange}
+            />
         </div>
     )
 }