mirror of
https://github.com/HugeFrog24/shakethefrog.git
synced 2026-08-28 20:11:39 +00:00
upd deps
This commit is contained in:
+19
-19
@@ -34,9 +34,9 @@ export default function Home() {
|
|||||||
const bumpAudio = useShakeAudio();
|
const bumpAudio = useShakeAudio();
|
||||||
|
|
||||||
const requestMotionPermission = async () => {
|
const requestMotionPermission = async () => {
|
||||||
if (typeof window === 'undefined') return;
|
if (globalThis.window === undefined) return;
|
||||||
|
|
||||||
if (!('DeviceMotionEvent' in window)) {
|
if (!('DeviceMotionEvent' in globalThis)) {
|
||||||
setMotionPermission('denied');
|
setMotionPermission('denied');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -57,7 +57,15 @@ export default function Home() {
|
|||||||
|
|
||||||
const triggerShake = useCallback((intensity: number) => {
|
const triggerShake = useCallback((intensity: number) => {
|
||||||
bumpAudio();
|
bumpAudio();
|
||||||
if (!isAnimatingRef.current) {
|
if (isAnimatingRef.current) {
|
||||||
|
const timeSinceStart = Date.now() - animationStartTimeRef.current;
|
||||||
|
if (timeSinceStart > 100) {
|
||||||
|
setShakeQueue(prev => {
|
||||||
|
if (prev.length >= 1) return prev;
|
||||||
|
return [...prev, intensity];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
if (animationTimeoutRef.current) {
|
if (animationTimeoutRef.current) {
|
||||||
clearTimeout(animationTimeoutRef.current);
|
clearTimeout(animationTimeoutRef.current);
|
||||||
}
|
}
|
||||||
@@ -86,14 +94,6 @@ export default function Home() {
|
|||||||
return prev;
|
return prev;
|
||||||
});
|
});
|
||||||
}, shakeConfig.animations.shakeReset);
|
}, shakeConfig.animations.shakeReset);
|
||||||
} else {
|
|
||||||
const timeSinceStart = Date.now() - animationStartTimeRef.current;
|
|
||||||
if (timeSinceStart > 100) {
|
|
||||||
setShakeQueue(prev => {
|
|
||||||
if (prev.length >= 1) return prev;
|
|
||||||
return [...prev, intensity];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, [bumpAudio]);
|
}, [bumpAudio]);
|
||||||
|
|
||||||
@@ -108,7 +108,7 @@ export default function Home() {
|
|||||||
const acceleration = event.accelerationIncludingGravity;
|
const acceleration = event.accelerationIncludingGravity;
|
||||||
if (!acceleration) return;
|
if (!acceleration) return;
|
||||||
|
|
||||||
const currentTime = new Date().getTime();
|
const currentTime = Date.now();
|
||||||
const timeDiff = currentTime - lastUpdate;
|
const timeDiff = currentTime - lastUpdate;
|
||||||
|
|
||||||
if (timeDiff > shakeConfig.debounceTime) {
|
if (timeDiff > shakeConfig.debounceTime) {
|
||||||
@@ -124,19 +124,19 @@ export default function Home() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (globalThis.window !== undefined) {
|
||||||
if (motionPermission === 'granted' && 'DeviceMotionEvent' in window) {
|
if (motionPermission === 'granted' && 'DeviceMotionEvent' in globalThis) {
|
||||||
window.addEventListener('devicemotion', handleMotion);
|
globalThis.addEventListener('devicemotion', handleMotion);
|
||||||
}
|
}
|
||||||
window.addEventListener('keydown', handleKeyPress);
|
globalThis.addEventListener('keydown', handleKeyPress);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (typeof window !== 'undefined') {
|
if (globalThis.window !== undefined) {
|
||||||
if (motionPermission === 'granted') {
|
if (motionPermission === 'granted') {
|
||||||
window.removeEventListener('devicemotion', handleMotion);
|
globalThis.removeEventListener('devicemotion', handleMotion);
|
||||||
}
|
}
|
||||||
window.removeEventListener('keydown', handleKeyPress);
|
globalThis.removeEventListener('keydown', handleKeyPress);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [lastUpdate, motionPermission, triggerShake]);
|
}, [lastUpdate, motionPermission, triggerShake]);
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import { useState, useRef, useEffect } from 'react';
|
import { useState, useRef, useEffect } from 'react';
|
||||||
import { useLocale, useTranslations } from 'next-intl';
|
import { useLocale, useTranslations } from 'next-intl';
|
||||||
|
import { useSearchParams } from 'next/navigation';
|
||||||
import { Link } from '../../i18n/routing';
|
import { Link } from '../../i18n/routing';
|
||||||
import { GlobeAltIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
|
import { GlobeAltIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
|
||||||
|
|
||||||
@@ -15,9 +16,12 @@ interface LanguageOption {
|
|||||||
export function LanguageToggle() {
|
export function LanguageToggle() {
|
||||||
const locale = useLocale() as Locale;
|
const locale = useLocale() as Locale;
|
||||||
const t = useTranslations('ui');
|
const t = useTranslations('ui');
|
||||||
|
const searchParams = useSearchParams();
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const query = Object.fromEntries(searchParams);
|
||||||
|
|
||||||
const locales: Locale[] = ['en', 'de', 'ru', 'ka', 'ar'];
|
const locales: Locale[] = ['en', 'de', 'ru', 'ka', 'ar'];
|
||||||
|
|
||||||
const languageOptions: LanguageOption[] = locales.map((code) => ({
|
const languageOptions: LanguageOption[] = locales.map((code) => ({
|
||||||
@@ -89,7 +93,7 @@ export function LanguageToggle() {
|
|||||||
{languageOptions.map((option) => (
|
{languageOptions.map((option) => (
|
||||||
<Link
|
<Link
|
||||||
key={option.code}
|
key={option.code}
|
||||||
href="/"
|
href={{ pathname: '/', query }}
|
||||||
locale={option.code}
|
locale={option.code}
|
||||||
onClick={() => setIsOpen(false)}
|
onClick={() => setIsOpen(false)}
|
||||||
className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
|
className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { useRef, useEffect, useCallback } from 'react';
|
|||||||
const AUDIO_URL = '/audio/starley_call_on_me.ogg';
|
const AUDIO_URL = '/audio/starley_call_on_me.ogg';
|
||||||
const FADE_IN_SEC = 0.1;
|
const FADE_IN_SEC = 0.1;
|
||||||
const FADE_OUT_SEC = 0.8;
|
const FADE_OUT_SEC = 0.8;
|
||||||
const QUIET_TIMEOUT_MS = 300;
|
const QUIET_TIMEOUT_MS = 1000;
|
||||||
const PLAY_GAIN = 0.7;
|
const PLAY_GAIN = 0.7;
|
||||||
// exponentialRampToValueAtTime can't reach 0; use a tiny positive target
|
// exponentialRampToValueAtTime can't reach 0; use a tiny positive target
|
||||||
const NEAR_ZERO = 0.0001;
|
const NEAR_ZERO = 0.0001;
|
||||||
@@ -16,6 +16,7 @@ export function useShakeAudio() {
|
|||||||
const sourceRef = useRef<AudioBufferSourceNode | null>(null);
|
const sourceRef = useRef<AudioBufferSourceNode | null>(null);
|
||||||
const gainRef = useRef<GainNode | null>(null);
|
const gainRef = useRef<GainNode | null>(null);
|
||||||
const quietTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
const quietTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
const stopTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
const fadeOutAndStop = useCallback(() => {
|
const fadeOutAndStop = useCallback(() => {
|
||||||
const ctx = ctxRef.current;
|
const ctx = ctxRef.current;
|
||||||
@@ -28,18 +29,22 @@ export function useShakeAudio() {
|
|||||||
gain.gain.setValueAtTime(gain.gain.value, now);
|
gain.gain.setValueAtTime(gain.gain.value, now);
|
||||||
gain.gain.linearRampToValueAtTime(NEAR_ZERO, now + FADE_OUT_SEC);
|
gain.gain.linearRampToValueAtTime(NEAR_ZERO, now + FADE_OUT_SEC);
|
||||||
|
|
||||||
try {
|
if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);
|
||||||
source.stop(now + FADE_OUT_SEC + 0.05);
|
// Defer source.stop() via setTimeout (not source.stop(time)) so a bump
|
||||||
} catch {
|
// arriving mid-fade can cancel it and ramp back up without restarting.
|
||||||
// source may already be stopped
|
stopTimeoutRef.current = setTimeout(() => {
|
||||||
}
|
if (sourceRef.current === source) {
|
||||||
|
try { source.stop(); } catch { /* already stopped */ }
|
||||||
|
source.disconnect();
|
||||||
sourceRef.current = null;
|
sourceRef.current = null;
|
||||||
gainRef.current = null;
|
gainRef.current = null;
|
||||||
|
}
|
||||||
|
stopTimeoutRef.current = null;
|
||||||
|
}, FADE_OUT_SEC * 1000 + 50);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const bump = useCallback(async () => {
|
const bump = useCallback(async () => {
|
||||||
if (typeof window === 'undefined') return;
|
if (globalThis.window === undefined) return;
|
||||||
|
|
||||||
if (!ctxRef.current) {
|
if (!ctxRef.current) {
|
||||||
try {
|
try {
|
||||||
@@ -74,7 +79,20 @@ export function useShakeAudio() {
|
|||||||
if (quietTimerRef.current) clearTimeout(quietTimerRef.current);
|
if (quietTimerRef.current) clearTimeout(quietTimerRef.current);
|
||||||
quietTimerRef.current = setTimeout(fadeOutAndStop, QUIET_TIMEOUT_MS);
|
quietTimerRef.current = setTimeout(fadeOutAndStop, QUIET_TIMEOUT_MS);
|
||||||
|
|
||||||
if (sourceRef.current) return;
|
if (sourceRef.current && gainRef.current) {
|
||||||
|
// Already playing or mid-fade-out: cancel any scheduled stop and
|
||||||
|
// ramp gain back up to PLAY_GAIN. Loop position is preserved.
|
||||||
|
if (stopTimeoutRef.current) {
|
||||||
|
clearTimeout(stopTimeoutRef.current);
|
||||||
|
stopTimeoutRef.current = null;
|
||||||
|
}
|
||||||
|
const now = ctx.currentTime;
|
||||||
|
const gainParam = gainRef.current.gain;
|
||||||
|
gainParam.cancelScheduledValues(now);
|
||||||
|
gainParam.setValueAtTime(gainParam.value, now);
|
||||||
|
gainParam.linearRampToValueAtTime(PLAY_GAIN, now + FADE_IN_SEC);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const source = ctx.createBufferSource();
|
const source = ctx.createBufferSource();
|
||||||
source.buffer = bufferRef.current;
|
source.buffer = bufferRef.current;
|
||||||
@@ -95,6 +113,7 @@ export function useShakeAudio() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
if (quietTimerRef.current) clearTimeout(quietTimerRef.current);
|
if (quietTimerRef.current) clearTimeout(quietTimerRef.current);
|
||||||
|
if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);
|
||||||
const source = sourceRef.current;
|
const source = sourceRef.current;
|
||||||
if (source) {
|
if (source) {
|
||||||
try { source.stop(); } catch { /* already stopped */ }
|
try { source.stop(); } catch { /* already stopped */ }
|
||||||
|
|||||||
+16
-16
@@ -13,27 +13,27 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@heroicons/react": "^2.2.0",
|
"@heroicons/react": "^2.2.0",
|
||||||
"@lemonsqueezy/lemonsqueezy.js": "^4.0.0",
|
"@lemonsqueezy/lemonsqueezy.js": "^4.0.0",
|
||||||
"next": "^16.2.4",
|
"next": "^16.2.10",
|
||||||
"next-intl": "^4.9.1",
|
"next-intl": "^4.13.1",
|
||||||
"react": "^19.2.5",
|
"react": "^19.2.7",
|
||||||
"react-dom": "^19.2.5"
|
"react-dom": "^19.2.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/eslintrc": "^3.3.5",
|
"@eslint/eslintrc": "^3.3.5",
|
||||||
"@eslint/js": "^9.39.4",
|
"@eslint/js": "^10.0.1",
|
||||||
"@tailwindcss/postcss": "^4.2.4",
|
"@tailwindcss/postcss": "^4.3.2",
|
||||||
"@types/node": "^25.6.0",
|
"@types/node": "^26.1.0",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.17",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@typescript-eslint/eslint-plugin": "^8.59.0",
|
"@typescript-eslint/eslint-plugin": "^8.62.1",
|
||||||
"@typescript-eslint/parser": "^8.59.0",
|
"@typescript-eslint/parser": "^8.62.1",
|
||||||
"eslint": "^9.39.4",
|
"eslint": "^10.6.0",
|
||||||
"eslint-config-next": "16.2.4",
|
"eslint-config-next": "16.2.10",
|
||||||
"globals": "^17.5.0",
|
"globals": "^17.7.0",
|
||||||
"postcss": "^8.5.10",
|
"postcss": "^8.5.16",
|
||||||
"postcss-load-config": "^6.0.1",
|
"postcss-load-config": "^6.0.1",
|
||||||
"tailwindcss": "^4.2.4",
|
"tailwindcss": "^4.3.2",
|
||||||
"tsx": "^4.21.0",
|
"tsx": "^4.22.5",
|
||||||
"typescript": "6.0.3"
|
"typescript": "6.0.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+979
-940
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user