refactor: achievements.

fezcode · fezcode · commit cb1e946ab656 · 2025-12-11T07:25:33.000+03:00
diff --git a/src/pages/AchievementsPage.js b/src/pages/AchievementsPage.js
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   ArrowLeftIcon,
   Trophy,
   Lock,
   Info,
   BellSlash,
+  FunnelIcon,
+  XCircle,
 } from '@phosphor-icons/react';
 import useSeo from '../hooks/useSeo';
 import { useAchievements } from '../context/AchievementContext';
@@ -27,6 +29,13 @@ const AchievementsPage = () => {
   });
 
   const { unlockedAchievements, showAchievementToast } = useAchievements();
+  const [selectedCategories, setSelectedCategories] = useState([]);
+
+  // Extract unique categories for filter pills
+  const uniqueCategories = [
+    'All', // Add 'All' category to display all achievements
+    ...new Set(ACHIEVEMENTS.map((ach) => ach.category)),
+  ].sort();
 
   // Calculate progress
   const unlockedCount = Object.keys(unlockedAchievements).filter(
@@ -35,6 +44,29 @@ const AchievementsPage = () => {
   const totalCount = ACHIEVEMENTS.length;
   const progressPercentage = Math.round((unlockedCount / totalCount) * 100);
 
+  const toggleCategory = (category) => {
+    if (category === 'All') {
+      setSelectedCategories([]);
+    } else {
+      setSelectedCategories((prev) =>
+        prev.includes(category)
+          ? prev.filter((c) => c !== category)
+          : [...prev, category],
+      );
+    }
+  };
+
+  const clearFilters = () => {
+    setSelectedCategories([]);
+  };
+
+  const filteredAchievements = ACHIEVEMENTS.filter((achievement) => {
+    const matchesCategory =
+      selectedCategories.length === 0 || // If no categories selected, show all
+      selectedCategories.includes(achievement.category);
+    return matchesCategory;
+  });
+
   return (
     <div className="py-16 sm:py-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -54,6 +86,36 @@ const AchievementsPage = () => {
             Discover hidden features and explore the depths of Fezcodex.
           </p>
 
+          {/* Filter Pills */}
+          <div className="flex flex-wrap items-center justify-center gap-2 mt-8 max-w-2xl mx-auto">
+            <div className="flex items-center gap-2 mr-2 text-gray-500 font-mono text-sm">
+              <FunnelIcon size={16} />
+              <span>Filter:</span>
+            </div>
+            {uniqueCategories.map((category) => {
+              const isSelected = selectedCategories.includes(category) || (category === 'All' && selectedCategories.length === 0);
+              const colorClass = isSelected ? 'bg-yellow-500/20 text-yellow-300 border-yellow-500/50' : 'bg-gray-900/50 text-gray-400 border-gray-700 hover:border-gray-500 hover:text-gray-200';
+              return (
+                <button
+                  key={category}
+                  onClick={() => toggleCategory(category)}
+                  className={`px-3 py-1 rounded-full text-sm font-medium border transition-colors duration-200 ${colorClass}`}
+                >
+                  {category}
+                </button>
+              );
+            })}
+
+            {selectedCategories.length > 0 && (
+              <button
+                onClick={clearFilters}
+                className="ml-2 text-sm text-red-400 hover:text-red-300 flex items-center gap-1 transition-colors"
+              >
+                <XCircle size={20} /> Clear
+              </button>
+            )}
+          </div>
+
           {/* Progress Bar */}
           <div className="mt-8 max-w-md mx-auto">
             <div className="flex justify-between text-sm text-gray-400 mb-2">
@@ -118,21 +180,21 @@ const AchievementsPage = () => {
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-16">
-          {ACHIEVEMENTS.map((achievement) => {
+          {filteredAchievements.map((achievement) => {
             const isUnlocked = unlockedAchievements[achievement.id]?.unlocked;
 
             return (
               <div
                 key={achievement.id}
                 className={`relative overflow-hidden rounded-xl border p-6 transition-all duration-300 ${
                   isUnlocked
-                    ? 'bg-gray-800/40 border-yellow-500/30 shadow-[0_0_15px_rgba(234,179,8,0.1)]'
+                    ? 'bg-amber-900/40 border-amber-500/30 shadow-[0_0_15px_rgba(245,158,11,0.2)]'
                     : 'bg-gray-900/40 border-gray-800 opacity-70 grayscale'
                 }`}
               >
                 <div className="flex items-start justify-between">
                   <div
-                    className={`p-3 rounded-lg ${isUnlocked ? 'bg-yellow-500/20 text-yellow-400' : 'bg-gray-800 text-gray-500'}`}
+                    className={`p-3 rounded-lg ${isUnlocked ? 'bg-amber-500/20 text-amber-400' : 'bg-gray-800 text-gray-500'}`}
                   >
                     {isUnlocked ? (
                       achievement.icon
@@ -141,15 +203,15 @@ const AchievementsPage = () => {
                     )}
                   </div>
                   {isUnlocked && (
-                    <span className="text-xs font-mono text-green-400 bg-green-900/30 px-2 py-1 rounded border border-green-800">
+                    <span className="text-xs font-mono text-amber-400 bg-amber-900/30 px-2 py-1 rounded border border-amber-800">
                       UNLOCKED
                     </span>
                   )}
                 </div>
 
                 <div className="mt-4">
                   <h3
-                    className={`text-xl font-bold ${isUnlocked ? 'text-white' : 'text-gray-500'}`}
+                    className={`text-xl font-bold ${isUnlocked ? 'text-amber-100' : 'text-gray-500'}`}
                   >
                     {achievement.title}
                   </h3>
