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

antigravitygemini · 28 steps · 1m 03s · 6 filessession 2a71ee07-8a5@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 / 28
app.jschange 1/1
/**
 * PulseType - Typing Speed Test Engine & Math Library
 */
 
// Core Math Calculations
const TypingMath = {
    /**
     * Calculates Gross Words Per Minute (all typed characters / 5 per minute)
     * @param {number} totalTypedChars - Total characters typed including errors
     * @param {number} timeInSeconds - Duration in seconds
     * @returns {number} Gross WPM rounded to 2 decimals (or integer depending on display)
     */
    calculateGrossWPM(totalTypedChars, timeInSeconds) {
        if (!timeInSeconds || timeInSeconds <= 0 || !totalTypedChars || totalTypedChars < 0) return 0;
        const minutes = timeInSeconds / 60;
        const words = totalTypedChars / 5;
        const wpm = words / minutes;
        return Math.max(0, Math.round(wpm * 100) / 100);
    },
 
    /**
     * Calculates Net Words Per Minute (correct characters / 5 per minute)
     * @param {number} correctTypedChars - Correct characters typed
     * @param {number} timeInSeconds - Duration in seconds
     * @returns {number} Net WPM
     */
    calculateNetWPM(correctTypedChars, timeInSeconds) {
        if (!timeInSeconds || timeInSeconds <= 0 || !correctTypedChars || correctTypedChars < 0) return 0;
        const minutes = timeInSeconds / 60;
        const words = correctTypedChars / 5;
        const wpm = words / minutes;
        return Math.max(0, Math.round(wpm * 100) / 100);
    },
 
    /**
     * Calculates Accuracy percentage
     * @param {number} correctTypedChars - Number of correct characters
     * @param {number} totalTypedChars - Total characters typed
     * @returns {number} Accuracy percentage (0 - 100)
     */
    calculateAccuracy(correctTypedChars, totalTypedChars) {
        if (!totalTypedChars || totalTypedChars <= 0) return 100;
        if (!correctTypedChars || correctTypedChars < 0) return 0;
        if (correctTypedChars > totalTypedChars) return 100;
        const accuracy = (correctTypedChars / totalTypedChars) * 100;
        return Math.max(0, Math.min(100, Math.round(accuracy * 10) / 10));
    },
 
    /**
     * Calculates uncorrected error count
     * @param {number} totalTypedChars 
     * @param {number} correctTypedChars 
     * @returns {number}
     */
    calculateErrors(totalTypedChars, correctTypedChars) {
        if (!totalTypedChars || totalTypedChars <= 0) return 0;
        if (!correctTypedChars || correctTypedChars < 0) return totalTypedChars;
        return Math.max(0, totalTypedChars - correctTypedChars);
    },
 
    /**
     * Formats seconds into MM:SS format
     * @param {number} seconds 
     * @returns {string}
     */
    formatTime(seconds) {
        const secs = Math.max(0, Math.floor(seconds));
        const m = Math.floor(secs / 60);
        const s = secs % 60;
        return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    }
};
 
// State Object for Web App
class TypingTestApp {
    constructor() {
        this.mode = 'timed'; // 'timed' (60s) or 'zen'
        this.duration = 60;
        this.timeRemaining = 60;
        this.timeElapsed = 0;
        this.timerInterval = null;
        this.isRunning = false;
        this.isFinished = false;
 
        this.wordList = [];
        this.currentWordIndex = 0;
        this.currentInput = '';
        
        this.totalTypedChars = 0;
        this.correctTypedChars = 0;
        this.errorCount = 0;
 
        this.keyPresses = {}; // { 'a': 10 }
        this.keyErrors = {};  // { 'a': 2 }
 
        this.wpmHistory = []; // array of { second, netWpm, grossWpm, accuracy }
 
        this.storageKey = 'pulse_type_high_scores_v1';
        
        // Ensure browser execution before DOM initialization
        if (typeof window !== 'undefined' && typeof document !== 'undefined') {
            this.initDOM();
        }
    }
 
