Spaces:
Running
Running
Ctrl+K
create your touch typing game with a blank QWERTY keyboard and color-coded feedback: ```prompt Create a web-based touch typing game with these core features: 1. **Blank QWERTY Keyboard** - Render a standard QWERTY keyboard layout using CSS Grid - Absolutely NO labels/symbols on any keys - completely blank - Use 100% empty keycaps (no letters, numbers, or symbols) - Realistic key spacing and sizing matching physical keyboards 2. **Visual Feedback System** - When correct key pressed: highlight physical key position GREEN - When wrong key pressed: highlight pressed key position RED - Highlight duration: 300ms before fading to neutral state - Add smooth transition effect for color changes 3. **Game Interface** - Top section: • Target text (large font) • Progress bar below text - Center: Blank keyboard visualization - Bottom panel: • Timer (seconds with 2 decimals) • Error counter • Start/Restart button 4. **Core Game Logic** - Start button initializes game: • Random text selection from predefined array • Reset timer (00.00), errors (0), progress (0%) - Real-time typing detection: • Match physical key presses against target characters • Update progress bar percentage as user types - On completion: • Stop timer • Show modal with stats: time, errors, accuracy % • Enable restart button 5. **Technical Implementation** - Use this keyboard structure (no labels!): ```html <div class="keyboard"> <!-- Row 1 --> <div class="key" data-code="Backquote"></div> <div class="key" data-code="Digit1"></div> <!-- ... all keys ... --> <div class="key key-wide" data-code="Backspace"></div> <!-- Row 2 --> <div class="key key-wide" data-code="Tab"></div> <div class="key" data-code="KeyQ"></div> <!-- ... all keys ... --> <!-- Include all standard keys (Enter, Shift, Ctrl, Alt, Space, etc.) --> </div> ``` - Key data attributes should use KeyboardEvent.code values: • Letters: `KeyQ`, `KeyW`, `KeyE`... • Numbers: `Digit1`, `Digit2`... • Special: `Space`, `Enter`, `ShiftLeft`... - CSS requirements: ```css .keyboard { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; max-width: 900px; } .key { aspect-ratio: 1/0.8; background: #2c3e50; border-radius: 5px; transition: background 0.3s ease; } .key.correct { background: #2ecc71; } .key.incorrect { background: #e74c3c; } /* Special key sizing */ .key-wide { grid-column: span 1.5; } .key-extra-wide { grid-column: span 2; } .key-space { grid-column: span 6; } ``` - JavaScript requirements: ```javascript // Key mapping example const keyMap = { 'KeyQ': document.querySelector('[data-code="KeyQ"]'), 'KeyW': document.querySelector('[data-code="KeyW"]'), // ... all keys }; // Highlight function function highlightKey(code, isCorrect) { const key = keyMap[code]; key.classList.remove('correct', 'incorrect'); void key.offsetWidth; // Trigger reflow key.classList.add(isCorrect ? 'correct' : 'incorrect'); setTimeout(() => { key.classList.remove('correct', 'incorrect'); }, 300); } // In keydown handler: document.addEventListener('keydown', (e) => { if (e.code in keyMap) { const isCorrect = (e.key.toLowerCase() === currentText[currentIndex]); highlightKey(e.code, isCorrect); // ... rest of game logic } }); ``` 6. **Additional Requirements** - Responsive design (keyboard scales down on mobile) - Dark theme as default - Smooth animations for all transitions - Error prevention for repeated key presses - Backspace support for error correction - Case-insensitive comparison - Sample text array: ```javascript const texts = [ "The quick brown fox jumps over the lazy dog", "Programming is the process of creating instructions", "Mastering touch typing improves productivity", "Blank keyboards challenge muscle memory", "Practice makes perfect in any skill" ]; ``` Generate complete HTML/CSS/JS implementation in a single file. ``` This prompt includes: 1. Strict blank keyboard requirement (no visible labels) 2. Precise QWERTY physical layout 3. Color-coded feedback system (green/red highlights) 4. Game state management 5. KeyboardEvent.code based mapping 6. Responsive design considerations 7. Performance optimizations (reflow trigger for animations) 8. Complete CSS specifications 9. JS implementation details 10. Sample content The keyboard will appear completely blank while providing visual feedback through temporary color changes when keys are pressed, maintaining your core game mechanic while delivering polished UX. - Initial Deployment
093e1bd verified