Skip to main content

Main Menu & Navigation

Master the interface and learn how to navigate La Légende des Trois Gardiens efficiently.

Home Page Overview​

The Home Page is your central hub for all activities. It provides quick access to all major game features.

Main Actions​

🗺️ Map​

Purpose: Explore hexagon territories and select challenges

  • Opens the interactive hexagonal map
  • View all available territories
  • See completed vs. uncompleted hexagons
  • Select territories to view details
  • Quick access to start challenges

📖 Story (Intro)​

Purpose: Learn about the game's narrative and legend

  • Read the story of the three guardians
  • Understand the lore and world
  • Discover the legend of the mystical artifacts
  • Perfect for new players

🤳 Selfie (AR Studio)​

Purpose: Take AR selfies with 3D face filters

  • Launch the AR camera interface
  • Apply real-time face filters using MediaPipe
  • Take photos with 3D effects
  • Share on social media
  • Fun feature for social engagement

Account Section​

👤 My Avatar​

Button: Shows your current avatar sprite

  • Click to open avatar selection
  • Preview your character
  • Quick access to customization

🔐 Connected As​

Display: Shows your email/username

  • Confirms you're logged in
  • Displays account information
  • Click to view full profile

🚪 Sign Out​

Button: Log out of your account

  • Safely logs you out
  • Returns to sign-in page
  • Preserves your progress on server

Account Actions (When Not Logged In)​

✍️ Sign In​

Purpose: Access your existing account

  • Enter your email address
  • Receive a 6-digit verification code
  • Enter code to authenticate
  • Access your saved progress

📝 Sign Up​

Purpose: Create a new account

  • Register with your email
  • Verify via email code
  • Create your guardian profile
  • Start your adventure

Bottom Navigation Menu​

The Bottom Navigation is always visible and provides quick access to core features.

🏠 Home​

  • Returns to the main hub
  • Safe haven to regroup
  • Access all features from here

🗺️ Map​

  • Direct access to territory exploration
  • Faster than going through home
  • Most used navigation item for active players

🎒 Inventory​

  • View collected items and treasures
  • Check your coin balance (detailed view)
  • See all acquired artifacts
  • Review achievement progress

👤 Profile​

  • View your statistics and progression
  • Update your avatar
  • Track completion percentage
  • Review high scores

⚙️ Settings​

  • Adjust game preferences
  • Calibrate device sensors
  • Change language (English, French, Spanish)
  • Manage account settings

Coin Display​

Location: Bottom navigation, right side

Shows:

  • 💰 Coin icon
  • Current balance number
  • Loading indicator (during updates)

Features:

  • Real-time updates after challenges
  • Tap for detailed wallet view
  • Fallback to local storage when offline
  • Refreshes automatically

Authentication Pages​

Sign In Page​

Path: /auth/sign-in

Flow:

  1. Enter your email address
  2. Tap "Send Code"
  3. Check email for 6-digit code
  4. Enter code in verification page
  5. Automatically logged in on success

Features:

  • Passwordless authentication
  • Secure magic link system
  • Quick and easy access
  • No password to remember

Sign Up Page​

Path: /auth/sign-up

Flow:

  1. Enter email address
  2. Receive verification code
  3. Complete profile setup
  4. Choose initial avatar
  5. Start playing immediately

Reset Password Page​

Path: /auth/reset-password

Purpose: Recover account access if needed

Note: Currently uses the same email verification flow as sign-in.

Secondary Pages​

Help Page​

Path: /help

Content:

  • Frequently Asked Questions (FAQ)
  • Quick troubleshooting tips
  • Common issues and solutions
  • Contact information

About Page​

Path: /about

Content:

  • Project information
  • Game universe context
  • Development background
  • Credits and acknowledgments

Terms of Service​

Path: /legal/terms

Content:

  • Rules and guidelines
  • User responsibilities
  • Service limitations
  • Legal agreements

