Initial commit: Code Typing Practice

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user for security (and HF Spaces compatibility)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,81 @@
+import os
+import random
+from flask import Flask, render_template, jsonify
+
+app = Flask(__name__)
+
+# Sample Code Snippets (Python, JavaScript, Go, HTML/CSS)
+SNIPPETS = [
+    {
+        "language": "Python",
+        "code": """def fibonacci(n):
+    if n <= 1:
+        return n
+    else:
+        return fibonacci(n-1) + fibonacci(n-2)
+
+print([fibonacci(i) for i in range(10)])"""
+    },
+    {
+        "language": "JavaScript",
+        "code": """function debounce(func, wait) {
+  let timeout;
+  return function(...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}"""
+    },
+    {
+        "language": "Python",
+        "code": """class Node:
+    def __init__(self, data):
+        self.data = data
+        self.next = None
+
+class LinkedList:
+    def __init__(self):
+        self.head = None"""
+    },
+    {
+        "language": "Go",
+        "code": """package main
+
+import "fmt"
+
+func main() {
+    fmt.Println("Hello, World!")
+    messages := make(chan string)
+    go func() { messages <- "ping" }()
+    msg := <-messages
+    fmt.Println(msg)
+}"""
+    },
+    {
+        "language": "SQL",
+        "code": """SELECT users.name, COUNT(orders.id) as order_count
+FROM users
+LEFT JOIN orders ON users.id = orders.user_id
+GROUP BY users.id
+HAVING order_count > 5
+ORDER BY order_count DESC;"""
+    }
+]
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/snippet')
+def get_snippet():
+    snippet = random.choice(SNIPPETS)
+    return jsonify(snippet)
+
+@app.route('/health')
+def health():
+    return "OK", 200
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,2 @@
+flask==3.0.0
+gunicorn==21.2.0

static/script.js

