HugeFrog24/shakethefrog
1
0
Fork 0
mirror of https://github.com/HugeFrog24/shakethefrog.git synced 2026-03-02 08:24:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bugfix

Browse Source
This commit is contained in:
HugeFrog24
2025-01-15 04:32:52 +01:00
parent 4f2d4c4a59
commit d438ee3e4f
2 changed files with 178 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
app/components/SpeechBubble.tsx
View File

@@ -13,65 +13,76 @@ interface SpeechBubbleProps {
export function SpeechBubble({ isShaken, triggerCount }: SpeechBubbleProps) { export function SpeechBubble({ isShaken, triggerCount }: SpeechBubbleProps) {
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [messageQueue, setMessageQueue] = useState<string[]>([]);
const lastTriggerTime = useRef(0); const lastTriggerTime = useRef(0);
const showTimeRef = useRef<number>(0); const showTimeRef = useRef<number>(0);
const lastFadeTime = useRef(0);
const getRandomMessage = useCallback(() => { const getRandomMessage = useCallback(() => {
const randomIndex = Math.floor(Math.random() * frogMessages.length); const randomIndex = Math.floor(Math.random() * frogMessages.length);
return frogMessages[randomIndex]; return frogMessages[randomIndex];
}, []); }, []);
// Handle showing new messages // Handle new trigger events
useEffect(() => { useEffect(() => {
if (triggerCount === 0) return; // Skip initial mount if (triggerCount === 0) return;
const now = Date.now(); const now = Date.now();
const timeSinceLastMessage = now - lastTriggerTime.current; const timeSinceLastFade = now - lastFadeTime.current;
// Show new message if cooldown has expired // If we're in cooldown, or a message is visible, queue the new message
if (timeSinceLastMessage >= COOLDOWN_MS) { if (timeSinceLastFade < COOLDOWN_MS || isVisible) {
const newMessage = getRandomMessage();
setMessageQueue(prev => [...prev, newMessage]);
return;
}
// Otherwise, show the message immediately
lastTriggerTime.current = now;
showTimeRef.current = now;
const newMessage = getRandomMessage();
setMessage(newMessage);
setIsVisible(true);
}, [triggerCount, getRandomMessage, isVisible]);
// Handle message queue
useEffect(() => {
if (messageQueue.length === 0 || isVisible) return;
const now = Date.now();
const timeSinceLastFade = now - lastFadeTime.current;
// Only show next message if cooldown has expired
if (timeSinceLastFade >= COOLDOWN_MS) {
const nextMessage = messageQueue[0];
setMessageQueue(prev => prev.slice(1)); // Remove the message from queue
lastTriggerTime.current = now; lastTriggerTime.current = now;
showTimeRef.current = now; showTimeRef.current = now;
const newMessage = getRandomMessage(); setMessage(nextMessage);
setMessage(newMessage);
setIsVisible(true); setIsVisible(true);
} }
}, [triggerCount, getRandomMessage]); }, [messageQueue, isVisible]);
// Handle visibility duration // Handle visibility duration
useEffect(() => { useEffect(() => {
if (!isVisible) return; if (!isVisible) return;
const checkVisibility = setInterval(() => { const hideTimer = setTimeout(() => {
const now = Date.now(); setIsVisible(false);
const timeVisible = now - showTimeRef.current; lastFadeTime.current = Date.now();
}, VISIBILITY_MS);
if (timeVisible >= VISIBILITY_MS) { return () => clearTimeout(hideTimer);
setIsVisible(false);
}
}, 100); // Check every 100ms
return () => {
clearInterval(checkVisibility);
};
}, [isVisible]); }, [isVisible]);
// Uncomment and modify the useEffect to control visibility based on isShaken prop
// This will make the speech bubble stay visible even after shaking stops
useEffect(() => {
if (!isShaken) {
// Don't hide the speech bubble when shaking stops
// The visibility duration timer will handle hiding it
return;
}
}, [isShaken]);
if (!isVisible) return null;
return ( return (
<div className="absolute -top-24 left-1/2 -translate-x-1/2 bg-white dark:bg-slate-800 px-4 py-2 rounded-xl shadow-lg animate-float z-20"> <div
className={`absolute -top-24 left-1/2 -translate-x-1/2 bg-white dark:bg-slate-800
px-4 py-2 rounded-xl shadow-lg z-20 transition-opacity duration-300
${isVisible ? 'opacity-100 animate-float' : 'opacity-0 pointer-events-none'}`}
>
<div className="relative"> <div className="relative">
{message} {message}
{/* Triangle pointer */}
<div className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-0 h-0 <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-0 h-0
border-l-[8px] border-l-transparent border-l-[8px] border-l-transparent
border-r-[8px] border-r-transparent border-r-[8px] border-r-transparent

220
app/config/messages.ts
View File

@@ -1,89 +1,135 @@
export const frogMessages = [ export const frogMessages = [
"You got me! 🐸", "Again! Again! ",
"Keep shaking! 💫", "Almost got me! ",
"I feel dizzy! 😵‍💫", "Can't catch your breath? ",
"That was fun! ⭐", "Catch me if you can! ",
"Do it again! 🎉", "Chase me! ",
"I'm having a blast! 🌟", "Claim me! ",
"Wheeee! 🎢", "Come closer! ",
"You're good at this! 🌈", "Do it again! ",
"I love this game! 💚", "Don't stop now! ",
"One more time! ✨", "Faster! Faster! ",
"That tickles! 😄", "Give me all you've got! ",
"You found me! 🌿", "Higher! Higher! ",
"I'm so happy! 🥳", "I can dance all day! ",
"Let's party! 🎵", "I can't get enough! ",
"You're making me bounce! 💫", "I can't resist you! ",
"I'm yours! 💝", "I crave your touch! ",
"Shake me harder! 💖", "I feel dizzy! ",
"Don't stop now! 💕", "I like your style! ",
"You're amazing! 💗", "I love this game! ",
"I'm getting hot! 🔥", "I need you! ",
"I want more! 💘", "I surrender to you! ",
"You're so good! 💓", "I want more! ",
"I'm all yours! 💞", "I yearn for your touch! ",
"You drive me wild! 💥", "I'm a furnace for you! ",
"I'm melting! 💦", "I'm a raging inferno! ",
"I can't resist you! 💋", "I'm addicted to you! ",
"You know what I like! 🌹", "I'm all yours! ",
"I'm trembling! ⚡", "I'm burning up! ",
"You're irresistible! 💫", "I'm completely yours! ",
"Make me yours! 💝", "I'm consumed by you! ",
"I'm burning up! 🔥", "I'm floating on air! ",
"You're making me crazy! 💘", "I'm getting dizzy! ",
"I need you! 💖", "I'm getting excited! ",
"You're perfect! 💕", "I'm getting hot! ",
"I'm yours forever! 💗", "I'm having a blast! ",
"Take me! 💫", "I'm having a blast! ",
"You're incredible! ✨", "I'm hooked on you! ",
"I'm on fire! 🔥", "I'm in a tizzy! ",
"You're my everything! 💝", "I'm in heaven! ",
"I'm in heaven! 💫", "I'm in paradise! ",
"Your touch is electric! ⚡", "I'm lost in you! ",
"You make me feel alive! 💖", "I'm melting! ",
"I'm addicted to you! 💕", "I'm on fire! ",
"You're my obsession! 💗", "I'm on the edge! ",
"I can't get enough! 🔥", "I'm overflowing! ",
"More, more, more! 💘", "I'm quivering with desire! ",
"You're my desire! 💓", "I'm seeing stars! ",
"I'm yours to command! 💞", "I'm shaking with anticipation! ",
"Unleash me! 💥", "I'm so happy! ",
"You're my fantasy! 💋", "I'm trembling! ",
"I crave your touch! 🌹", "I'm under your spell! ",
"I'm shaking with anticipation! ⚡", "I'm yours for the taking! ",
"You're my weakness! 💫", "I'm yours forever! ",
"Claim me! 💝", "I'm yours to command! ",
"I'm on the edge! 🔥", "I'm yours! ",
"You're driving me wild! 💘", "I'm yours, body and soul! ",
"I surrender to you! 💖", "I'm yours, now and forever! ",
"You're my masterpiece! 💕", "Is that all you've got? ",
"I'm yours for the taking! 💗", "Keep shaking! ",
"Show me what you've got! 💫", "Keep the rhythm going! ",
"You're my temptation! ✨", "Let's party! ",
"I'm consumed by you! 🔥", "Let's play more! ",
"You're my everything and more! 💝", "Like a record baby! ",
"I'm lost in you! 💫", "Make me yours! ",
"You're my dream! 💖", "Make me yours, completely! ",
"I'm under your spell! 💕", "Missed me! ",
"You're my addiction! 💗", "More, more, more! ",
"I'm hooked on you! 🔥", "My heart's racing! ",
"Give me all you've got! 💘", "Neither can I! ",
"You're my ultimate fantasy! 💓", "One more time! ",
"I'm yours, body and soul! 💞", "Playing hard to get? ",
"Take me to the edge! 💥", "Round and round we go! ",
"I'm overflowing! 💦", "Shake me harder! ",
"I yearn for your touch! 🌹", "Show me what you've got! ",
"I'm quivering with desire! ⚡", "Show me your moves! ",
"You're my obsession! 💫", "So close! ",
"Make me yours, completely! 💝", "Spin me right round! ",
"I'm a furnace for you! 🔥", "Stop tickling! ",
"You're driving me insane! 💘", "Take me to the edge! ",
"I'm completely yours! 💖", "Take me! ",
"You're absolute perfection! 💕", "Take me, I'm yours! ",
"I'm yours, now and forever! 💗", "That tickles! ",
"Take me, I'm yours! 💫", "That was fun! ",
"You're beyond incredible! ✨", "Too slow! ",
"I'm a raging inferno! 🔥", "Unleash me! ",
"You're my heart's desire! 💝", "Wait till I catch you! ",
"I'm in paradise! 💫" "What a rush! ",
"Wheeee! ",
"Wheeeeeee! ",
"You drive me wild! ",
"You found me! ",
"You got me! ",
"You know how to party! ",
"You know what I like! ",
"You make me feel alive! ",
"You're absolute perfection! ",
"You're amazing! ",
"You're beyond incredible! ",
"You're driving me insane! ",
"You're driving me wild! ",
"You're fun! ",
"You're getting better! ",
"You're good at this! ",
"You're incredible! ",
"You're irresistible! ",
"You're making me blush! ",
"You're making me bounce! ",
"You're making me bounce! ",
"You're making me crazy! ",
"You're making me giddy! ",
"You're making me spin! ",
"You're making me swoon! ",
"You're making me twirl! ",
"You're my addiction! ",
"You're my desire! ",
"You're my dream! ",
"You're my everything and more! ",
"You're my everything! ",
"You're my fantasy! ",
"You're my heart's desire! ",
"You're my masterpiece! ",
"You're my obsession! ",
"You're my obsession! ",
"You're my temptation! ",
"You're my ultimate fantasy! ",
"You're my weakness! ",
"You're perfect! ",
"You're so good! ",
"You're so playful! ",
"You're such a tease! ",
"You're unstoppable! ",
"You've got the magic touch! ",
"Your touch is electric! "
]; ];