feat: basics of tcg

fezcode · fezcode · commit d7eb702223c9 · 2025-11-26T15:02:08.000+03:00
diff --git a/public/apps/apps.json b/public/apps/apps.json
@@ -220,6 +220,14 @@
         "description": "Pop some virtual bubble wrap to relieve stress.",
         "icon": "CirclesFourIcon",
         "created_at": "2025-11-25T16:01:56+03:00"
+      },
+      {
+        "slug": "tcg-card-generator",
+        "to": "/apps/tcg-card-generator",
+        "title": "TCG Card Generator",
+        "description": "Create your own custom TCG cards with this generator.",
+        "icon": "CardsThreeIcon",
+        "created_at": "2025-11-26T12:00:00+03:00"
       }
     ]
   },
diff --git a/src/components/AnimatedRoutes.js b/src/components/AnimatedRoutes.js
@@ -69,6 +69,7 @@ import BpmGuesserPage from '../pages/apps/BpmGuesserPage';
 import WhiteboardPage from '../pages/apps/WhiteboardPage';
 import FootballEmblemCreatorPage from '../pages/apps/FootballEmblemCreatorPage';
 import RoguelikeGamePage from '../pages/apps/RoguelikeGamePage'; // Import RoguelikeGamePage
+import TcgCardGeneratorPage from '../pages/apps/TcgCardGeneratorPage'; // Import TcgCardGeneratorPage
 import SettingsPage from '../pages/SettingsPage';
 
 import UsefulLinksPage from '../pages/UsefulLinksPage';
@@ -633,6 +634,10 @@ function AnimatedRoutes() {
           path="/apps::rl"
           element={<Navigate to="/apps/roguelike-game" replace />}
         />
+        <Route
+          path="/apps::tcg"
+          element={<Navigate to="/apps/tcg-card-generator" replace />}
+        />
         {/* End of hardcoded redirects */}
         <Route
           path="/apps/ip"
@@ -648,6 +653,20 @@ function AnimatedRoutes() {
             </motion.div>
           }
         />
+        <Route
+          path="/apps/tcg-card-generator"
+          element={
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <TcgCardGeneratorPage />
+            </motion.div>
+          }
+        />
         <Route
           path="/apps/roguelike-game"
           element={
diff --git a/src/components/CustomDropdown.js b/src/components/CustomDropdown.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; // Import ReactDOM
 import { CaretDown, Check } from '@phosphor-icons/react';
 import { motion, AnimatePresence } from 'framer-motion';
 
-const CustomDropdown = ({ options, value, onChange, icon: Icon, label }) => {
+const CustomDropdown = ({ options, value, onChange, icon: Icon, label, className = '' }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null); // Ref for the button
   const menuRef = useRef(null); // Ref for the dropdown menu
@@ -89,15 +89,17 @@ const CustomDropdown = ({ options, value, onChange, icon: Icon, label }) => {
   };
 
   return (
-    <div className="relative inline-block text-left">
+    <div className={`relative inline-block text-left ${className}`}>
       <button
         type="button"
         ref={dropdownRef} // Attach ref to the button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md text-sm font-medium text-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-primary-500"
+        className="flex items-center justify-between w-full gap-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md text-sm font-medium text-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-primary-500"
       >
-        {Icon && <Icon size={20} className="text-gray-400" />}
-        <span>{selectedOption ? selectedOption.label : label}</span>
+        <div className="flex items-center gap-2">
+            {Icon && <Icon size={20} className="text-gray-400" />}
+            <span>{selectedOption ? selectedOption.label : label}</span>
+        </div>
         <CaretDown
           size={16}
           className={`ml-2 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
diff --git a/src/pages/apps/TcgCardGeneratorPage.js b/src/pages/apps/TcgCardGeneratorPage.js