@@ -0,0 +1,222 @@
+const codeDisplay = document.getElementById('code-display');
+const hiddenInput = document.getElementById('hidden-input');
+const wpmDisplay = document.getElementById('wpm');
+const accuracyDisplay = document.getElementById('accuracy');
+const progressDisplay = document.getElementById('progress');
+const langDisplay = document.getElementById('lang-display');
+const resultOverlay = document.getElementById('result-overlay');
+const finalWpmDisplay = document.getElementById('final-wpm');
+const finalAccuracyDisplay = document.getElementById('final-accuracy');
+const restartBtn = document.getElementById('restart-btn');
+
+let currentCode = "";
+let currentIndex = 0;
+let startTime = null;
+let timer = null;
+let mistakes = 0;
+let totalTyped = 0;
+let isFinished = false;
+
+// Initialize
+function init() {
+    fetchSnippet();
+    hiddenInput.focus();
+    // Keep focus on hidden input
+    document.addEventListener('click', () => {
+        if (!isFinished) hiddenInput.focus();
+    });
+}
+
+async function fetchSnippet() {
+    try {
+        const response = await fetch('/api/snippet');
+        const data = await response.json();
+        setupGame(data.code, data.language);
+    } catch (e) {
+        console.error("Failed to fetch snippet", e);
+        setupGame("print('Hello World')", "Python");
+    }
+}
+
+function setupGame(code, language) {
+    // Reset state
+    currentCode = code.replace(/\t/g, "    "); // Replace tabs with spaces
+    currentIndex = 0;
+    startTime = null;
+    mistakes = 0;
+    totalTyped = 0;
+    isFinished = false;
+    
+    if (timer) clearInterval(timer);
+    
+    // Update UI
+    langDisplay.textContent = language;
+    wpmDisplay.textContent = '0';
+    accuracyDisplay.textContent = '100%';
+    progressDisplay.textContent = '0%';
+    resultOverlay.classList.add('hidden');
+    
+    // Render Code
+    renderCode();
+    
+    hiddenInput.value = '';
+    hiddenInput.focus();
+}
+
+function renderCode() {
+    codeDisplay.innerHTML = '';
+    currentCode.split('').forEach((char, index) => {
+        const span = document.createElement('span');
+        span.innerText = char;
+        if (index === 0) span.classList.add('cursor');
+        
+        // Visual tweak for spaces/newlines
+        if (char === '\n') {
+            span.innerHTML = '↵\n';
+            span.classList.add('text-slate-700');
+        }
+        
+        codeDisplay.appendChild(span);
+    });
+}
+
+function startTimer() {
+    if (!startTime) {
+        startTime = new Date();
+        timer = setInterval(updateStats, 1000);
+    }
+}
+
+function updateStats() {
+    if (!startTime) return;
+    
+    const now = new Date();
+    const timeDiff = (now - startTime) / 1000 / 60; // in minutes
+    
+    if (timeDiff > 0) {
+        // WPM = (Characters / 5) / Minutes
+        const wpm = Math.round((currentIndex / 5) / timeDiff);
+        wpmDisplay.textContent = wpm;
+    }
+    
+    const accuracy = totalTyped === 0 ? 100 : Math.round(((totalTyped - mistakes) / totalTyped) * 100);
+    accuracyDisplay.textContent = accuracy + '%';
+    
+    const progress = Math.round((currentIndex / currentCode.length) * 100);
+    progressDisplay.textContent = progress + '%';
+}
+
+function finishGame() {
+    isFinished = true;
+    clearInterval(timer);
+    updateStats();
+    
+    finalWpmDisplay.textContent = wpmDisplay.textContent;
+    finalAccuracyDisplay.textContent = accuracyDisplay.textContent;
+    resultOverlay.classList.remove('hidden');
+    restartBtn.focus();
+}
+
+// Input Handling
+hiddenInput.addEventListener('input', (e) => {
+    if (isFinished) return;
+    
+    // We don't actually use the input value, we just catch the event
+    // But to support backspace on mobile properly, we might need more complex logic.
+    // For this desktop-first version, we'll listen to 'keydown' for control and just check logic here if needed.
+    // Actually, 'input' event is safer for mobile software keyboards.
+    
+    const inputChar = e.data;
+    
+    // Reset input to empty to avoid scrolling or overflow
+    // BUT, we need to handle the character. 
+    // This approach is tricky with 'input' event because 'data' can be null on some actions.
+    // Let's rely on keydown for desktop/precision, and input for backup?
+    // Let's stick to keydown for a "Pro" tool.
+});
+
+window.addEventListener('keydown', (e) => {
+    if (isFinished) {
+        if (e.key === 'Enter') {
+            init();
+        }
+        return;
+    }
+    
+    // Prevent default scrolling for Space
+    if (e.key === ' ' && e.target === document.body) {
+        e.preventDefault();
+    }
+    
+    if (e.key === 'Tab') {
+        e.preventDefault();
+        init(); // Quick restart
+        return;
+    }
+    
+    // Ignore non-character keys (Shift, Ctrl, etc.)
+    if (e.key.length > 1 && e.key !== 'Enter' && e.key !== 'Backspace') return;
+    
+    hiddenInput.focus();
+    startTimer();
+    
+    const charToType = currentCode[currentIndex];
+    const spans = codeDisplay.querySelectorAll('span');
+    
+    if (e.key === 'Backspace') {
+        // Optional: Allow going back? 
+        // For strict practice, maybe not. Or yes.
+        // Let's allow simple backspace.
+        if (currentIndex > 0) {
+            currentIndex--;
+            const span = spans[currentIndex];
+            span.className = ''; // Reset classes
+            span.classList.add('cursor'); // Move cursor back
+            
+            // Remove cursor from next char
+            if (currentIndex + 1 < spans.length) {
+                spans[currentIndex + 1].classList.remove('cursor');
+            }
+        }
+        return;
+    }
+    
+    let typedChar = e.key;
+    if (typedChar === 'Enter') typedChar = '\n';
+    
+    totalTyped++;
+    
+    const currentSpan = spans[currentIndex];
+    
+    if (typedChar === charToType) {
+        currentSpan.classList.add('text-emerald-400'); // Correct
+        currentSpan.classList.remove('text-red-500', 'bg-red-900/50', 'text-slate-500');
+        currentSpan.classList.remove('cursor');
+        
+        currentIndex++;
+        
+        if (currentIndex >= currentCode.length) {
+            finishGame();
+        } else {
+            spans[currentIndex].classList.add('cursor');
+            
+            // Auto-scroll if cursor is near bottom
+            const cursorRect = spans[currentIndex].getBoundingClientRect();
+            const containerRect = codeDisplay.parentElement.getBoundingClientRect();
+            if (cursorRect.bottom > containerRect.bottom - 40) {
+                codeDisplay.parentElement.scrollTop += 30; // Scroll down
+            }
+        }
+    } else {
+        mistakes++;
+        currentSpan.classList.add('text-red-500', 'bg-red-900/50'); // Incorrect
+        // We don't advance on mistake, user must type correct key
+        // Or should we?
+        // "Stop on error" is better for learning code.
+    }
+});
+
+restartBtn.addEventListener('click', init);
+
+// Start
+init();

