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:
48
index.html
48
index.html
@@ -198,11 +198,14 @@
|
||||
const emoteEl = document.getElementById('emote');
|
||||
const messageEl = document.getElementById('message');
|
||||
const POLL_INTERVAL = 2000;
|
||||
const VERSION = 'v1.0.0';
|
||||
|
||||
// Sound system
|
||||
let audioCtx = null;
|
||||
let soundEnabled = new URLSearchParams(window.location.search).get('sound') === 'on';
|
||||
let lastState = null;
|
||||
let lastData = null;
|
||||
let isReacting = false;
|
||||
|
||||
function initAudio() {
|
||||
if (!audioCtx) {
|
||||
@@ -251,6 +254,11 @@
|
||||
setTimeout(() => playTone(784, 0.15), 200);
|
||||
}
|
||||
|
||||
function playReactSound() {
|
||||
// Cute surprised chirp
|
||||
playTone(600, 0.08, 'sine', 0.06);
|
||||
}
|
||||
|
||||
function handleStateChange(newState, newEmote) {
|
||||
if (!lastState) {
|
||||
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', () => {
|
||||
// Enable sound on first tap (browser autoplay policy)
|
||||
if (!soundEnabled) {
|
||||
soundEnabled = true;
|
||||
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
|
||||
if (soundEnabled) {
|
||||
@@ -305,6 +340,11 @@
|
||||
}
|
||||
|
||||
function updateDisplay(data) {
|
||||
lastData = data;
|
||||
|
||||
// Don't update display while showing reaction
|
||||
if (isReacting) return;
|
||||
|
||||
// Check for state changes and play sounds
|
||||
handleStateChange(data.current_state, data.active_emote);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user