//- Made for this challenge: https://www.youtube.com/watch?v=E4RyStef-gY
//- See the rest of the community clocks or submit your own here:
//- https://github.com/CodingTrain/Rainbow-Code/blob/master/CodingChallenges/CC_74_Clock/README.md

@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT');

html,
body {
  font-family: 'Old Standard TT', serif;
  background-color: hsl(0, 0%, 12%);
  margin: 0;
  font-size: 0;
  color: hsl(0, 0%, 100%);
  text-align: center;
  overflow: hidden;
}

#clock {
  font-size: 24px;
  width: 350px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -175px;
  margin-top: -175px;
}

.digit-group {
  display: inline-block;
  height: 350px;
  &:not(:last-child) {
    &:after {
      content: ':';
      font-size: 72px;
    }
  }
}
.digit {
  display: inline-block;
  width: 50px;
  height: 350px;
  
  .digit-number {
    color: hsla(0, 0%, 100%, 0.1);
    transform: rotate(-90deg);
    transition: font-size 200ms, transform 350ms, color 150ms;
    &.highlight {
      color: inherit;
      font-size: 72px;
      transform: rotate(0deg);
    }
  }
}

let _timeElement10Digits = Array.from(Array(10)).map((n, i) => i);
let _timeElement6Digits = _timeElement10Digits.slice(0, 6);
let _timeElement3Digits = _timeElement10Digits.slice(0, 3);
let _timeElementStructure = [
    [ _timeElement3Digits, _timeElement10Digits ],
    [ _timeElement6Digits, _timeElement10Digits ],
    [ _timeElement6Digits, _timeElement10Digits ]
  ];

let clock = document.createElement('div');
clock.id = 'clock';
document.body.appendChild(clock);
let digitGroups = [];
requestAnimationFrame(update);

_timeElementStructure.forEach(digits => {
  let digitGroup = document.createElement('div');
  digitGroup.classList.add('digit-group');
  clock.appendChild(digitGroup);
  digitGroups.push(digitGroup);
  digits.forEach(digitList => {
    let digit = document.createElement('div');
    digit.classList.add('digit');
    digitList.forEach(n => {
      let ele = document.createElement('div');
      ele.classList.add('digit-number');
      ele.innerText = n;
      digit.appendChild(ele);
    });
    digitGroup.appendChild(digit);
  });
});

function update() {
  requestAnimationFrame(update);
  let date = new Date();
  let time = [ date.getHours(), date.getMinutes(), date.getSeconds() ]
    .map(n => `0${n}`.slice(-2).split('').map(e => +e))
    .reduce((p, n) => p.concat(n), []);
  time.forEach((n, i) => {
    let digit = digitGroups[Math.floor(i * 0.5)].children[i % 2].children;
    Array.from(digit).forEach((e, i2) => e.classList[i2 === n ? 'add' : 'remove']('highlight'));
  });
}