Skip to content

Commit 5e0f686

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request #590 from Mudita-Singh/fix-typing-speed-input
fix: resolve Typing Speed Tester uninitialized input and hidden buttons
2 parents cb49d54 + 89d2566 commit 5e0f686

2 files changed

Lines changed: 41 additions & 270 deletions

File tree

‎web-app/js/projects.js‎

Lines changed: 41 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -76,46 +76,7 @@ function getProjectHTML(projectName) {
7676
}
7777
}
7878

79-
function initializeProject(projectName) {
80-
//Prevent duplicate listeners+duplicate ui execution
81-
//if same project is already active it will not re run init
82-
if(activeProject ===projectName ) return;
83-
84-
activeProject=projectName;
8579

86-
const initializers = {
87-
'rock-paper-scissor': initRockPaperScissor,
88-
'dice-rolling': initDiceRolling,
89-
'coin-flip': initCoinFlip,
90-
'blackjack-21' : initBlackjack,
91-
'number-guessing': initNumberGuessing,
92-
'hangman': initHangman,
93-
'flames': initFlames,
94-
'fibonacci': initFibonacci,
95-
'progression-recognizer': initProgressionRecognizer,
96-
'pascal-triangle': initPascalTriangle,
97-
'armstrong': initArmstrong,
98-
'calculator': initCalculator,
99-
'collatz': initCollatz,
100-
'prime-analyzer': initPrimeAnalyzer,
101-
'projectile-motion': initProjectileMotion,
102-
'coordinate-polar-transform': initCoordinatePolarTransform,
103-
'derivative-calculator': initDerivativeCalculator,
104-
'morse-code': initMorseCode,
105-
'tower-of-hanoi': initTowerOfHanoi,
106-
'number-converter': initNumberConverter,
107-
'typing-speed-tester': initTypingSpeedTester,
108-
'snake-game': initSnakeGame,
109-
'whack-a-mole': initWhackaMole,
110-
'password-forge': initPasswordForge,
111-
'2048-game': init2048Game, // Added explicit mapped hook definition binding reference
112-
'typing-speed-tester': initTypingSpeedTester
113-
};
114-
115-
if (initializers[projectName]) {
116-
initializers[projectName]();
117-
}
118-
}
11980

