Metronom läuft, Steuerung über Lautsprecher

This commit is contained in:
jamulix 2025-10-25 04:21:08 +02:00 committed by jamulix (aider)
commit f0cbb393e6
2 changed files with 55 additions and 65 deletions

View file

@ -46,42 +46,20 @@ document.addEventListener('DOMContentLoaded', function() {
let lines = fullText.split('\n');
let userScrolled = false; // Flag für manuelles Scrollen
// Volume-Toggle initialisieren - Standardmäßig Ton an (nicht stumm)
let metronomeMuted = false;
// Volume-Toggle initialisieren - Steuert jetzt das Metronom
// Standardmäßig ist das Metronom an (volume-2 angezeigt)
let metronomeEnabled = true;
const volumeOn = document.getElementById('volume-on');
const volumeOff = document.getElementById('volume-off');
// Initiale Anzeige: volume-2 anzeigen, volume-x verstecken
volumeOn.style.display = 'block';
volumeOff.style.display = 'none';
document.getElementById('volume-toggle').addEventListener('click', function() {
metronomeMuted = !metronomeMuted;
if (metronomeMuted) {
volumeOn.style.display = 'none';
volumeOff.style.display = 'block';
} else {
volumeOn.style.display = 'block';
volumeOff.style.display = 'none';
}
});
// ErrorLock State - Standardmäßig geöffnet (errorLock = false)
let errorLock = false;
const lockClosed = document.getElementById('lock-closed');
const lockOpen = document.getElementById('lock-open');
// Initiale Anzeige: offenes Schloss anzeigen, geschlossenes verstecken
lockClosed.style.display = 'none';
lockOpen.style.display = 'block';
// Metronom State - Initialisierung mit Werten von Flask
let metronomeEnabled = window.metronomeEnabled || false;
// Metronom State - Initialisierung
let metronomeInterval = null;
let audioContext = null;
let metronomeSound = window.metronomeSound || 'beep';
let metronomeBPM = window.metronomeBPM || 60;
const metronomeToggle = document.getElementById('metronome-toggle');
const metronomeOn = document.getElementById('metronome-on');
const metronomeOff = document.getElementById('metronome-off');
// Metronom-Funktionen
function createBeepSound(vol, freq, duration) {
@ -129,8 +107,8 @@ document.addEventListener('DOMContentLoaded', function() {
}
function playMetronomeSound() {
// Wenn der Ton stummgeschaltet ist, keinen Sound abspielen
if (metronomeMuted) {
// Wenn das Metronom ausgeschaltet ist, keinen Sound abspielen
if (!metronomeEnabled) {
// Aber visuelles Feedback trotzdem anzeigen
const cursorElement = document.querySelector('.cursor-char');
if (cursorElement) {
@ -171,44 +149,23 @@ document.addEventListener('DOMContentLoaded', function() {
metronomeInterval = null;
}
}
// Initialen Zustand des Metronom-Toggles setzen
if (metronomeEnabled) {
metronomeOn.style.display = 'block';
metronomeOff.style.display = 'none';
if (!isPaused) {
startMetronome();
}
} else {
metronomeOn.style.display = 'none';
metronomeOff.style.display = 'block';
// Starte Metronom standardmäßig
if (!isPaused) {
startMetronome();
}
// Lock-Toggle initialisieren
document.getElementById('lock-toggle').addEventListener('click', function() {
if (errorLock) {
// Wechsel zu unlocked
errorLock = false;
lockClosed.style.display = 'none';
lockOpen.style.display = 'block';
} else {
// Wechsel zu locked
errorLock = true;
lockClosed.style.display = 'block';
lockOpen.style.display = 'none';
}
});
// Metronom-Toggle initialisieren
metronomeToggle.addEventListener('click', function() {
document.getElementById('volume-toggle').addEventListener('click', function() {
metronomeEnabled = !metronomeEnabled;
if (metronomeEnabled) {
metronomeOn.style.display = 'block';
metronomeOff.style.display = 'none';
startMetronome();
volumeOn.style.display = 'block';
volumeOff.style.display = 'none';
if (!isPaused) {
startMetronome();
}
} else {
metronomeOn.style.display = 'none';
metronomeOff.style.display = 'block';
volumeOn.style.display = 'none';
volumeOff.style.display = 'block';
stopMetronome();
}
// Einstellungen an Server senden
@ -225,6 +182,30 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
// ErrorLock State - Standardmäßig geöffnet (errorLock = false)
let errorLock = false;
const lockClosed = document.getElementById('lock-closed');
const lockOpen = document.getElementById('lock-open');
// Initiale Anzeige: offenes Schloss anzeigen, geschlossenes verstecken
lockClosed.style.display = 'none';
lockOpen.style.display = 'block';
// Lock-Toggle initialisieren
document.getElementById('lock-toggle').addEventListener('click', function() {
if (errorLock) {
// Wechsel zu unlocked
errorLock = false;
lockClosed.style.display = 'none';
lockOpen.style.display = 'block';
} else {
// Wechsel zu locked
errorLock = true;
lockClosed.style.display = 'block';
lockOpen.style.display = 'none';
}
});
// Play/Pause-Toggle initialisieren
const playPauseToggle = document.getElementById('play-pause-toggle');
if (playPauseToggle) {
@ -292,6 +273,19 @@ document.addEventListener('DOMContentLoaded', function() {
}
return lines.length - 1;
}
// Funktion zur Berechnung der Länge des korrekten Präfixes
function getCorrectPrefixLength() {
let correct = 0;
for (let i = 0; i < userInput.length; i++) {
if (i < fullText.length && userInput[i] === fullText[i]) {
correct++;
} else {
break;
}
}
return correct;
}
// Zeige den Text an
updateTextDisplay();

View file

@ -34,10 +34,6 @@
<i data-lucide="pause" id="play-pause-pause" style="width: 24px; height: 24px; position: absolute; top: 0; left: 0;"></i>
<i data-lucide="play" id="play-pause-play" style="width: 24px; height: 24px; position: absolute; top: 0; left: 0; display: none;"></i>
</div>
<div id="metronome-toggle" style="width: 24px; height: 24px; cursor: pointer; position: relative;">
<i data-lucide="metronome" id="metronome-on" style="width: 24px; height: 24px; position: absolute; top: 0; left: 0; display: none;"></i>
<i data-lucide="circle" id="metronome-off" style="width: 24px; height: 24px; position: absolute; top: 0; left: 0;"></i>
</div>
<i data-lucide="help-circle" class="icon-placeholder" style="width: 24px; height: 24px; cursor: pointer;"></i>
</div>
</div>