Skip to content

Latest commit

 

History

History
141 lines (117 loc) · 4.25 KB

ui-wireframes.md

File metadata and controls

141 lines (117 loc) · 4.25 KB
title aliases tags created updated
UI Wireframes
documentation
2024-01-04
2024-01-04

UI Wireframes

Overview

BootHillGM features a responsive web-based interface built using Next.js and React components. The UI emphasizes clear presentation of game text, intuitive input methods, and quick access to essential game information across various devices and screen sizes. The interface is designed to facilitate smooth interaction between the player and the AI Game Master.

Purpose

This documentation serves as a technical reference for developers working on the user interface, providing insights into the architecture, implementation details, and roadmap. It's particularly relevant for:

  • UI/UX designers implementing new features
  • Frontend developers maintaining existing components
  • Technical reviewers assessing UI architecture

Implementation Details

Key Screens and Components

Home Page

  • Title: "BootHillGM"
  • Brief game description
  • [] Navigation component with:
    • New Game
    • Load Game
    • Settings

Character Creation

  • Header: "Create Your Character"
  • AI-guided character creation flow
  • Text input field for player responses
  • Display area for AI prompts and character information
  • Character confirmation process

Game Session

  • Implemented as GameSession component with:
    • Main game area for narrative display
    • Side panel for character information
    • Input management system
  • Status display showing:
    • Character name
    • Health status
    • Current location
  • Narrative display area with:
    • Scrollable text display
    • AI-generated content presentation
  • Input system featuring:
    • Text input field
    • Input processing
    • Command handling

Combat System

  • Implemented comprehensive combat interface:
    • CombatControls for action management
    • CombatStatus for state display
    • CombatLog for battle narrative
  • Turn management system
  • Action selection interface
  • Combat state visualization
  • Initiative and turn order display

Game Area Components

  • MainGameArea implementation
  • SidePanel for supplementary information
  • GameplayControls for core interactions
  • LoadingScreen for state transitions
  • Additional panels for inventory and character details (in progress)

Status and Information Display

  • StatusPanel implementation
  • JournalViewer for game history
  • StatusDisplayManager for state management
  • Enhanced inventory visualization (planned)

Navigation and Controls

  • Navigation component implementation
  • UserInputHandler for interaction processing
  • InputManager for command processing
  • Advanced keybinding system (planned)

Responsive Design Implementation

Desktop

  • Single-column layout for game session
  • Side panel integration
  • Combat interface optimization
  • Enhanced widescreen support (planned)

Mobile

  • Responsive layout adaptation
  • Touch-friendly controls
  • Improved mobile combat interface (planned)
  • Gesture controls (post-MVP)

UI Elements and Styling

Current Implementation

  • Clean, readable interface
  • Consistent component styling
  • Combat-specific UI elements
  • Enhanced visual themes (planned)

Typography

  • Implementation of Geist fonts:
    • GeistVF for main text
    • GeistMonoVF for specific elements
  • Additional font optimizations (planned)

Components

  • Core component library implementation
  • Combat-specific components
  • Game state management components
  • Enhanced UI component library (planned)

AI Integration Considerations

  • Prompt display optimization
  • Response parsing and presentation
  • AI service integration
  • Enhanced AI interaction patterns (planned)

Next.js Implementation

  • Page routing structure
  • Component organization
  • State management
  • Performance optimizations (ongoing)

Related Documentation

  • [[../index|Main Documentation]]
  • [[../architecture/_index|Architecture Overview]]
  • [[../core-systems/state-management|State Management Guide]]
  • [[../technical-guides/testing|Testing Guide]]

Tags

#documentation #architecture #ui-wireframes

Changelog

  • 2024-01-04: Reformatted to follow documentation template