Skip to content

Commit 432fd7f

Browse files
committed
removed keyboard buttons, and use buttons in debug area as controls
1 parent e3b9c36 commit 432fd7f

8 files changed

Lines changed: 201 additions & 64 deletions

File tree

frog/index.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@
1616
<button id="backBtn" class="control-button back-button" onclick="window.location.href='../index.html'"
1717
title="Back to Games">‹‹</button>
1818

19-
<!-- Timestamp Display for Debugging -->
20-
<div id="timestampDisplay" class="timestamp-display">0.00s</div>
21-
22-
<!-- Recognition Counter Display -->
23-
<div id="recogniseCounter" class="recognise-counter">Recognize: 0 words</div>
19+
<!-- Debug Controls Area -->
20+
<div class="debug-controls">
21+
<div id="timestampDisplay" class="timestamp-display">0.00s</div>
22+
<button id="rewindBtn" class="debug-button" onclick="rewindFiveSeconds()" title="Rewind 5s"></button>
23+
<button id="skipBtn" class="debug-button" onclick="skipForwardFiveSeconds()" title="Skip 5s"></button>
24+
<div id="recogniseCounter" class="recognise-counter">Recognize: 0 words</div>
25+
</div>
2426

2527
<div class="outside-notes">
2628
<div class="floating-fly" style="transform: rotate(45deg);">🪰</div>

