.art
  - var d = 0;
    while d < 4
      .digit
        - var c = 0;
        while c < 6
          svg(class=`clock clock--${d * 6 + c}` width="100" height="100" viewBox="0 0 100 100")
            path(class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd")
            path(class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd")
          - c++
        - d++
.text        
  h1 Clock Clock 24
  p
    small Code
    br
    a(href="https://manu.ninja/") Manuel Wieser
  p
    small Design
    br
    a(href="http://www.humanssince1982.com/") Humans since 1982
.trigger.trigger--left
.trigger.trigger--right

html {
  width: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
  font-family: 'Source Sans Pro', sans-serif;
  color: #4a4a4a;
  
  cursor: default;
}

.art {
  cursor: zoom-in;
  margin: 5vw 0;
}

.art--full {
  cursor: zoom-out;
}

.text {
  margin-bottom: 5vw;
  text-align: center;
}

a {
  color: lighten(#4a4a4a, 25%);
  text-decoration: none;
}

.digit {
  float: left;
}

.clock {
  --small-hand: -135deg;
  --large-hand: -45deg;
  
  margin: .3vw; // 3px
  width: 10vw;
  height: 10vw;
  
  border-radius: 50%;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
  
  float: left;
  &:nth-of-type(2n+1) {
    clear: left;
  }
}

.clock-smallHand,
.clock-largeHand {
  transform-origin: 50px center;
  transition: transform 10s;
}

.clock-smallHand {
  transform: rotateZ(var(--small-hand));
}

.clock-largeHand {
  transform: rotateZ(var(--large-hand));
}

.s-hidden {
  display: none;
}

.trigger {
  position: fixed;
  bottom: 0;
  width: 25%;
  height: 5vw;
  cursor: help;
}

.trigger--left {
  left: 0;
}

.trigger--right {
  right: 0;
}

const digits = [
  [    // 0
    { hour: 6, minute: 15 },
    { hour: 9, minute: 30 },
    { hour: 6, minute: 0 },
    { hour: 0, minute: 30 },
    { hour: 3, minute: 0 },
    { hour: 0, minute: 45 }
  ], [ // 1
    { hour: 7.5, minute: 37.5 },
    { hour: 6, minute: 30 },
    { hour: 7.5, minute: 37.5 },
    { hour: 6, minute: 0 },
    { hour: 7.5, minute: 37.5 },
    { hour: 0, minute: 0 }
  ], [ // 2
    { hour: 3, minute: 15 },
    { hour: 9, minute: 30 },
    { hour: 6, minute: 15 },
    { hour: 0, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 9, minute: 45 }
  ], [ // 3
    { hour: 3, minute: 15 },
    { hour: 9, minute: 30 },
    { hour: 3, minute: 15 },
    { hour: 9, minute: 0 },
    { hour: 3, minute: 15 },
    { hour: 9, minute: 0 }
  ], [ // 4
    { hour: 6, minute: 30 },
    { hour: 6, minute: 30 },
    { hour: 0, minute: 15 },
    { hour: 6, minute: 0 },
    { hour: 7.5, minute: 37.5 },
    { hour: 0, minute: 0 }
  ], [ // 5
    { hour: 6, minute: 15 },
    { hour: 9, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 6, minute: 45 },
    { hour: 3, minute: 15 },
    { hour: 0, minute: 45 }
  ], [ // 6
    { hour: 6, minute: 15 },
    { hour: 9, minute: 45 },
    { hour: 6, minute: 0 },
    { hour: 6, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 0, minute: 45 }
  ], [ // 7
    { hour: 3, minute: 15 },
    { hour: 6, minute: 45 },
    { hour: 7.5, minute: 37.5 },
    { hour: 6, minute: 0 },
    { hour: 7.5, minute: 37.5 },
    { hour: 0, minute: 0 }
  ], [ // 8
    { hour: 6, minute: 15 },
    { hour: 6, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 0, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 0, minute: 45 }
  ], [ // 9
    { hour: 6, minute: 15 },
    { hour: 6, minute: 45 },
    { hour: 3, minute: 0 },
    { hour: 6, minute: 0 },
    { hour: 3, minute: 15 },
    { hour: 0, minute: 45 }
  ]
];

const happyDigit = Array(6).fill({ hour: 22.5, minute: 7.5 });
const neutralDigit = Array(6).fill({ hour: 7.5, minute: 7.5 });

function showSpecialState(digit) {
  stopClock();
  for (let x = 0; x < 4; x++) {
    setDigit(x, digit);
  }
  window.setTimeout(() => startClock(), 10000);
}

document.querySelector('.trigger--left').addEventListener('click', e => {
  showSpecialState(happyDigit);
});

document.querySelector('.trigger--right').addEventListener('click', e => {
  showSpecialState(neutralDigit);
});

window.addEventListener('keydown', e => {
  const h = 72;
  const n = 78;
  if (h === e.keyCode) {
    showSpecialState(happyDigit);  
  } 
  if (n === e.keyCode) {
    showSpecialState(neutralDigit);  
  }
});

document.querySelector('.art').addEventListener('click', e => {
  document.querySelector('.text').classList.toggle('s-hidden');
  document.querySelector('.art').classList.toggle('art--full');
})

function hourToDegrees(hour) {
  return hour * (360 / 12) - 90;
}

function minuteToDegrees(minute) {
  return minute * (360 / 60) - 90;
}

function setHands(id, hour, minute) {
  const clock = document.querySelector(`.clock--${id}`);
  clock.style.setProperty(`--small-hand`, `${hourToDegrees(hour) + 360}deg`);
  clock.style.setProperty(`--large-hand`, `${minuteToDegrees(minute) - 360}deg`);
}

function setDigit(id, values) {
  for (let x = 0; x < 6; x++) {
    setHands(id * 6 + x, values[x].hour, values[x].minute);
  }
}

function setTime(time) {
  setDigit(0, digits[time.charAt(0)]);
  setDigit(1, digits[time.charAt(1)]);
  setDigit(2, digits[time.charAt(3)]);
  setDigit(3, digits[time.charAt(4)]);
}

let state;
let interval;

function startClock() {
  state = '----';
  interval = window.setInterval(() => {
    const time = new Date(Date.now() + 10000).toTimeString();
    if (time !== state) {
      setTime(time);
      state = time;
    }
  }, 1000);
}

function stopClock() {
  clearInterval(interval);
}

startClock();