49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
// Startwerte
|
|
const digits = [1, 2, 3, 4];
|
|
|
|
// Richtige Kombination
|
|
const code = [4, 2, 7, 9]; // <- anpassen!
|
|
|
|
const dEls = digits.map((_, i) => document.getElementById('d' + i));
|
|
const pad = document.getElementById('pad');
|
|
const openBtn = document.getElementById('openBtn');
|
|
const success = document.getElementById('success');
|
|
|
|
const render = () => digits.forEach((v, i) => dEls[i].textContent = v);
|
|
|
|
// Klicks auf Münzen
|
|
pad.addEventListener('click', (ev) => {
|
|
const btn = ev.target.closest('.coin');
|
|
if (!btn) return;
|
|
const idx = +btn.dataset.idx;
|
|
const dir = btn.dataset.dir;
|
|
|
|
if (dir === 'up') digits[idx] = (digits[idx] + 1) % 10;
|
|
if (dir === 'down') digits[idx] = (digits[idx] + 9) % 10;
|
|
|
|
render();
|
|
});
|
|
|
|
// Öffnen-Button
|
|
openBtn.addEventListener('click', () => {
|
|
const ok = digits.every((v, i) => v === code[i]);
|
|
if (ok) {
|
|
// Inhalt des Pads ersetzen: alles raus, Nachricht rein
|
|
pad.classList.remove('pad--shake');
|
|
pad.classList.add('pad--cleared');
|
|
pad.innerHTML = `
|
|
<div class="solvedText digit" role="status" aria-live="polite">
|
|
GEHEIMNIS GEÖFFNET
|
|
</div>
|
|
`;
|
|
// Optional: Wenn du den Key-Button danach nicht mehr fokussierbar willst:
|
|
// openBtn.blur();
|
|
} else {
|
|
pad.classList.remove('pad--shake');
|
|
void pad.offsetWidth;
|
|
pad.classList.add('pad--shake');
|
|
}
|
|
});
|
|
|
|
render();
|