templates/index.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>程序员代码打字练习 | Code Typing Practice</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Fira Code', monospace;
+        }
+        .cursor {
+            border-right: 2px solid #3b82f6;
+            animation: blink 1s step-end infinite;
+        }
+        @keyframes blink {
+            50% { border-color: transparent; }
+        }
+        /* Disable ligatures for clearer character distinction */
+        .no-ligatures {
+            font-variant-ligatures: none;
+        }
+    </style>
+</head>
+<body class="bg-slate-900 text-slate-200 min-h-screen flex flex-col items-center justify-center p-4">
+
+    <!-- Header -->
+    <header class="w-full max-w-4xl flex justify-between items-center mb-8">
+        <h1 class="text-2xl font-bold text-blue-400">Code Typing <span class="text-slate-500 text-sm">beta</span></h1>
+        <div class="flex gap-4 text-sm text-slate-400">
+            <div>语言: <span id="lang-display" class="text-yellow-400 font-bold">...</span></div>
+        </div>
+    </header>
+
+    <!-- Main Typing Area -->
+    <main class="w-full max-w-4xl relative bg-slate-800 rounded-lg shadow-2xl overflow-hidden border border-slate-700">
+        
+        <!-- Stats Bar -->
+        <div class="bg-slate-900/50 p-4 flex justify-around border-b border-slate-700">
+            <div class="text-center">
+                <div class="text-xs text-slate-500 uppercase tracking-wider">速度 (WPM)</div>
+                <div id="wpm" class="text-3xl font-bold text-emerald-400">0</div>
+            </div>
+            <div class="text-center">
+                <div class="text-xs text-slate-500 uppercase tracking-wider">准确率</div>
+                <div id="accuracy" class="text-3xl font-bold text-blue-400">100%</div>
+            </div>
+            <div class="text-center">
+                <div class="text-xs text-slate-500 uppercase tracking-wider">进度</div>
+                <div id="progress" class="text-3xl font-bold text-purple-400">0%</div>
+            </div>
+        </div>
+
+        <!-- Code Container -->
+        <div class="relative p-8 text-lg leading-relaxed overflow-hidden" style="min-height: 300px;">
+            <!-- Hidden Input for Mobile/IME support (though we focus on keydown) -->
+            <input type="text" id="hidden-input" class="absolute opacity-0 top-0 left-0 h-full w-full cursor-default" autocomplete="off" spellcheck="false">
+            
+            <!-- Code Display -->
+            <div id="code-display" class="whitespace-pre no-ligatures select-none" onclick="document.getElementById('hidden-input').focus()">
+                <!-- Characters will be injected here -->
+                <div class="flex items-center justify-center h-48 text-slate-500">加载中...</div>
+            </div>
+            
+            <!-- Result Overlay (Hidden by default) -->
+            <div id="result-overlay" class="absolute inset-0 bg-slate-900/90 flex flex-col items-center justify-center hidden z-10">
+                <h2 class="text-4xl font-bold text-white mb-4">练习完成!</h2>
+                <div class="flex gap-8 mb-8">
+                    <div class="text-center">
+                        <div class="text-sm text-slate-400">WPM</div>
+                        <div id="final-wpm" class="text-5xl font-bold text-emerald-400">0</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-sm text-slate-400">准确率</div>
+                        <div id="final-accuracy" class="text-5xl font-bold text-blue-400">0%</div>
+                    </div>
+                </div>
+                <div class="flex gap-4">
+                    <button id="restart-btn" class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-bold transition-colors">
+                        再练一次 (Enter)
+                    </button>
+                    <!-- Space for future sharing features -->
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="mt-8 text-slate-500 text-sm text-center">
+        <p>按 <kbd class="px-2 py-1 bg-slate-700 rounded text-slate-300 font-mono text-xs">Tab</kbd> 重置 | 缩进请用空格键 | 推荐使用 PC 端练习</p>
+    </footer>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>