feat: add achievements (Konami Code, Night Owl, Combo Breaker, Human Metronome)

fezcode · fezcode · commit 111ccd1324f4 · 2025-12-11T03:43:34.000+03:00
diff --git a/src/App.js b/src/App.js
@@ -11,6 +11,7 @@ import { AnimationProvider } from './context/AnimationContext'; // Import Animat
 import { CommandPaletteProvider } from './context/CommandPaletteContext';
 import { VisualSettingsProvider } from './context/VisualSettingsContext';
 import { AchievementProvider } from './context/AchievementContext';
+import AchievementListeners from './components/AchievementListeners';
 
 function App() {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -47,6 +48,7 @@ function App() {
       <Router>
         <ToastProvider>
           <AchievementProvider>
+            <AchievementListeners />
             <VisualSettingsProvider>
               <DigitalRain isActive={isRainActive} />
               <ScrollToTop />
diff --git a/src/components/AchievementListeners.js b/src/components/AchievementListeners.js
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { useAchievements } from '../context/AchievementContext';
+
+const AchievementListeners = () => {
+  const { unlockAchievement } = useAchievements();
+  const [konamiIndex, setKonamiIndex] = useState(0);
+
+      // Night Owl Check
+      useEffect(() => {
+        const checkNightOwl = () => {
+          const now = new Date();
+          const hour = now.getHours();
+          // Between 3 AM (03:00) and 5 AM (05:00)
+          if (hour >= 3 && hour < 5) {
+            unlockAchievement('night_owl');
+          }
+        };
+        checkNightOwl();
+      }, [unlockAchievement]);
+      // Konami Code Listener
+      useEffect(() => {      // Konami Code Sequence: Up, Up, Down, Down, Left, Right, Left, Right, B, A
+      const konamiCode = [
+        'ArrowUp',
+        'ArrowUp',
+        'ArrowDown',
+        'ArrowDown',
+        'ArrowLeft',
+        'ArrowRight',
+        'ArrowLeft',
+        'ArrowRight',
+        'b',
+        'a',
+      ];
+      const handleKeyDown = (e) => {
+        // Check if the key matches the current step in the sequence
+        if (e.key === konamiCode[konamiIndex]) {
+          const nextIndex = konamiIndex + 1;
+          // If the sequence is complete
+          if (nextIndex === konamiCode.length) {
+            unlockAchievement('konami_code');
+            setKonamiIndex(0); // Reset
+          } else {
+            setKonamiIndex(nextIndex); // Advance
+          }
+        } else {
+          setKonamiIndex(0); // Mistake, reset
+        }
+      };
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [konamiIndex, unlockAchievement]);
+  return null; // This component renders nothing
+};
+
+export default AchievementListeners;
diff --git a/src/config/achievements.js b/src/config/achievements.js
@@ -687,4 +687,32 @@ export const ACHIEVEMENTS = [
     icon: <TrashIcon size={32} weight="duotone" />,
     category: 'Secret',
   },
+  {
+    id: 'konami_code',
+    title: 'Konami Code',
+    description: 'Up, Up, Down, Down, Left, Right, Left, Right, B, A.',
+    icon: <GameControllerIcon size={32} weight="duotone" />,
+    category: 'Secret',
+  },
+  {
+    id: 'night_owl',
+    title: 'Night Owl',
+    description: 'Visited Fezcodex between 3 AM and 5 AM.',
+    icon: <EyeIcon size={32} weight="duotone" />,
+    category: 'Secret',
+  },
+  {
+    id: 'combo_breaker',
+    title: 'Combo Breaker',
+    description: 'Completed Memory Game in under 45 seconds.',
+    icon: <LightningIcon size={32} weight="duotone" />,
+    category: 'Secret',
+  },
+  {
+    id: 'human_metronome',
+    title: 'Human Metronome',
+    description: 'Maintained the exact same BPM for 15 taps in a row.',
+    icon: <MetronomeIcon size={32} weight="duotone" />,
+    category: 'Secret',
+  },
 ];
diff --git a/src/pages/apps/BpmGuesserPage.js b/src/pages/apps/BpmGuesserPage.js
@@ -33,6 +33,10 @@ const BpmGuesserPage = () => {
   const lastTapTime = useRef(0);
   const { unlockAchievement } = useAchievements();
 
+  // For Human Metronome achievement
+  const prevBpmRef = useRef(0);
+  const streakRef = useRef(0);
+
   useEffect(() => {
     if (bpm === 90) {
       unlockAchievement('on_the_beat');
@@ -46,6 +50,8 @@ const BpmGuesserPage = () => {
       lastTapTime.current = now;
       setTaps([]);
       setBpm(0);
+      streakRef.current = 0;
+      prevBpmRef.current = 0;
       return;
     }
 
@@ -56,6 +62,8 @@ const BpmGuesserPage = () => {
     if (diff > 2000) {
       setTaps([]);
       setBpm(0);
+      streakRef.current = 0;
+      prevBpmRef.current = 0;
       return;
     }
 
@@ -68,13 +76,30 @@ const BpmGuesserPage = () => {
 
     const averageDiff = newTaps.reduce((a, b) => a + b, 0) / newTaps.length;
     const calculatedBpm = Math.round(60000 / averageDiff);
+
+    // Check consistency for Human Metronome
+    // Only check if we have enough samples to be stable (e.g., > 3 taps)
+    if (newTaps.length > 3) {
+      if (calculatedBpm === prevBpmRef.current) {
+        streakRef.current += 1;
+        if (streakRef.current >= 15) {
+            unlockAchievement('human_metronome');
+        }
+      } else {
+        streakRef.current = 0;
+      }
+    }
+    prevBpmRef.current = calculatedBpm;
+
     setBpm(calculatedBpm);
   };
 
   const reset = () => {
     setTaps([]);
     setBpm(0);
     lastTapTime.current = 0;
+    streakRef.current = 0;
+    prevBpmRef.current = 0;
   };
 
   const cardStyle = {
diff --git a/src/pages/apps/MemoryGamePage.js b/src/pages/apps/MemoryGamePage.js
@@ -36,6 +36,7 @@ const MemoryGamePage = () => {
   const [moves, setMoves] = useState(0);
   const [gameOver, setGameOver] = useState(false);
   const [gameStarted, setGameStarted] = useState(false);
+  const [startTime, setStartTime] = useState(null);
 
   const initializeGame = useCallback(() => {
     const shuffledCards = shuffleCards(cardValues);
@@ -45,12 +46,18 @@ const MemoryGamePage = () => {
     setMoves(0);
     setGameOver(false);
     setGameStarted(false); // Game starts when "Play Game" is clicked
+    setStartTime(null);
   }, []);
 
   useEffect(() => {
     initializeGame();
   }, [initializeGame]);
 
+  const startGame = () => {
+    setGameStarted(true);
+    setStartTime(Date.now());
+  };
+
   const shuffleCards = (values) => {
     let id = 0;
     const initialCards = [...values, ...values].map((value) => ({
@@ -120,11 +127,13 @@ const MemoryGamePage = () => {
   useEffect(() => {
     if (matchesFound === cardValues.length) {
       setGameOver(true);
+      const duration = (Date.now() - startTime) / 1000;
+      if (duration < 45) unlockAchievement('combo_breaker');
       if (moves <= 24) unlockAchievement('sharp_eye');
       if (moves <= 18) unlockAchievement('eidetic_memory');
       if (moves <= 14) unlockAchievement('mind_palace');
     }
-  }, [matchesFound, moves, unlockAchievement]);
+  }, [matchesFound, moves, unlockAchievement, startTime]);
 
   const cardStyle = {
     backgroundColor: colors['app-alpha-10'],
@@ -190,7 +199,7 @@ const MemoryGamePage = () => {
                   <div className="start-game-message text-center text-3xl font-bold mb-4">
                     Click "Play Game" to Start!
                     <button
-                      onClick={() => setGameStarted(true)}
+                      onClick={startGame}
                       className="block mx-auto mt-4 px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
                       style={{
                         backgroundColor: 'rgba(0, 0, 0, 0.2)',
