Typing chalenge

Type the displayed serie of characters to get a point

by fxi

HTML

<div id=dial>
  <span id=next>a</span>
  <span id=score>0</span>
  <div id=hand></div>
</div>

CSS

#dial {
  width: 300px;
  height: 300px;
  position: relative;
  background: #ccc;
  border-radius: 50%;
  overflow: hidden;
}

#next {
  position: absolute;
  font-size: 200px;
  text-align: center;
  height: 100%;
  width: 100%;
  background: none;
  color: #474747;
}

#score {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #474747;
}

#hand {
  width: 5px;
  height: 160px;
  background: #474747;
  position: absolute;
  top: 145px;
  left: 147.4px;
  transform-origin: 2.5px 2.5px;
  transform: rotate(-180deg);
  transition: transform 200ms cubic-bezier(0.57, 0.01, 0, 0.81);
}

JavaScript

const elHandle = document.getElementById('hand');
const elLetter = document.getElementById('next');
const elScore = document.getElementById('score');
let seq = "abcdefghijklmnopqrstuvwxyz".split("");
let pos = 0;
let offset = -180;
let r = 0;
let inc = 360 / 26;
let ok = false;
let score = 0;

window.addEventListener('keydown', update);


function update(e) {
  ok = seq.indexOf(e.key) === pos;
  if (ok) {
    pos++
  } else {
    pos--
  }
  if (pos >= seq.length) {
    score++
    pos = 0;
  }
  if (pos <= 0) {
    pos = 0;
  }

  console.log(pos, score);
  r = pos * inc + offset + (score * 360);
  elLetter.innerText = seq[pos];
  elScore.innerText = score;
  elHandle.style.transform = 'rotate(' + r + 'deg)';
}