function MentorCharacter({ message = "Greetings, young seeker of knowledge!" }) { const [isVisible, setIsVisible] = useState(true); useEffect(()=>{ const timer = setTimeout(()=>setIsVisible(false), 5000); return ()=>clearTimeout(timer); }, []); return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 flex items-end gap-3", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, isVisible && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-4 shadow-lg max-w-[300px] border-2 border-purple-600", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text text-gray-800", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, message)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[80px] h-[80px] rounded-full bg-purple-600 flex items-center justify-center", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hat-wizard text-3xl text-white", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[60px] h-[30px] mt-[-15px] bg-gray-300 rounded-t-full", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }))); } function MentorCharacterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MentorCharacter, { __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MentorCharacter, { message: "The journey of a thousand lines of code begins with a single character.", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MentorCharacter, { message: "Remember, young one, wisdom comes not from knowing all the answers, but from asking the right questions.", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this })); } function GameStats({ streaks = 0, rank = "Novice", diamonds = 0, hearts = 0 }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#2D1B69] text-white rounded-lg p-4 shadow-lg flex items-center justify-between w-full max-w-3xl", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire text-[#FF6B6B] text-2xl", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm mt-1", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, streaks), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#B8B8FF]", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Streak")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-crown text-[#FFD700] text-2xl", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm mt-1", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, rank), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#B8B8FF]", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Rank")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-gem text-[#4DA8DA] text-2xl", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm mt-1", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, diamonds), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#B8B8FF]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Diamonds")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-[#FF69B4] text-2xl", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm mt-1", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, hearts), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#B8B8FF]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Hearts")))); } function GameStatsStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GameStats, { streaks: 7, rank: "Expert", diamonds: 150, hearts: 423, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(GameStats, { streaks: 3, rank: "Beginner", diamonds: 50, hearts: 120, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function DailyChallenge({ challenge = "Complete 3 Quests", reward = "50 XP", date = new Date() }) { const formattedDate = date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }); return /*#__PURE__*/ React.createElement("div", { className: "p-6 rounded-xl bg-[#1E293B] text-white max-w-md shadow-xl border border-[#334155]", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Daily Challenge"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, formattedDate)), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#334155] p-4 rounded-lg", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tasks text-yellow-400 mr-2", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Today's Task")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, challenge)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#334155] p-4 rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-gift text-emerald-400 mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Reward")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, reward)))); } function DailyChallengeStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#0F172A] min-h-screen", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(DailyChallenge, { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(DailyChallenge, { challenge: "Defeat 5 Monsters", reward: "100 Gold + Magic Potion", date: new Date("2024-01-20"), __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(DailyChallenge, { challenge: "Craft 2 Epic Items", reward: "Rare Material Box", date: new Date("2024-01-21"), __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }))); } function SoundEffects() { const [achievements] = useState([ { id: 1, sound: "/sounds/achievement.mp3", name: "Level Up" }, { id: 2, sound: "/sounds/special.mp3", name: "Special Achievement" } ]); const [tasks] = useState([ { id: 1, sound: "/sounds/complete.mp3", name: "Daily Task" }, { id: 2, sound: "/sounds/bonus.mp3", name: "Bonus Task" } ]); const playSound = useCallback((soundUrl)=>{ const audio = new Audio(soundUrl); audio.play(); }, []); const handleAchievement = useCallback((achievement)=>{ playSound(achievement.sound); }, [ playSound ]); const handleTaskComplete = useCallback((task)=>{ playSound(task.sound); }, [ playSound ]); const handleClick = useCallback(()=>{ playSound("/sounds/click.mp3"); }, [ playSound ]); const handleHover = useCallback(()=>{ playSound("/sounds/hover.mp3"); }, [ playSound ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Achievements"), achievements.map((achievement)=>/*#__PURE__*/ React.createElement("button", { key: achievement.id, onClick: ()=>handleAchievement(achievement), onMouseEnter: handleHover, className: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded inline-block", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, achievement.name))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Tasks"), tasks.map((task)=>/*#__PURE__*/ React.createElement("button", { key: task.id, onClick: ()=>handleTaskComplete(task), onMouseEnter: handleHover, className: "bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded inline-block", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, task.name))), /*#__PURE__*/ React.createElement("button", { onClick: handleClick, onMouseEnter: handleHover, className: "mt-8 bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded inline-block", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, "Interactive Button")); } function SoundEffectsStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SoundEffects, { __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this })); } function SkillCard({ name, level, isActive, subSkills = [], progress }) { const [isExpanded, setIsExpanded] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: `rounded-lg p-4 border ${isActive ? "bg-white border-blue-500" : "bg-gray-100 border-gray-300"} w-[300px]`, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Level ", level)), /*#__PURE__*/ React.createElement("div", { className: "relative h-2 bg-gray-200 rounded mb-3", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute left-0 top-0 h-full rounded ${isActive ? "bg-blue-500" : "bg-gray-400"}`, style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsExpanded(!isExpanded), className: "text-sm text-blue-500 hover:text-blue-700 mb-2", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, isExpanded ? "Hide Details" : "Show Details", /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${isExpanded ? "up" : "down"} ml-1`, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this })), isExpanded && /*#__PURE__*/ React.createElement("ul", { className: "space-y-1", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, subSkills.map((skill, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-sm text-gray-600 flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), skill)))); } function SkillCardStory() { const mockSkills = [ { name: "JavaScript", level: 5, isActive: true, progress: 85, subSkills: [ "ES6+", "React", "Node.js", "TypeScript" ] }, { name: "Python", level: 3, isActive: false, progress: 45, subSkills: [ "Django", "Flask", "Data Analysis" ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, mockSkills.map((skill, index)=>/*#__PURE__*/ React.createElement(SkillCard, { key: index, ...skill, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [hoveredCard, setHoveredCard] = useState(null); const skills = { technical: [ { id: 1, name: "Web Development", level: 4, isActive: true, progress: 75, subSkills: [ "React", "Node.js", "HTML/CSS" ] }, { id: 2, name: "Backend Systems", level: 3, isActive: true, progress: 60, subSkills: [ "APIs", "Databases", "Security" ] }, { id: 3, name: "Database Design", level: 4, isActive: true, progress: 85, subSkills: [ "SQL", "MongoDB", "Redis" ] }, { id: 4, name: "Cloud Architecture", level: 1, isActive: false, progress: 0, subSkills: [] } ], soft: [ { id: 5, name: "Communication", level: 4, isActive: true, progress: 80, subSkills: [ "Written", "Verbal", "Presentation" ] }, { id: 6, name: "Leadership", level: 3, isActive: true, progress: 70, subSkills: [ "Team Building", "Mentoring", "Strategy" ] }, { id: 7, name: "Problem Solving", level: 5, isActive: true, progress: 90, subSkills: [ "Analysis", "Innovation", "Research" ] }, { id: 8, name: "Time Management", level: 1, isActive: false, progress: 0, subSkills: [] } ] }; const handleCardHover = (id)=>{ setHoveredCard(id); SoundEffects(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white p-6", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-graduation-cap text-[#6B46C1] text-3xl mr-3", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#6B46C1] font-bold", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Skilocraft")), /*#__PURE__*/ React.createElement(GameStats, { streaks: 12, rank: "Master", diamonds: 350, hearts: 892, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(DailyChallenge, { challenge: "Complete 5 Skill Assessments", reward: "100 Diamonds + Skill Boost", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, Object.entries(skills).map(([category, skillList])=>/*#__PURE__*/ React.createElement("div", { key: category, className: "mb-8", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold text-[#6B46C1] mb-4 capitalize text-center", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, category, " Skills"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, skillList.map((skill)=>/*#__PURE__*/ React.createElement("div", { key: skill.id, onMouseEnter: ()=>handleCardHover(skill.id), onMouseLeave: ()=>setHoveredCard(null), className: `transform transition-all duration-300 hover:bg-purple-50 rounded-lg ${hoveredCard === skill.id ? "scale-102 shadow-md" : ""}`, __source: { fileName: "", lineNumber: 108, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement(SkillCard, { ...skill, __source: { fileName: "", lineNumber: 116, columnNumber: 23 }, __self: this }))))))))), /*#__PURE__*/ React.createElement(MentorCharacter, { message: "Welcome back! Ready to level up your skills today?", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } `)); }

Skilocraft

Daily Challenge

Today's Task

Reward

technical Skills

Web Development

Backend Systems

Database Design

Cloud Architecture

soft Skills

Communication

Leadership

Problem Solving

Time Management