Hugging Face's logo

Spaces:
GMANMD12
/
speed-typing-challenge
Running

App Files Community
GMANMD12 commited on
Commit
d43e07e
·
verified ·
1 Parent(s): 29095f9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +564 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Speed Typing Challenge
3
- emoji: 😻
4
- colorFrom: red
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: speed-typing-challenge
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,564 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Speed Typing Challenge</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes pulse {
11
+ 0%, 100% { transform: scale(1); }
12
+ 50% { transform: scale(1.05); }
13
+ }
14
+ @keyframes shake {
15
+ 0%, 100% { transform: translateX(0); }
16
+ 25% { transform: translateX(-5px); }
17
+ 75% { transform: translateX(5px); }
18
+ }
19
+ .key-active {
20
+ background-color: #3b82f6 !important;
21
+ color: white !important;
22
+ transform: translateY(2px);
23
+ box-shadow: 0 2px 0 #1d4ed8;
24
+ }
25
+ .key-correct {
26
+ background-color: #10b981 !important;
27
+ }
28
+ .key-wrong {
29
+ background-color: #ef4444 !important;
30
+ animation: shake 0.2s;
31
+ }
32
+ .current-char {
33
+ border-bottom: 3px solid #3b82f6;
34
+ }
35
+ .correct-char {
36
+ color: #10b981;
37
+ }
38
+ .wrong-char {
39
+ color: #ef4444;
40
+ text-decoration: underline;
41
+ }
42
+ .progress-bar {
43
+ transition: width 0.3s ease;
44
+ }
45
+ .floating-emoji {
46
+ position: absolute;
47
+ pointer-events: none;
48
+ font-size: 1.5rem;
49
+ animation: float-up 2s forwards;
50
+ }
51
+ @keyframes float-up {
52
+ 0% { transform: translateY(0); opacity: 1; }
53
+ 100% { transform: translateY(-100px); opacity: 0; }
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
58
+ <div class="container mx-auto px-4 py-8 flex-1 flex flex-col">
59
+ <!-- Header -->
60
+ <header class="text-center mb-8">
61
+ <h1 class="text-4xl font-bold text-blue-400 mb-2">Speed Typing Challenge</h1>
62
+ <p class="text-gray-400">Test your typing speed and accuracy!</p>
63
+ </header>
64
+
65
+ <!-- Game Stats -->
66
+ <div class="bg-gray-800 rounded-lg p-4 mb-6 shadow-lg">
67
+ <div class="flex justify-between items-center mb-4">
68
+ <div class="text-center">
69
+ <div class="text-2xl font-bold text-blue-400" id="wpm">0</div>
70
+ <div class="text-gray-400 text-sm">WPM</div>
71
+ </div>
72
+ <div class="text-center">
73
+ <div class="text-2xl font-bold text-green-400" id="accuracy">100%</div>
74
+ <div class="text-gray-400 text-sm">Accuracy</div>
75
+ </div>
76
+ <div class="text-center">
77
+ <div class="text-2xl font-bold text-purple-400" id="score">0</div>
78
+ <div class="text-gray-400 text-sm">Score</div>
79
+ </div>
80
+ <div class="text-center">
81
+ <div class="text-2xl font-bold text-yellow-400" id="time">60</div>
82
+ <div class="text-gray-400 text-sm">Seconds</div>
83
+ </div>
84
+ </div>
85
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
86
+ <div id="time-progress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 100%"></div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Game Area -->
91
+ <div class="flex-1 flex flex-col">
92
+ <!-- Text Display -->
93
+ <div class="bg-gray-800 rounded-lg p-6 mb-6 shadow-lg relative overflow-hidden min-h-32">
94
+ <div id="text-display" class="text-xl leading-relaxed font-mono select-none"></div>
95
+ <div id="floating-emojis" class="absolute inset-0 pointer-events-none overflow-hidden"></div>
96
+ </div>
97
+
98
+ <!-- Keyboard -->
99
+ <div class="bg-gray-800 rounded-lg p-4 shadow-lg">
100
+ <div class="keyboard-row flex justify-center mb-2">
101
+ <div class="key" data-key="`">`</div>
102
+ <div class="key" data-key="1">1</div>
103
+ <div class="key" data-key="2">2</div>
104
+ <div class="key" data-key="3">3</div>
105
+ <div class="key" data-key="4">4</div>
106
+ <div class="key" data-key="5">5</div>
107
+ <div class="key" data-key="6">6</div>
108
+ <div class="key" data-key="7">7</div>
109
+ <div class="key" data-key="8">8</div>
110
+ <div class="key" data-key="9">9</div>
111
+ <div class="key" data-key="0">0</div>
112
+ <div class="key" data-key="-">-</div>
113
+ <div class="key" data-key="=">=</div>
114
+ <div class="key key-wide" data-key="backspace">
115
+ <i class="fas fa-backspace"></i>
116
+ </div>
117
+ </div>
118
+ <div class="keyboard-row flex justify-center mb-2">
119
+ <div class="key key-wide" data-key="tab">Tab</div>
120
+ <div class="key" data-key="q">Q</div>
121
+ <div class="key" data-key="w">W</div>
122
+ <div class="key" data-key="e">E</div>
123
+ <div class="key" data-key="r">R</div>
124
+ <div class="key" data-key="t">T</div>
125
+ <div class="key" data-key="y">Y</div>
126
+ <div class="key" data-key="u">U</div>
127
+ <div class="key" data-key="i">I</div>
128
+ <div class="key" data-key="o">O</div>
129
+ <div class="key" data-key="p">P</div>
130
+ <div class="key" data-key="[">[</div>
131
+ <div class="key" data-key="]">]</div>
132
+ <div class="key" data-key="\\">\</div>
133
+ </div>
134
+ <div class="keyboard-row flex justify-center mb-2">
135
+ <div class="key key-extra-wide" data-key="capslock">
136
+ <i class="fas fa-caps-lock"></i>
137
+ </div>
138
+ <div class="key" data-key="a">A</div>
139
+ <div class="key" data-key="s">S</div>
140
+ <div class="key" data-key="d">D</div>
141
+ <div class="key" data-key="f">F</div>
142
+ <div class="key" data-key="g">G</div>
143
+ <div class="key" data-key="h">H</div>
144
+ <div class="key" data-key="j">J</div>
145
+ <div class="key" data-key="k">K</div>
146
+ <div class="key" data-key="l">L</div>
147
+ <div class="key" data-key=";">;</div>
148
+ <div class="key" data-key="'">'</div>
149
+ <div class="key key-extra-wide" data-key="enter">
150
+ <i class="fas fa-arrow-left rotate-180"></i>
151
+ </div>
152
+ </div>
153
+ <div class="keyboard-row flex justify-center mb-2">
154
+ <div class="key key-ultra-wide" data-key="shift">
155
+ <i class="fas fa-arrow-up"></i>
156
+ </div>
157
+ <div class="key" data-key="z">Z</div>
158
+ <div class="key" data-key="x">X</div>
159
+ <div class="key" data-key="c">C</div>
160
+ <div class="key" data-key="v">V</div>
161
+ <div class="key" data-key="b">B</div>
162
+ <div class="key" data-key="n">N</div>
163
+ <div class="key" data-key="m">M</div>
164
+ <div class="key" data-key=",">,</div>
165
+ <div class="key" data-key=".">.</div>
166
+ <div class="key" data-key="/">/</div>
167
+ <div class="key key-ultra-wide" data-key="shift">
168
+ <i class="fas fa-arrow-up"></i>
169
+ </div>
170
+ </div>
171
+ <div class="keyboard-row flex justify-center">
172
+ <div class="key" data-key="ctrl">Ctrl</div>
173
+ <div class="key" data-key="win">
174
+ <i class="fab fa-windows"></i>
175
+ </div>
176
+ <div class="key" data-key="alt">Alt</div>
177
+ <div class="key key-space" data-key=" ">Space</div>
178
+ <div class="key" data-key="alt">Alt</div>
179
+ <div class="key" data-key="fn">Fn</div>
180
+ <div class="key" data-key="ctrl">Ctrl</div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Controls -->
186
+ <div class="mt-6 text-center">
187
+ <button id="start-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
188
+ <i class="fas fa-play mr-2"></i> Start Game
189
+ </button>
190
+ <div class="mt-4 flex justify-center space-x-4">
191
+ <button id="easy-btn" class="difficulty-btn bg-green-600 hover:bg-green-700 px-4 py-2 rounded" data-level="easy">Easy</button>
192
+ <button id="medium-btn" class="difficulty-btn bg-yellow-600 hover:bg-yellow-700 px-4 py-2 rounded" data-level="medium">Medium</button>
193
+ <button id="hard-btn" class="difficulty-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded" data-level="hard">Hard</button>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Game Over Modal -->
199
+ <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-50">
200
+ <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 scale-95 opacity-0">
201
+ <div class="text-center">
202
+ <h2 class="text-3xl font-bold text-blue-400 mb-4">Game Over!</h2>
203
+ <div class="text-xl mb-6">
204
+ <div class="flex justify-between mb-2">
205
+ <span class="text-gray-400">Final Score:</span>
206
+ <span class="font-bold" id="final-score">0</span>
207
+ </div>
208
+ <div class="flex justify-between mb-2">
209
+ <span class="text-gray-400">WPM:</span>
210
+ <span class="font-bold" id="final-wpm">0</span>
211
+ </div>
212
+ <div class="flex justify-between mb-2">
213
+ <span class="text-gray-400">Accuracy:</span>
214
+ <span class="font-bold" id="final-accuracy">100%</span>
215
+ </div>
216
+ <div class="flex justify-between">
217
+ <span class="text-gray-400">Difficulty:</span>
218
+ <span class="font-bold" id="final-difficulty">Medium</span>
219
+ </div>
220
+ </div>
221
+ <button id="play-again-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition-all duration-300 transform hover:scale-105">
222
+ <i class="fas fa-redo mr-2"></i> Play Again
223
+ </button>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <script>
229
+ // Game variables
230
+ let currentText = '';
231
+ let currentIndex = 0;
232
+ let correctChars = 0;
233
+ let wrongChars = 0;
234
+ let startTime;
235
+ let timer;
236
+ let gameActive = false;
237
+ let difficulty = 'medium';
238
+ let score = 0;
239
+ let emojis = ['🎯', '🔥', '⚡', '🚀', '💯', '👏', '👍', '✨', '🌟', '🏆'];
240
+ let positiveEmojis = ['😊', '🤩', '😎', '🤘', '👌', '💪', '🙌', '🦄', '🌈', '🍕'];
241
+ let negativeEmojis = ['😅', '😬', '😳', '🤔', '🙄', '😓', '😥', '🤒', '😵', '💀'];
242
+
243
+ // DOM elements
244
+ const textDisplay = document.getElementById('text-display');
245
+ const startBtn = document.getElementById('start-btn');
246
+ const gameOverModal = document.getElementById('game-over-modal');
247
+ const playAgainBtn = document.getElementById('play-again-btn');
248
+ const wpmDisplay = document.getElementById('wpm');
249
+ const accuracyDisplay = document.getElementById('accuracy');
250
+ const scoreDisplay = document.getElementById('score');
251
+ const timeDisplay = document.getElementById('time');
252
+ const timeProgress = document.getElementById('time-progress');
253
+ const floatingEmojis = document.getElementById('floating-emojis');
254
+ const difficultyBtns = document.querySelectorAll('.difficulty-btn');
255
+ const keys = document.querySelectorAll('.key');
256
+ const finalScore = document.getElementById('final-score');
257
+ const finalWpm = document.getElementById('final-wpm');
258
+ const finalAccuracy = document.getElementById('final-accuracy');
259
+ const finalDifficulty = document.getElementById('final-difficulty');
260
+
261
+ // Sample texts based on difficulty
262
+ const sampleTexts = {
263
+ easy: [
264
+ "The quick brown fox jumps over the lazy dog.",
265
+ "Programming is fun and challenging at the same time.",
266
+ "Learning to type quickly will improve your productivity.",
267
+ "Practice makes perfect when it comes to typing skills.",
268
+ "The sun shines brightly on a beautiful summer day."
269
+ ],
270
+ medium: [
271
+ "JavaScript is a versatile programming language used for web development. It allows developers to create interactive websites and applications.",
272
+ "The complexity of modern software systems requires careful planning and design to ensure reliability and maintainability.",
273
+ "Artificial intelligence is transforming various industries by automating tasks that previously required human intelligence.",
274
+ "Responsive web design ensures that websites look good on all devices, from mobile phones to desktop computers.",
275
+ "Cloud computing has revolutionized how businesses store and process data, offering scalability and cost efficiency."
276
+ ],
277
+ hard: [
278
+ "The intricacies of quantum computing lie in its ability to process information using quantum bits or qubits, which can exist in multiple states simultaneously, unlike classical bits that are binary.",
279
+ "Neural networks, inspired by biological neurons, consist of layers of interconnected nodes that process input data through weighted connections, adjusting these weights during training to minimize error in predictions.",
280
+ "Cryptographic hash functions are mathematical algorithms that map data of arbitrary size to fixed-size values, designed to be one-way functions that are infeasible to invert, providing data integrity verification.",
281
+ "The observer effect in quantum mechanics states that the act of observation inevitably alters the system being observed, a fundamental limitation in measuring quantum phenomena with absolute precision.",
282
+ "Polymorphism in object-oriented programming allows objects of different classes to be treated as objects of a common superclass, enabling code reuse and more flexible software design through method overriding and overloading."
283
+ ]
284
+ };
285
+
286
+ // Initialize game
287
+ function initGame() {
288
+ // Set difficulty
289
+ difficultyBtns.forEach(btn => {
290
+ btn.addEventListener('click', () => {
291
+ difficulty = btn.dataset.level;
292
+ difficultyBtns.forEach(b => b.classList.remove('ring-2', 'ring-white'));
293
+ btn.classList.add('ring-2', 'ring-white');
294
+ });
295
+ });
296
+
297
+ // Set medium as default difficulty
298
+ document.getElementById('medium-btn').click();
299
+
300
+ // Keyboard highlight
301
+ document.addEventListener('keydown', (e) => {
302
+ if (!gameActive) return;
303
+
304
+ const key = e.key.toLowerCase();
305
+ const keyElement = document.querySelector(`.key[data-key="${key}"]`) ||
306
+ document.querySelector(`.key[data-key="${e.code.replace('Key', '').toLowerCase()}"]`);
307
+
308
+ if (keyElement) {
309
+ keyElement.classList.add('key-active');
310
+ }
311
+ });
312
+
313
+ document.addEventListener('keyup', (e) => {
314
+ const key = e.key.toLowerCase();
315
+ const keyElement = document.querySelector(`.key[data-key="${key}"]`) ||
316
+ document.querySelector(`.key[data-key="${e.code.replace('Key', '').toLowerCase()}"]`);
317
+
318
+ if (keyElement) {
319
+ keyElement.classList.remove('key-active');
320
+ }
321
+ });
322
+
323
+ // Start game button
324
+ startBtn.addEventListener('click', startGame);
325
+
326
+ // Play again button
327
+ playAgainBtn.addEventListener('click', () => {
328
+ gameOverModal.classList.add('hidden');
329
+ startGame();
330
+ });
331
+ }
332
+
333
+ // Start the game
334
+ function startGame() {
335
+ // Reset stats
336
+ currentIndex = 0;
337
+ correctChars = 0;
338
+ wrongChars = 0;
339
+ score = 0;
340
+ scoreDisplay.textContent = '0';
341
+ accuracyDisplay.textContent = '100%';
342
+ wpmDisplay.textContent = '0';
343
+ timeDisplay.textContent = '60';
344
+ timeProgress.style.width = '100%';
345
+
346
+ // Get random text based on difficulty
347
+ const texts = sampleTexts[difficulty];
348
+ currentText = texts[Math.floor(Math.random() * texts.length)];
349
+
350
+ // Display text with current character highlighted
351
+ displayText();
352
+
353
+ // Start timer
354
+ startTime = new Date();
355
+ let timeLeft = 60;
356
+ timer = setInterval(() => {
357
+ timeLeft--;
358
+ timeDisplay.textContent = timeLeft;
359
+ timeProgress.style.width = `${(timeLeft / 60) * 100}%`;
360
+
361
+ if (timeLeft <= 0) {
362
+ endGame();
363
+ }
364
+ }, 1000);
365
+
366
+ // Focus on window for key events
367
+ window.focus();
368
+
369
+ // Set game state
370
+ gameActive = true;
371
+ startBtn.disabled = true;
372
+ startBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
373
+ startBtn.classList.add('bg-gray-600', 'cursor-not-allowed');
374
+ startBtn.innerHTML = '<i class="fas fa-gamepad mr-2"></i> Game in Progress...';
375
+ }
376
+
377
+ // Display text with current character highlighted
378
+ function displayText() {
379
+ let html = '';
380
+ for (let i = 0; i < currentText.length; i++) {
381
+ let charClass = '';
382
+ if (i < currentIndex) {
383
+ charClass = 'correct-char';
384
+ } else if (i === currentIndex) {
385
+ charClass = 'current-char';
386
+ }
387
+ html += `<span class="${charClass}">${currentText[i]}</span>`;
388
+ }
389
+ textDisplay.innerHTML = html;
390
+ }
391
+
392
+ // Handle key press
393
+ document.addEventListener('keydown', (e) => {
394
+ if (!gameActive) return;
395
+
396
+ // Prevent default for most keys except Tab, Escape, etc.
397
+ if (e.key.length === 1 || e.key === 'Backspace' || e.key === 'Enter' || e.key === 'Space') {
398
+ e.preventDefault();
399
+ }
400
+
401
+ const expectedChar = currentText[currentIndex];
402
+ const typedChar = e.key;
403
+
404
+ // Highlight key
405
+ const key = e.key.toLowerCase();
406
+ const keyElement = document.querySelector(`.key[data-key="${key}"]`) ||
407
+ document.querySelector(`.key[data-key="${e.code.replace('Key', '').toLowerCase()}"]`);
408
+
409
+ if (keyElement) {
410
+ keyElement.classList.add('key-active');
411
+
412
+ // Remove highlight after short delay
413
+ setTimeout(() => {
414
+ keyElement.classList.remove('key-active');
415
+ }, 200);
416
+ }
417
+
418
+ // Handle backspace
419
+ if (typedChar === 'Backspace') {
420
+ if (currentIndex > 0) {
421
+ currentIndex--;
422
+ // If we're going back over a wrong character, decrease wrong count
423
+ if (textDisplay.children[currentIndex].classList.contains('wrong-char')) {
424
+ wrongChars--;
425
+ } else {
426
+ correctChars--;
427
+ }
428
+ displayText();
429
+ }
430
+ return;
431
+ }
432
+
433
+ // Check if game is over (all characters typed)
434
+ if (currentIndex >= currentText.length) {
435
+ return;
436
+ }
437
+
438
+ // Check if typed character matches expected character
439
+ if (typedChar === expectedChar) {
440
+ correctChars++;
441
+ score += 10;
442
+
443
+ // Add floating emoji for correct key
444
+ if (Math.random() > 0.7) {
445
+ addFloatingEmoji(positiveEmojis[Math.floor(Math.random() * positiveEmojis.length)]);
446
+ }
447
+
448
+ // Highlight key as correct
449
+ if (keyElement) {
450
+ keyElement.classList.add('key-correct');
451
+ setTimeout(() => {
452
+ keyElement.classList.remove('key-correct');
453
+ }, 300);
454
+ }
455
+ } else {
456
+ wrongChars++;
457
+ score = Math.max(0, score - 5);
458
+
459
+ // Add floating emoji for wrong key
460
+ if (Math.random() > 0.7) {
461
+ addFloatingEmoji(negativeEmojis[Math.floor(Math.random() * negativeEmojis.length)]);
462
+ }
463
+
464
+ // Highlight key as wrong
465
+ if (keyElement) {
466
+ keyElement.classList.add('key-wrong');
467
+ setTimeout(() => {
468
+ keyElement.classList.remove('key-wrong');
469
+ }, 300);
470
+ }
471
+
472
+ // Mark character as wrong
473
+ textDisplay.children[currentIndex].classList.add('wrong-char');
474
+ }
475
+
476
+ // Move to next character
477
+ currentIndex++;
478
+
479
+ // Update stats
480
+ updateStats();
481
+
482
+ // Check if all characters are typed
483
+ if (currentIndex >= currentText.length) {
484
+ setTimeout(() => {
485
+ addFloatingEmoji(emojis[Math.floor(Math.random() * emojis.length)]);
486
+ score += 100; // Bonus for completing the text
487
+ updateStats();
488
+ endGame();
489
+ }, 300);
490
+ } else {
491
+ displayText();
492
+ }
493
+ });
494
+
495
+ // Add floating emoji effect
496
+ function addFloatingEmoji(emoji) {
497
+ const emojiElement = document.createElement('div');
498
+ emojiElement.className = 'floating-emoji';
499
+ emojiElement.textContent = emoji;
500
+
501
+ // Random position in the text display area
502
+ const textRect = textDisplay.getBoundingClientRect();
503
+ const x = Math.random() * (textRect.width - 30);
504
+ const y = Math.random() * (textRect.height - 30);
505
+
506
+ emojiElement.style.left = `${x}px`;
507
+ emojiElement.style.top = `${y}px`;
508
+
509
+ floatingEmojis.appendChild(emojiElement);
510
+
511
+ // Remove after animation
512
+ setTimeout(() => {
513
+ emojiElement.remove();
514
+ }, 2000);
515
+ }
516
+
517
+ // Update game stats
518
+ function updateStats() {
519
+ // Calculate WPM (Words Per Minute)
520
+ const timeElapsed = (new Date() - startTime) / 60000; // in minutes
521
+ const wordsTyped = correctChars / 5; // standard word length
522
+ const wpm = Math.round(wordsTyped / timeElapsed) || 0;
523
+
524
+ // Calculate accuracy
525
+ const totalTyped = correctChars + wrongChars;
526
+ const accuracy = totalTyped > 0 ? Math.round((correctChars / totalTyped) * 100) : 100;
527
+
528
+ // Update displays
529
+ wpmDisplay.textContent = wpm;
530
+ accuracyDisplay.textContent = `${accuracy}%`;
531
+ scoreDisplay.textContent = score;
532
+ }
533
+
534
+ // End the game
535
+ function endGame() {
536
+ clearInterval(timer);
537
+ gameActive = false;
538
+
539
+ // Update final stats
540
+ finalScore.textContent = score;
541
+ finalWpm.textContent = wpmDisplay.textContent;
542
+ finalAccuracy.textContent = accuracyDisplay.textContent;
543
+ finalDifficulty.textContent = difficulty.charAt(0).toUpperCase() + difficulty.slice(1);
544
+
545
+ // Show game over modal with animation
546
+ gameOverModal.classList.remove('hidden');
547
+ setTimeout(() => {
548
+ const modalContent = gameOverModal.querySelector('div');
549
+ modalContent.classList.remove('scale-95', 'opacity-0');
550
+ modalContent.classList.add('scale-100', 'opacity-100');
551
+ }, 10);
552
+
553
+ // Reset start button
554
+ startBtn.disabled = false;
555
+ startBtn.classList.remove('bg-gray-600', 'cursor-not-allowed');
556
+ startBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
557
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Game';
558
+ }
559
+
560
+ // Initialize the game when page loads
561
+ window.addEventListener('load', initGame);
562
+ </script>
563
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GMANMD12/speed-typing-challenge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
564
+ </html>