search

Missions UI Proposal for OASIS Portal

hashtag
Overview

Based on the STAR architecture, missions are high-level story containers that organize quests into chapters. Missions provide the narrative structure for user progression, while quests are the actionable steps within missions.

hashtag
Key Concepts from STAR

hashtag
Mission Structure

  • Mission: A container for quests, organized into optional chapters

  • Chapters: Optional grouping of quests (for large missions)

  • Quests: Actionable steps within a mission

  • MissionType: Enum defining mission types (Easy, Medium, Hard, Expert)

  • Inherits from QuestBase: Missions inherit quest properties like:

    • Name, Description

    • Status (Pending, InProgress, Completed, etc.)

    • Difficulty

    • Rewards (Karma, XP)

    • Quests list

    • Order/Sequence

hashtag
Mission Operations

  • Create mission

  • Start mission (for user)

  • Complete mission (when all quests/chapters complete)

  • Update mission

  • Delete mission

  • Publish/Unpublish mission

  • Download/Install mission

  • Clone mission

hashtag
UI Design Proposal

hashtag
1. Mission Tracker (Main View)

Location: STAR Dashboard → Missions Tab

Layout:

Features:

  • Mission Cards: Visual cards showing mission progress

  • Progress Visualization:

    • Progress bar showing completion percentage

    • Quest timeline showing completed/active/pending quests

    • Color-coded nodes (green = completed, purple = active, gray = pending)

  • Mission Metadata: Type, quest count, start/completion dates

  • Chapter Support: Visual grouping if mission has chapters

  • Status Indicators: Active, Completed, Not Started

hashtag
2. Mission Detail View

Layout:

Features:

  • Chapter Organization: Group quests by chapters

  • Quest List: Show all quests with completion status

  • Progress Tracking: Real-time progress updates

  • Rewards Display: XP and Karma rewards

  • Action Buttons:

    • Start mission (if not started)

    • Complete mission (if all quests done)

    • Navigate to active quest

    • Share mission progress

hashtag
3. Mission Creation Interface

Layout (Similar to Quest Builder but simpler):

Features:

  • 3-Step Wizard: Simple creation flow

  • Basic Info: Name, description, type, difficulty

  • Organization: Choose flat or chapter-based structure

  • Quest Selection: Link existing quests or create new ones

  • Chapter Management: Add/remove/reorder chapters

  • Rewards: Set XP and Karma rewards

hashtag
4. Mission Timeline View (Alternative)

Alternative visualization for complex missions:

Features:

  • Visual Timeline: Tree/graph view of mission structure

  • Chapter Separation: Clear visual boundaries

  • Quest Dependencies: Show quest relationships

  • Status Indicators: Visual status per quest/chapter

hashtag
UI Components Needed

hashtag
Components

  1. MissionCard: Reusable card component showing mission summary

  2. MissionProgressBar: Progress visualization component

  3. QuestTimeline: Timeline visualization for quests

  4. ChapterAccordion: Collapsible chapter sections

  5. MissionCreator: 3-step wizard for creating missions

  6. ChapterSelector: Component for organizing quests into chapters

  7. MissionDetailView: Full mission detail with chapters and quests

  8. MissionStatusBadge: Status indicator badge

hashtag
API Integration Points

  • GET /api/missions - List all missions

  • GET /api/missions/{id} - Get mission details

  • POST /api/missions - Create mission

  • PUT /api/missions/{id} - Update mission

  • DELETE /api/missions/{id} - Delete mission

  • POST /api/missions/{id}/start - Start mission

  • POST /api/missions/{id}/complete - Complete mission

  • GET /api/missions/{id}/quests - Get quests for mission

  • GET /api/missions/{id}/chapters - Get chapters for mission

hashtag
Design Principles

  1. Visual Hierarchy: Clear visual distinction between missions, chapters, and quests

  2. Progress Clarity: Always show progress clearly (percentage, visual indicators)

  3. Chapter Support: Primary organization method for large missions

  4. Quest Integration: Seamless integration with quest system

  5. Status Awareness: Clear status indicators at all levels

  6. Timeline Visualization: Visual representation of quest sequence

  7. Responsive Design: Works on desktop and mobile

  8. Consistent Styling: Matches portal design system

hashtag
Color Scheme

  • Mission Primary: Pink/Magenta (rgba(236, 72, 153, ...))

  • Completed: Green (rgba(34, 197, 94, ...))

  • Active: Purple (rgba(168, 85, 247, ...))

  • Pending: Gray (rgba(255, 255, 255, 0.1))

hashtag
Next Steps

  1. Enhance existing mission-interface.js with chapter support

  2. Create mission creation wizard similar to quest builder

  3. Add chapter management UI components

  4. Integrate with quest selection/creation

  5. Add timeline visualization component

  6. Connect to backend API endpoints

  7. Add mission progress tracking

  8. Implement mission completion flow

PreviousAI NFT Assistant - UI Design & Implementation GuideNextSTAR Capabilities Analysis & Frontend Integration Proposal

Last updated