Privacy Policy​

Path: /legal/privacy

Content:

  • Data collection practices
  • How information is protected
  • User privacy rights
  • Cookie usage

Challenge Flow Navigation​

When you start a challenge, you'll navigate through these pages:

1. Challenge Introduction​

Example Path: /hexagon/[hexagonId]/challenge/[challengeId]/intro

Content:

  • Challenge description
  • Difficulty level
  • Estimated duration
  • Rules and objectives
  • "Start Challenge" button

2. Calibration (Motion Games)​

Example Path: /calibration

Content:

  • Device orientation setup
  • Motion sensor calibration
  • Instructions for optimal positioning
  • Test your calibration

3. Game Play​

Example Path: /hexagon/[hexagonId]/challenge/[challengeId]/miniGame

Content:

  • The actual mini-game or quiz
  • Game HUD and controls
  • Real-time scoring
  • Timer and progress indicators

4. Result Screen​

Example Path: /hexagon/[hexagonId]/challenge/[challengeId]/result

Content:

  • Your final score
  • Coins earned
  • Success/failure status
  • Performance breakdown
  • Options: Retry, Continue, View Rewards

5. Rewards Screen (Optional)​

Example Path: /hexagon/[hexagonId]/challenge/[challengeId]/rewards

Content:

  • Detailed reward breakdown
  • Items collected
  • Fragments earned
  • Progress toward artifacts

6. Leaderboard (Optional)​

Example Path: /hexagon/[hexagonId]/challenge/[challengeId]/leaderboard

Content:

  • Top scores for this challenge
  • Your ranking
  • Compare with other players
  • Competitive metrics

Multiplayer Room Navigation​

Create Room​

Path: /game/create

Content:

  • Room configuration options
  • Generate room code
  • Share with friends
  • Start when ready

Join Room​

Path: /game/join

Content:

  • Enter room code
  • View room details
  • Join existing game
  • Wait for host to start

Waiting Room​

Path: /game/[roomId]/waiting

Content:

  • Connected players list
  • Ready status indicators
  • Chat or communication
  • Start game button (host only)

Room Play​

Path: /game/[roomId]/play

Content:

  • Multiplayer challenge
  • Team-based mechanics
  • Real-time scoring
  • Cooperative objectives

Room Results​

Path: /game/[roomId]/results

Content:

  • Team performance
  • Individual contributions
  • Shared rewards
  • Next steps

Special Features Navigation​

Avatar Selection​

Path: /avatar

Content:

  • Grid of available sprites
  • 4x3 spritesheet previews
  • Select and preview
  • Save your choice

Calibration​

Path: /calibration

Query Parameter Support:

  • Add ?from=/previous/path for contextual return button
  • Global calibration for all motion games
  • Test calibration before playing

Certificate​

Path: /certificate

Content:

  • Completion achievement
  • Personalized guardian certificate
  • Share-worthy accomplishment
  • Requires 100% completion

Epilogue​

Path: /epilogue

Content:

  • Narrative conclusion
  • Story resolution
  • Final cutscene or text
  • Celebration of completion

Quick Navigation Shortcuts​

  1. Home to Map: Fastest route to challenges
  2. Challenge to Profile: Review progress immediately
  3. Result to Retry: Quick replay for better scores
  4. Inventory to Map: Plan next challenge after checking coins

Efficient Workflows​

For Challenge Grinding:

Map → Challenge Intro → Play → Result → Map (repeat)

For Multiplayer:

Home → Create/Join Room → Waiting → Play → Results → New Room

For Exploration:

Map → Territory → Intro → Story Context → Play → Rewards → Next Territory

Most pages include breadcrumb navigation showing:

  • Where you are in the site hierarchy
  • Quick links back to parent pages
  • Current page highlighted

Next Steps​

Now that you understand navigation:

Pro Tip: Use the bottom navigation for quick access to frequently-used features. The home page is great for discovering new content!