diff --git a/frontend/index.html b/frontend/index.html index 6489c8e..0fdf62f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,24 +2,25 @@ + - Quest Leveling System - Gamify Your Life - - + Phoenix Aura Farming - Gamify Your Life + + - - + + - + - - + + diff --git a/frontend/public/phoenix-logo.png b/frontend/public/phoenix-logo.png new file mode 100644 index 0000000..6935295 Binary files /dev/null and b/frontend/public/phoenix-logo.png differ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c5a0da9..c749fd8 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -14,7 +14,7 @@ import Dashboard from './pages/Dashboard'; const queryClient = new QueryClient(); // Google Client ID - Replace with your own -const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID || '271595121987-jf5sh78h3ee6q41k13rcjcng4h70df46.apps.googleusercontent.com'; +const GOOGLE_CLIENT_ID = '271595121987-jf5sh78h3ee6q41k13rcjcng4h70df46.apps.googleusercontent.com'; // Inner component that uses the store - must be inside BrowserRouter const AppRoutes = () => { diff --git a/frontend/src/components/PhoenixIcon.tsx b/frontend/src/components/PhoenixIcon.tsx new file mode 100644 index 0000000..069cd5e --- /dev/null +++ b/frontend/src/components/PhoenixIcon.tsx @@ -0,0 +1,51 @@ +import { SVGProps } from 'react'; + +export const PhoenixIcon = (props: SVGProps) => { + return ( + + {/* Phoenix head and body */} + + + {/* Left wing */} + + + {/* Right wing */} + + + {/* Body center with gem */} + + + + {/* Tail flames - left */} + + + {/* Tail flames - center */} + + + {/* Tail flames - right */} + + + {/* Wing details - left */} + + + + {/* Wing details - right */} + + + + {/* Top flames */} + + + + ); +}; + diff --git a/frontend/src/components/PlayerCard.tsx b/frontend/src/components/PlayerCard.tsx index 7c64a94..773da02 100644 --- a/frontend/src/components/PlayerCard.tsx +++ b/frontend/src/components/PlayerCard.tsx @@ -1,20 +1,45 @@ import { motion } from 'framer-motion'; import { Sparkles } from 'lucide-react'; -import { XPBar } from './XPBar'; +import { APBar } from './XPBar'; interface PlayerCardProps { name: string; picture: string; level: number; - totalXP: number; + totalAP: number; } -export const PlayerCard = ({ name, picture, level, totalXP }: PlayerCardProps) => { +export const PlayerCard = ({ name, picture, level, totalAP }: PlayerCardProps) => { return (
{/* Gradient Overlay */}
+ {/* Stylish Level Badge - Top Right */} + + + + +
+ Level + + {level} + +
+ +
{/* Avatar with Glow */} - - {/* Level Badge */} - -
- - - {level} - -
- {/* Player Info */} @@ -53,13 +64,13 @@ export const PlayerCard = ({ name, picture, level, totalXP }: PlayerCardProps) = {name}

- Level {level} Adventurer + Adventurer

