index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://typingmaster.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Typing Master: Race & Learn
+ style.css
+ header
+ class hero
+ nav
+ div Typing Master
+ class logo
+ div
+ class nav-links
+ a Home
+ href #
+ a Racing Game
+ href #racing
+ a Mini-Games
+ href #mini-games
+ a Leaderboard
+ href #leaderboard
+ a Profile
+ class cta-button
+ href #profile
+ div
+ class hero-content
+ h1 Typing Master: Race & Learn
+ p Improve your typing skills with fun and engaging games!
+ a Start Racing
+ class primary-button
+ href #racing
+ main
+ section
+ id racing
+ class racing-game
+ h2 Racing Game
+ div
+ class race-track
+ div
+ class player-car
+ id player-car
+ div
+ class ai-car
+ id ai-car-1
+ div
+ class ai-car
+ id ai-car-2
+ div
+ class ai-car
+ id ai-car-3
+ div
+ class typing-area
+ div
+ class text-display
+ id text-display
+ input
+ class typing-input
+ id typing-input
+ type text
+ autofocus
+ div
+ class stats
+ div
+ class wpm
+ id wpm
+ div
+ class accuracy
+ id accuracy
+ div
+ class xp
+ id xp
+ section
+ id mini-games
+ class mini-games
+ h2 Mini-Games
+ div
+ class game-grid
+ div
+ class game-card
+ div Word Shooter
+ class game-icon
+ p Type words to shoot them!
+ a Play
+ class game-button
+ href #word-shooter
+ div
+ class game-card
+ div Letter Cascade
+ class game-icon
+ p Type letters before they fall!
+ a Play
+ class game-button
+ href #letter-cascade
+ div
+ class game-card
+ div Rhythm Typer
+ class game-icon
+ p Type in sync with the beat!
+ a Play
+ class game-button
+ href #rhythm-typer
+ div
+ class game-card
+ div Word Builder
+ class game-icon
+ p Build words from random letters!
+ a Play
+ class game-button
+ href #word-builder
+ div
+ class game-card
+ div Error Crusher
+ class game-icon
+ p Focus on your most frequent errors!
+ a Play
+ class game-button
+ href #error-crusher
+ section
+ id leaderboard
+ class leaderboard
+ h2 Leaderboard
+ div
+ class leaderboard-grid
+ div
+ class leaderboard-card
+ div Rank
+ class leaderboard-header
+ div Name
+ class leaderboard-header
+ div WPM
+ class leaderboard-header
+ div Level
+ class leaderboard-header
+ div
+ class leaderboard-card
+ div 1
+ class leaderboard-rank
+ div Player1
+ class leaderboard-name
+ div 120
+ class leaderboard-wpm
+ div 10
+ class leaderboard-level
+ div
+ class leaderboard-card
+ div 2
+ class leaderboard-rank
+ div Player2
+ class leaderboard-name
+ div 110
+ class leaderboard-wpm
+ div 9
+ class leaderboard-level
+ div
+ class leaderboard-card
+ div 3
+ class leaderboard-rank
+ div Player3
+ class leaderboard-name
+ div 100
+ class leaderboard-wpm
+ div 8
+ class leaderboard-level
+ section
+ id profile
+ class profile
+ h2 Profile
+ div
+ class profile-grid
+ div
+ class profile-card
+ div Username
+ class profile-header
+ div Level
+ class profile-header
+ div XP
+ class profile-header
+ div WPM
+ class profile-header
+ div
+ class profile-card
+ div Player1
+ class profile-username
+ div 10
+ class profile-level
+ div 1000
+ class profile-xp
+ div 120
+ class profile-wpm
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href #
+ a Community
+ href #
+ a Blog
+ href #
+ p Started by Typing Master Team. Evolved by a community.
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "d9637e1a-c4f3-49d6-8a2f-e708e8af0723",
+ "object": "chat.completion",
+ "created": 1742048350,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\ntypingmaster.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://typingmaster.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Typing Master: Race & Learn\nstyle.css\nheader\n class hero\n nav\n div Typing Master\n class logo\n div\n class nav-links\n a Home\n href #\n a Racing Game\n href #racing\n a Mini-Games\n href #mini-games\n a Leaderboard\n href #leaderboard\n a Profile\n class cta-button\n href #profile\n div\n class hero-content\n h1 Typing Master: Race & Learn\n p Improve your typing skills with fun and engaging games!\n a Start Racing\n class primary-button\n href #racing\nmain\n section\n id racing\n class racing-game\n h2 Racing Game\n div\n class race-track\n div\n class player-car\n id player-car\n div\n class ai-car\n id ai-car-1\n div\n class ai-car\n id ai-car-2\n div\n class ai-car\n id ai-car-3\n div\n class typing-area\n div\n class text-display\n id text-display\n input\n class typing-input\n id typing-input\n type text\n autofocus\n div\n class stats\n div\n class wpm\n id wpm\n div\n class accuracy\n id accuracy\n div\n class xp\n id xp\n section\n id mini-games\n class mini-games\n h2 Mini-Games\n div\n class game-grid\n div\n class game-card\n div Word Shooter\n class game-icon\n p Type words to shoot them!\n a Play\n class game-button\n href #word-shooter\n div\n class game-card\n div Letter Cascade\n class game-icon\n p Type letters before they fall!\n a Play\n class game-button\n href #letter-cascade\n div\n class game-card\n div Rhythm Typer\n class game-icon\n p Type in sync with the beat!\n a Play\n class game-button\n href #rhythm-typer\n div\n class game-card\n div Word Builder\n class game-icon\n p Build words from random letters!\n a Play\n class game-button\n href #word-builder\n div\n class game-card\n div Error Crusher\n class game-icon\n p Focus on your most frequent errors!\n a Play\n class game-button\n href #error-crusher\n section\n id leaderboard\n class leaderboard\n h2 Leaderboard\n div\n class leaderboard-grid\n div\n class leaderboard-card\n div Rank\n class leaderboard-header\n div Name\n class leaderboard-header\n div WPM\n class leaderboard-header\n div Level\n class leaderboard-header\n div\n class leaderboard-card\n div 1\n class leaderboard-rank\n div Player1\n class leaderboard-name\n div 120\n class leaderboard-wpm\n div 10\n class leaderboard-level\n div\n class leaderboard-card\n div 2\n class leaderboard-rank\n div Player2\n class leaderboard-name\n div 110\n class leaderboard-wpm\n div 9\n class leaderboard-level\n div\n class leaderboard-card\n div 3\n class leaderboard-rank\n div Player3\n class leaderboard-name\n div 100\n class leaderboard-wpm\n div 8\n class leaderboard-level\n section\n id profile\n class profile\n h2 Profile\n div\n class profile-grid\n div\n class profile-card\n div Username\n class profile-header\n div Level\n class profile-header\n div XP\n class profile-header\n div WPM\n class profile-header\n div\n class profile-card\n div Player1\n class profile-username\n div 10\n class profile-level\n div 1000\n class profile-xp\n div 120\n class profile-wpm\nfooter\n div\n class footer-content\n div\n class footer-links\n a Documentation\n href #\n a Community\n href #\n a Blog\n href #\n p Started by Typing Master Team. Evolved by a community.\nscript.js\n---style.css---\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n color: #333;\n}\n\n.hero {\n background-color: #007bff;\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.hero-content h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.hero-content p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}\n\n.primary-button {\n background-color: #ff5722;\n color: white;\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 5px;\n font-size: 1rem;\n cursor: pointer;\n text-decoration: none;\n}\n\n.primary-button:hover {\n background-color: #e64a19;\n}\n\n.racing-game {\n padding: 2rem;\n text-align: center;\n}\n\n.race-track {\n position: relative;\n width: 1000px;\n height: 100px;\n background-color: #ddd;\n margin: 0 auto;\n}\n\n.player-car, .ai-car {\n position: absolute;\n width: 50px;\n height: 30px;\n background-color: #007bff;\n top: 35px;\n}\n\n.player-car {\n background-color: #ff5722;\n}\n\n.typing-area {\n margin-top: 2rem;\n}\n\n.text-display {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n}\n\n.typing-input {\n width: 80%;\n padding: 0.5rem;\n font-size: 1rem;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\n.stats {\n display: flex;\n justify-content: space-around;\n margin-top: 2rem;\n}\n\n.mini-games {\n padding: 2rem;\n text-align: center;\n}\n\n.game-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.game-card {\n background-color: white;\n padding: 1rem;\n border-radius: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n text-align: center;\n}\n\n.game-icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.game-button {\n background-color: #007bff;\n color: white;\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 5px;\n font-size: 1rem;\n cursor: pointer;\n text-decoration: none;\n}\n\n.game-button:hover {\n background-color: #0056b3;\n}\n\n.leaderboard {\n padding: 2rem;\n text-align: center;\n}\n\n.leaderboard-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr));\n gap: 1rem;\n}\n\n.leaderboard-card {\n background-color: white;\n padding: 1rem;\n border-radius: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n text-align: center;\n}\n\n.profile {\n padding: 2rem;\n text-align: center;\n}\n\n.profile-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr));\n gap: 1rem;\n}\n\n.profile-card {\n background-color: white;\n padding: 1rem;\n border-radius: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n text-align: center;\n}\n\n.footer-content {\n background-color: #333;\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.footer-links {\n margin-bottom: 1rem;\n}\n\n.footer-links a {\n color: white;\n margin: 0 1rem;\n text-decoration: none;\n}\n\n.footer-links a:hover {\n text-decoration: underline;\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function () {\n const playerCar = document.getElementById('player-car');\n const aiCars = [document.getElementById('ai-car-1'), document.getElementById('ai-car-2'), document.getElementById('ai-car-3')];\n const textDisplay = document.getElementById('text-display');\n const typingInput = document.getElementById('typing-input');\n const wpmDisplay = document.getElementById('wpm');\n const accuracyDisplay = document.getElementById('accuracy');\n const xpDisplay = document.getElementById('xp');\n\n let startTime;\n let correctChars = 0;\n let totalChars = 0;\n let xp = 0;\n let level = 1;\n\n const passages = [\n \"The quick brown fox jumps over the lazy dog.\",\n \"Programming is fun and challenging.\",\n \"Practice makes perfect.\",\n \"Typing is an essential skill in the digital age.\",\n \"Keep practicing to improve your speed and accuracy.\"\n ];\n\n function startRace() {\n startTime = Date.now();\n typingInput.value = '';\n correctChars = 0;\n totalChars = 0;\n xp = 0;\n level = 1;\n updateStats();\n setRandomPassage();\n typingInput.focus();\n }\n\n function setRandomPassage() {\n const randomIndex = Math.floor(Math.random() * passages.length);\n textDisplay.textContent = passages[randomIndex];\n }\n\n function updateStats() {\n const elapsedTime = (Date.now() - startTime) / 1000;\n const wpm = Math.round((correctChars / 5) / (elapsedTime / 60));\n const accuracy = totalChars === 0 ? 100 : Math.round((correctChars / totalChars) * 100);\n wpmDisplay.textContent = `WPM: ${wpm}`;\n accuracyDisplay.textContent = `Accuracy: ${accuracy}%`;\n xpDisplay.textContent = `XP: ${xp}`;\n }\n\n function moveCar(car, distance) {\n car.style.left = `${distance}px`;\n }\n\n typingInput.addEventListener('input', function () {\n const typedText = typingInput.value;\n const passageText = textDisplay.textContent;\n totalChars = typedText.length;\n correctChars = 0;\n\n for (let i = 0; i < typedText.length; i++) {\n if (typedText[i] === passageText[i]) {\n correctChars++;\n }\n }\n\n xp += correctChars;\n updateStats();\n moveCar(playerCar, correctChars);\n\n if (typedText === passageText) {\n alert('You Win!');\n startRace();\n }\n });\n\n startRace();\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 2380,
+ "completion_tokens": 2420,
+ "total_tokens": 4800,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 2380
+ },
+ "system_fingerprint": "fp_3a5770e1b4_prod0225"
+ }
readme.scroll
Changed around line 1
+ # typingmaster.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ I need a complete web application called "Typing Master: Race & Learn," designed to teach typing skills through gamified experiences. The app features a primary racing game where users type to race against AI opponents, plus mini-games to reinforce typing skills. Use only HTML, CSS, and JavaScript (no frameworks) to build this. The application must be responsive, engaging, and performant, with each file (index.html, styles.css, script.js) exceeding 1000 lines to ensure detailed implementation. Below are the requirements and structure: Overview Purpose: An interactive web app to improve typing skills through a racing game and mini-games. Target Audience: Gen Z users learning to type efficiently. Core Features & Game Structure Typing Interface: Clean, distraction-free typing area with a centered text box. Customizable themes: Dark mode (black background, white text) and Light mode (white background, black text), toggled via a button. Real-time feedback: Green highlight for correct keystrokes, red for errors, with a blinking cursor showing the current position. On-screen virtual keyboard: Displays a keyboard layout at the bottom, highlighting pressed keys in yellow. Optional hand position guide overlay: A semi-transparent overlay showing finger positions for beginners, toggled via a button. Text display: Shows the passage to type with a moving cursor (underline) indicating the current character. Main Racing Game: Gameplay: Users control a vehicle (e.g., a car) that moves forward based on typing speed (WPM). The faster and more accurately they type, the faster the car moves. AI Opponents: Compete against 3 AI cars with preset speeds: Beginner: 20-35 WPM Intermediate: 40-55 WPM Average: 56-90 WPM Pro: 91-110 WPM Expert: 111+ WPM Race Track: A horizontal track (1000px long) with distance markers every 200px. The track background changes based on difficulty (e.g., city streets for Beginner, space for Expert). Vehicle Animation: Cars move left to right; correct typing advances the player’s car (1px per correct character). AI cars move at a steady pace based on WPM. Add exhaust effects (CSS animation with opacity changes) and boost animations (scale transform) for typing streaks (5+ correct keystrokes in a row). Text Passages: Vary by difficulty: Beginner: Simple sentences (e.g., "The cat runs fast.") Intermediate: Longer sentences with punctuation. Advanced: Complex paragraphs with numbers and symbols. Win/Lose Condition: First car to reach the end of the track wins. Show a “You Win!” or “You Lose!” message with a replay option. User Progression System: Skill Assessment: On first load, users take a 30-second typing test to determine their starting level (Beginner to Expert). XP System: Earn 10 XP per correct word, lose 5 XP per mistake. Level up every 100 XP (e.g., Level 1 to Level 2). Unlockables: Unlock new vehicle designs (e.g., rocket, spaceship) and track themes at higher levels. Statistics: WPM graph (line graph using canvas) showing performance over time. Accuracy percentage. Most frequent error keys (tracked via an array). Improvement rate (WPM difference between sessions). Time spent practicing (tracked via timestamps). Mini-Games: Word Shooter: Words appear as “targets” moving from right to left. Typing a word correctly “shoots” it (removes it with a fade-out animation). If a word reaches the left edge, lose a life (3 lives total). Game ends if all lives are lost or 20 words are shot. Letter Cascade: Letters fall from the top of the screen (100px/sec). Type them before they hit the bottom (lose a life if they do). Clear 30 letters to win. Rhythm Typer: Type words in sync with a beat (every 500ms, synced to a background audio loop). Correct timing gives bonus points (+5 XP). Lasts 30 seconds. Word Builder: Given a set of random letters (e.g., A, B, E, L), type valid words (e.g., “able,” “bale”). Earn points per word; game ends after 60 seconds. Error Crusher: Focuses on the user’s most frequent error keys (e.g., if “K” is often mistyped, generate text with more K’s). Lasts 30 seconds, tracks improvement. Curriculum Structure: Lessons progress through: Home row (e.g., “asdf jkl;”) → Upper row → Lower row → Numbers/Symbols → Common patterns → Speed drills → Accuracy drills. Specialized texts for fields like programming (e.g., code snippets), medical (e.g., terminology), and legal (e.g., contracts). Multiplayer Features (Simplified for Pure JS)**: Pseudo-Multiplayer: Simulate real-time races against “online” opponents (AI with randomized names and speeds). Leaderboards: Store top 10 scores in localStorage (name, WPM, level). Weekly Challenges: A special race with harder text; top score gets a “Champion” badge. Tournament Mode: Best of 3 races against AI opponents of increasing difficulty. Technical Requirements Frontend: Responsive design for desktop and tablets (min-width: 768px). Custom animations: Use CSS keyframes for car movement, exhaust effects, and mini-game elements. Audio: Add keystroke sounds (correct: soft ping, error: buzz) and background music for races (looping audio file). Offline functionality: Use localStorage to save progress (level, XP, stats). Backend (Simulated with JS): User profiles: Store username, level, XP, and stats in localStorage. Progress tracking: Save WPM, accuracy, and error keys. Leaderboard: Simulated with localStorage. Content: Hardcode lesson texts in JS (arrays of strings). Performance: Low-latency input: Use keydown events with throttling to ensure accurate WPM. Optimize animations: Avoid heavy DOM updates; use transform for smooth motion. Accessibility: Add high-contrast mode, adjustable text size, and keyboard navigation. Design Elements Modern UI: Centered layout, sans-serif fonts (e.g., Arial), and a focus on the typing area. Customizable vehicles: 5 designs (car, rocket, bike, spaceship, submarine) with color options. Backgrounds: 5 themes (city, space, underwater, forest, desert) with subtle animations (e.g., moving stars in space). Typography: Use a readable font size (16px default, adjustable to 14px or 18px). Visual Feedback: Progress bars, badges (e.g., “Speed Demon” for 100+ WPM), and animated confetti on level-up. Implementation Suggestions Build as a Progressive Web App (PWA) with a manifest file for offline use. Use canvas for the WPM graph and mini-game animations. Hardcode lesson texts and opponent names in JS arrays. File Requirements index.html: Structure the app with sections for the typing area, race track, mini-games, and stats. Include buttons for theme toggle, hand guide, and game selection. Must exceed 1000 lines with detailed markup. styles.css: Style the app with responsive design, animations (keyframes), and themes. Include high-contrast mode and accessibility features. Must exceed 1000 lines with detailed styling. script.js: Handle game logic, typing mechanics, progression, animations, and localStorage. Implement all game modes, stats tracking, and simulated multiplayer. Must exceed 1000 lines with detailed logic. Full Code Implementation Below is the complete code for "Typing Master: Race & Learn," split into three files: index.html, styles.css, and script.js. Each file exceeds 1000 lines by including detailed markup, styling, and logic, ensuring the app meets all requirements. The game structure is thoroughly implemented with explanations in the comments.
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "I need a complete web application called "Typing Master: Race & Learn," designed to teach typing skills through gamified experiences. The app features a primary racing game where users type to race against AI opponents, plus mini-games to reinforce typing skills. Use only HTML, CSS, and JavaScript (no frameworks) to build this. The application must be responsive, engaging, and performant, with each file (index.html, styles.css, script.js) exceeding 1000 lines to ensure detailed implementation. Below are the requirements and structure: Overview Purpose: An interactive web app to improve typing skills through a racing game and mini-games. Target Audience: Gen Z users learning to type efficiently. Core Features & Game Structure Typing Interface: Clean, distraction-free typing area with a centered text box. Customizable themes: Dark mode (black background, white text) and Light mode (white background, black text), toggled via a button. Real-time feedback: Green highlight for correct keystrokes, red for errors, with a blinking cursor showing the current position. On-screen virtual keyboard: Displays a keyboard layout at the bottom, highlighting pressed keys in yellow. Optional hand position guide overlay: A semi-transparent overlay showing finger positions for beginners, toggled via a button. Text display: Shows the passage to type with a moving cursor (underline) indicating the current character. Main Racing Game: Gameplay: Users control a vehicle (e.g., a car) that moves forward based on typing speed (WPM). The faster and more accurately they type, the faster the car moves. AI Opponents: Compete against 3 AI cars with preset speeds: Beginner: 20-35 WPM Intermediate: 40-55 WPM Average: 56-90 WPM Pro: 91-110 WPM Expert: 111+ WPM Race Track: A horizontal track (1000px long) with distance markers every 200px. The track background changes based on difficulty (e.g., city streets for Beginner, space for Expert). Vehicle Animation: Cars move left to right; correct typing advances the player’s car (1px per correct character). AI cars move at a steady pace based on WPM. Add exhaust effects (CSS animation with opacity changes) and boost animations (scale transform) for typing streaks (5+ correct keystrokes in a row). Text Passages: Vary by difficulty: Beginner: Simple sentences (e.g., "The cat runs fast.") Intermediate: Longer sentences with punctuation. Advanced: Complex paragraphs with numbers and symbols. Win/Lose Condition: First car to reach the end of the track wins. Show a “You Win!” or “You Lose!” message with a replay option. User Progression System: Skill Assessment: On first load, users take a 30-second typing test to determine their starting level (Beginner to Expert). XP System: Earn 10 XP per correct word, lose 5 XP per mistake. Level up every 100 XP (e.g., Level 1 to Level 2). Unlockables: Unlock new vehicle designs (e.g., rocket, spaceship) and track themes at higher levels. Statistics: WPM graph (line graph using canvas) showing performance over time. Accuracy percentage. Most frequent error keys (tracked via an array). Improvement rate (WPM difference between sessions). Time spent practicing (tracked via timestamps). Mini-Games: Word Shooter: Words appear as “targets” moving from right to left. Typing a word correctly “shoots” it (removes it with a fade-out animation). If a word reaches the left edge, lose a life (3 lives total). Game ends if all lives are lost or 20 words are shot. Letter Cascade: Letters fall from the top of the screen (100px/sec). Type them before they hit the bottom (lose a life if they do). Clear 30 letters to win. Rhythm Typer: Type words in sync with a beat (every 500ms, synced to a background audio loop). Correct timing gives bonus points (+5 XP). Lasts 30 seconds. Word Builder: Given a set of random letters (e.g., A, B, E, L), type valid words (e.g., “able,” “bale”). Earn points per word; game ends after 60 seconds. Error Crusher: Focuses on the user’s most frequent error keys (e.g., if “K” is often mistyped, generate text with more K’s). Lasts 30 seconds, tracks improvement. Curriculum Structure: Lessons progress through: Home row (e.g., “asdf jkl;”) → Upper row → Lower row → Numbers/Symbols → Common patterns → Speed drills → Accuracy drills. Specialized texts for fields like programming (e.g., code snippets), medical (e.g., terminology), and legal (e.g., contracts). Multiplayer Features (Simplified for Pure JS)**: Pseudo-Multiplayer: Simulate real-time races against “online” opponents (AI with randomized names and speeds). Leaderboards: Store top 10 scores in localStorage (name, WPM, level). Weekly Challenges: A special race with harder text; top score gets a “Champion” badge. Tournament Mode: Best of 3 races against AI opponents of increasing difficulty. Technical Requirements Frontend: Responsive design for desktop and tablets (min-width: 768px). Custom animations: Use CSS keyframes for car movement, exhaust effects, and mini-game elements. Audio: Add keystroke sounds (correct: soft ping, error: buzz) and background music for races (looping audio file). Offline functionality: Use localStorage to save progress (level, XP, stats). Backend (Simulated with JS): User profiles: Store username, level, XP, and stats in localStorage. Progress tracking: Save WPM, accuracy, and error keys. Leaderboard: Simulated with localStorage. Content: Hardcode lesson texts in JS (arrays of strings). Performance: Low-latency input: Use keydown events with throttling to ensure accurate WPM. Optimize animations: Avoid heavy DOM updates; use transform for smooth motion. Accessibility: Add high-contrast mode, adjustable text size, and keyboard navigation. Design Elements Modern UI: Centered layout, sans-serif fonts (e.g., Arial), and a focus on the typing area. Customizable vehicles: 5 designs (car, rocket, bike, spaceship, submarine) with color options. Backgrounds: 5 themes (city, space, underwater, forest, desert) with subtle animations (e.g., moving stars in space). Typography: Use a readable font size (16px default, adjustable to 14px or 18px). Visual Feedback: Progress bars, badges (e.g., “Speed Demon” for 100+ WPM), and animated confetti on level-up. Implementation Suggestions Build as a Progressive Web App (PWA) with a manifest file for offline use. Use canvas for the WPM graph and mini-game animations. Hardcode lesson texts and opponent names in JS arrays. File Requirements index.html: Structure the app with sections for the typing area, race track, mini-games, and stats. Include buttons for theme toggle, hand guide, and game selection. Must exceed 1000 lines with detailed markup. styles.css: Style the app with responsive design, animations (keyframes), and themes. Include high-contrast mode and accessibility features. Must exceed 1000 lines with detailed styling. script.js: Handle game logic, typing mechanics, progression, animations, and localStorage. Implement all game modes, stats tracking, and simulated multiplayer. Must exceed 1000 lines with detailed logic. Full Code Implementation Below is the complete code for "Typing Master: Race & Learn," split into three files: index.html, styles.css, and script.js. Each file exceeds 1000 lines by including detailed markup, styling, and logic, ensuring the app meets all requirements. The game structure is thoroughly implemented with explanations in the comments."
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function () {
+ const playerCar = document.getElementById('player-car');
+ const aiCars = [document.getElementById('ai-car-1'), document.getElementById('ai-car-2'), document.getElementById('ai-car-3')];
+ const textDisplay = document.getElementById('text-display');
+ const typingInput = document.getElementById('typing-input');
+ const wpmDisplay = document.getElementById('wpm');
+ const accuracyDisplay = document.getElementById('accuracy');
+ const xpDisplay = document.getElementById('xp');
+
+ let startTime;
+ let correctChars = 0;
+ let totalChars = 0;
+ let xp = 0;
+ let level = 1;
+
+ const passages = [
+ "The quick brown fox jumps over the lazy dog.",
+ "Programming is fun and challenging.",
+ "Practice makes perfect.",
+ "Typing is an essential skill in the digital age.",
+ "Keep practicing to improve your speed and accuracy."
+ ];
+
+ function startRace() {
+ startTime = Date.now();
+ typingInput.value = '';
+ correctChars = 0;
+ totalChars = 0;
+ xp = 0;
+ level = 1;
+ updateStats();
+ setRandomPassage();
+ typingInput.focus();
+ }
+
+ function setRandomPassage() {
+ const randomIndex = Math.floor(Math.random() * passages.length);
+ textDisplay.textContent = passages[randomIndex];
+ }
+
+ function updateStats() {
+ const elapsedTime = (Date.now() - startTime) / 1000;
+ const wpm = Math.round((correctChars / 5) / (elapsedTime / 60));
+ const accuracy = totalChars === 0 ? 100 : Math.round((correctChars / totalChars) * 100);
+ wpmDisplay.textContent = `WPM: ${wpm}`;
+ accuracyDisplay.textContent = `Accuracy: ${accuracy}%`;
+ xpDisplay.textContent = `XP: ${xp}`;
+ }
+
+ function moveCar(car, distance) {
+ car.style.left = `${distance}px`;
+ }
+
+ typingInput.addEventListener('input', function () {
+ const typedText = typingInput.value;
+ const passageText = textDisplay.textContent;
+ totalChars = typedText.length;
+ correctChars = 0;
+
+ for (let i = 0; i < typedText.length; i++) {
+ if (typedText[i] === passageText[i]) {
+ correctChars++;
+ }
+ }
+
+ xp += correctChars;
+ updateStats();
+ moveCar(playerCar, correctChars);
+
+ if (typedText === passageText) {
+ alert('You Win!');
+ startRace();
+ }
+ });
+
+ startRace();
+ });
style.css
Changed around line 1
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+ color: #333;
+ }
+
+ .hero {
+ background-color: #007bff;
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .hero-content h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .hero-content p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ }
+
+ .primary-button {
+ background-color: #ff5722;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 5px;
+ font-size: 1rem;
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ .primary-button:hover {
+ background-color: #e64a19;
+ }
+
+ .racing-game {
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .race-track {
+ position: relative;
+ width: 1000px;
+ height: 100px;
+ background-color: #ddd;
+ margin: 0 auto;
+ }
+
+ .player-car, .ai-car {
+ position: absolute;
+ width: 50px;
+ height: 30px;
+ background-color: #007bff;
+ top: 35px;
+ }
+
+ .player-car {
+ background-color: #ff5722;
+ }
+
+ .typing-area {
+ margin-top: 2rem;
+ }
+
+ .text-display {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .typing-input {
+ width: 80%;
+ padding: 0.5rem;
+ font-size: 1rem;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ }
+
+ .stats {
+ display: flex;
+ justify-content: space-around;
+ margin-top: 2rem;
+ }
+
+ .mini-games {
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .game-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ }
+
+ .game-card {
+ background-color: white;
+ padding: 1rem;
+ border-radius: 5px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ }
+
+ .game-icon {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+ }
+
+ .game-button {
+ background-color: #007bff;
+ color: white;
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 5px;
+ font-size: 1rem;
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ .game-button:hover {
+ background-color: #0056b3;
+ }
+
+ .leaderboard {
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .leaderboard-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr));
+ gap: 1rem;
+ }
+
+ .leaderboard-card {
+ background-color: white;
+ padding: 1rem;
+ border-radius: 5px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ }
+
+ .profile {
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .profile-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr));
+ gap: 1rem;
+ }
+
+ .profile-card {
+ background-color: white;
+ padding: 1rem;
+ border-radius: 5px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ }
+
+ .footer-content {
+ background-color: #333;
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .footer-links {
+ margin-bottom: 1rem;
+ }
+
+ .footer-links a {
+ color: white;
+ margin: 0 1rem;
+ text-decoration: none;
+ }
+
+ .footer-links a:hover {
+ text-decoration: underline;
+ }