#app

*
  box-sizing border-box

body
  min-height 100vh
  background linear-gradient(45deg, hsl(0, 0%, 15%), hsl(0, 0%, 70%))

#app
  display flex
  flex-direction column
  align-items center
  justify-content center
  min-height 100vh
  font-size 2rem
  font-family sans-serif

  & > div
    background repeating-linear-gradient(30deg, var(--strapColor) 0, var(--strapColor) 5px, transparent 5px, transparent 10px) 5px 0 / 90% 100% no-repeat,
      repeating-linear-gradient(-30deg, transparent 0, transparent 5px, var(--strapColor) 5px, var(--strapColor) 10px) 5px 0 / 90% 100% no-repeat, var(--strapBg)
    &:nth-of-type(1)
      --strapColor rgba(165, 55, 253, .25)
      --strapBg rgba(190, 144, 212,1)
    &:nth-of-type(2)
      --strapColor rgba(41, 241, 195, .25)
      --strapBg #29c3b9
    &:nth-of-type(3)
      --strapColor rgba(89, 171, 227, .25)
      --strapBg rgba(129, 207, 224, 1)
    &:nth-of-type(4)
      --strapColor rgba(246, 36, 89, .25)
      --strapBg rgba(226, 106, 106, 1)
    &:nth-of-type(5)
      --strapColor rgba(245, 229, 27, .25)
      --strapBg rgba(254, 241, 96, 1)

const {
  React,
  React: { useEffect, useState },
  ReactDOM: { render },
  moment,
  styled,
} = window
const ROOT = document.querySelector('#app')

const clip =
  'polygon(0 5%, 5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%)'

const Strap = styled.div`
  clip-path: ${clip};
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 100px;
`

const Bezel = styled.div`
  background: silver;
  height: 60%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  clip-path: ${clip};
  width: 102%;
`
const Screen = styled.div`
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  width: 90%;
  background: #000;
  color: #fff;
`

const Face = styled.div`
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`

const Value = styled.div`
  font-size: ${p => (p.small ? 2 : 3)}rem;
  line-height: ${p => (p.small ? 2 : 3)}rem;
  text-transform: uppercase;
  text-align: center;
  opacity: ${p => (p.opaque ? 0.5 : 1)};
`

const Watch = () => {
  const [date, setDate] = useState(moment())
  useEffect(() => {
    const TICK = setInterval(() => setDate(moment()), 1000)
    return () => {
      clearInterval(TICK)
    }
  }, [])
  return (
    <Strap>
      <Bezel>
        <Screen>
          <Face>
            <Value>{date.format('HH')}</Value>
            <Value>{date.format('mm')}</Value>
          </Face>
        </Screen>
      </Bezel>
    </Strap>
  )
}

render(<Watch />, ROOT)