|
@@ -1,10 +1,6 @@
|
|
|
import React, {useState, useEffect, useRef} from 'react'
|
|
|
import './App.scss';
|
|
|
-import {Provider, connect} from 'react-redux';
|
|
|
-import {createStore, combineReducers, applyMiddleware} from 'redux';
|
|
|
-import thunk from 'redux-thunk';
|
|
|
|
|
|
-import logoDefault from './img/logo.svg';
|
|
|
import clockFace from './img/ClockFace.png';
|
|
|
import clockH from './img/ClockFace_H.png';
|
|
|
import clockM from './img/ClockFace_M.png';
|
|
@@ -93,12 +89,12 @@ const PasswordConfirm = ({min, char=false, bigChar=false, number=false}) => {
|
|
|
|
|
|
|
|
|
|
|
|
-const Timer = ({seconds=100}) => {
|
|
|
- const [counter, setCounter] = useState(seconds)
|
|
|
+const Timer = ({seconds}) => {
|
|
|
+ const [counter, setCounter] = useState(seconds.s)
|
|
|
const [paused, setPause] = useState(false)
|
|
|
|
|
|
useEffect(() => {
|
|
|
- setCounter(seconds)
|
|
|
+ setCounter(seconds.s)
|
|
|
}, [seconds])
|
|
|
|
|
|
useEffect(() => {
|
|
@@ -137,7 +133,7 @@ const TimerControl = ({setSeconds}) => {
|
|
|
<input value={h} min="0" max="none" type="number" onChange={(e) => setH(e.target.value)}/>
|
|
|
<input value={m} min="0" max="60" type="number" onChange={(e) => setM(e.target.value)}/>
|
|
|
<input value={s} min="0" max="60" type="number" onChange={(e) => setS(e.target.value)}/>
|
|
|
- <button onClick={() => setSeconds(+h*3600 + +m*60 + +s) }>Start</button>
|
|
|
+ <button onClick={() => setSeconds({s: +h*3600 + +m*60 + +s}) }>Start</button>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
@@ -148,16 +144,16 @@ const SecondsTimer = ({seconds}) => (
|
|
|
<h2>{parseInt(seconds)}</h2>
|
|
|
)
|
|
|
|
|
|
-const TimerContainer = ({seconds=100, refresh=100, render}) => {
|
|
|
+const TimerContainer = ({seconds={s:100}, refresh=100, render}) => {
|
|
|
const [paused, setPause] = useState(false)
|
|
|
- const [time, setTime] = useState(seconds)
|
|
|
+ const [time, setTime] = useState(seconds.s)
|
|
|
const t0 = useRef(performance.now())
|
|
|
const pausedAt = useRef(0)
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
t0.current = performance.now()
|
|
|
- setTime(seconds)
|
|
|
+ setTime(seconds.s)
|
|
|
console.log('mount1')
|
|
|
}, [seconds])
|
|
|
|
|
@@ -181,9 +177,9 @@ const TimerContainer = ({seconds=100, refresh=100, render}) => {
|
|
|
let t1 = performance.now()
|
|
|
let delta = (t1-t0.current)/1000
|
|
|
|
|
|
- if (seconds >= delta) {
|
|
|
+ if (seconds.s >= delta) {
|
|
|
// console.log('timeset', time, seconds, delta)
|
|
|
- setTime(seconds - delta)
|
|
|
+ setTime(seconds.s - delta)
|
|
|
} else {
|
|
|
console.log('0')
|
|
|
setTime(0)
|
|
@@ -244,9 +240,31 @@ const Watch = ({seconds, setPause, paused}) => {
|
|
|
|
|
|
|
|
|
|
|
|
+const Control = () => {
|
|
|
+ const [seconds, setSeconds] = useState({s: 200})
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="controlContainerComb">
|
|
|
+ <Timer seconds={seconds} />
|
|
|
+ <TimerControl setSeconds={setSeconds}/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const ControlContainer = () => {
|
|
|
+ const [secondsCont, setSecondsCont] = useState({s: 200})
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="controlContainerComb">
|
|
|
+ <TimerContainer seconds={secondsCont} refresh={500} render={LCD}/>
|
|
|
+ <TimerControl setSeconds={setSecondsCont}/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
function App() {
|
|
|
- const [seconds, setSeconds] = useState(200)
|
|
|
- const [secondsCont, setSecondsCont] = useState(200)
|
|
|
|
|
|
return (
|
|
|
<>
|
|
@@ -261,21 +279,18 @@ function App() {
|
|
|
|
|
|
<PasswordConfirm min={3} char={true} bigChar={true} number={true}/>
|
|
|
|
|
|
- <Timer seconds={seconds} />
|
|
|
- <TimerControl setSeconds={setSeconds}/>
|
|
|
|
|
|
+ <Control />
|
|
|
|
|
|
- <TimerContainer seconds={10} refresh={2000} render={SecondsTimer}/>
|
|
|
|
|
|
- <TimerContainer seconds={65} refresh={100} render={LCD}/>
|
|
|
+ <TimerContainer seconds={{s:10}} refresh={2000} render={SecondsTimer}/>
|
|
|
|
|
|
- <TimerContainer seconds={3660} refresh={1} render={Watch}/>
|
|
|
+ <TimerContainer seconds={{s:65}} refresh={100} render={LCD}/>
|
|
|
|
|
|
+ <TimerContainer seconds={{s:3660}} refresh={1} render={Watch}/>
|
|
|
|
|
|
- <div className="controlContainerComb">
|
|
|
- <TimerContainer seconds={secondsCont} refresh={500} render={LCD}/>
|
|
|
- <TimerControl setSeconds={setSecondsCont}/>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <ControlContainer />
|
|
|
|
|
|
</>
|
|
|
);
|