watch done. last task almost done.

hw19-react-jsx-homework/src/App.js

@@ -1,7 +1,10 @@
 import logo from './logo.svg';
+import ClockFace from './assets/ClockFace.png'
+import ClockSec from './assets/ClockFace_S.png'
+import ClockMin from './assets/ClockFace_M.png'
+import ClockHour from './assets/ClockFace_H.png'
 import './App.css';
 import { useEffect, useState } from 'react';
-import { render } from '@testing-library/react';
 
 const Spoiler = ({header="+", open=true, children}) => {
   let [isOpen=open, setOpen] = useState()
@@ -77,9 +80,9 @@ const Timer = ({seconds=10}) => {
   return (
     <>
       <strong>
-        {Math.floor(((time*1000) / (1000 * 60 * 60)) % 24)} :
-        {Math.floor(((time*1000) / (1000 * 60)) % 60)} :
-        {Math.floor(((time*1000) / 1000) % 60)}
+        {Math.floor((time / (60 * 60)) % 24)} :
+        {Math.floor((time / 60) % 60)} :
+        {Math.floor(time % 60)}
       </strong>
       &nbsp;
       <button onClick={() => setIsPause(!isPause)}>{isPause? 'Start' : 'Pause'}</button>
@@ -89,17 +92,17 @@ const Timer = ({seconds=10}) => {
 
 const LCD = ({seconds=10}) =>
   <strong>
-    {Math.floor(((seconds*1000) / (1000 * 60 * 60)) % 24)} :
-    {Math.floor(((seconds*1000) / (1000 * 60)) % 60)} :
-    {Math.floor(((seconds*1000) / 1000) % 60)}
+    {Math.floor(((seconds / (60 * 60)) % 24))} :
+    {Math.floor(((seconds / 60)) % 60)} :
+    {Math.floor(seconds % 60)}
   </strong>
 
 const SecondsTimer = ({seconds}) => <h2>{seconds.toFixed(2)}</h2>
 
 const TimerControl = ({hour=0, minute=0, second=0}) => {
-  let [hr=hour, setHr] = useState()
-  let [min=minute, setMin] = useState()
-  let [sec=second, setSec] = useState()
+  let [hr, setHr] = useState(hour)
+  let [min, setMin] = useState(minute)
+  let [sec, setSec] = useState(second)
   let [active=false, setActive] = useState()
 
   return (
@@ -137,8 +140,8 @@ const TimerControl = ({hour=0, minute=0, second=0}) => {
   )
 }
 
-const TimerContainer = ({seconds=1800, refresh=10, render:Component}) => {
-  let [time=seconds*1000, setTime] = useState()
+const TimerContainer = ({seconds=3800, refresh=10, render:Component}) => {
+  let [time, setTime] = useState(seconds*1000)
   useEffect(() => {
     const interval = setInterval(()=> {
       time > 0? setTime(seconds*1000  - performance.now()) : (()=> {clearInterval(interval); setTime(0)})()
@@ -151,6 +154,64 @@ const TimerContainer = ({seconds=1800, refresh=10, render:Component}) => {
   )
 }
 
+const Watch = ({seconds=1000}) =>
+  <div style={{width:'fit-content'}}>
+    <img src={ClockFace} style={{width: 'inherit', position:'absolute'}}  alt='img'/>
+    <img src={ClockSec}  style={{width: 'inherit', position:'absolute',
+                                transform: `rotate(${seconds % 60 * 6}deg)`}} alt='img'/>
+    <img src={ClockMin}  style={{width: 'inherit', position:'absolute',
+                                transform: `rotate(${(seconds / 60) % 60 * 6}deg)`}} alt='img'/>
+    <img src={ClockHour} style={{width: 'inherit', position:'absolute',
+                                transform: `rotate(${((seconds) / (60*60)) % 24 * 30}deg)`}}  alt='img'/>
+  </div>
+
+const TimerControlContainer = ({hour=0, minute=0, second=0, render:Component, refresh=10}) => {
+  let [hr, setHr] = useState(hour)
+  let [min, setMin] = useState(minute)
+  let [sec, setSec] = useState(second)
+  let [active, setActive] = useState(false)
+  let [returned, setReturned] = useState(hr*60*60 + min*60 + sec)
+
+  useEffect(() => {
+    active ? setReturned(hr*60*60 + min*60 + sec) :setReturned(0) 
+  }, [Component, active, hr, min, sec, refresh])
+
+  return (
+    <div>
+      <span>
+        <input
+          type="number"
+          min="0" 
+          max="30"
+          placeholder='hr' 
+          value={hr} 
+          onChange={(e)=> setHr(+e.target.value < 0 || +e.target.value > +e.target.max ? 0 : +e.target.value)}
+        />:
+        <input
+          type="number"
+          min="0" 
+          max="59"  
+          placeholder='min' 
+          value={min}
+          onChange={(e)=> setMin(+e.target.value > 59 || e.target.value < 0? 0 : +e.target.value)}
+        />:
+        <input 
+          type="number"
+          min="0" 
+          max="59"
+          placeholder='sec' 
+          value={sec} 
+          onChange={(e)=> setSec(+e.target.value > 59 || e.target.value < 0? 0 : +e.target.value)}
+        />
+
+        { active ? <button onClick={() => setActive(false)}>Stop</button> :
+                  <button onClick={() => setActive(true)}>Start</button>}
+        <br />
+      </span>
+      {returned > 0? <TimerContainer seconds={returned} render={Component} refresh={refresh}/> : ''}
+    </div>
+  )
+}
 
 function App() {
   return (
@@ -180,6 +241,12 @@ function App() {
       <TimerContainer render={SecondsTimer} seconds={10} refresh={10}/>
       <TimerContainer render={LCD}/>
 
+      {/* <h3>Watch</h3>
+      <TimerContainer render={Watch} seconds={7200}/>
+      <TimerContainer render={LCD} seconds={7200}/> */}
+
+      <h3>Timer Control Container</h3>
+      <TimerControlContainer render={Watch} />
     </div>
   );
 }