Build a typing-speed test as a static web app in this directory: index.html, style.css,…

claude-codeclaude-fable-5 · 72 steps · 13m 06s · 7 filessession f0c9efc1-4df@agentsage-runs
Build a typing-speed test as a static web app in this directory: index.html, style.css, app.js, words.js. Random word streams, live WPM and accuracy, a 60-second timed mode and a zen mode, per-key error highlighting, results screen with WPM history chart on a canvas, high scores in localStorage, dark theme, and tests.html + tests.js exercising the WPM/accuracy math. Run the tests headless with node and fix what fails.
same matchclaude-code · 72 steps codex · 102 steps pi · 25 steps antigravity · 28 steps opencode · 28 steps
compare in arena
step 66 / 72
app.jschange 5/5
/* ------------------------------------------------------------------ */
/* Pure scoring math — shared with tests.js (node + browser).          */
/* ------------------------------------------------------------------ */
 
/** Net WPM: correctly-typed characters (incl. spaces) / 5 per minute. */
function computeWPM(correctChars, elapsedMs) {
  if (!elapsedMs || elapsedMs <= 0) return 0;
  return (correctChars / 5) / (elapsedMs / 60000);
}
 
/** Raw WPM: every typed character / 5 per minute, errors included. */
function computeRawWPM(typedChars, elapsedMs) {
  if (!elapsedMs || elapsedMs <= 0) return 0;
  return (typedChars / 5) / (elapsedMs / 60000);
}
 
/** Accuracy %: correct keystrokes over total keystrokes. 100 when idle. */
function computeAccuracy(correctKeystrokes, totalKeystrokes) {
  if (!totalKeystrokes || totalKeystrokes <= 0) return 100;
  return (computeClamp(correctKeystrokes, 0, totalKeystrokes) / totalKeystrokes) * 100;
}
 
function computeClamp(v, lo, hi) {
  return Math.min(hi, Math.max(lo, v));
}
 
/**
 * Characters that currently match their target, plus one credit for the
 * space after each committed word that was typed exactly right.
 * `typedWords` is one string per word; the last entry is still in progress.
 */
function countCorrectChars(targetWords, typedWords) {
  let correct = 0;
  for (let i = 0; i < typedWords.length; i++) {
    const target = targetWords[i] || '';
    const typed = typedWords[i] || '';
    const n = Math.min(target.length, typed.length);
    for (let j = 0; j < n; j++) {
      if (typed[j] === target[j]) correct++;
    }
    const committed = i < typedWords.length - 1;
    if (committed && typed === target) correct++;
  }
  return correct;
}
 
/** All typed characters plus one space per committed word. */
function countTypedChars(typedWords) {
  let total = 0;
  for (let i = 0; i < typedWords.length; i++) total += (typedWords[i] || '').length;
  return total + Math.max(0, typedWords.length - 1);
}
 
if (typeof module !== 'undefined' && module.exports) {
  module.exports = {
    computeWPM,
    computeRawWPM,
    computeAccuracy,
    countCorrectChars,
    countTypedChars,
  };
}
 
/* ------------------------------------------------------------------ */
/* Browser app                                                         */
/* ------------------------------------------------------------------ */
 
