homework/js/21/myproject/src/App.test.js

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
// import { ClockFace } from './img'

// const MyDiv = () => {
//   return (
//     <div>
//       Привет-привет!
//       <input />
//     </div>
//   )
// }

const _ = React.createElement

const MyDiv = () => {
  return _('div', {}, "Testets", _('input'))
}

const TwoDivs = () =>
  <div>
    <MyDiv />
    <MyDiv />
  </div>

const Add = ({ a = 100, b = 1000 }) =>
  <div>
    a + b = {a} + {b} = {+a + +b}
  </div>

const BlockOfTextWithHeader = ({ children, title = 'No Title' }) =>
  <>
    <h2>{title}</h2>
    <p>
      {children}
    </p>
  </>


// const Timer = () => {
//   const [count, setCount] = useState(0)
//   useEffect(() => {
//     const int = setInterval(() => setCount(count => count + 1), 1000)
//     return () => clearInterval(int)
//   }, [])


//   return (
//     <div>
//       {count}
//     </div>
//   )
// }







const TextLength = ({ text }) => <h1>{text.length}</h1>

const Input = () => {
  const [text, setText] = useState('testtest')
  return (
    <div>
      <input value={text}
        onChange={e => setText(e.target.value.toUpperCase())} />
      <TextLength text={text} />
    </div>
  )
}




// Spoiler
const Spoiler = ({ header = "+", open, children }) => {
  const [isOpen, setIsOpen] = useState(open)
  // console.log(open)
  return (
    <div onClick={() => setIsOpen(!isOpen)}>
      {header}

      {isOpen && children}
    </div>
  )
}





// Timer
// const Timer = ({ ms }) => {
//   const [count, setCount] = useState(ms)
//   const [isRunning, setIsRunning] = useState(false)


//   // функция -перевод секунд в нормальный вид
//   function timerFormat(timestamp) {
//     const hours = Math.floor(timestamp / 60 / 60)
//     const minutes = Math.floor(timestamp / 60) - (hours * 60)
//     const seconds = timestamp % 60

//     const plusZero = (param) => (param > 10) ? param : '0' + param

//     return `${plusZero(hours)} : ${plusZero(minutes)} : ${plusZero(seconds)}`
//   }
//   console.log(count)

//   // таймер
//   useEffect(() => {
//     if (isRunning) {
//       const int = setInterval(() => {
//         setCount(count => {
//           if (count <= 0) {
//             setIsRunning(false)
//             return 0
//           }
//           return count - 1
//         })
//       }, 1000)
//       return () => clearInterval(int)
//     }
//   }, [isRunning])

//   // console.log(timerFormat(count))


//   return (
//     <div>
//       {timerFormat(count)}
//       <br />
//       <button onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Start'}</button>
//     </div >
//   )
// }





// TimerControl
const TimerControl = () => {
  const [hours, setHours] = useState('')
  const [minutes, setMinutes] = useState('')
  const [seconds, setSeconds] = useState('')

  // переводим время в секунды
  const ms = +hours * 60 * 60 + +minutes * 60 + +seconds

  const [count, setCount] = useState()
  const [isRunning, setIsRunning] = useState(false)

  useEffect(() => setCount(ms), [ms])

  // функция-перевод секунд в нормальный вид
  function timerFormat(time) {
    const h = Math.floor(time / 60 / 60)
    const m = Math.floor(time / 60) - (h * 60)
    const s = time % 60

    const defaultZero = (param) => (param > 9) ? param : '0' + param

    return `${defaultZero(h)} : ${defaultZero(m)} : ${defaultZero(s)}`
  }

  // таймер
  useEffect(() => {
    if (isRunning) {
      const int = setInterval(() => {
        setCount(count => {
          if (count <= 0) {
            setIsRunning(false)
            return 0
          }
          return count - 1
        })
      }, 1000)
      return () => clearInterval(int)
    }
  }, [isRunning])

  return (
    <div>
      {timerFormat(count)}
      <br />
      <input type='number' min='0' max='23' placeholder='00' onChange={e => setHours(e.target.value)}></input>
      <input type='number' min='0' max='59' placeholder='00' onChange={e => setMinutes(e.target.value)}></input>
      <input type='number' min='0' max='59' placeholder='00' onChange={e => setSeconds(e.target.value)}></input>
      <br />
      <button onClick={() => { setIsRunning(!isRunning) }}>{isRunning ? 'Pause' : 'Start'}</button>
    </div >
  )
}




// TimerContainer
const SecondsTimer = ({ seconds }) => <h1>{seconds}</h1>

// const TimerContainer = ({ seconds, refresh, render }) => {
//   const [count, setCount] = useState(seconds) // отслеживаем состояние количества секунд
//   const [isRunning, setIsRunning] = useState(true) // отслеживаем состояние кнопки стоп/старт для таймера
//   const Render = render

//   console.log('count ', count)

//   // Таймер
//   useEffect(() => { // эффект, отвечающий за то, когда счетчик прошле в 0, он его переводит в состояние паузы
//     if (count <= 0) {
//       setIsRunning(false)
//     }
//   }, [count <= 0])

//   useEffect(() => { // сам счетчик
//     if (isRunning) {
//       const start = performance.now()

//       const int = setInterval(() => {

//         const diff = Math.floor((performance.now() - start) / refresh)
//         setCount(count => count - diff)
//       }, refresh)

//       return () => clearInterval(int)
//     }
//   })

//   return (
//     <div>
//       <Render seconds={count} />
//       {/* <button onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Start'}</button> */}
//     </div >
//   )
// }