frog/lyrics-data.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
// Global lyrics data for the Frog Goes Ribbit karaoke game
77
window.lyricsData = {
8-
offset: 16.0,
8+
offset: 1.0,
99
outro: 3,
1010
song_source: "song.mp3",
1111
music_source: "music.mp3",

frog/style.css

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,55 @@ body {
1111
justify-content: center;
1212
}
1313

14-
/* Timestamp Display for Debugging */
15-
.timestamp-display {
14+
/* Debug Controls Area */
15+
.debug-controls {
1616
position: fixed;
1717
top: 20px;
1818
right: 20px;
19+
display: flex;
20+
flex-direction: column;
21+
gap: 5px;
22+
align-items: flex-end;
23+
z-index: 1000;
24+
}
25+
26+
/* Timestamp Display for Debugging */
27+
.timestamp-display {
1928
background: rgba(255, 255, 255, 0.9);
2029
color: black;
2130
font-size: 12pt;
2231
font-family: 'Courier New', monospace;
2332
padding: 8px 12px;
2433
border-radius: 6px;
2534
border: 1px solid #4CAF50;
26-
z-index: 1000;
2735
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2836
}
2937

38+
/* Debug Buttons */
39+
.debug-button {
40+
background: rgba(76, 175, 80, 0.9);
41+
color: white;
42+
border: none;
43+
padding: 8px 12px;
44+
border-radius: 6px;
45+
font-size: 14px;
46+
cursor: pointer;
47+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
48+
transition: all 0.2s ease;
49+
min-width: 40px;
50+
}
51+
52+
.debug-button:hover {
53+
background: rgba(76, 175, 80, 1);
54+
transform: translateY(-1px);
55+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
56+
}
57+
58+
.debug-button:active {
59+
transform: translateY(0);
60+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
61+
}
62+
3063
/* Recognition Counter Display */
3164
.recognise-counter {
3265
position: fixed;
@@ -300,27 +333,31 @@ h1 {
300333

301334
/* Lyrics display area */
302335
.lyrics-container {
303-
background: rgba(255, 255, 255, 0.95);
304336
border-radius: 20px;
305337
padding: 30px;
306338
margin: 20px 0;
307339
box-shadow: 0 8px 25px rgba(46, 125, 50, 0.2);
308-
border: 3px solid #4CAF50;
309340
min-height: 120px;
310341
display: flex;
311342
flex-direction: column;
312343
justify-content: center;
313-
width: 100%;
314-
max-width: 600px;
344+
width: 80%;
315345
}
316346

317347
.sentence-display {
318-
font-size: 1.8rem;
348+
font-size: 3.2rem;
319349
text-align: center;
320350
color: #1B5E20;
321351
line-height: 1.4;
322352
font-weight: bold;
323353
margin-bottom: 15px;
354+
word-wrap: break-word;
355+
word-break: break-word;
356+
overflow-wrap: break-word;
357+
white-space: normal;
358+
width: 100%;
359+
box-sizing: border-box;
360+
max-width: 100%;
324361
}
325362

326363
/* Progress bar container */

golden/index.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@
1616
<button id="backBtn" class="control-button back-button" onclick="window.location.href='../index.html'"
1717
title="Back to Games">‹‹</button>
1818

19-
<!-- Timestamp Display for Debugging -->
20-
<div id="timestampDisplay" class="timestamp-display">0.00s</div>
21-
22-
<!-- Recognition Counter Display -->
23-
<div id="recogniseCounter" class="recognise-counter">Recognize: 0 words</div>
19+
<!-- Debug Controls Area -->
20+
<div class="debug-controls">
21+
<div id="timestampDisplay" class="timestamp-display">0.00s</div>
22+
<button id="rewindBtn" class="debug-button" onclick="rewindFiveSeconds()" title="Rewind 5s"></button>
23+
<button id="skipBtn" class="debug-button" onclick="skipForwardFiveSeconds()" title="Skip 5s"></button>
24+
<div id="recogniseCounter" class="recognise-counter">Recognize: 0 words</div>
25+
</div>
2426

2527
<div class="outside-notes">
2628
<div class="floating-note">🎉</div>

golden/style.css

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,55 @@ body {
1111
justify-content: center;
1212
}
1313

14-
/* Timestamp Display for Debugging */
15-
.timestamp-display {
14+
/* Debug Controls Area */
15+
.debug-controls {
1616
position: fixed;
1717
top: 20px;
1818
right: 20px;
19+
display: flex;
20+
flex-direction: column;
21+
gap: 5px;
22+
align-items: flex-end;
23+
z-index: 1000;
24+
}
25+
26+
/* Timestamp Display for Debugging */
27+
.timestamp-display {
1928
background: rgba(255, 255, 255, 0.9);
2029
color: black;
2130
font-size: 12pt;
2231
font-family: 'Courier New', monospace;
2332
padding: 8px 12px;
2433
border-radius: 6px;
2534
border: 1px solid #ccc;
26-
z-index: 1000;
2735
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2836
}
2937

38+
/* Debug Buttons */
39+
.debug-button {
40+
background: rgba(37, 99, 235, 0.9);
41+
color: white;
42+
border: none;
43+
padding: 8px 12px;
44+
border-radius: 6px;
45+
font-size: 14px;
46+
cursor: pointer;
47+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
48+
transition: all 0.2s ease;
49+
min-width: 40px;
50+
}
51+
52+
.debug-button:hover {
53+
background: rgba(37, 99, 235, 1);
54+
transform: translateY(-1px);
55+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
56+
}
57+
58+
.debug-button:active {
59+
transform: translateY(0);
60+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
61+
}
62+
3063
/* Recognition Counter Display */
3164
.recognise-counter {
3265
position: fixed;
@@ -523,17 +556,16 @@ p {
523556

524557
/* Lyrics Display Styling */
525558
.lyrics-container {
526-
background: rgba(255, 255, 255, 0.95);
527559
border-radius: 20px;
528560
padding: 20px;
529561
margin: 20px 0;
530562
box-shadow: 0 4px 16px rgba(123, 58, 237, 0.3);
531-
border: 3px solid #2563EB;
563+
width: 80%;
532564
}
533565

534566
.sentence-display {
535-
font-size: 1.5em;
536-
line-height: 1.8;
567+
font-size: 3.2rem;
568+
line-height: 1.4;
537569
min-height: 80px;
538570
display: flex;
539571
align-items: center;
@@ -542,6 +574,13 @@ p {
542574
font-weight: bold;
543575
color: #1E3A8A;
544576
margin-bottom: 15px;
577+
word-wrap: break-word;
578+
word-break: break-word;
579+
overflow-wrap: break-word;
580+
white-space: normal;
581+
flex-wrap: wrap;
582+
width: 100%;
583+
box-sizing: border-box;
545584
}
546585

547586
.word {

js/karaoke-controller.js

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -96,19 +96,15 @@ function initializeKaraoke() {
9696
button.addEventListener('touchstart', () => addPressedEffect(button), { passive: true });
9797
});
9898

99-
// Add keyboard support for rewind and skip functionality
99+
// Add keyboard support for spacebar only
100100
document.addEventListener('keydown', (event) => {
101-
if (event.key === 'ArrowLeft') {
102-
event.preventDefault(); // Prevent browser default behavior
103-
rewindFiveSeconds();
104-
addPressedEffect(document.getElementById('restartBtn')); // Visual feedback
105-
console.log('Left arrow key pressed - rewinding 5 seconds');
106-
} else if (event.key === 'ArrowRight') {
107-
event.preventDefault(); // Prevent browser default behavior
108-
skipForwardFiveSeconds();
109-
addPressedEffect(document.getElementById('playBtn')); // Visual feedback on play button
110-
console.log('Right arrow key pressed - skipping forward 5 seconds');
111-
} else if (event.code === 'Space') {
101+
// Make sure lyricsEngine is initialized before handling keyboard events
102+
if (!lyricsEngine) {
103+
console.warn('Keyboard shortcut ignored - LyricsEngine not initialized');
104+
return;
105+
}
106+
107+
if (event.code === 'Space') {
112108
event.preventDefault(); // Prevent page scroll
113109
togglePlayPause();
114110
console.log('Spacebar pressed - toggling play/pause');
@@ -139,32 +135,47 @@ function stopLyrics() {
139135

140136
// Rewind function for 5-second back functionality
141137
function rewindFiveSeconds() {
138+
if (!lyricsEngine) {
139+
console.error('LyricsEngine not initialized');
140+
return;
141+
}
142+
142143
console.log('Rewinding 5 seconds');
143144

144-
// Pause both songs first
145-
lyricsEngine.pause();
145+
// Remember if we were playing before seeking
146+
const wasPlaying = !lyricsEngine.isPaused();
146147

147148
// Calculate new time (minimum 0 seconds)
148149
const newTime = Math.max(0, lyricsEngine.getCurrentTime() - 5);
149150

150151
// Set both audio tracks to new time
151152
lyricsEngine.setCurrentTime(newTime);
152153

153-
// Brief pause before resuming (smoother transition)
154-
setTimeout(() => {
155-
// Resume playback
156-
lyricsEngine.play();
154+
// Only resume playback if we were already playing
155+
if (wasPlaying) {
156+
setTimeout(() => {
157+
lyricsEngine.play();
158+
updatePlayButtonAppearance();
159+
updateRestartButtonAppearance();
160+
}, 100); // 100ms pause for smooth transition
161+
} else {
162+
// Just update button appearances for paused state
157163
updatePlayButtonAppearance();
158164
updateRestartButtonAppearance();
159-
}, 100); // 100ms pause for smooth transition
165+
}
160166
}
161167

162168
// Skip forward function for 5-second ahead functionality
163169
function skipForwardFiveSeconds() {
170+
if (!lyricsEngine) {
171+
console.error('LyricsEngine not initialized');
172+
return;
173+
}
174+
164175
console.log('Skipping forward 5 seconds');
165176

166-
// Pause both songs first
167-
lyricsEngine.pause();
177+
// Remember if we were playing before seeking
178+
const wasPlaying = !lyricsEngine.isPaused();
168179

169180
// Calculate new time (with upper bounds checking)
170181
const maxTime = lyricsEngine.getDuration() || Infinity;
@@ -173,13 +184,18 @@ function skipForwardFiveSeconds() {
173184
// Set both audio tracks to new time
174185
lyricsEngine.setCurrentTime(newTime);
175186

176-
// Brief pause before resuming (smoother transition)
177-
setTimeout(() => {
178-
// Resume playback
179-
lyricsEngine.play();
187+
// Only resume playback if we were already playing
188+
if (wasPlaying) {
189+
setTimeout(() => {
190+
lyricsEngine.play();
191+
updatePlayButtonAppearance();
192+
updateRestartButtonAppearance();
193+
}, 100); // 100ms pause for smooth transition
194+
} else {
195+
// Just update button appearances for paused state
180196
updatePlayButtonAppearance();
181197
updateRestartButtonAppearance();
182-
}, 100); // 100ms pause for smooth transition
198+
}
183199
}
184200

185201
// Global functions for onclick handlers

twinkletwinkle/index.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@
1616
<button id="backBtn" class="control-button back-button" onclick="window.location.href='../index.html'"
1717
title="Back to Games">‹‹</button>
1818

19-
<!-- Timestamp Display for Debugging -->
20-
<div id="timestampDisplay" class="timestamp-display">0.00s</div>
21-
22-
<!-- Recognition Counter Display -->
23-
<div id="recogniseCounter" class="recognise-counter">Recognize: 0 words</div>
19+
<!-- Debug Controls Area -->
20+
<div class="debug-controls">
21+
<div id="timestampDisplay" class="timestamp-display">0.00s</div>
22+
<button id="rewindBtn" class="debug-button" onclick="rewindFiveSeconds()" title="Rewind 5s"></button>
23+
<button id="skipBtn" class="debug-button" onclick="skipForwardFiveSeconds()" title="Skip 5s"></button>
24+
<div id="recogniseCounter" class="recognise-counter">Recognize: 0 words</div>
25+
</div>
2426

2527
<div class="outside-notes">
2628
<div class="floating-note">🎵</div>

0 commit comments

Comments
 (0)