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 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);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user