// LCD
// TimerContainer для LCD
const TimerContainer = ({ seconds, refresh, render }) => {
  const [count, setCount] = useState(seconds) // отслеживаем состояние количества секунд
  const [isRunning, setIsRunning] = useState(false) // отслеживаем состояние кнопки стоп/старт для таймера
  const Render = render

  console.log('count ', count)

  // Таймер
  useEffect(() => { // эффект, отвечающий за то, когда счетчик прошле в 0, он его переводит в состояние паузы
    if (count <= 0) {
      setIsRunning(false)
    }
  }, [count <= 0])

  useEffect(() => { // сам счетчик
    if (isRunning) {
      const start = performance.now()

      const int = setInterval(() => {

        const diff = Math.floor((performance.now() - start) / refresh)
        setCount(count => count - diff)
      }, refresh)

      return () => clearInterval(int)
    }
  })

  return (
    <div>
      <Render ms={count} />
      <button onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Start'}</button>
    </div >
  )
}

// Timer для LCD
const Timer = ({ ms }) => {

  // функция-перевод секунд в нормальный вид
  function timerFormat(time) {
    const h = Math.floor(time / 60 / 60)
    const m = Math.floor(time / 60) - (h * 60)
    const s = time % 60

    const defaultZero = (param) => (param > 9) ? param : '0' + param

    return `${defaultZero(h)} : ${defaultZero(m)} : ${defaultZero(s)}`
  }

  return (
    <div>
      {timerFormat(ms)}
    </div >
  )
}



// Watch
const Watch = ({ ms }) => {

  const h = Math.floor(ms / 60 / 60) * 30 // умножаем на 30, чтоы перевести число часов в градусы циферблата
  const m = (Math.floor(ms / 60) - (h * 60 / 30)) * 6 // умножаем на 6, чтоы перевести число минут в градусы циферблата
  const s = ms % 60 * 6 // умножаем на 6, чтоы перевести число секунд в градусы циферблата

  return (
    <div style={{ cssText: 'width: 500px; height: 500px' }}>
      {/* <img src={ClockFace} /> */}
      <img style={{ cssText: 'position:absolute' }} src='http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace.png'></img>
      <img style={{ cssText: `position: absolute; transform: rotate(${h}deg)` }} src='http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_H.png' />
      <img style={{ cssText: `position: absolute; transform: rotate(${m}deg)` }} src='http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_M.png' />
      <img style={{ cssText: `position: absolute; transform: rotate(${s}deg)` }} src='http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_S.png' />
    </div>
  )
}




// TimerControl + TimerContainer
{
  // TimerControl
  const TimerControl = () => {
    const [hours, setHours] = useState('')
    const [minutes, setMinutes] = useState('')
    const [seconds, setSeconds] = useState('')

    // переводим время в секунды
    const ms = +hours * 60 * 60 + +minutes * 60 + +seconds

    const [count, setCount] = useState()
    const [isRunning, setIsRunning] = useState(false)

    useEffect(() => setCount(ms), [ms])

    // функция-перевод секунд в нормальный вид
    function timerFormat(time) {
      const h = Math.floor(time / 60 / 60)
      const m = Math.floor(time / 60) - (h * 60)
      const s = time % 60

      const defaultZero = (param) => (param > 9) ? param : '0' + param

      return `${defaultZero(h)} : ${defaultZero(m)} : ${defaultZero(s)}`
    }

    // таймер
    useEffect(() => {
      if (isRunning) {
        const int = setInterval(() => {
          setCount(count => {
            if (count <= 0) {
              setIsRunning(false)
              return 0
            }
            return count - 1
          })
        }, 1000)
        return () => clearInterval(int)
      }
    }, [isRunning])

    return (
      <div>
        {timerFormat(count)}
        <br />
        <input type='number' min='0' max='23' placeholder='00' onChange={e => setHours(e.target.value)}></input>
        <input type='number' min='0' max='59' placeholder='00' onChange={e => setMinutes(e.target.value)}></input>
        <input type='number' min='0' max='59' placeholder='00' onChange={e => setSeconds(e.target.value)}></input>
        <br />
        <button onClick={() => { setIsRunning(!isRunning) }}>{isRunning ? 'Pause' : 'Start'}</button>
      </div >
    )
  }
}




function App() {
  return (
    <div className="App">
      <header className="App-header" style={{ cssText: "border-radius: 50px; color: #FF0FF; font-size: 2em" }}>

        {/* <Watch /> */}
        {/*20852 милисекунд - это 5 часов, 47 минут,32 секунды */}
        <TimerContainer seconds={20852} refresh={100} render={Watch} />
        <div>===============================================</div>

        {/* LCD */}
        <div>LCD</div>
        <TimerContainer seconds={1800} refresh={100} render={Timer} />

        <div>==============================================</div>

        {/* <SecondsTimer seconds={1302} /> */}
        {/* <TimerContainer seconds={100} refresh={100} render={SecondsTimer} /> */}

        <div>==============================================</div>


        {/* TimerControl */}
        <TimerControl />

        {/* Timer */}
        {/* <Timer ms={7205} /> */}


        <Spoiler header={<h1>Заголовок</h1>} open>
          Контент 1
          <p>
            лорем ипсум траливали и тп.
          </p>
        </Spoiler>
        <Spoiler>
          <h2>Контент 2</h2>
          <p>
            лорем ипсум траливали и тп.
          </p>
        </Spoiler>




        {/* <PasswordConfirm min={5} /> */}

        {/* <Input /> */}
        {/* 
        <RangeInput min={2} max={10} />
        <RangeInput /> */}



        <TwoDivs />
        <Add a="2" b="10" />
        <Add a="500" />
        <BlockOfTextWithHeader title="заголовок">
          lorem ipsum траливали
        </BlockOfTextWithHeader>
        <BlockOfTextWithHeader title="заголовок 2">
          lorem ipsum траливали 2
        </BlockOfTextWithHeader>

      </header>
    </div>
  );
}

export default App;