diff --git a/apps/web/src/app/games/page.tsx b/apps/web/src/app/games/page.tsx index f1e51f08..e540c035 100644 --- a/apps/web/src/app/games/page.tsx +++ b/apps/web/src/app/games/page.tsx @@ -1,280 +1,1606 @@ 'use client' +import { useState } from 'react' import Link from 'next/link' import { css } from '../../../styled-system/css' import { grid } from '../../../styled-system/patterns' +import { useUserProfile } from '../../contexts/UserProfileContext' export default function GamesPage() { + const { profile } = useUserProfile() + const [showCharacterSelection, setShowCharacterSelection] = useState(null) + const [selectedGameMode, setSelectedGameMode] = useState<'single' | 'two-player'>('single') + + const handleGameClick = (gameType: string) => { + setShowCharacterSelection(gameType) + } + + const handleCharacterSelectionClose = () => { + setShowCharacterSelection(null) + } + + const handleStartGame = (character: 1 | 2) => { + // This would normally navigate to the game with the selected character + console.log(`Starting ${showCharacterSelection} with character ${character} in ${selectedGameMode} mode`) + setShowCharacterSelection(null) + // Navigate to game (implement later) + } + return (
-
+ {/* Subtle background pattern */} +
+ +
{/* Hero Section */}
-

- 🎮 Soroban Games -

-

- Master the soroban through interactive games and challenges -

-
+

+ 🕹ī¸ Soroban Arcade +

- {/* Games Grid */} -
- - {/* Speed Memory Quiz */} - + {/* Floating score indicators */}
+ +100 XP +
+
+ STREAK! +
+
+
+ +

+ Level up your mental math powers in the most fun way possible! +

+ + {/* Playful stats */} +
+
+ đŸŽ¯ + + Challenge Your Brain + +
+
+ ⚡ + + Build Speed + +
+
+ 🏆 + + Unlock Achievements + +
+
+
+ + {/* Character Showcase Header */} +
+
+

+ 🏆 Your Arcade Champions +

+

+ Choose your character and dominate the leaderboards! +

+
+ +
+ {/* Player 1 Character Card */} +
+ {/* Player 1 Gradient Border */} +
+ + {/* Character Display */} +
+
+ {profile.player1Emoji} +
+

+ {profile.player1Name} +

+
+ + {/* Stats */} +
+
+
+ {profile.gamesPlayed} +
+
+ GAMES PLAYED +
+
+ +
+
+ {profile.totalWins} +
+
+ VICTORIES +
+
+
+ + {/* Level Progress */} +
+
+ + Level {Math.floor(profile.gamesPlayed / 5) + 1} + + + {profile.gamesPlayed % 5}/5 XP + +
+
+
+
+
+ + {/* Quick Customize Button */} + +
+ + {/* Player 2 Character Card */} +
+ {/* Player 2 Gradient Border */} +
+ + {/* Character Display */} +
+
+ {profile.player2Emoji} +
+

+ {profile.player2Name} +

+ + {/* Stats */} +
+
+
+ {profile.gamesPlayed} +
+
+ GAMES PLAYED +
+
+ +
+
+ {Math.floor(profile.totalWins / 2)} +
+
+ VICTORIES +
+
+
+ + {/* Level Progress */} +
+
+ + Level {Math.floor(profile.gamesPlayed / 5) + 1} + + + {profile.gamesPlayed % 5}/5 XP + +
+
+
+
+
+ + {/* Quick Customize Button */} + +
+
+
+ + {/* Character vs Character Dashboard */} +
+
+ {/* Head-to-Head Stats */} +
+
+

+ đŸĨŠ Head-to-Head +

+

+ Battle Record +

+
+ +
+
+
+ {profile.player1Emoji} +
+
+ {Math.floor(profile.totalWins * 0.6)} +
+
+ WINS +
+
+ +
+
+ VS +
+
+ +
+
+ {profile.player2Emoji} +
+
+ {Math.floor(profile.totalWins * 0.4)} +
+
+ WINS +
+
+
+ +
+ Last played: Memory Lightning ⚡ +
+
+ + {/* Recent Achievements */} +
+
+

+ 🏆 Recent Achievements +

+

+ Latest unlocks +

+
+ +
+
+ {profile.player1Emoji} +
+
+ đŸ”Ĩ First Win! +
+
+ Victory in Battle Arena +
+
+
+ +
+ {profile.player2Emoji} +
+
+ ⚡ Speed Demon +
+
+ Sub-5 second memory +
+
+
+
+
+ + {/* Challenge System */} +
+
+

+ ⚔ī¸ Active Challenges +

+

+ Friendly competition +

+
+ +
+
+ {profile.player1Emoji} + + challenges + + {profile.player2Emoji} +
+
+ "Beat my Memory Lightning score!" +
+
+ Current best: 850 points +
+
+ + +
+
+
+ + {/* Games Grid */} +
+ + {/* Speed Memory Quiz */} +
handleGameClick('memory-lightning')} className={css({ + display: 'block', + textDecoration: 'none', + transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)', + _hover: { + transform: 'translateY(-8px) scale(1.02)', + '& .card-stack': { + transform: 'rotateY(5deg)' + }, + '& .timer-pulse': { + animationDuration: '0.8s' + }, + '& .speech-bubble': { + opacity: 1, + transform: 'translateY(0) scale(1)' + } + } + })}> +
+ {/* Character Recommendation Speech Bubble */} +
+
+ {profile.player1Emoji} + "Memory Lightning is my jam! ⚡" +
+
+ + {/* Subtle top accent */} +
+ + {/* Game representation: Flash card effect */} +
+ {/* Back card (slightly offset) */} +
+ + {/* Front card with abacus */} +
+ 🧮 +
+ + {/* Timer indicator */} +
+
+

- Speed Memory Quiz + Memory Lightning ⚡

+

- Flash cards appear briefly - memorize the abacus patterns and input the numbers you remember. Test your visual memory and speed recognition skills. + Blink and you'll miss it! Cards flash faster than lightning - can you capture the patterns in your mind before they vanish? Perfect for building superhuman visual memory.

+
- Memory Training + 🧠 Memory Training - Beginner Friendly + ⭐ Beginner Friendly
- +
{/* Matching Pairs Game */} -
handleGameClick('battle-arena')} className={css({ + display: 'block', + textDecoration: 'none', + transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)', + _hover: { + transform: 'translateY(-8px) scale(1.02)', + '& .memory-grid': { + '& .flipped-card': { + transform: 'rotateY(180deg) scale(1.1)' + }, + '& .matched-card': { + animation: 'glow 0.8s ease-in-out' + } + }, + '& .new-badge': { + animation: 'bounce 0.6s ease-in-out' + }, + '& .speech-bubble': { + opacity: 1, + transform: 'translateY(0) scale(1)' + } + } })}>
- 🃏 -
-

- Matching Pairs - +
+ {profile.player2Emoji} + "Battle Arena - let's crush some competition! 🏟ī¸" +
+

+ + {/* Animated top gradient border */} +
+ + {/* Game representation: Memory cards grid */} +
+ {/* Grid of memory cards */} +
+ {/* Card 1 - face down */} +
+ ❓ +
+ + {/* Card 2 - matched (abacus) */} +
+ 🧮 +
+ + {/* Card 3 - face down */} +
+ ❓ +
+ + {/* Card 4 - matched (number) */} +
+ 5 +
+ + {/* Card 5 - flipped (number) */} +
+ 3 +
+ + {/* Card 6 - face down */} +
+ ❓ +
+
+ + {/* Player emoji indicator */} +
+ 😀 +
+
+ +

- Coming Soon - -

-

- Match abacus patterns with their corresponding numbers in this memory-style card game. Perfect for building pattern recognition skills. -

-
- + ✨ Hot! + + + +

- Pattern Matching - - + +

- All Levels - + + 🧠 Memory & Logic + + + đŸ‘Ĩ Two Players + + + 🎆 Epic Animations + +
{/* Speed Complement Race */}
+ {/* Character Anticipation Speech Bubble */}
- 🏃 + position: 'absolute', + top: '-10px', + left: '16px', + background: 'white', + border: '2px solid', + borderColor: 'red.300', + borderRadius: '16px', + px: '4', + py: '2', + boxShadow: '0 4px 20px rgba(239, 68, 68, 0.15)', + opacity: 0, + transform: 'translateY(-10px) scale(0.95)', + transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)', + maxW: '200px', + zIndex: 10, + '&::after': { + content: '""', + position: 'absolute', + bottom: '-8px', + left: '20px', + width: 0, + height: 0, + borderLeft: '8px solid transparent', + borderRight: '8px solid transparent', + borderTop: '8px solid', + borderTopColor: 'red.300' + }, + '&::before': { + content: '""', + position: 'absolute', + bottom: '-6px', + left: '22px', + width: 0, + height: 0, + borderLeft: '6px solid transparent', + borderRight: '6px solid transparent', + borderTop: '6px solid white' + } + })} style={{ className: 'speech-bubble' }}> +
+ {profile.player1Emoji} + "I can't wait for this speed challenge! đŸ”Ĩ" +
+ + {/* Coming Soon Indicator */} +
+ 🚀 Coming Soon +
+ + {/* Game representation: Timer and pairs */} +
+ {/* Timer circle */} +
+ ⏱ī¸ +
+ + {/* Complement pairs floating around */} +
+ 5 +
+ +
+ 5 +
+
+

- Speed Complement Race - - Coming Soon - + Number Hunter đŸŽ¯

+

- Race against time to find complement pairs that add to 5 or 10. Multiple game modes including practice, sprint, and survival challenges. + The clock is ticking! Hunt down complement pairs faster than ever. Can you beat the timer and become the ultimate number ninja?

+
- Speed Challenge + đŸ”Ĩ Speed Challenge - Advanced + đŸŽ¯ Advanced
@@ -282,80 +1608,224 @@ export default function GamesPage() { {/* Card Sorting Challenge */}
+ {/* Character Development Speech Bubble */}
- đŸ”ĸ + position: 'absolute', + top: '-10px', + right: '16px', + background: 'white', + border: '2px solid', + borderColor: 'indigo.300', + borderRadius: '16px', + px: '4', + py: '2', + boxShadow: '0 4px 20px rgba(99, 102, 241, 0.15)', + opacity: 0, + transform: 'translateY(-10px) scale(0.95)', + transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)', + maxW: '210px', + zIndex: 10, + '&::after': { + content: '""', + position: 'absolute', + bottom: '-8px', + right: '20px', + width: 0, + height: 0, + borderLeft: '8px solid transparent', + borderRight: '8px solid transparent', + borderTop: '8px solid', + borderTopColor: 'indigo.300' + }, + '&::before': { + content: '""', + position: 'absolute', + bottom: '-6px', + right: '22px', + width: 0, + height: 0, + borderLeft: '6px solid transparent', + borderRight: '6px solid transparent', + borderTop: '6px solid white' + } + })} style={{ className: 'speech-bubble' }}> +
+ {profile.player2Emoji} + "Organizing chaos is my superpower! 🎴" +
+ + {/* Coming Soon Indicator */} +
+ 🛠ī¸ In Development +
+ + {/* Game representation: Sortable cards */} +
+ {/* Stack of cards to sort */} +
+ {/* Card 1 - higher value (out of order) */} +
+ 8 +
+ + {/* Card 2 - lower value (out of order) */} +
+ 3 +
+ + {/* Card 3 - middle value (out of order) */} +
+ 5 +
+
+ + {/* Drag indicator */} +
+ ↕ī¸ +
+
+

- Card Sorting Challenge - - Coming Soon - + Master Organizer 🎴

+

- Drag and drop abacus cards to sort them from lowest to highest value. Develop number sense and comparison skills. + Chaos to order! Drag and sort scattered number cards into perfect harmony. Can you organize the mathematical mayhem?

+
- Sorting & Logic + 🧩 Sorting & Logic - Intermediate + 📈 Intermediate
@@ -375,13 +1845,13 @@ export default function GamesPage() { fontWeight: 'bold', mb: '4' })}> - New to Soroban? + 🚀 Ready to Begin Your Journey?

- Learn the basics with our comprehensive guide before diving into games + Start with our interactive guide and unlock the secrets of the ancient calculator!

+ + {/* Character Selection Modal */} + {showCharacterSelection && ( +
+
+ {/* Close Button */} + + + {/* Modal Header */} +
+

+ 🎮 Choose Your Champion +

+

+ Select a character for {showCharacterSelection === 'memory-lightning' ? 'Memory Lightning ⚡' : 'Battle Arena 🏟ī¸'} +

+
+ + {/* Game Mode Selection */} +
+

+ đŸŽ¯ Game Mode +

+
+ + + +
+
+ + {/* Character Selection */} +
+

+ {selectedGameMode === 'single' ? '🌟 Your Champion' : 'đŸ‘Ĩ Player Selection'} +

+ +
+ {/* Player 1 Character */} +
handleStartGame(1)} + className={css({ + background: 'linear-gradient(135deg, #dbeafe, #bfdbfe)', + border: '3px solid', + borderColor: 'blue.300', + rounded: '2xl', + p: '6', + textAlign: 'center', + cursor: 'pointer', + transition: 'all 0.3s ease', + _hover: { + transform: 'translateY(-4px) scale(1.02)', + boxShadow: '0 20px 40px rgba(59, 130, 246, 0.2)', + borderColor: 'blue.400' + } + })} + > +
+ {profile.player1Emoji} +
+

+ {profile.player1Name} +

+
+ Level {Math.floor(profile.gamesPlayed / 5) + 1} â€ĸ {profile.totalWins} wins +
+
+ 🚀 Ready to dominate! +
+
+ + {/* Player 2 Character */} + {selectedGameMode === 'two-player' && ( +
handleStartGame(2)} + className={css({ + background: 'linear-gradient(135deg, #e9d5ff, #ddd6fe)', + border: '3px solid', + borderColor: 'purple.300', + rounded: '2xl', + p: '6', + textAlign: 'center', + cursor: 'pointer', + transition: 'all 0.3s ease', + _hover: { + transform: 'translateY(-4px) scale(1.02)', + boxShadow: '0 20px 40px rgba(139, 92, 246, 0.2)', + borderColor: 'purple.400' + } + })} + > +
+ {profile.player2Emoji} +
+

+ {profile.player2Name} +

+
+ Level {Math.floor(profile.gamesPlayed / 5) + 1} â€ĸ {Math.floor(profile.totalWins / 2)} wins +
+
+ ⚡ Bring it on! +
+
+ )} + + {/* Single Player second option showing both characters to choose from */} + {selectedGameMode === 'single' && ( +
handleStartGame(2)} + className={css({ + background: 'linear-gradient(135deg, #e9d5ff, #ddd6fe)', + border: '3px solid', + borderColor: 'purple.300', + rounded: '2xl', + p: '6', + textAlign: 'center', + cursor: 'pointer', + transition: 'all 0.3s ease', + _hover: { + transform: 'translateY(-4px) scale(1.02)', + boxShadow: '0 20px 40px rgba(139, 92, 246, 0.2)', + borderColor: 'purple.400' + } + })} + > +
+ {profile.player2Emoji} +
+

+ {profile.player2Name} +

+
+ Level {Math.floor(profile.gamesPlayed / 5) + 1} â€ĸ {Math.floor(profile.totalWins / 2)} wins +
+
+ đŸŽ¯ Let's do this! +
+
+ )} +
+
+ + {/* Quick Info */} +
+
+ 💡 Tip: Each character tracks their own progress and achievements! +
+
+
+
+ )}
) +} + +// Refined animations for the sweet spot design +const globalAnimations = ` +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.7; + transform: scale(1.05); + } +} + +@keyframes gradientSlide { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +@keyframes glow { + 0%, 100% { + box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); + } + 50% { + box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6); + } +} + +@keyframes bounce { + 0%, 20%, 53%, 80%, 100% { + transform: translate3d(0, 0, 0); + } + 40%, 43% { + transform: translate3d(0, -5px, 0); + } + 70% { + transform: translate3d(0, -3px, 0); + } + 90% { + transform: translate3d(0, -1px, 0); + } +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes characterFloat { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + } + 33% { + transform: translateY(-8px) rotate(1deg); + } + 66% { + transform: translateY(-4px) rotate(-1deg); + } +} + +@keyframes characterBounce { + 0% { + transform: scale(1) rotate(0deg); + } + 25% { + transform: scale(1.05) rotate(3deg); + } + 50% { + transform: scale(1.1) rotate(0deg); + } + 75% { + transform: scale(1.05) rotate(-3deg); + } + 100% { + transform: scale(1) rotate(0deg); + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes slideInUp { + 0% { + opacity: 0; + transform: translateY(60px) scale(0.95); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } +} +` + +// Inject refined animations into the page +if (typeof document !== 'undefined' && !document.getElementById('games-page-animations')) { + const style = document.createElement('style') + style.id = 'games-page-animations' + style.textContent = globalAnimations + document.head.appendChild(style) } \ No newline at end of file