Skin

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-    "snyk.advanced.organization": "512ef4a1-6034-4537-a391-9692d282122a",
     "snyk.advanced.autoSelectOrganization": true,
     "i18n-ally.localesPaths": [
         "i18n",

app/[locale]/checkout/cancel/page.tsx

@@ -77,7 +77,7 @@ export default function CheckoutCancelPage() {
           </button>
           
           <p className="text-sm text-gray-500 dark:text-gray-400">
-            {t('checkout.cancel.redirecting', { countdown })}
+            {t('checkout.redirecting', { countdown })}
           </p>
         </div>
 

app/[locale]/checkout/success/page.tsx

@@ -108,7 +108,7 @@ export default function CheckoutSuccessPage() {
           </button>
           
           <p className="text-sm text-gray-500 dark:text-gray-400">
-            {t('checkout.success.redirecting', { countdown })}
+            {t('checkout.redirecting', { countdown })}
           </p>
         </div>
 

app/[locale]/page.tsx

@@ -14,6 +14,7 @@ import { useSkin } from '../hooks/useSkin';
 import { LanguageToggle } from '../components/LanguageToggle';
 import { useTranslations } from 'next-intl';
 import { useLocalizedSkinName } from '../hooks/useLocalizedSkinName';
+import { useShakeAudio } from '../hooks/useShakeAudio';
 
 export default function Home() {
   const [isShaken, setIsShaken] = useState(false);
@@ -30,11 +31,12 @@ export default function Home() {
   const currentSkin = useSkin();
   const getLocalizedSkinName = useLocalizedSkinName();
   const t = useTranslations('ui');
+  const bumpAudio = useShakeAudio();
 
   const requestMotionPermission = async () => {
-    if (typeof window === 'undefined') return;
+    if (globalThis.window === undefined) return;
 
-    if (!('DeviceMotionEvent' in window)) {
+    if (!('DeviceMotionEvent' in globalThis)) {
       setMotionPermission('denied');
       return;
     }
@@ -54,7 +56,16 @@ export default function Home() {
   };
 
   const triggerShake = useCallback((intensity: number) => {
-    if (!isAnimatingRef.current) {
+    bumpAudio();
+    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) {
         clearTimeout(animationTimeoutRef.current);
       }
@@ -83,16 +94,8 @@ export default function Home() {
           return prev;
         });
       }, 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]);
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
@@ -105,7 +108,7 @@ export default function Home() {
       const acceleration = event.accelerationIncludingGravity;
       if (!acceleration) return;
 
-      const currentTime = new Date().getTime();
+      const currentTime = Date.now();
       const timeDiff = currentTime - lastUpdate;
 
       if (timeDiff > shakeConfig.debounceTime) {
@@ -121,19 +124,19 @@ export default function Home() {
       }
     };
 
-    if (typeof window !== 'undefined') {
-      if (motionPermission === 'granted' && 'DeviceMotionEvent' in window) {
-        window.addEventListener('devicemotion', handleMotion);
+    if (globalThis.window !== undefined) {
+      if (motionPermission === 'granted' && 'DeviceMotionEvent' in globalThis) {
+        globalThis.addEventListener('devicemotion', handleMotion);
       }
-      window.addEventListener('keydown', handleKeyPress);
+      globalThis.addEventListener('keydown', handleKeyPress);
     }
 
     return () => {
-      if (typeof window !== 'undefined') {
+      if (globalThis.window !== undefined) {
         if (motionPermission === 'granted') {
-          window.removeEventListener('devicemotion', handleMotion);
+          globalThis.removeEventListener('devicemotion', handleMotion);
         }
-        window.removeEventListener('keydown', handleKeyPress);
+        globalThis.removeEventListener('keydown', handleKeyPress);
       }
     };
   }, [lastUpdate, motionPermission, triggerShake]);

app/components/LanguageToggle.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
 import { Link } from '../../i18n/routing';
 import { GlobeAltIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
 
@@ -15,9 +16,12 @@ interface LanguageOption {
 export function LanguageToggle() {
   const locale = useLocale() as Locale;
   const t = useTranslations('ui');
+  const searchParams = useSearchParams();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  const query = Object.fromEntries(searchParams);
+
   const locales: Locale[] = ['en', 'de', 'ru', 'ka', 'ar'];
 
   const languageOptions: LanguageOption[] = locales.map((code) => ({
@@ -89,7 +93,7 @@ export function LanguageToggle() {
             {languageOptions.map((option) => (
               <Link
                 key={option.code}
-                href="/"
+                href={{ pathname: '/', query }}
                 locale={option.code}
                 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 ${

app/hooks/useShakeAudio.ts

@@ -0,0 +1,128 @@
+'use client';
+
+import { useRef, useEffect, useCallback } from 'react';
+
+const AUDIO_URL = '/audio/starley_call_on_me.ogg';
+const FADE_IN_SEC = 0.1;
+const FADE_OUT_SEC = 0.8;
+const QUIET_TIMEOUT_MS = 1000;
+const PLAY_GAIN = 0.7;
+// exponentialRampToValueAtTime can't reach 0; use a tiny positive target
+const NEAR_ZERO = 0.0001;
+
+export function useShakeAudio() {
+  const ctxRef = useRef<AudioContext | null>(null);
+  const bufferRef = useRef<AudioBuffer | null>(null);
+  const sourceRef = useRef<AudioBufferSourceNode | null>(null);
+  const gainRef = useRef<GainNode | null>(null);
+  const quietTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stopTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const fadeOutAndStop = useCallback(() => {
+    const ctx = ctxRef.current;
+    const source = sourceRef.current;
+    const gain = gainRef.current;
+    if (!ctx || !source || !gain) return;
+
+    const now = ctx.currentTime;
+    gain.gain.cancelScheduledValues(now);
+    gain.gain.setValueAtTime(gain.gain.value, now);
+    gain.gain.linearRampToValueAtTime(NEAR_ZERO, now + FADE_OUT_SEC);
+
+    if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);
+    // Defer source.stop() via setTimeout (not source.stop(time)) so a bump
+    // arriving mid-fade can cancel it and ramp back up without restarting.
+    stopTimeoutRef.current = setTimeout(() => {
+      if (sourceRef.current === source) {
+        try { source.stop(); } catch { /* already stopped */ }
+        source.disconnect();
+        sourceRef.current = null;
+        gainRef.current = null;
+      }
+      stopTimeoutRef.current = null;
+    }, FADE_OUT_SEC * 1000 + 50);
+  }, []);
+
+  const bump = useCallback(async () => {
+    if (globalThis.window === undefined) return;
+
+    if (!ctxRef.current) {
+      try {
+        ctxRef.current = new AudioContext();
+      } catch (err) {
+        console.error('AudioContext creation failed:', err);
+        return;
+      }
+    }
+
+    const ctx = ctxRef.current;
+    if (ctx.state === 'suspended') {
+      try {
+        await ctx.resume();
+      } catch (err) {
+        console.error('AudioContext resume failed:', err);
+        return;
+      }
+    }
+
+    if (!bufferRef.current) {
+      try {
+        const res = await fetch(AUDIO_URL);
+        const arr = await res.arrayBuffer();
+        bufferRef.current = await ctx.decodeAudioData(arr);
+      } catch (err) {
+        console.error('Audio decode failed:', err);
+        return;
+      }
+    }
+
+    if (quietTimerRef.current) clearTimeout(quietTimerRef.current);
+    quietTimerRef.current = setTimeout(fadeOutAndStop, QUIET_TIMEOUT_MS);
+
+    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();
+    source.buffer = bufferRef.current;
+    source.loop = true;
+
+    const gain = ctx.createGain();
+    const now = ctx.currentTime;
+    gain.gain.setValueAtTime(NEAR_ZERO, now);
+    gain.gain.linearRampToValueAtTime(PLAY_GAIN, now + FADE_IN_SEC);
+
+    source.connect(gain).connect(ctx.destination);
+    source.start(now);
+
+    sourceRef.current = source;
+    gainRef.current = gain;
+  }, [fadeOutAndStop]);
+
+  useEffect(() => {
+    return () => {
+      if (quietTimerRef.current) clearTimeout(quietTimerRef.current);
+      if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);
+      const source = sourceRef.current;
+      if (source) {
+        try { source.stop(); } catch { /* already stopped */ }
+        source.disconnect();
+      }
+      const ctx = ctxRef.current;
+      if (ctx) ctx.close().catch(() => { /* ignore */ });
+    };
+  }, []);
+
+  return bump;
+}

messages/ui/ar.json

@@ -5,15 +5,14 @@
       "message": "تم إلغاء عملية الشراء. لم يتم خصم أي رسوم من حسابك.",
       "tryAgain": "يمكنك المحاولة مرة أخرى في أي وقت لإلغاء قفل الأشكال المميزة.",
       "backToApp": "العودة إلى التطبيق",
-      "redirecting": "إعادة التوجيه تلقائياً خلال {countdown} ثانية...",
       "needHelp": "تحتاج مساعدة؟ اتصل بفريق الدعم لدينا."
     },
+    "redirecting": "إعادة التوجيه تلقائياً خلال {countdown} ثانية...",
     "success": {
       "title": "تم الشراء بنجاح!",
       "unlockedSkin": "لقد قمت بإلغاء قفل شكل {skinName} بنجاح!",
       "thankYou": "شكراً لك على الشراء. الشكل المميز متاح الآن.",
       "goToApp": "الذهاب إلى التطبيق",
-      "redirecting": "إعادة التوجيه تلقائياً خلال {countdown} ثانية...",
       "receiptSent": "تم إرسال إيصال إلى عنوان بريدك الإلكتروني."
     }
   },

messages/ui/de.json

@@ -5,15 +5,14 @@
       "message": "Ihr Kauf wurde abgebrochen. Es wurden keine Gebühren von Ihrem Konto abgebucht.",
       "tryAgain": "Sie können jederzeit erneut versuchen, Premium-Skins freizuschalten.",
       "backToApp": "Zurück zur App",
-      "redirecting": "Automatische Weiterleitung in {countdown} Sekunden...",
       "needHelp": "Brauchen Sie Hilfe? Kontaktieren Sie unser Support-Team."
     },
+    "redirecting": "Automatische Weiterleitung in {countdown} Sekunden...",
     "success": {
       "title": "Kauf erfolgreich!",
       "unlockedSkin": "Sie haben erfolgreich den {skinName} Skin freigeschaltet!",
       "thankYou": "Vielen Dank für Ihren Kauf. Ihr Premium-Skin ist jetzt verfügbar.",
       "goToApp": "Zur App",
-      "redirecting": "Automatische Weiterleitung in {countdown} Sekunden...",
       "receiptSent": "Eine Quittung wurde an Ihre E-Mail-Adresse gesendet."
     }
   },

messages/ui/en.json

@@ -5,15 +5,14 @@
       "message": "Your purchase was cancelled. No charges were made to your account.",
       "tryAgain": "You can try again anytime to unlock premium skins.",
       "backToApp": "Back to App",
-      "redirecting": "Redirecting automatically in {countdown} seconds...",
       "needHelp": "Need help? Contact our support team."
     },
+    "redirecting": "Redirecting automatically in {countdown} seconds...",
     "success": {
       "title": "Purchase Successful!",
       "unlockedSkin": "You've successfully unlocked the {skinName} skin!",
       "thankYou": "Thank you for your purchase. Your premium skin is now available.",
       "goToApp": "Go to App",
-      "redirecting": "Redirecting automatically in {countdown} seconds...",
       "receiptSent": "A receipt has been sent to your email address."
     }
   },

messages/ui/ka.json

@@ -5,15 +5,14 @@
       "message": "თქვენი შეძენა გაუქმდა. თქვენი ანგარიშიდან არანაირი თანხა არ ჩამოწერილა.",
       "tryAgain": "შეგიძლიათ ნებისმიერ დროს სცადოთ ხელახლა პრემიუმ სკინების განბლოკვა.",
       "backToApp": "აპში დაბრუნება",
-      "redirecting": "ავტომატური გადამისამართება {countdown} წამში...",
       "needHelp": "გჭირდებათ დახმარება? დაუკავშირდით ჩვენს მხარდაჭერის გუნდს."
     },
+    "redirecting": "ავტომატური გადამისამართება {countdown} წამში...",
     "success": {
       "title": "შეძენა წარმატებულია!",
       "unlockedSkin": "თქვენ წარმატებით განბლოკეთ {skinName} სკინი!",
       "thankYou": "გმადლობთ შეძენისთვის. თქვენი პრემიუმ სკინი ახლა ხელმისაწვდომია.",
       "goToApp": "აპში გადასვლა",
-      "redirecting": "ავტომატური გადამისამართება {countdown} წამში...",
       "receiptSent": "ქვითარი გაიგზავნა თქვენს ელ-ფოსტის მისამართზე."
     }
   },

messages/ui/ru.json

@@ -5,15 +5,14 @@
       "message": "Ваша покупка была отменена. С вашего счета не было списано никаких средств.",
       "tryAgain": "Вы можете попробовать снова в любое время, чтобы разблокировать премиум-скины.",
       "backToApp": "Вернуться в приложение",
-      "redirecting": "Автоматическое перенаправление через {countdown} секунд...",
       "needHelp": "Нужна помощь? Свяжитесь с нашей службой поддержки."
     },
+    "redirecting": "Автоматическое перенаправление через {countdown} секунд...",
     "success": {
       "title": "Покупка успешна!",
       "unlockedSkin": "Вы успешно разблокировали скин {skinName}!",
       "thankYou": "Спасибо за покупку. Ваш премиум-скин теперь доступен.",
       "goToApp": "Перейти в приложение",
-      "redirecting": "Автоматическое перенаправление через {countdown} секунд...",
       "receiptSent": "Чек был отправлен на ваш адрес электронной почты."
     }
   },

tailwind.config.ts

@@ -1,42 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      keyframes: {
-        shake: {
-          '0%, 100%': { transform: 'rotate(0deg)' },
-          '25%': { transform: 'rotate(-5deg)' },
-          '75%': { transform: 'rotate(5deg)' }
-        },
-        float: {
-          '0%': { 
-            transform: 'translate(calc(-50% + var(--start-x)), calc(-50% + var(--start-y))) scale(var(--scale))',
-            opacity: '1'
-          },
-          '100%': { 
-            transform: 'translate(calc(-50% + var(--start-x) + (cos(var(--angle)) * 500px)), calc(-50% + var(--start-y) + (sin(var(--angle)) * 500px))) scale(var(--scale))',
-            opacity: '0'
-          }
-        },
-        fadeOut: {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' }
-        }
-      },
-      animation: {
-        'shake': 'shake 0.2s ease-in-out infinite',
-        'float-heart': 'float 2s cubic-bezier(0.2, 0, 0.8, 1) forwards',
-        'fade-out': 'fadeOut 2s ease-out forwards'
-      }
-    },
-  },
-  plugins: [],
-}
-export default config

tsconfig.json

@@ -21,13 +21,8 @@
       {
         "name": "next"
       }
-    ],
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-},
+    ]
+  },
   "include": [
     "next-env.d.ts",
     "**/*.ts",