Add tap reaction with version display

Tap the screen to see a surprised face and version number.
Returns to normal after 1.5 seconds.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-03 18:02:08 -06:00
parent e82151daa0
commit b99ac96ffa

View File

@@ -198,11 +198,14 @@
const emoteEl = document.getElementById('emote'); const emoteEl = document.getElementById('emote');
const messageEl = document.getElementById('message'); const messageEl = document.getElementById('message');
const POLL_INTERVAL = 2000; const POLL_INTERVAL = 2000;
const VERSION = 'v1.0.0';
// Sound system // Sound system
let audioCtx = null; let audioCtx = null;
let soundEnabled = new URLSearchParams(window.location.search).get('sound') === 'on'; let soundEnabled = new URLSearchParams(window.location.search).get('sound') === 'on';
let lastState = null; let lastState = null;
let lastData = null;
let isReacting = false;
function initAudio() { function initAudio() {
if (!audioCtx) { if (!audioCtx) {
@@ -251,6 +254,11 @@
setTimeout(() => playTone(784, 0.15), 200); setTimeout(() => playTone(784, 0.15), 200);
} }
function playReactSound() {
// Cute surprised chirp
playTone(600, 0.08, 'sine', 0.06);
}
function handleStateChange(newState, newEmote) { function handleStateChange(newState, newEmote) {
if (!lastState) { if (!lastState) {
lastState = newState; lastState = newState;
@@ -273,15 +281,42 @@
} }
} }
// Enable sound on first tap (browser autoplay policy) // Handle tap - enable sound and show reaction
document.body.addEventListener('click', () => { document.body.addEventListener('click', () => {
// Enable sound on first tap (browser autoplay policy)
if (!soundEnabled) { if (!soundEnabled) {
soundEnabled = true; soundEnabled = true;
initAudio(); initAudio();
// Brief confirmation chirp
playTone(660, 0.08, 'sine', 0.05);
} }
}, { once: false });
// Show surprised reaction and version
if (!isReacting) {
isReacting = true;
const prevEmote = emoteEl.textContent;
const prevColor = emoteEl.style.color;
const prevClass = emoteEl.className;
const prevMsg = messageEl.textContent;
// Surprised face!
emoteEl.textContent = '( °o°)';
emoteEl.className = 'popping';
messageEl.textContent = `Kao ${VERSION}`;
playReactSound();
// Return to normal after 1.5s
setTimeout(() => {
if (lastData) {
updateDisplay(lastData);
} else {
emoteEl.textContent = prevEmote;
emoteEl.style.color = prevColor;
emoteEl.className = prevClass;
messageEl.textContent = prevMsg;
}
isReacting = false;
}, 1500);
}
});
// Also init if ?sound=on // Also init if ?sound=on
if (soundEnabled) { if (soundEnabled) {
@@ -305,6 +340,11 @@
} }
function updateDisplay(data) { function updateDisplay(data) {
lastData = data;
// Don't update display while showing reaction
if (isReacting) return;
// Check for state changes and play sounds // Check for state changes and play sounds
handleStateChange(data.current_state, data.active_emote); handleStateChange(data.current_state, data.active_emote);