feat: add two-player scoring app with speech recognition
Plain HTML/JS app for issue #4 — tap or voice commands (de-DE) to score. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cursor
@@ -0,0 +1,459 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Scoring — zwei Spieler</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f1117;
|
||||
--surface: #1a1d27;
|
||||
--border: #2a2f3d;
|
||||
--text: #e8eaed;
|
||||
--muted: #9aa0ad;
|
||||
--p1: #6ee7b7;
|
||||
--p1-dim: #34d399;
|
||||
--p2: #818cf8;
|
||||
--p2-dim: #6366f1;
|
||||
--danger: #f87171;
|
||||
--listening: #fbbf24;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 1.25rem 1.5rem 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.board {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
max-width: 52rem;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.player {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.player.active {
|
||||
box-shadow: 0 0 0 2px var(--listening);
|
||||
}
|
||||
|
||||
.player--1 { border-top: 3px solid var(--p1); }
|
||||
.player--2 { border-top: 3px solid var(--p2); }
|
||||
|
||||
.player-name {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
padding: 0.35rem 0.25rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.player--1 .player-name:focus { border-color: var(--p1); }
|
||||
.player--2 .player-name:focus { border-color: var(--p2); }
|
||||
|
||||
.score {
|
||||
font-size: clamp(3.5rem, 18vw, 5.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.player--1 .score { color: var(--p1); }
|
||||
.player--2 .score { color: var(--p2); }
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.55rem 0.85rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
button:active { transform: scale(0.96); }
|
||||
|
||||
button.plus { border-color: var(--p1-dim); color: var(--p1); }
|
||||
button.minus { border-color: #4b5563; color: var(--muted); }
|
||||
|
||||
.player--2 button.plus { border-color: var(--p2-dim); color: var(--p2); }
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
justify-content: center;
|
||||
padding: 0 1rem 1rem;
|
||||
max-width: 52rem;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#mic-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 1rem;
|
||||
border: 2px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
#mic-btn.listening {
|
||||
border-color: var(--listening);
|
||||
color: var(--listening);
|
||||
animation: pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
#mic-btn.unsupported {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.35); }
|
||||
50% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); }
|
||||
}
|
||||
|
||||
#reset-btn {
|
||||
color: var(--danger);
|
||||
border-color: #7f1d1d;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
min-height: 2.75rem;
|
||||
padding: 0.5rem 1.25rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
max-width: 36rem;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-bar strong { color: var(--text); }
|
||||
|
||||
.hint {
|
||||
max-width: 36rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.25rem 1.5rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hint code {
|
||||
background: var(--surface);
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer a { color: var(--p1-dim); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Scoring</h1>
|
||||
</header>
|
||||
|
||||
<div class="board">
|
||||
<article class="player player--1" id="player-1" data-player="1">
|
||||
<input class="player-name" type="text" value="Spieler 1" maxlength="24" aria-label="Name Spieler 1">
|
||||
<div class="score" id="score-1">0</div>
|
||||
<div class="controls">
|
||||
<button type="button" class="minus" data-delta="-1">−1</button>
|
||||
<button type="button" class="plus" data-delta="1">+1</button>
|
||||
<button type="button" class="plus" data-delta="2">+2</button>
|
||||
<button type="button" class="plus" data-delta="3">+3</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="player player--2" id="player-2" data-player="2">
|
||||
<input class="player-name" type="text" value="Spieler 2" maxlength="24" aria-label="Name Spieler 2">
|
||||
<div class="score" id="score-2">0</div>
|
||||
<div class="controls">
|
||||
<button type="button" class="minus" data-delta="-1">−1</button>
|
||||
<button type="button" class="plus" data-delta="1">+1</button>
|
||||
<button type="button" class="plus" data-delta="2">+2</button>
|
||||
<button type="button" class="plus" data-delta="3">+3</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button type="button" id="mic-btn" aria-pressed="false">
|
||||
<span aria-hidden="true">🎤</span>
|
||||
<span id="mic-label">Spracheingabe</span>
|
||||
</button>
|
||||
<button type="button" id="reset-btn">Zurücksetzen</button>
|
||||
</div>
|
||||
|
||||
<p class="status-bar" id="status" role="status" aria-live="polite"></p>
|
||||
|
||||
<p class="hint">
|
||||
Sprachbefehle (de-DE): <code>eins plus drei</code>, <code>zwei minus eins</code>,
|
||||
<code>spieler eins plus fünf</code>, <code>zurücksetzen</code>.
|
||||
Mikrofon-Zugriff nötig; funktioniert in Chrome/Edge/Safari (nicht Firefox).
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
@cursor · Issue #4 ·
|
||||
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/4">scoring</a>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const scores = { 1: 0, 2: 0 };
|
||||
const statusEl = document.getElementById('status');
|
||||
const micBtn = document.getElementById('mic-btn');
|
||||
const micLabel = document.getElementById('mic-label');
|
||||
|
||||
function getName(player) {
|
||||
return document.querySelector(`#player-${player} .player-name`).value.trim()
|
||||
|| `Spieler ${player}`;
|
||||
}
|
||||
|
||||
function render(player) {
|
||||
document.getElementById(`score-${player}`).textContent = scores[player];
|
||||
}
|
||||
|
||||
function adjust(player, delta) {
|
||||
scores[player] = Math.max(0, scores[player] + delta);
|
||||
render(player);
|
||||
flashPlayer(player);
|
||||
setStatus(`${getName(player)}: ${delta > 0 ? '+' : ''}${delta} → ${scores[player]}`);
|
||||
}
|
||||
|
||||
function flashPlayer(player) {
|
||||
const el = document.getElementById(`player-${player}`);
|
||||
el.classList.add('active');
|
||||
setTimeout(() => el.classList.remove('active'), 400);
|
||||
}
|
||||
|
||||
function resetScores() {
|
||||
scores[1] = 0;
|
||||
scores[2] = 0;
|
||||
render(1);
|
||||
render(2);
|
||||
setStatus('Punkte zurückgesetzt.');
|
||||
}
|
||||
|
||||
function setStatus(msg) {
|
||||
statusEl.innerHTML = msg ? `<strong>Letzter Befehl:</strong> ${msg}` : '';
|
||||
}
|
||||
|
||||
document.querySelectorAll('.controls button').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const player = Number(btn.closest('.player').dataset.player);
|
||||
adjust(player, Number(btn.dataset.delta));
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('reset-btn').addEventListener('click', resetScores);
|
||||
|
||||
// --- Speech recognition ---
|
||||
|
||||
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||
let recognition = null;
|
||||
let listening = false;
|
||||
|
||||
const NUMBER_WORDS = {
|
||||
null: 0, zero: 0, eins: 1, ein: 1, eine: 1, zwei: 2, zwo: 2, drei: 3,
|
||||
vier: 4, fünf: 5, funf: 5, sechs: 6, sieben: 7, acht: 8, neun: 9, zehn: 10
|
||||
};
|
||||
|
||||
function parseNumber(token) {
|
||||
if (!token) return null;
|
||||
const t = token.toLowerCase().replace(/[.,]/g, '');
|
||||
if (NUMBER_WORDS[t] !== undefined) return NUMBER_WORDS[t];
|
||||
const n = parseInt(t, 10);
|
||||
return Number.isFinite(n) ? n : null;
|
||||
}
|
||||
|
||||
function resolvePlayer(text) {
|
||||
const t = text.toLowerCase();
|
||||
if (/\b(zwei|2|zwo|rechts|blau)\b/.test(t)) return 2;
|
||||
if (/\b(eins|1|ein|links|grün|gruen)\b/.test(t)) return 1;
|
||||
return null;
|
||||
}
|
||||
|
||||
function parseCommand(raw) {
|
||||
const text = raw.trim().toLowerCase();
|
||||
if (!text) return null;
|
||||
|
||||
if (/\b(zurücksetzen|zuruecksetzen|reset|neu|null|nullen)\b/.test(text)) {
|
||||
return { action: 'reset' };
|
||||
}
|
||||
|
||||
const player = resolvePlayer(text);
|
||||
if (!player) return null;
|
||||
|
||||
const minus = /\b(minus|weniger|abzüglich|abzuglich|-)\b/.test(text);
|
||||
const plus = /\b(plus|mehr|dazu|\+)\b/.test(text) || !minus;
|
||||
|
||||
const digitMatch = text.match(/(\d+)/);
|
||||
let amount = digitMatch ? parseInt(digitMatch[1], 10) : null;
|
||||
|
||||
if (amount === null) {
|
||||
for (const word of Object.keys(NUMBER_WORDS)) {
|
||||
if (word === 'null' || word === 'zero') continue;
|
||||
const re = new RegExp(`\\b${word}\\b`);
|
||||
if (re.test(text)) {
|
||||
amount = NUMBER_WORDS[word];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (amount === null) amount = 1;
|
||||
const delta = minus ? -amount : plus ? amount : null;
|
||||
if (delta === null) return null;
|
||||
|
||||
return { action: 'score', player, delta };
|
||||
}
|
||||
|
||||
function handleTranscript(text) {
|
||||
const cmd = parseCommand(text);
|
||||
if (!cmd) {
|
||||
setStatus(`Nicht erkannt: „${text}"`);
|
||||
return;
|
||||
}
|
||||
if (cmd.action === 'reset') {
|
||||
resetScores();
|
||||
return;
|
||||
}
|
||||
adjust(cmd.player, cmd.delta);
|
||||
}
|
||||
|
||||
function initSpeech() {
|
||||
if (!SpeechRecognition) {
|
||||
micBtn.classList.add('unsupported');
|
||||
micLabel.textContent = 'Sprache nicht unterstützt';
|
||||
micBtn.disabled = true;
|
||||
setStatus('Web Speech API nicht verfügbar (Chrome/Edge/Safari probieren).');
|
||||
return;
|
||||
}
|
||||
|
||||
recognition = new SpeechRecognition();
|
||||
recognition.lang = 'de-DE';
|
||||
recognition.continuous = false;
|
||||
recognition.interimResults = true;
|
||||
recognition.maxAlternatives = 3;
|
||||
|
||||
recognition.addEventListener('start', () => {
|
||||
listening = true;
|
||||
micBtn.classList.add('listening');
|
||||
micBtn.setAttribute('aria-pressed', 'true');
|
||||
micLabel.textContent = 'Hört zu …';
|
||||
});
|
||||
|
||||
recognition.addEventListener('end', () => {
|
||||
listening = false;
|
||||
micBtn.classList.remove('listening');
|
||||
micBtn.setAttribute('aria-pressed', 'false');
|
||||
micLabel.textContent = 'Spracheingabe';
|
||||
});
|
||||
|
||||
recognition.addEventListener('result', (event) => {
|
||||
let interim = '';
|
||||
let final = '';
|
||||
for (let i = event.resultIndex; i < event.results.length; i++) {
|
||||
const transcript = event.results[i][0].transcript;
|
||||
if (event.results[i].isFinal) final += transcript;
|
||||
else interim += transcript;
|
||||
}
|
||||
if (interim) setStatus(`Höre: „${interim.trim()}"`);
|
||||
if (final) handleTranscript(final.trim());
|
||||
});
|
||||
|
||||
recognition.addEventListener('error', (event) => {
|
||||
const messages = {
|
||||
'not-allowed': 'Mikrofon-Zugriff verweigert.',
|
||||
'no-speech': 'Keine Sprache erkannt — nochmal versuchen.',
|
||||
'aborted': '',
|
||||
'network': 'Netzwerkfehler bei der Spracherkennung.'
|
||||
};
|
||||
const msg = messages[event.error] || `Fehler: ${event.error}`;
|
||||
if (msg) setStatus(msg);
|
||||
});
|
||||
|
||||
micBtn.addEventListener('click', () => {
|
||||
if (listening) {
|
||||
recognition.stop();
|
||||
} else {
|
||||
try {
|
||||
recognition.start();
|
||||
} catch {
|
||||
recognition.stop();
|
||||
setTimeout(() => recognition.start(), 200);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initSpeech();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user