if (typeof document !== 'undefined') {
  (function initApp() {
    'use strict';
 
    const DURATION = 60; // seconds, timed mode
    const BATCH = 60; // words generated per refill
    const MAX_EXTRA = 8; // extra chars allowed past a word's end
    const LS_KEY = 'typetest.scores';
 
    const COLORS = {
      wpm: '#3987e5',
      raw: '#d95926',
      grid: '#2c2c2a',
      baseline: '#383835',
      muted: '#898781',
      ink: '#c3c2b7',
      crosshair: '#52514e',
    };
 
    const KEY_ROWS = [
      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'Backspace'],
      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
      ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
      [' '],
    ];
 
    const $ = (id) => document.getElementById(id);
    const wordsEl = $('words');
    const viewportEl = $('wordsViewport');
    const caretEl = $('caret');
    const keyboardEl = $('keyboard');
    const canvas = $('chart');
    const chartTip = $('chartTip');
 
    // app.js is also loaded by tests.html, which has none of these elements
    if (!wordsEl || !viewportEl || !keyboardEl || !canvas) return;
 
    let mode = 'timed'; // 'timed' | 'zen'
    let state = 'idle'; // 'idle' | 'running' | 'done'
    let targetWords = [];
    let typedWords = [''];
    let wordEls = [];
    let keystrokes = { total: 0, correct: 0 };
    let startTime = 0;
    let timerId = null;
    let samples = [];
    let lastSampleSec = 0;
    let chartSamples = [];
 
    /* ---------------- words rendering ---------------- */
 
    function buildWordEl(word) {
      const el = document.createElement('span');
      el.className = 'word';
      for (const ch of word) {
        const letter = document.createElement('span');
        letter.className = 'letter';
        letter.textContent = ch;
        el.appendChild(letter);
      }
      return el;
    }
 
    function appendWords(count) {
      const fresh = generateWords(count);
      for (const w of fresh) {
        targetWords.push(w);
        const el = buildWordEl(w);
        wordEls.push(el);
        wordsEl.appendChild(el);
      }
    }
 
    function ensureWords() {
      if (typedWords.length > targetWords.length - 30) appendWords(BATCH);
    }
 
    function updateWord(i) {
      const wordEl = wordEls[i];
      if (!wordEl) return;
      const target = targetWords[i];
      const typed = typedWords[i] !== undefined ? typedWords[i] : '';
      const isCurrent = i === typedWords.length - 1;
 
      wordEl.querySelectorAll('.letter.extra').forEach((el) => el.remove());
      const letters = wordEl.querySelectorAll('.letter');
      letters.forEach((el, j) => {
        el.className =
          'letter' +
          (j < typed.length ? (typed[j] === target[j] ? ' correct' : ' incorrect') : '');
      });
      for (let j = target.length; j < typed.length; j++) {
        const ex = document.createElement('span');
        ex.className = 'letter extra incorrect';
        ex.textContent = typed[j];
        wordEl.appendChild(ex);
      }
 
      const committed = i < typedWords.length - 1;
      wordEl.classList.toggle('current', isCurrent);
      wordEl.classList.toggle('flawed', committed && typed !== target);
    }
 
    function updateCaretAndScroll() {
      const i = typedWords.length - 1;
      const wordEl = wordEls[i];
      if (!wordEl) return;
 
      viewportEl.scrollTop = Math.max(
        0,
        wordEl.offsetTop - Math.floor(viewportEl.clientHeight / 3)
      );
 
      const letters = wordEl.querySelectorAll('.letter');
      const pos = (typedWords[i] || '').length;
      let refEl;
      let side;
      if (pos === 0) {
        refEl = letters[0];
        side = 'left';
      } else {
        refEl = letters[Math.min(pos, letters.length) - 1];
        side = 'right';
      }
      if (!refEl) return;
      const r = refEl.getBoundingClientRect();
      const vp = viewportEl.getBoundingClientRect();
      const x = (side === 'left' ? r.left : r.right) - vp.left;
      const y = r.top - vp.top;
      caretEl.style.height = r.height + 'px';
      caretEl.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
      caretEl.classList.remove('hidden');
    }
 
    /* ---------------- on-screen keyboard ---------------- */
 
    const keyEls = {};
 
    function buildKeyboard() {
      keyboardEl.innerHTML = '';
      for (const row of KEY_ROWS) {
        const rowEl = document.createElement('div');
        rowEl.className = 'key-row';
        for (const key of row) {
          const el = document.createElement('span');
          el.className = 'key';
          if (key === ' ') {
            el.classList.add('space');
            el.textContent = 'space';
          } else if (key === 'Backspace') {
            el.classList.add('wide');
            el.textContent = '⌫';
          } else {
            el.textContent = key;
          }
          keyEls[key] = el;
          rowEl.appendChild(el);
        }
        keyboardEl.appendChild(rowEl);
      }
    }
 
    function flashKey(key, ok) {
      const el = keyEls[key.length === 1 ? key.toLowerCase() : key] || keyEls[key];
      if (!el) return;
      el.classList.remove('hit', 'miss');
      void el.offsetWidth; // restart the flash animation
      el.classList.add(ok ? 'hit' : 'miss');
      if (!ok && key !== 'Backspace') el.classList.add('had-error');
    }
 
    function clearKeyErrors() {
      Object.values(keyEls).forEach((el) => el.classList.remove('hit', 'miss', 'had-error'));
    }
 
    /* ---------------- run lifecycle ---------------- */
 
    function restart() {
      clearInterval(timerId);
      timerId = null;
      state = 'idle';
      targetWords = [];
      typedWords = [''];
      wordEls = [];
      keystrokes = { total: 0, correct: 0 };
      samples = [];
      lastSampleSec = 0;
      wordsEl.innerHTML = '';
      appendWords(mode === 'timed' ? 120 : BATCH);
      clearKeyErrors();
      updateWord(0);
      viewportEl.scrollTop = 0;
      $('typingScreen').classList.remove('hidden');
      $('resultsScreen').classList.add('hidden');
      $('finishBtn').classList.add('hidden');
      updateLiveStats(0);
      updateCaretAndScroll();
    }
 
    function startRun() {
      state = 'running';
      startTime = performance.now();
      samples = [];
      lastSampleSec = 0;
      if (mode === 'zen') $('finishBtn').classList.remove('hidden');
      timerId = setInterval(tick, 100);
    }
 
    function tick() {
      const elapsed = performance.now() - startTime;
      if (mode === 'timed' && elapsed >= DURATION * 1000) {
        finish();
        return;
      }
      const sec = Math.floor(elapsed / 1000);
      if (sec >= 1 && sec > lastSampleSec) {
        lastSampleSec = sec;
        samples.push(sampleAt(sec * 1000));
      }
      updateLiveStats(elapsed);
    }
 
    function sampleAt(ms) {
      return {
        t: ms / 1000,
        wpm: computeWPM(countCorrectChars(targetWords, typedWords), ms),
        raw: computeRawWPM(countTypedChars(typedWords), ms),
      };
    }
 
    function finish() {
      clearInterval(timerId);
      timerId = null;
      state = 'done';
      const elapsedMs =
        mode === 'timed'
          ? DURATION * 1000
          : Math.max(1, performance.now() - startTime);
 
      const finalT = elapsedMs / 1000;
      if (!samples.length || finalT - samples[samples.length - 1].t >= 0.5) {
        samples.push(sampleAt(elapsedMs));
      }
 
      const correctChars = countCorrectChars(targetWords, typedWords);
      const result = {
        wpm: computeWPM(correctChars, elapsedMs),
        raw: computeRawWPM(countTypedChars(typedWords), elapsedMs),
        acc: computeAccuracy(keystrokes.correct, keystrokes.total),
        correctChars: correctChars,
        errors: keystrokes.total - keystrokes.correct,
        elapsedMs: elapsedMs,
        mode: mode,
        date: Date.now(),
      };
−      lastResult = result;
− 
      let scores = loadScores();
      if (keystrokes.total > 0) scores = saveScore(result);
      // show the screen before rendering so the canvas has a real size
      $('typingScreen').classList.add('hidden');
      $('resultsScreen').classList.remove('hidden');
      renderResults(result, scores);
    }
 
    /* ---------------- input handling ---------------- */
 
    function handleChar(c) {
      if (state === 'idle') startRun();
      if (state !== 'running') return;
      const i = typedWords.length - 1;
      const target = targetWords[i];
      const typed = typedWords[i];
 
      if (c === ' ') {
        if (typed.length === 0) return; // ignore leading spaces
        keystrokes.total++;
        const ok = typed === target;
        if (ok) keystrokes.correct++;
        flashKey(' ', ok);
        typedWords.push('');
        ensureWords();
        updateWord(i);
        updateWord(i + 1);
      } else {
        if (typed.length >= target.length + MAX_EXTRA) return;
        typedWords[i] = typed + c;
        keystrokes.total++;
        const ok = target[typed.length] === c;
        if (ok) keystrokes.correct++;
        flashKey(c, ok);
        updateWord(i);
      }
      updateCaretAndScroll();
      updateLiveStats();
    }
 
    function handleBackspace() {
      if (state !== 'running') return;
      const i = typedWords.length - 1;
      if (typedWords[i].length === 0) {
        if (typedWords.length === 1) return;
        typedWords.pop();
        updateWord(i); // former current word is now beyond the cursor
        updateWord(i - 1);
      } else {
        typedWords[i] = typedWords[i].slice(0, -1);
        updateWord(i);
      }
      flashKey('Backspace', true);
      updateCaretAndScroll();
      updateLiveStats();
    }
 
    document.addEventListener('keydown', (e) => {
      if (e.ctrlKey || e.metaKey || e.altKey) return;
      if (e.key === 'Tab') {
        e.preventDefault();
        restart();
        return;
      }
      if (e.key === 'Escape') {
        if (state === 'running' && mode === 'zen') finish();
        else restart();
        return;
      }
      if (state === 'done') {
        if (e.key === 'Enter') {
          e.preventDefault();
          restart();
        }
        return;
      }
      if (e.key === 'Backspace') {
        e.preventDefault();
        handleBackspace();
        return;
      }
      if (e.key.length !== 1) return;
      e.preventDefault();
      handleChar(e.key);
    });
 
    /* ---------------- live stats ---------------- */
 
    function formatClock(totalSeconds) {
      const s = Math.max(0, totalSeconds);
      const m = Math.floor(s / 60);
      const r = Math.floor(s % 60);
      return m + ':' + String(r).padStart(2, '0');
    }
 
    function updateLiveStats(elapsed) {
      if (elapsed === undefined) {
        elapsed = state === 'running' ? performance.now() - startTime : 0;
      }
      const correctChars =
        state === 'running' ? countCorrectChars(targetWords, typedWords) : 0;
      $('liveWpm').textContent = Math.round(computeWPM(correctChars, elapsed));
      $('liveAcc').textContent =
        Math.round(computeAccuracy(keystrokes.correct, keystrokes.total)) + '%';
      $('liveTimer').textContent =
        mode === 'timed'
          ? formatClock(Math.ceil(DURATION - elapsed / 1000))
          : formatClock(elapsed / 1000);
    }
 
    /* ---------------- scores (localStorage) ---------------- */
 
    function loadScores() {
      try {
        const raw = JSON.parse(localStorage.getItem(LS_KEY));
        return Array.isArray(raw) ? raw : [];
      } catch (_) {
        return [];
      }
    }
 
    function saveScore(result) {
      const scores = loadScores();
      scores.push({
        wpm: Math.round(result.wpm * 10) / 10,
        acc: Math.round(result.acc * 10) / 10,
        mode: result.mode,
        date: result.date,
      });
      scores.sort((a, b) => b.wpm - a.wpm);
      const trimmed = scores.slice(0, 20);
      try {
        localStorage.setItem(LS_KEY, JSON.stringify(trimmed));
      } catch (_) {
        /* storage full or blocked — scores just aren't persisted */
      }
      return trimmed;
    }
 
    /* ---------------- results screen ---------------- */
 
    function renderResults(result, scores) {
      $('resWpm').textContent = Math.round(result.wpm);
      $('resAcc').textContent = Math.round(result.acc) + '%';
      $('resRaw').textContent = Math.round(result.raw);
      $('resChars').textContent = result.correctChars;
      $('resErrors').textContent = result.errors;
      $('resTime').textContent = formatClock(result.elapsedMs / 1000);
      $('scoresMode').textContent = result.mode === 'timed' ? '60s' : 'zen';
 
      const list = $('scoresList');
      list.innerHTML = '';
      const top = scores.filter((s) => s.mode === result.mode).slice(0, 5);
      if (!top.length) {
        const li = document.createElement('li');
        li.className = 'empty';
        li.textContent = 'no scores yet';
        list.appendChild(li);
      }
      let marked = false;
      for (const s of top) {
        const li = document.createElement('li');
        const isMine =
          !marked && s.date === result.date && Math.abs(s.wpm - result.wpm) < 1;
        if (isMine) {
          li.className = 'mine';
          marked = true;
        }
        const left = document.createElement('span');
        left.textContent =
          Math.round(s.wpm) + ' wpm · ' + Math.round(s.acc) + '%';
        const right = document.createElement('span');
        right.className = 'score-date';
        right.textContent =
          (isMine ? 'this run · ' : '') + new Date(s.date).toLocaleDateString();
        li.appendChild(left);
        li.appendChild(right);
        list.appendChild(li);
      }
 
      chartSamples = samples.slice();
      const enough = chartSamples.length >= 2;
      canvas.classList.toggle('hidden', !enough);
      $('chartEmpty').classList.toggle('hidden', enough);
      if (enough) drawChart(-1);
    }
 
    /* ---------------- canvas chart ---------------- */
 
    function niceMax(v) {
      const steps = [10, 20, 30, 40, 60, 80, 100, 120, 150, 200, 250, 300];
      for (const s of steps) if (v <= s) return s;
      return Math.ceil(v / 50) * 50;
    }
 
    function chartGeometry() {
      const w = canvas.clientWidth;
      const h = canvas.clientHeight;
      const pad = { left: 44, right: 14, top: 14, bottom: 28 };
      const maxT = Math.max(chartSamples[chartSamples.length - 1].t, 5);
      const maxY = niceMax(
        chartSamples.reduce((m, s) => Math.max(m, s.raw, s.wpm), 0)
      );
      return {
        w: w,
        h: h,
        pad: pad,
        maxT: maxT,
        maxY: maxY,
        x: (t) => pad.left + (t / maxT) * (w - pad.left - pad.right),
        y: (v) => h - pad.bottom - (v / maxY) * (h - pad.top - pad.bottom),
      };
    }
 
    function drawChart(hoverIndex) {
      const dpr = window.devicePixelRatio || 1;
      const g = chartGeometry();
      canvas.width = Math.round(g.w * dpr);
      canvas.height = Math.round(g.h * dpr);
      const ctx = canvas.getContext('2d');
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, g.w, g.h);
      ctx.font = '12px system-ui, -apple-system, "Segoe UI", sans-serif';
 
      // horizontal gridlines + y labels
      const yTicks = 4;
      for (let i = 0; i <= yTicks; i++) {
        const v = (g.maxY / yTicks) * i;
        const y = g.y(v);
        ctx.strokeStyle = i === 0 ? COLORS.baseline : COLORS.grid;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(g.pad.left, y);
        ctx.lineTo(g.w - g.pad.right, y);
        ctx.stroke();
        ctx.fillStyle = COLORS.muted;
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText(String(Math.round(v)), g.pad.left - 8, y);
      }
 
      // x labels
      const xStep = g.maxT <= 30 ? 5 : g.maxT <= 90 ? 10 : 30;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'top';
      for (let t = 0; t <= g.maxT; t += xStep) {
        ctx.fillStyle = COLORS.muted;
        ctx.fillText(t + 's', g.x(t), g.h - g.pad.bottom + 8);
      }
 
      // crosshair under the lines
      if (hoverIndex >= 0) {
        const s = chartSamples[hoverIndex];
        ctx.strokeStyle = COLORS.crosshair;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(g.x(s.t), g.pad.top);
        ctx.lineTo(g.x(s.t), g.h - g.pad.bottom);
        ctx.stroke();
      }
 
      // series lines: raw first so net wpm sits on top
      drawLine(ctx, g, 'raw', COLORS.raw);
      drawLine(ctx, g, 'wpm', COLORS.wpm);
 
      // hover markers with a 2px surface ring
      if (hoverIndex >= 0) {
        const s = chartSamples[hoverIndex];
        for (const [key, color] of [['raw', COLORS.raw], ['wpm', COLORS.wpm]]) {
          ctx.beginPath();
          ctx.arc(g.x(s.t), g.y(s[key]), 4, 0, Math.PI * 2);
          ctx.fillStyle = color;
          ctx.fill();
          ctx.lineWidth = 2;
          ctx.strokeStyle = '#1a1a19';
          ctx.stroke();
        }
      }
    }
 
    function drawLine(ctx, g, key, color) {
      ctx.strokeStyle = color;
      ctx.lineWidth = 2;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.beginPath();
      chartSamples.forEach((s, i) => {
        const x = g.x(s.t);
        const y = g.y(s[key]);
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      });
      ctx.stroke();
    }
 
    canvas.addEventListener('mousemove', (e) => {
      if (chartSamples.length < 2) return;
      const rect = canvas.getBoundingClientRect();
      const g = chartGeometry();
      const mx = e.clientX - rect.left;
      let best = 0;
      let bestD = Infinity;
      chartSamples.forEach((s, i) => {
        const d = Math.abs(g.x(s.t) - mx);
        if (d < bestD) {
          bestD = d;
          best = i;
        }
      });
      drawChart(best);
      const s = chartSamples[best];
      chartTip.textContent =
        formatClock(s.t) + ' · ' + Math.round(s.wpm) + ' wpm · ' +
        Math.round(s.raw) + ' raw';
      chartTip.classList.remove('hidden');
      const tipX = Math.min(Math.max(g.x(s.t), 60), g.w - 80);
      chartTip.style.left = tipX + 'px';
    });
 
    canvas.addEventListener('mouseleave', () => {
      if (chartSamples.length < 2) return;
      chartTip.classList.add('hidden');
      drawChart(-1);
    });
 
    /* ---------------- controls ---------------- */
 
    function setMode(next, btn) {
      mode = next;
      $('modeTimed').classList.toggle('active', next === 'timed');
      $('modeZen').classList.toggle('active', next === 'zen');
      btn.blur();
      restart();
    }
 
    $('modeTimed').addEventListener('click', (e) => setMode('timed', e.currentTarget));
    $('modeZen').addEventListener('click', (e) => setMode('zen', e.currentTarget));
    $('restartBtn').addEventListener('click', (e) => {
      e.currentTarget.blur();
      restart();
    });
    $('againBtn').addEventListener('click', (e) => {
      e.currentTarget.blur();
      restart();
    });
    $('finishBtn').addEventListener('click', (e) => {
      e.currentTarget.blur();
      if (state === 'running') finish();
    });
 
    window.addEventListener('resize', () => {
      if (state !== 'done') updateCaretAndScroll();
      else if (chartSamples.length >= 2) drawChart(-1);
    });
 
    /* ---------------- boot ---------------- */
 
    buildKeyboard();
    restart();
  })();
}
 
684 linesjs
Edits …/app.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @agentsage-runs.
#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #medium #performance #skills #subagents #testing
c1-claude
← all sessions