- {/* XP Bar */} - + {/* AP Bar */} +
); }; diff --git a/frontend/src/components/QuestCard.tsx b/frontend/src/components/QuestCard.tsx index 2725635..ab7df82 100644 --- a/frontend/src/components/QuestCard.tsx +++ b/frontend/src/components/QuestCard.tsx @@ -58,11 +58,11 @@ export const QuestCard = ({ quest, onComplete }: QuestCardProps) => { {quest.description}

- {/* XP Badge */} + {/* AP Badge */}
- {quest.xp} XP + {quest.xp} AP
diff --git a/frontend/src/components/XPBar.tsx b/frontend/src/components/XPBar.tsx index 7f7aeca..a1194f1 100644 --- a/frontend/src/components/XPBar.tsx +++ b/frontend/src/components/XPBar.tsx @@ -1,25 +1,25 @@ import { motion } from 'framer-motion'; -import { getXPPercentage, getCurrentLevelXP } from '@/utils/questGenerator'; +import { getAPPercentage, getCurrentLevelAP } from '@/utils/questGenerator'; -interface XPBarProps { - totalXP: number; +interface APBarProps { + totalAP: number; } -export const XPBar = ({ totalXP }: XPBarProps) => { - const percentage = getXPPercentage(totalXP); - const currentXP = getCurrentLevelXP(totalXP); +export const APBar = ({ totalAP }: APBarProps) => { + const percentage = getAPPercentage(totalAP); + const currentAP = getCurrentLevelAP(totalAP); return (
- XP Progress + AP Progress - {currentXP} / 100 XP + {currentAP} / 100 AP
- {/* XP Fill */} + {/* AP Fill */} { @@ -80,7 +80,7 @@ export default function Dashboard() { toast.success('Logged out successfully'); }; - const activeQuests = quests.filter((q) => q.status === 'active'); + const activeQuests = quests.filter((q) => q.status === 'pending'); const completedQuests = quests.filter((q) => q.status === 'completed'); if (!user || !preferences) { @@ -102,7 +102,7 @@ export default function Dashboard() { }, { icon: Zap, - label: 'Total XP', + label: 'Total AP', value: totalXP, color: '#06B6D4', }, @@ -138,7 +138,7 @@ export default function Dashboard() { name={user.name} picture={user.picture} level={level} - totalXP={totalXP} + totalAP={totalXP} /> {/* Generate Quests Button */} diff --git a/frontend/src/pages/Onboarding.tsx b/frontend/src/pages/Onboarding.tsx index 4315b7c..bab9988 100644 --- a/frontend/src/pages/Onboarding.tsx +++ b/frontend/src/pages/Onboarding.tsx @@ -18,8 +18,6 @@ export default function Onboarding() { const [selectedDifficulty, setSelectedDifficulty] = useState(null); const [dailyTasks, setDailyTasks] = useState([]); const [longTermGoals, setLongTermGoals] = useState([]); - const [customDailyTask, setCustomDailyTask] = useState(''); - const [customLongTermGoal, setCustomLongTermGoal] = useState(''); const focusOptions = [ { @@ -258,29 +256,6 @@ export default function Onboarding() { ))}
-
- setCustomDailyTask(e.target.value)} - placeholder="Add custom daily task..." - className="flex-1 px-4 py-3 rounded-xl glass text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-primary" - /> - { - if (customDailyTask.trim()) { - setDailyTasks([...dailyTasks, customDailyTask.trim()]); - setCustomDailyTask(''); - } - }} - className="px-6 py-3 rounded-xl gradient-bg text-white font-semibold" - whileHover={{ scale: 1.05 }} - whileTap={{ scale: 0.95 }} - > - Add - -
- {dailyTasks.length > 0 && (

Selected Tasks:

@@ -341,29 +316,6 @@ export default function Onboarding() { ))}
-
- setCustomLongTermGoal(e.target.value)} - placeholder="Add custom long-term goal..." - className="flex-1 px-4 py-3 rounded-xl glass text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-primary" - /> - { - if (customLongTermGoal.trim()) { - setLongTermGoals([...longTermGoals, customLongTermGoal.trim()]); - setCustomLongTermGoal(''); - } - }} - className="px-6 py-3 rounded-xl gradient-bg text-white font-semibold" - whileHover={{ scale: 1.05 }} - whileTap={{ scale: 0.95 }} - > - Add - -
- {longTermGoals.length > 0 && (

Selected Goals:

diff --git a/frontend/src/pages/Welcome.tsx b/frontend/src/pages/Welcome.tsx index f8e8426..c0bcc62 100644 --- a/frontend/src/pages/Welcome.tsx +++ b/frontend/src/pages/Welcome.tsx @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { motion } from 'framer-motion'; import { GoogleLogin } from '@react-oauth/google'; import { jwtDecode } from 'jwt-decode'; -import { Sword, Target, Zap, Trophy } from 'lucide-react'; +import { Target, Zap, Trophy } from 'lucide-react'; import { FloatingOrbs } from '@/components/FloatingOrbs'; import { useUserStore } from '@/store/userStore'; import { toast } from 'sonner'; @@ -73,8 +73,8 @@ export default function Welcome() { }, { icon: Zap, - title: 'Earn XP', - description: 'Gain experience points for every completed quest', + title: 'Earn AP', + description: 'Gain aura points for every completed quest', gradient: 'from-purple-500 to-pink-500', }, { @@ -99,31 +99,37 @@ export default function Welcome() { > {/* Hero Icon */} - + Phoenix Logo {/* Title */}

- QUEST + PHOENIX

- LEVELING SYSTEM + AURA FARMING

{/* Subtitle */}

- Transform your daily tasks into epic quests. Earn XP, level up, and achieve your goals with an anime-inspired productivity system. + Transform your daily tasks into epic quests. Aura farm, and achieve your goals with an anime-inspired productivity system.

diff --git a/frontend/src/store/userStore.ts b/frontend/src/store/userStore.ts index 6bfd704..7d0aa42 100644 --- a/frontend/src/store/userStore.ts +++ b/frontend/src/store/userStore.ts @@ -147,7 +147,7 @@ export const useUserStore = create((set, get) => ({ : q ); - // Add XP + // Add AP const newTotalXP = totalXP + quest.xp; const newLevel = calculateLevel(newTotalXP); const oldLevel = calculateLevel(totalXP); @@ -184,7 +184,7 @@ export const useUserStore = create((set, get) => ({ return { leveledUp, newLevel }; }, - // Add XP (for future use) + // Add AP (for future use) addXP: (amount) => { const { user, totalXP } = get(); if (!user) return; diff --git a/frontend/src/types/quest.ts b/frontend/src/types/quest.ts index 5ec61eb..5e92453 100644 --- a/frontend/src/types/quest.ts +++ b/frontend/src/types/quest.ts @@ -8,7 +8,7 @@ export type QuestType = 'daily_task' | 'email_based'; export type QuestCategory = 'daily' | 'work' | 'personal' | 'education' | 'health' | 'general'; export type QuestImportance = 'daily' | 'weekly' | 'main_quest' | 'side_quest'; export type QuestUrgency = 'low' | 'medium' | 'high' | 'critical'; -export type QuestStatus = 'pending' | 'in_progress' | 'completed'; +export type QuestStatus = 'pending' | 'completed'; // API Quest interface (matches backend) export interface ApiQuest { @@ -33,7 +33,7 @@ export interface Quest { title: string; description: string; rank: QuestRank; - xp: number; + xp: number; // Using xp internally but displayed as AP status: QuestStatus; focusArea: FocusArea; difficulty: Difficulty; diff --git a/frontend/src/utils/questGenerator.ts b/frontend/src/utils/questGenerator.ts index 1c43730..8f14ed2 100644 --- a/frontend/src/utils/questGenerator.ts +++ b/frontend/src/utils/questGenerator.ts @@ -25,7 +25,7 @@ export function generateQuests( description: template.description, rank: template.rank, xp: template.xp, - status: 'active' as const, + status: 'pending' as const, focusArea: template.focusArea, difficulty: template.difficulty, createdAt: new Date(), @@ -48,3 +48,13 @@ export function getXPPercentage(totalXP: number): number { const currentLevelXP = getCurrentLevelXP(totalXP); return (currentLevelXP / 100) * 100; } + +// AP versions (same implementation, different names for display purposes) +export function getCurrentLevelAP(totalAP: number): number { + return totalAP % 100; +} + +export function getAPPercentage(totalAP: number): number { + const currentLevelAP = getCurrentLevelAP(totalAP); + return (currentLevelAP / 100) * 100; +}