12081
// ============================================
12182
// ROCK PAPER SCISSORS
@@ -1880,109 +1841,6 @@ function initFlames() {
18801841
`;
18811842
}
18821843

1883-
1884-
function showSequence() {
1885-
isPlayingSequence = true;
1886-
disableButtons(true);
1887-
displayContent.textContent = "Watch the sequence...";
1888-
1889-
let i = 0;
1890-
const playNextEmoji = () => {
1891-
if (i < sequence.length) {
1892-
const emoji = sequence[i];
1893-
const button = Array.from(emojiButtons).find(btn => btn.dataset.emoji === emoji);
1894-
1895-
if (button) {
1896-
button.classList.add('active');
1897-
setTimeout(() => {
1898-
button.classList.remove('active');
1899-
i++;
1900-
setTimeout(playNextEmoji, 500);
1901-
}, 600);
1902-
}
1903-
} else {
1904-
isPlayingSequence = false;
1905-
disableButtons(false);
1906-
userSequence = [];
1907-
gameActive = true;
1908-
displayContent.textContent = "Your turn! Click the emojis...";
1909-
instructionsDiv.textContent = `👆 Repeat the sequence (${sequence.length} steps)`;
1910-
}
1911-
};
1912-
1913-
playNextEmoji();
1914-
}
1915-
1916-
function startNewRound() {
1917-
const newEmoji = emojis[Math.floor(Math.random() * emojis.length)];
1918-
sequence.push(newEmoji);
1919-
userSequence = [];
1920-
1921-
sequenceLengthDisplay.textContent = sequence.length;
1922-
setTimeout(showSequence, 500);
1923-
}
1924-
1925-
function handleEmojiClick(emoji, button) {
1926-
if (isPlayingSequence || !gameActive) return;
1927-
1928-
userSequence.push(emoji);
1929-
button.classList.add('active');
1930-
1931-
setTimeout(() => {
1932-
button.classList.remove('active');
1933-
}, 300);
1934-
1935-
// Check if the emoji matches
1936-
if (userSequence[userSequence.length - 1] !== sequence[userSequence.length - 1]) {
1937-
gameOver();
1938-
return;
1939-
}
1940-
1941-
// Check if the entire sequence is correct
1942-
if (userSequence.length === sequence.length) {
1943-
score += level * 10;
1944-
scoreDisplay.textContent = score;
1945-
level++;
1946-
levelDisplay.textContent = level;
1947-
1948-
instructionsDiv.textContent = "✅ Correct! Get ready for the next round...";
1949-
gameActive = false;
1950-
setTimeout(startNewRound, 1500);
1951-
}
1952-
}
1953-
1954-
function gameOver() {
1955-
gameActive = false;
1956-
disableButtons(true);
1957-
instructionsDiv.textContent = `❌ Game Over! You reached Level ${level} with Score: ${score}`;
1958-
displayContent.textContent = `Final Score: ${score}`;
1959-
startBtn.textContent = "▶️ PLAY AGAIN";
1960-
}
1961-
1962-
function resetGame() {
1963-
sequence = [];
1964-
userSequence = [];
1965-
score = 0;
1966-
level = 1;
1967-
gameActive = false;
1968-
isPlayingSequence = false;
1969-
1970-
scoreDisplay.textContent = '0';
1971-
levelDisplay.textContent = '1';
1972-
sequenceLengthDisplay.textContent = '0';
1973-
instructionsDiv.textContent = "👇 Click START to begin the game!";
1974-
displayContent.textContent = "Ready to test your memory?";
1975-
startBtn.textContent = "▶️ START";
1976-
1977-
disableButtons(true);
1978-
}
1979-
1980-
startBtn.addEventListener('click', () => {
1981-
resetGame();
1982-
gameActive = true;
1983-
instructionsDiv.textContent = "Watch the sequence...";
1984-
startNewRound();
1985-
19861844
calculateBtn.addEventListener('click', calculateFlames);
19871845
name1Input.addEventListener('keypress', (e) => {
19881846
if (e.key === 'Enter') calculateFlames();
@@ -3894,45 +3752,50 @@ function getProductivePetHTML() {
38943752

38953753

38963754
function initializeProject(projectName) {
3755+
if (activeProject === projectName) return;
3756+
activeProject = projectName;
3757+
38973758
const initializers = {
3898-
'tic-tac-toe': initTicTacToe,
3899-
'rock-paper-scissor': initRockPaperScissor,
3900-
'dice-rolling': initDiceRolling,
3901-
'coin-flip': initCoinFlip,
3902-
'number-guessing': initNumberGuessing,
3903-
'hangman': initHangman,
3904-
'word-scramble': initWordScramble,
3905-
'flames': initFlames,
3906-
'dots-boxes': initDotsBoxes,
3907-
'emoji-memory': initEmojiMemoryGame,
3908-
'fibonacci': initFibonacci,
3909-
'progression-recognizer': initProgressionRecognizer,
3910-
'pascal-triangle': initPascalTriangle,
3911-
'armstrong': initArmstrong,
3912-
'calculator': initCalculator,
3913-
'collatz': initCollatz,
3914-
'prime-analyzer': initPrimeAnalyzer,
3915-
'projectile-motion': initProjectileMotion,
3916-
'coordinate-polar-transform': initCoordinatePolarTransform,
3917-
'derivative-calculator': initDerivativeCalculator,
3918-
'morse-code': initMorseCode,
3919-
'tower-of-hanoi': initTowerOfHanoi,
3920-
'number-converter': initNumberConverter,
3921-
'typing-speed-tester': initTypingSpeedTester,
3922-
'snake-game': initSnakeGame,
3923-
'password-forge': initPasswordForge, // Register Password Forge initializer
3924-
'spot-the-difference': initSpotTheDifference,
3925-
'whack-a-mole': initWhackaMole,
3926-
'flappy-game': initFlappyGame,
3927-
'productive-pet': initProductivePet,
3928-
'simon-says': initSimonSays,
3929-
'2048-game': init2048Game,
3930-
'color-palette': initColorPalette,
3931-
'math-quiz': initMathQuiz,
3759+
'tic-tac-toe': 'initTicTacToe',
3760+
'rock-paper-scissor': 'initRockPaperScissor',
3761+
'dice-rolling': 'initDiceRolling',
3762+
'coin-flip': 'initCoinFlip',
3763+
'blackjack-21': 'initBlackjack',
3764+
'number-guessing': 'initNumberGuessing',
3765+
'hangman': 'initHangman',
3766+
'word-scramble': 'initWordScramble',
3767+
'flames': 'initFlames',
3768+
'dots-boxes': 'initDotsBoxes',
3769+
'emoji-memory': 'initEmojiMemoryGame',
3770+
'fibonacci': 'initFibonacci',
3771+
'progression-recognizer': 'initProgressionRecognizer',
3772+
'pascal-triangle': 'initPascalTriangle',
3773+
'armstrong': 'initArmstrong',
3774+
'calculator': 'initCalculator',
3775+
'collatz': 'initCollatz',
3776+
'prime-analyzer': 'initPrimeAnalyzer',
3777+
'projectile-motion': 'initProjectileMotion',
3778+
'coordinate-polar-transform': 'initCoordinatePolarTransform',
3779+
'derivative-calculator': 'initDerivativeCalculator',
3780+
'morse-code': 'initMorseCode',
3781+
'tower-of-hanoi': 'initTowerOfHanoi',
3782+
'number-converter': 'initNumberConverter',
3783+
'typing-speed-tester': 'initTypingSpeedTester',
3784+
'snake-game': 'initSnakeGame',
3785+
'password-forge': 'initPasswordForge',
3786+
'spot-the-difference': 'initSpotTheDifference',
3787+
'whack-a-mole': 'initWhackaMole',
3788+
'flappy-game': 'initFlappyGame',
3789+
'productive-pet': 'initProductivePet',
3790+
'simon-says': 'initSimonSays',
3791+
'2048-game': 'init2048Game',
3792+
'color-palette': 'initColorPalette',
3793+
'math-quiz': 'initMathQuiz'
39323794
};
39333795

3934-
if (initializers[projectName]) {
3935-
initializers[projectName]();
3796+
const initializerName = initializers[projectName];
3797+
if (initializerName && typeof window[initializerName] === 'function') {
3798+
window[initializerName]();
39363799
}
39373800
}
39383801

‎web-app/js/projects/typing-speed-tester.js‎

Lines changed: 0 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -7,98 +7,6 @@ function getTypingSpeedTesterHTML() {
77
min-height: auto;
88
padding: 1rem;
99
}
10-
<div class="project-content">
11-
12-
<h2>⌨️ Typing Speed Tester</h2>
13-
14-
<p style="margin-bottom: 10px;">
15-
Type the exact sentence shown below 👇
16-
</p>
17-
18-
19-
<div
20-
id="typingSentence"
21-
style="
22-
background: var(--surface-color);
23-
color: var(--text-color);
24-
padding: 15px;
25-
border-radius: 10px;
26-
margin-bottom: 20px;
27-
font-size: 18px;
28-
line-height: 1.8;
29-
min-height: 80px;
30-
"
31-
>
32-
Click Start Test 🚀
33-
</div>
34-
35-
<button
36-
id="startTypingBtn"
37-
type="button"
38-
class="btn-generate"
39-
style="
40-
margin-bottom: 20px;
41-
font-weight: 700;
42-
font-size: 16px;
43-
width:auto;
44-
min-height: 44px;
45-
padding: 12px 24px;
46-
border-radius: 30px;
47-
background-color:var(--accent-color);
48-
color:white;
49-
"
50-
>
51-
Start Test 🚀
52-
</button>
53-
54-
<button
55-
id="newSentenceBtn"
56-
type="button"
57-
class="btn-generate"
58-
style="
59-
margin-bottom: 20px;
60-
margin-left: 10px;
61-
font-weight: 700;
62-
font-size: 16px;
63-
width:auto;
64-
min-height: 44px;
65-
padding: 12px 24px;
66-
border-radius: 30px;
67-
background-color:#9333ea;
68-
color:white;
69-
"
70-
>
71-
🔄 New Sentence
72-
</button>
73-
74-
<div>
75-
<textarea
76-
id="typingInput"
77-
placeholder="Start typing here..."
78-
rows="5"
79-
disabled
80-
style="
81-
width: 100%;
82-
padding: 15px;
83-
border-radius: 10px;
84-
font-size: 16px;
85-
margin-bottom: 20px;
86-
background: var(--surface-color);
87-
color: var(--text-color);
88-
border: 1px solid var(--border-color);
89-
"
90-
></textarea>
91-
</div>
92-
93-
94-
<div
95-
id="typingResult"
96-
style="
97-
margin-top: 25px;
98-
font-size: 18px;
99-
line-height: 1.8;
100-
"
101-
></div>
10210
10311
.typing-tester .stage {
10412
background: linear-gradient(180deg, rgba(34, 197, 94, 0.06), rgba(15, 23, 42, 0.04));

0 commit comments

Comments
 (0)