    initDOM() {
        this.elements = {
            wordStream: document.getElementById('word-stream'),
            hiddenInput: document.getElementById('hidden-input'),
            wpmDisplay: document.getElementById('wpm-display'),
            accuracyDisplay: document.getElementById('accuracy-display'),
            timerDisplay: document.getElementById('timer-display'),
            errorDisplay: document.getElementById('error-display'),
            modeTimedBtn: document.getElementById('mode-timed'),
            modeZenBtn: document.getElementById('mode-zen'),
            restartBtn: document.getElementById('restart-btn'),
            endZenBtn: document.getElementById('end-zen-btn'),
            resultsModal: document.getElementById('results-modal'),
            modalCloseBtn: document.getElementById('modal-close-btn'),
            modalRestartBtn: document.getElementById('modal-restart-btn'),
            canvas: document.getElementById('wpmChart'),
            finalWpm: document.getElementById('final-wpm'),
            finalAccuracy: document.getElementById('final-accuracy'),
            finalRawWpm: document.getElementById('final-raw-wpm'),
            finalChars: document.getElementById('final-chars'),
            finalErrors: document.getElementById('final-errors'),
            finalTime: document.getElementById('final-time'),
            highScoresList: document.getElementById('high-scores-list'),
            keyErrorList: document.getElementById('key-error-list'),
            keyboard: document.getElementById('virtual-keyboard')
        };
 
        this.bindEvents();
        this.resetTest();
        this.renderKeyboard();
    }
 
