feat: add cryptic hard achievements and obscure existing secrets

fezcode · fezcode · commit 97aa22aec83c · 2025-12-11T03:56:17.000+03:00
diff --git a/src/components/CommandPalette.js b/src/components/CommandPalette.js
@@ -97,6 +97,13 @@ const CommandPalette = ({
     }
   }, [isOpen, unlockAchievement]);
 
+  useEffect(() => {
+    const lowerTerm = searchTerm.toLowerCase();
+    if (lowerTerm === 'hello?' || lowerTerm === 'is anyone there?') {
+      unlockAchievement('echo_in_the_void');
+    }
+  }, [searchTerm, unlockAchievement]);
+
   useEffect(() => {
     setSelectedIndex(0);
   }, [searchTerm, items]);
diff --git a/src/config/achievements.js b/src/config/achievements.js
@@ -715,4 +715,25 @@ export const ACHIEVEMENTS = [
     icon: <MetronomeIcon size={32} weight="duotone" />,
     category: 'Secret',
   },
+  {
+    id: 'echo_in_the_void',
+    title: 'Echo in the Void',
+    description: 'Call out where no one listens.',
+    icon: <GhostIcon size={32} weight="duotone" />,
+    category: 'Secret',
+  },
+  {
+    id: 'chaos_theory',
+    title: 'Chaos Theory',
+    description: 'The world shifts beneath your feet.',
+    icon: <ArrowsClockwiseIcon size={32} weight="duotone" />,
+    category: 'Secret',
+  },
+  {
+    id: 'glitch_in_the_matrix',
+    title: 'Glitch in the Matrix',
+    description: 'Seek the paths that do not exist.',
+    icon: <SkullIcon size={32} weight="duotone" />,
+    category: 'Secret',
+  },
 ];
diff --git a/src/context/VisualSettingsContext.js b/src/context/VisualSettingsContext.js
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect } from 'react';
+import React, { createContext, useContext, useEffect, useRef } from 'react';
 import usePersistentState from '../hooks/usePersistentState';
 import { useAchievements } from './AchievementContext';
 
@@ -10,6 +10,8 @@ export const useVisualSettings = () => {
 
 export const VisualSettingsProvider = ({ children }) => {
   const { unlockAchievement } = useAchievements();
+  const themeChangeTimestamps = useRef([]); // Track theme changes
+
   const [isInverted, setIsInverted] = usePersistentState('is-inverted', false);
   const [isRetro, setIsRetro] = usePersistentState('is-retro', false);
   const [isParty, setIsParty] = usePersistentState('is-party', false);
@@ -41,6 +43,42 @@ export const VisualSettingsProvider = ({ children }) => {
   const [isAutumn, setIsAutumn] = usePersistentState('is-autumn', false);
   const [isRain, setIsRain] = usePersistentState('is-rain', false);
 
+  // Chaos Theory Achievement Tracker
+  useEffect(() => {
+    const now = Date.now();
+    // Filter timestamps older than 10 seconds
+    themeChangeTimestamps.current = themeChangeTimestamps.current.filter(
+      (t) => now - t < 10000,
+    );
+    // Add current timestamp
+    themeChangeTimestamps.current.push(now);
+
+    // Check if 10 changes happened in 10 seconds
+    if (themeChangeTimestamps.current.length >= 10) {
+      unlockAchievement('chaos_theory');
+    }
+  }, [
+    isInverted,
+    isRetro,
+    isParty,
+    isMirror,
+    isNoir,
+    isTerminal,
+    isBlueprint,
+    isSepia,
+    isVaporwave,
+    isCyberpunk,
+    isGameboy,
+    isComic,
+    isSketchbook,
+    isHellenic,
+    isGlitch,
+    isGarden,
+    isAutumn,
+    isRain,
+    unlockAchievement,
+  ]);
+
   useEffect(() => {
     if (isInverted) {
       document.body.classList.add('invert-mode');
diff --git a/src/pages/NotFoundPage.js b/src/pages/NotFoundPage.js
@@ -1,9 +1,21 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { ArrowLeftIcon } from '@phosphor-icons/react';
 import Seo from '../components/Seo';
+import { useAchievements } from '../context/AchievementContext';
 
 const NotFoundPage = () => {
+  const { unlockAchievement } = useAchievements();
+
+  useEffect(() => {
+    const visits = parseInt(localStorage.getItem('wrongs') || '0', 10) + 1;
+    localStorage.setItem('wrongs', visits.toString());
+
+    if (visits >= 3) {
+      unlockAchievement('glitch_in_the_matrix');
+    }
+  }, [unlockAchievement]);
+
   return (
     <div className="text-center mt-20 mb-20">
       <Seo
