TimerControl + TimerContainer add

src/App.js

@@ -194,14 +194,82 @@ const Watch = ({ time }) => {
             </strong>
             <div className='Watch'>
                 <img className='clock' src='./ClockFace.png' />
-                <img className='hour' style={{ transform: `rotate(${hours}deg)`}} src='./hour.png' />
-                <img className='minuts' style={{ transform: `rotate(${minuts}deg)`}} src='./minut.png' />
-                <img className='seconds' style={{ transform: `rotate(${seconds}deg)`}} src='./second.png' />
+                <img className='hour' style={{ transform: `rotate(${hours}deg)` }} src='./hour.png' />
+                <img className='minuts' style={{ transform: `rotate(${minuts}deg)` }} src='./minut.png' />
+                <img className='seconds' style={{ transform: `rotate(${seconds}deg)` }} src='./second.png' />
             </div>
         </>
     )
 }
 
+///////////////////////////////////////////////////////////////////////////
+
+
+const TimerC = () => {
+    const [hourse, setHours] = useState(0)
+    const [minuts, setMinuts] = useState(0)
+    const [seconds, setSeconds] = useState(0)
+    const [open, setOpen] = useState(false)
+
+    let ms = hourse * 3600 + minuts * 60 + seconds
+
+    return (
+        <div>
+            <label>Hours :
+                <input
+                    min='0'
+                    type='number'
+                    onChange={e => setHours(+e.currentTarget.value)} />
+            </label><br />
+
+            <label>Minuts :
+                <input
+                    min='0'
+                    type='number'
+                    onChange={e => setMinuts(+e.currentTarget.value)} />
+            </label><br />
+
+            <label>Seconds:
+                <input
+                    min='0'
+                    type='number'
+                    onChange={e => setSeconds(+e.currentTarget.value)} />
+            </label>
+
+            <button onClick={() => setOpen(!open)}>{!open ? 'start' : 'stop'}</button>
+            {open && <TimerCont seconds={ms} />}
+        </div>
+    )
+}
+
+const SecondsTimer = ({ seconds }) => <h2>{seconds.toFixed(1)}</h2>
+
+const TimerCont = ({ seconds, refresh }) => {
+    const t0 = performance.now()
+    const [time, setTime] = useState(seconds)
+    useEffect(() => {
+        const timerID = setInterval(() => {
+            let t1 = performance.now()
+            if (seconds >= (t1 - t0) / 1000) {
+                setTime(seconds - (t1 - t0) / 1000)
+            } else {
+                setTime(0)
+                clearInterval(timerID)
+            }
+        }, refresh);
+        return () => {
+            setTime(seconds)
+            clearInterval(timerID)
+        }
+    }, [])
+    return (
+        <SecondsTimer seconds={time} />
+    )
+}
+
+
+
+
 function App() {
     return (
         <div className="App">
@@ -236,7 +304,9 @@ function App() {
             <hr />
             <strong>Watch :</strong>
             <TimerControlLCD ms={1560} render={Watch} />
-            {/* <Watch /> */}
+            <hr />
+            <strong>TimerControl + TimerContainer:</strong>
+            <TimerC  />
         </div >
     );
 }