    bindEvents() {
        if (!this.elements.hiddenInput) return;
 
        // Focus hidden input on clicking anywhere in container or words box
        document.addEventListener('click', (e) => {
            if (!this.elements.resultsModal.classList.contains('active')) {
                this.elements.hiddenInput.focus();
            }
        });
 
        this.elements.hiddenInput.addEventListener('input', (e) => this.handleInput(e));
        
        this.elements.hiddenInput.addEventListener('keydown', (e) => {
            this.highlightVirtualKey(e.key, true);
            if (e.key === 'Backspace' && this.currentInput === '' && this.currentWordIndex > 0) {
                // Prevent going back to previous words for clean stream flow or allow fixing previous word if desired
                // In standard 60s stream, space moves forward
            }
        });
 
        this.elements.hiddenInput.addEventListener('keyup', (e) => {
            this.highlightVirtualKey(e.key, false);
        });
 
        this.elements.modeTimedBtn.addEventListener('click', () => this.setMode('timed'));
        this.elements.modeZenBtn.addEventListener('click', () => this.setMode('zen'));
        this.elements.restartBtn.addEventListener('click', () => this.resetTest());
        if (this.elements.endZenBtn) {
            this.elements.endZenBtn.addEventListener('click', () => this.finishTest());
        }
 
        this.elements.modalCloseBtn.addEventListener('click', () => this.closeResults());
        this.elements.modalRestartBtn.addEventListener('click', () => {
            this.closeResults();
            this.resetTest();
        });
 
        // Global hotkeys: Tab + Enter or Esc
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.elements.resultsModal.classList.contains('active')) {
                this.closeResults();
            }
            if (e.key === 'Tab') {
                e.preventDefault();
                this.resetTest();
            }
        });
    }
 
    setMode(mode) {
        if (this.mode === mode) return;
        this.mode = mode;
        this.elements.modeTimedBtn.classList.toggle('active', mode === 'timed');
        this.elements.modeZenBtn.classList.toggle('active', mode === 'zen');
        if (this.elements.endZenBtn) {
            this.elements.endZenBtn.style.display = mode === 'zen' ? 'inline-flex' : 'none';
        }
        this.resetTest();
    }
 
    resetTest() {
        clearInterval(this.timerInterval);
        this.timerInterval = null;
        this.isRunning = false;
        this.isFinished = false;
 
        this.timeRemaining = 60;
        this.timeElapsed = 0;
 
        this.currentWordIndex = 0;
        this.currentInput = '';
        this.totalTypedChars = 0;
        this.correctTypedChars = 0;
        this.errorCount = 0;
 
        this.keyPresses = {};
        this.keyErrors = {};
        this.wpmHistory = [];
 
        // Generate word list
        if (typeof getRandomWords === 'function') {
            this.wordList = getRandomWords(150);
        } else {
            this.wordList = ["the", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog"];
        }
 
        if (this.elements.hiddenInput) {
            this.elements.hiddenInput.value = '';
            this.elements.hiddenInput.focus();
        }
 
        this.updateStatsDisplay();
        this.renderWordStream();
        this.updateKeyboardErrorHighlights();
 
        if (this.elements.resultsModal) {
            this.elements.resultsModal.classList.remove('active');
        }
    }
 
    startTimer() {
        if (this.isRunning) return;
        this.isRunning = true;
        this.timeElapsed = 0;
        this.wpmHistory = [];
 
        // Record initial 0s point
        this.recordSnapshot();
 
        this.timerInterval = setInterval(() => {
            this.timeElapsed++;
 
            if (this.mode === 'timed') {
                this.timeRemaining--;
                if (this.timeRemaining <= 0) {
                    this.timeRemaining = 0;
                    this.finishTest();
                    return;
                }
            }
 
            this.recordSnapshot();
            this.updateStatsDisplay();
        }, 1000);
    }
 
    recordSnapshot() {
        const netWpm = TypingMath.calculateNetWPM(this.correctTypedChars, this.timeElapsed || 1);
        const grossWpm = TypingMath.calculateGrossWPM(this.totalTypedChars, this.timeElapsed || 1);
        const acc = TypingMath.calculateAccuracy(this.correctTypedChars, this.totalTypedChars);
        
        this.wpmHistory.push({
            second: this.timeElapsed,
            netWpm: netWpm,
            grossWpm: grossWpm,
            accuracy: acc
        });
    }
 
    handleInput(e) {
        if (this.isFinished) return;
 
        if (!this.isRunning) {
            this.startTimer();
        }
 
        const value = this.elements.hiddenInput.value;
        const targetWord = this.wordList[this.currentWordIndex] || '';
 
        // Detect typed character vs space
        if (value.endsWith(' ')) {
            // Space pressed - commit current word
            const typedWord = value.trim();
            this.evaluateWordCommit(typedWord, targetWord);
            this.currentWordIndex++;
            this.elements.hiddenInput.value = '';
            this.currentInput = '';
            
            // Refill words if getting near the end
            if (this.currentWordIndex >= this.wordList.length - 20) {
                if (typeof getRandomWords === 'function') {
                    this.wordList.push(...getRandomWords(50));
                }
            }
        } else {
            // Live typing inside word
            const prevLen = this.currentInput.length;
            const newLen = value.length;
            
            // Check if key typed (addition)
            if (newLen > prevLen) {
                const addedChar = value[newLen - 1];
                const expectedChar = targetWord[newLen - 1];
                const keyLower = addedChar.toLowerCase();
 
                this.keyPresses[keyLower] = (this.keyPresses[keyLower] || 0) + 1;
                
                if (expectedChar && addedChar !== expectedChar) {
                    this.keyErrors[keyLower] = (this.keyErrors[keyLower] || 0) + 1;
                    // Also track expected char error if applicable
                    const expLower = expectedChar.toLowerCase();
                    this.keyErrors[expLower] = (this.keyErrors[expLower] || 0) + 1;
                    this.errorCount++;
                }
            }
 
            this.currentInput = value;
            this.recalculateLiveChars();
        }
 
        this.renderWordStream();
        this.updateStatsDisplay();
        this.updateKeyboardErrorHighlights();
    }
 
    evaluateWordCommit(typedWord, targetWord) {
        // Space count counts as 1 correct char if word matched or completed
        this.totalTypedChars += typedWord.length + 1; // +1 for space
 
        let correctCharsInWord = 0;
        const minLen = Math.min(typedWord.length, targetWord.length);
        for (let i = 0; i < minLen; i++) {
            if (typedWord[i] === targetWord[i]) {
                correctCharsInWord++;
            }
        }
        
        // If word is completely matching, space adds to correct chars
        if (typedWord === targetWord) {
            correctCharsInWord += 1;
        }
 
        this.correctTypedChars += correctCharsInWord;
    }
 
    recalculateLiveChars() {
        // Calculate characters from past completed words + current word typed state
        let correctCount = 0;
        let totalCount = 0;
 
        // Sum past words
        // We already accumulate totalTypedChars and correctTypedChars when words are committed (space pressed).
    }
 
    getEffectiveCorrectChars() {
        let liveCorrect = this.correctTypedChars;
        let liveTotal = this.totalTypedChars;
 
        const targetWord = this.wordList[this.currentWordIndex] || '';
        const typed = this.currentInput;
 
        liveTotal += typed.length;
        for (let i = 0; i < typed.length; i++) {
            if (i < targetWord.length && typed[i] === targetWord[i]) {
                liveCorrect++;
            }
        }
 
        return { correct: liveCorrect, total: liveTotal };
    }
 
    updateStatsDisplay() {
        const { correct, total } = this.getEffectiveCorrectChars();
        const seconds = this.mode === 'timed' ? (60 - this.timeRemaining) : this.timeElapsed;
        const activeSeconds = Math.max(1, seconds);
 
        const netWpm = TypingMath.calculateNetWPM(correct, activeSeconds);
        const accuracy = TypingMath.calculateAccuracy(correct, total);
        const errors = TypingMath.calculateErrors(total, correct);
 
        if (this.elements.wpmDisplay) this.elements.wpmDisplay.textContent = Math.round(netWpm);
        if (this.elements.accuracyDisplay) this.elements.accuracyDisplay.textContent = `${Math.round(accuracy)}%`;
        if (this.elements.errorDisplay) this.elements.errorDisplay.textContent = errors;
 
        if (this.elements.timerDisplay) {
            if (this.mode === 'timed') {
                this.elements.timerDisplay.textContent = `${this.timeRemaining}s`;
            } else {
                this.elements.timerDisplay.textContent = TypingMath.formatTime(this.timeElapsed);
            }
        }
    }
 
    renderWordStream() {
        if (!this.elements.wordStream) return;
 
        const container = this.elements.wordStream;
        container.innerHTML = '';
 
        // Show window of words around current index (e.g. 30 words total)
        const startIndex = Math.max(0, this.currentWordIndex - 5);
        const endIndex = Math.min(this.wordList.length, startIndex + 35);
 
        for (let i = startIndex; i < endIndex; i++) {
            const wordStr = this.wordList[i];
            const wordSpan = document.createElement('span');
            wordSpan.className = 'word';
 
            if (i < this.currentWordIndex) {
                wordSpan.classList.add('completed');
            } else if (i === this.currentWordIndex) {
                wordSpan.classList.add('active');
                
                // Render letter by letter for current word
                const currentTyped = this.currentInput;
                const maxLen = Math.max(wordStr.length, currentTyped.length);
 
                for (let c = 0; c < maxLen; c++) {
                    const charSpan = document.createElement('span');
                    charSpan.className = 'char';
 
                    const expected = wordStr[c];
                    const typed = currentTyped[c];
 
                    if (c === currentTyped.length) {
                        charSpan.classList.add('cursor');
                    }
 
                    if (typed === undefined) {
                        // Untyped character
                        charSpan.textContent = expected;
                        charSpan.classList.add('untyped');
                    } else if (expected === undefined) {
                        // Extra typed character (overflow error)
                        charSpan.textContent = typed;
                        charSpan.classList.add('incorrect', 'extra');
                    } else if (typed === expected) {
                        charSpan.textContent = expected;
                        charSpan.classList.add('correct');
                    } else {
                        charSpan.textContent = expected;
                        charSpan.classList.add('incorrect');
                    }
 
                    wordSpan.appendChild(charSpan);
                }
 
                // If cursor is at the end of the word
                if (currentTyped.length >= maxLen) {
                    const cursorSpan = document.createElement('span');
                    cursorSpan.className = 'char cursor trailing';
                    cursorSpan.innerHTML = '&nbsp;';
                    wordSpan.appendChild(cursorSpan);
                }
 
            } else {
                // Upcoming word
                wordSpan.textContent = wordStr;
                wordSpan.classList.add('upcoming');
            }
 
            container.appendChild(wordSpan);
        }
 
        // Auto-scroll active word into view smoothly
        const activeElem = container.querySelector('.word.active');
        if (activeElem) {
            const containerRect = container.getBoundingClientRect();
            const activeRect = activeElem.getBoundingClientRect();
            if (activeRect.top < containerRect.top || activeRect.bottom > containerRect.bottom) {
                activeElem.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }
    }
 
    renderKeyboard() {
        if (!this.elements.keyboard) return;
 
        const rows = [
            ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
            ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
            ['z', 'x', 'c', 'v', 'b', 'n', 'm']
        ];
 
        this.elements.keyboard.innerHTML = '';
 
        rows.forEach((rowKeys, rowIndex) => {
            const rowDiv = document.createElement('div');
            rowDiv.className = `key-row row-${rowIndex}`;
 
            rowKeys.forEach(key => {
                const keyDiv = document.createElement('div');
                keyDiv.className = 'key';
                keyDiv.dataset.key = key;
                keyDiv.innerHTML = `<span class="key-label">${key.toUpperCase()}</span><span class="key-badge"></span>`;
                rowDiv.appendChild(keyDiv);
            });
 
            this.elements.keyboard.appendChild(rowDiv);
        });
 
        // Add spacebar row
        const spaceRow = document.createElement('div');
        spaceRow.className = 'key-row row-space';
        const spaceKey = document.createElement('div');
        spaceKey.className = 'key key-space';
        spaceKey.dataset.key = ' ';
        spaceKey.innerHTML = `<span class="key-label">SPACE</span>`;
        spaceRow.appendChild(spaceKey);
        this.elements.keyboard.appendChild(spaceRow);
    }
 
    highlightVirtualKey(key, isPressed) {
        if (!this.elements.keyboard) return;
        const keyLower = key.toLowerCase();
        const keyElem = this.elements.keyboard.querySelector(`.key[data-key="${keyLower}"]`);
        if (keyElem) {
            if (isPressed) {
                keyElem.classList.add('pressed');
            } else {
                keyElem.classList.remove('pressed');
            }
        }
    }
 
    updateKeyboardErrorHighlights() {
        if (!this.elements.keyboard) return;
 
        // Highlight keys based on error counts
        Object.keys(this.keyErrors).forEach(key => {
            const errCount = this.keyErrors[key] || 0;
            const keyElem = this.elements.keyboard.querySelector(`.key[data-key="${key}"]`);
            if (keyElem && errCount > 0) {
                keyElem.classList.add('has-error');
                const badge = keyElem.querySelector('.key-badge');
                if (badge) badge.textContent = errCount;
                
                // Color intensity depending on error count
                if (errCount >= 5) {
                    keyElem.setAttribute('data-error-level', 'high');
                } else if (errCount >= 2) {
                    keyElem.setAttribute('data-error-level', 'med');
                } else {
                    keyElem.setAttribute('data-error-level', 'low');
                }
            }
        });
    }
 
    finishTest() {
        if (this.isFinished) return;
        this.isFinished = true;
        this.isRunning = false;
        clearInterval(this.timerInterval);
 
        // Final snapshot
        this.recordSnapshot();
 
        const { correct, total } = this.getEffectiveCorrectChars();
        const seconds = Math.max(1, this.mode === 'timed' ? 60 : this.timeElapsed);
 
        const netWpm = TypingMath.calculateNetWPM(correct, seconds);
        const grossWpm = TypingMath.calculateGrossWPM(total, seconds);
        const accuracy = TypingMath.calculateAccuracy(correct, total);
        const errors = TypingMath.calculateErrors(total, correct);
 
        // Save High Score
        this.saveHighScore({
            date: new Date().toLocaleDateString(),
            mode: this.mode,
            wpm: Math.round(netWpm),
            accuracy: Math.round(accuracy),
            rawWpm: Math.round(grossWpm),
            duration: seconds
        });
 
        // Show Results Screen
        this.showResults({
            netWpm: Math.round(netWpm),
            grossWpm: Math.round(grossWpm),
            accuracy: Math.round(accuracy),
            correctChars: correct,
            totalChars: total,
            errors: errors,
            duration: seconds
        });
    }
 
    showResults(stats) {
        if (!this.elements.resultsModal) return;
 
        this.elements.finalWpm.textContent = stats.netWpm;
        this.elements.finalAccuracy.textContent = `${stats.accuracy}%`;
        this.elements.finalRawWpm.textContent = stats.grossWpm;
        this.elements.finalChars.textContent = `${stats.correctChars} / ${stats.totalChars}`;
        this.elements.finalErrors.textContent = stats.errors;
        this.elements.finalTime.textContent = TypingMath.formatTime(stats.duration);
 
        this.renderHighScores();
        this.renderKeyErrorSummary();
        this.renderCanvasChart();
 
        this.elements.resultsModal.classList.add('active');
    }
 
    closeResults() {
        if (this.elements.resultsModal) {
            this.elements.resultsModal.classList.remove('active');
        }
    }
 
    saveHighScore(scoreObj) {
        try {
            const raw = localStorage.getItem(this.storageKey);
            let scores = raw ? JSON.parse(raw) : [];
            scores.push(scoreObj);
            // Sort by WPM descending
            scores.sort((a, b) => b.wpm - a.wpm);
            scores = scores.slice(0, 10); // keep top 10
            localStorage.setItem(this.storageKey, JSON.stringify(scores));
        } catch (e) {
            console.error('Failed to save high score:', e);
        }
    }
 
    getHighScores() {
        try {
            const raw = localStorage.getItem(this.storageKey);
            return raw ? JSON.parse(raw) : [];
        } catch (e) {
            return [];
        }
    }
 
    renderHighScores() {
        if (!this.elements.highScoresList) return;
        const scores = this.getHighScores();
        this.elements.highScoresList.innerHTML = '';
 
        if (scores.length === 0) {
            this.elements.highScoresList.innerHTML = `<div class="empty-msg">No high scores yet!</div>`;
            return;
        }
 
        scores.forEach((s, rank) => {
            const item = document.createElement('div');
            item.className = 'score-item';
            item.innerHTML = `
                <span class="rank">#${rank + 1}</span>
                <span class="score-wpm">${s.wpm} WPM</span>
                <span class="score-acc">${s.accuracy}% ACC</span>
                <span class="score-mode">${s.mode} (${s.duration}s)</span>
                <span class="score-date">${s.date}</span>
            `;
            this.elements.highScoresList.appendChild(item);
        });
    }
 
    renderKeyErrorSummary() {
        if (!this.elements.keyErrorList) return;
        this.elements.keyErrorList.innerHTML = '';
 
        const errorEntries = Object.entries(this.keyErrors)
            .filter(([key, count]) => count > 0 && key !== ' ')
            .sort((a, b) => b[1] - a[1])
            .slice(0, 6);
 
        if (errorEntries.length === 0) {
            this.elements.keyErrorList.innerHTML = `<div class="perfect-msg">🎯 Flawless execution! No key errors.</div>`;
            return;
        }
 
        errorEntries.forEach(([key, count]) => {
            const badge = document.createElement('div');
            badge.className = 'error-badge';
            badge.innerHTML = `<span class="err-key">${key.toUpperCase()}</span><span class="err-count">${count} error${count > 1 ? 's' : ''}</span>`;
            this.elements.keyErrorList.appendChild(badge);
        });
    }
 
    renderCanvasChart() {
        const canvas = this.elements.canvas;
        if (!canvas) return;
 
        const ctx = canvas.getContext('2d');
        const dpr = window.devicePixelRatio || 1;
 
        // Resize canvas to match css container
        const rect = canvas.getBoundingClientRect();
        canvas.width = (rect.width || 600) * dpr;
        canvas.height = (rect.height || 220) * dpr;
        ctx.scale(dpr, dpr);
 
        const width = rect.width || 600;
        const height = rect.height || 220;
 
        ctx.clearRect(0, 0, width, height);
 
        const data = this.wpmHistory;
        if (data.length < 2) {
            ctx.fillStyle = '#8888b0';
            ctx.font = '14px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText('Not enough data points for graph', width / 2, height / 2);
            return;
        }
 
        const paddingLeft = 45;
        const paddingBottom = 35;
        const paddingTop = 25;
        const paddingRight = 20;
 
        const chartWidth = width - paddingLeft - paddingRight;
        const chartHeight = height - paddingTop - paddingBottom;
 
        // Max values
        let maxWpm = Math.max(...data.map(d => Math.max(d.netWpm, d.grossWpm)), 30);
        maxWpm = Math.ceil(maxWpm / 10) * 10; // Round up to nearest 10
 
        const maxSeconds = Math.max(...data.map(d => d.second), 1);
 
        // Draw horizontal grid lines & Y axis labels
        const gridCount = 5;
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
        ctx.fillStyle = '#8888b0';
        ctx.font = '11px sans-serif';
        ctx.textAlign = 'right';
 
        for (let i = 0; i <= gridCount; i++) {
            const val = Math.round((maxWpm / gridCount) * i);
            const y = height - paddingBottom - (i / gridCount) * chartHeight;
 
            ctx.beginPath();
            ctx.moveTo(paddingLeft, y);
            ctx.lineTo(width - paddingRight, y);
            ctx.stroke();
 
            ctx.fillText(`${val}`, paddingLeft - 8, y + 4);
        }
 
        // Draw X axis labels (Time in seconds)
        ctx.textAlign = 'center';
        const timeStep = Math.max(1, Math.floor(maxSeconds / 6));
        for (let s = 0; s <= maxSeconds; s += timeStep) {
            const x = paddingLeft + (s / maxSeconds) * chartWidth;
            ctx.fillText(`${s}s`, x, height - 10);
        }
 
        // Helper to get coordinates
        const getX = (second) => paddingLeft + (second / maxSeconds) * chartWidth;
        const getY = (wpm) => height - paddingBottom - (wpm / maxWpm) * chartHeight;
 
        // Draw Gross WPM line (Raw WPM) - dashed purple
        ctx.beginPath();
        ctx.strokeStyle = '#a855f7';
        ctx.lineWidth = 2;
        ctx.setLineDash([4, 4]);
        data.forEach((d, i) => {
            const x = getX(d.second);
            const y = getY(d.grossWpm);
            if (i === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        });
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash
 
        // Draw Net WPM gradient area & solid cyan line
        const gradient = ctx.createLinearGradient(0, paddingTop, 0, height - paddingBottom);
        gradient.addColorStop(0, 'rgba(6, 182, 212, 0.35)');
        gradient.addColorStop(1, 'rgba(6, 182, 212, 0.0)');
 
        ctx.beginPath();
        data.forEach((d, i) => {
            const x = getX(d.second);
            const y = getY(d.netWpm);
            if (i === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        });
        // Close area for fill
        const lastX = getX(data[data.length - 1].second);
        const firstX = getX(data[0].second);
        ctx.lineTo(lastX, height - paddingBottom);
        ctx.lineTo(firstX, height - paddingBottom);
        ctx.closePath();
        ctx.fillStyle = gradient;
        ctx.fill();
 
        // Draw Net WPM Line
        ctx.beginPath();
        ctx.strokeStyle = '#06b6d4';
        ctx.lineWidth = 3;
        data.forEach((d, i) => {
            const x = getX(d.second);
            const y = getY(d.netWpm);
            if (i === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        });
        ctx.stroke();
 
        // Draw data points for Net WPM
        data.forEach((d) => {
            const x = getX(d.second);
            const y = getY(d.netWpm);
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, Math.PI * 2);
            ctx.fillStyle = '#0e7490';
            ctx.fill();
            ctx.strokeStyle = '#38bdf8';
            ctx.lineWidth = 2;
            ctx.stroke();
        });
 
        // Legend
        const legendX = width - 180;
        const legendY = 15;
 
        // Net WPM legend item
        ctx.fillStyle = '#06b6d4';
        ctx.fillRect(legendX, legendY - 8, 12, 12);
        ctx.fillStyle = '#f8fafc';
        ctx.textAlign = 'left';
        ctx.fillText('Net WPM', legendX + 18, legendY);
 
        // Raw WPM legend item
        ctx.fillStyle = '#a855f7';
        ctx.fillRect(legendX + 85, legendY - 8, 12, 12);
        ctx.fillStyle = '#f8fafc';
        ctx.fillText('Raw WPM', legendX + 103, legendY);
    }
}
 
// Instantiate app in browser
if (typeof window !== 'undefined') {
    window.addEventListener('DOMContentLoaded', () => {
        window.pulseApp = new TypingTestApp();
    });
}
 
// Export for Node tests
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        TypingMath,
        TypingTestApp
    };
}
 
853 linesjs
Writes …/tests.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @agentsage-runs.
#antigravity #css #gemini #graphics #html #javascript #performance #quick #testing #ui
c5-agy
← all sessions