- graduation = 240
- num = 12

.clock
  .center
    - for i in (1..num) 
      .nums #{i}
    .graduation
      - for i in (1..graduation)
        .hold
          div class="ms-#{i}"
    .w-second
      .second
    .w-minute
      .minute
    .w-hour
      .hour

$graduation : 240
$elems-size: 40px
$elems: 12
$radius: 90px
$circ: 360deg
$rem-base: 16px
$part: $circ / $elems
$deg-graduation: 360 / $graduation * 1deg
$sec-needle : orange
$min-needle : white

= abs-center
  top: 50%
  left: 50%
  position: absolute

  
@function strip-unit($num)
  @return $num / ($num * 0 + 1)

@function convert-to-rem($value, $base-value: $rem-base)
  $value: strip-unit($value) / strip-unit($base-value) * 1rem
  @if $value == 0rem
    $value: 0
  @return $value

@function rem($values, $base-value: $rem-base)
  $max: length($values)
  @if $max == 1
    @return convert-to-rem(nth($values, 1), $base-value)
  $remValues: ()
  @for $i from 1 through $max
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value))
  @return $remValues

body
  background: black
  font-family: "San Francisco Display", "Helvetica Neue", Helvetica, Arial, sans-serif

.clock
  +abs-center
  transform: scale(1.6)
  
.center
  +abs-center 
  
.nums
  font-size: 2em
  color: gray
  position: absolute
  font-weight: 100
  transform: translate(-50%, -50%)
  line-height: $elems-size 
  @for $i from 0 through $elems
    $angle: $part * $i - $part * 3
    $top: sin($angle) * $radius
    $left: cos($angle) * $radius
    &:nth-child(#{$i})
      top: $top
      left: $left

.graduation
  position: relative
  .hold
    top: 0
    left: 0
    width: 0
    height: 0
    position: absolute
    &:nth-child(4n)
      [class*="ms-"]
        &:before
          background: rgba(white, .4)
    @for $i from 1 through $graduation
      &:nth-child(4n)
        [class*="ms-"]
          &:before
            height: rem(10)
      &:nth-child(20n)
        [class*="ms-"]
          &:before
            height: rem(15)
      
      .ms-#{$i}
        transform: rotateZ($deg-graduation) translateY(rem(130))
      $deg-graduation: $deg-graduation + 360 / $graduation * 1deg
      
    [class*="ms-"]
      &:before
        height: rem(6)
        width: rem(1)
        background: rgba(white, .25)
        border-radius: 99em
        position: absolute
        content: ''
        bottom: 0
    
.w-second, .w-minute, .w-hour
  height: 0
  width: 0
  position: relative
    
.w-second
  z-index: 9
  
.second
  +abs-center
  transform-origin: 0 0
  animation: tictac 60s linear infinite
  background: $sec-needle
  height: rem(6)
  width: rem(6)
  border-radius: 99em
  &:before
    content: ''
    +abs-center
    height: rem(130)
    width: $radius / 46
    background: $sec-needle
    transform: translate(-50%, -100%)
    box-shadow: 0 rem(15) 0 0 $sec-needle
  
.minute
  +abs-center
  transform-origin: 0 0
  animation: tictac 3600s linear infinite
  &:before
    content: ''
    +abs-center
    height: rem(60)
    width: $radius / 30
    background: $min-needle
    transform: translate(-50%, -100%)
  &:after
    position: absolute
    content: ''
    height: rem(90)
    width: rem(10)
    background: black
    transform: translate(-50%, -130%)
    border: rem(2) solid $min-needle
    border-radius: 99em

.hour
  +abs-center
  transform-origin: 0 0
  animation: tictac 43200s linear infinite
  background: $min-needle
  height: rem(10)
  width: rem(10)
  border-radius: 99em
  &:before
    content: ''
    +abs-center
    height: rem(60)
    width: $radius / 30
    background: $min-needle
    transform: translate(-50%, -100%)
  &:after
    position: absolute
    content: ''
    height: rem(50)
    width: rem(10)
    background: black
    transform: translate(0, -130%)
    border: rem(2) solid $min-needle
    border-radius: 99em
  
@keyframes tictac
  from
    transform: rotateZ(0deg) translate(-50%, -50%)
  to
    transform: rotateZ(360deg) translate(-50%, -50%)

d = new Date
h = d.getHours()
m = d.getMinutes()
s = d.getSeconds()
ct = (v) ->
  t = v * 360 / 60
  t
ctm = (v) ->
  t = v * 360 / 60 + 6 * ct(s) / 360 # 1min = 6 deg
  t
cth = (v) ->
  t = v * 360 / 12 + 30 * ct(m) / 360 # 1h = 30 deg
  t
setTime = ->
  $('.w-second').css 'transform', 'rotateZ(' + ct(s) + 'deg)'
  $('.w-minute').css 'transform', 'rotateZ(' + ctm(m) + 'deg)'
  $('.w-hour').css 'transform', 'rotateZ(' + cth(h) + 'deg)'
$(document).ready ->
  setTime()