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

pigpt-5.5 · 25 steps · 2m 13s · 6 filessession 4fb75059-97f@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 10 / 25

app.jschange 1/1

(function (global) {
  'use strict';
 
  function countCorrectChars(expected, typed) {
    let correct = 0;
    const len = Math.min(expected.length, typed.length);
    for (let i = 0; i < len; i += 1) {
      if (expected[i] === typed[i]) correct += 1;
    }
    return correct;
  }
 
  function calculateWpm(correctChars, elapsedSeconds) {
    if (!elapsedSeconds || elapsedSeconds <= 0) return 0;
    return Math.round((correctChars / 5) / (elapsedSeconds / 60));
  }
 
  function calculateAccuracy(correctChars, typedChars) {
    if (!typedChars || typedChars <= 0) return 100;
    return Math.round((correctChars / typedChars) * 100);
  }
 
  function analyzeTyping(expected, typed, elapsedSeconds) {
    const correctChars = countCorrectChars(expected, typed);
    return {
      correctChars,
      typedChars: typed.length,
      errors: Math.max(0, typed.length - correctChars),
      wpm: calculateWpm(correctChars, elapsedSeconds),
      accuracy: calculateAccuracy(correctChars, typed.length)
    };
  }
 
  const api = { countCorrectChars, calculateWpm, calculateAccuracy, analyzeTyping };
 
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = api;
  }
 
  if (typeof document === 'undefined') {
    return;
  }
 
  const WORD_LIST = global.WORDS || [];
  const els = {
    modeButtons: document.querySelectorAll('.mode-btn'),
    restart: document.getElementById('restart'),
    time: document.getElementById('time'),
    wpm: document.getElementById('wpm'),
    accuracy: document.getElementById('accuracy'),
    wordStream: document.getElementById('wordStream'),
    hiddenInput: document.getElementById('hiddenInput'),
    results: document.getElementById('results'),
    resultWpm: document.getElementById('resultWpm'),
    resultAccuracy: document.getElementById('resultAccuracy'),
    resultErrors: document.getElementById('resultErrors'),
    highScores: document.getElementById('highScores'),
    chart: document.getElementById('historyChart')
  };
 
  const state = {
    mode: 'timed',
    duration: 60,
    started: false,
    finished: false,
    startTime: 0,
    timerId: null,
    words: [],
    target: '',
    typed: ''
  };
 
  function randomWord() {
    return WORD_LIST[Math.floor(Math.random() * WORD_LIST.length)] || 'word';
  }
 
  function generateTarget(count) {
    state.words = Array.from({ length: count }, randomWord);
    state.target = state.words.join(' ');
  }
 
  function ensureTargetLength() {
    while (state.target.length - state.typed.length < 300) {
      state.words.push(randomWord());
      state.target = state.words.join(' ');
    }
  }
 
  function elapsedSeconds() {
    if (!state.started) return 0;
    return Math.max(0.001, (Date.now() - state.startTime) / 1000);
  }
 
  function currentStats() {
    return analyzeTyping(state.target.slice(0, state.typed.length), state.typed, elapsedSeconds());
  }
 
  function renderStream() {
    ensureTargetLength();
    const windowStart = Math.max(0, state.typed.length - 80);
    const windowEnd = Math.min(state.target.length, state.typed.length + 260);
    const frag = document.createDocumentFragment();
 
    for (let i = windowStart; i < windowEnd; i += 1) {
      const span = document.createElement('span');
      const expected = state.target[i];
      span.textContent = expected === ' ' ? '·' : expected;
      if (i < state.typed.length) {
        span.className = state.typed[i] === expected ? 'char correct' : 'char incorrect';
      } else if (i === state.typed.length) {
        span.className = 'char current';
      } else {
        span.className = 'char';
      }
      frag.appendChild(span);
    }
 
    els.wordStream.replaceChildren(frag);
  }
 
  function updateStats() {
    const remaining = state.mode === 'timed'
      ? Math.max(0, state.duration - Math.floor(elapsedSeconds()))
      : Math.floor(elapsedSeconds());
    const stats = currentStats();
    els.time.textContent = state.mode === 'timed' ? `${remaining}s` : `${remaining}s zen`;
    els.wpm.textContent = stats.wpm;
    els.accuracy.textContent = `${stats.accuracy}%`;
    if (state.mode === 'timed' && state.started && !state.finished && remaining <= 0) finishTest();
  }
 
  function tick() {
    updateStats();
  }
 
  function startTest() {
    if (state.started) return;
    state.started = true;
    state.startTime = Date.now();
    state.timerId = setInterval(tick, 250);
  }
 
  function finishTest() {
    if (state.finished) return;
    state.finished = true;
    clearInterval(state.timerId);
    els.hiddenInput.blur();
    const stats = currentStats();
    saveScore(stats);
    showResults(stats);
  }
 
  function saveScore(stats) {
    const scores = loadScores();
    scores.push({ mode: state.mode, wpm: stats.wpm, accuracy: stats.accuracy, errors: stats.errors, date: new Date().toISOString() });
    scores.sort((a, b) => b.wpm - a.wpm || b.accuracy - a.accuracy);
    localStorage.setItem('typingSpeedScores', JSON.stringify(scores.slice(0, 10)));
  }
 
  function loadScores() {
    try { return JSON.parse(localStorage.getItem('typingSpeedScores') || '[]'); }
    catch (_) { return []; }
  }
 
  function showResults(stats) {
    els.resultWpm.textContent = stats.wpm;
    els.resultAccuracy.textContent = `${stats.accuracy}%`;
    els.resultErrors.textContent = stats.errors;
    renderScores();
    renderChart();
    els.results.hidden = false;
  }
 
  function renderScores() {
    const scores = loadScores();
    els.highScores.innerHTML = scores.length ? '' : '<li>No scores yet</li>';
    scores.forEach((score) => {
      const li = document.createElement('li');
      li.textContent = `${score.wpm} WPM · ${score.accuracy}% · ${score.mode}`;
      els.highScores.appendChild(li);
    });
  }
 
  function renderChart() {
    const ctx = els.chart.getContext('2d');
    const scores = loadScores().slice().reverse();
    const w = els.chart.width;
    const h = els.chart.height;
    ctx.clearRect(0, 0, w, h);
    ctx.strokeStyle = '#27344a';
    ctx.lineWidth = 1;
    for (let y = 30; y < h; y += 30) {
      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
    }
    if (!scores.length) return;
    const max = Math.max(20, ...scores.map((s) => s.wpm));
    ctx.strokeStyle = '#7dd3fc';
    ctx.fillStyle = '#a7f3d0';
    ctx.lineWidth = 3;
    ctx.beginPath();
    scores.forEach((s, i) => {
      const x = scores.length === 1 ? w / 2 : 20 + (i * (w - 40)) / (scores.length - 1);
      const y = h - 20 - (s.wpm / max) * (h - 45);
      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
    });
    ctx.stroke();
    scores.forEach((s, i) => {
      const x = scores.length === 1 ? w / 2 : 20 + (i * (w - 40)) / (scores.length - 1);
      const y = h - 20 - (s.wpm / max) * (h - 45);
      ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI * 2); ctx.fill();
    });
  }
 
  function reset() {
    clearInterval(state.timerId);
    state.started = false;
    state.finished = false;
    state.startTime = 0;
    state.typed = '';
    els.hiddenInput.value = '';
    els.results.hidden = true;
    generateTarget(90);
    renderStream();
    updateStats();
    els.hiddenInput.focus();
  }
 
  els.hiddenInput.addEventListener('input', () => {
    if (state.finished) return;
    startTest();
    state.typed = els.hiddenInput.value;
    renderStream();
    updateStats();
  });
 
  document.querySelector('.typing-panel').addEventListener('click', () => els.hiddenInput.focus());
  els.restart.addEventListener('click', reset);
  els.modeButtons.forEach((btn) => {
    btn.addEventListener('click', () => {
      state.mode = btn.dataset.mode;
      els.modeButtons.forEach((b) => b.classList.toggle('active', b === btn));
      reset();
    });
  });
 
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') reset();
    if (event.key === 'Enter' && state.mode === 'zen' && state.started) finishTest();
  });
 
  reset();
  Object.assign(global, api);
})(typeof window !== 'undefined' ? window : globalThis);
 

254 linesjs

Writes index.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @agentsage-runs.

#css #gpt #gpt-5.5 #graphics #html #javascript #performance #pi #quick #testing #ui

c4-pi

← all sessions