180 lines
5.4 KiB
Markdown
180 lines
5.4 KiB
Markdown
# PWA UI Enhancement - Profile, Inventory & Interactables
|
|
|
|
## Summary
|
|
Enhanced the PWA game interface with three major improvements:
|
|
1. **Profile Sidebar** - Complete character stats display
|
|
2. **Inventory System** - Visual grid with item display
|
|
3. **Interactable Images** - Large image display for interactables
|
|
|
|
## Changes Made
|
|
|
|
### 1. Profile Sidebar (Right Sidebar)
|
|
**File: `pwa/src/components/Game.tsx`**
|
|
- Replaced simple inventory placeholder with comprehensive profile section
|
|
- Added health and stamina progress bars (moved from header to sidebar)
|
|
- Display character information:
|
|
- Level and XP
|
|
- Unspent stat points (highlighted if available)
|
|
- Attributes: Strength, Agility, Endurance, Intellect
|
|
- Clean, compact layout matching Telegram bot style
|
|
|
|
**File: `pwa/src/components/Game.css`**
|
|
- Added `.profile-sidebar` styles with dark background and red border
|
|
- Created `.sidebar-stat-bars` with progress bar animations
|
|
- Health bar: Red gradient (#dc3545 → #ff6b6b) with glow
|
|
- Stamina bar: Yellow gradient (#ffc107 → #ffeb3b) with glow
|
|
- Stats displayed in compact rows with labels and values
|
|
- Unspent points highlighted with yellow background and pulse animation
|
|
- Added divider between XP info and attributes
|
|
|
|
### 2. Inventory System (Right Sidebar)
|
|
**File: `pwa/src/components/Game.tsx`**
|
|
- Implemented inventory grid displaying items from `playerState.inventory`
|
|
- Each item shows:
|
|
- Image (if available) or fallback icon (📦)
|
|
- Quantity badge (if > 1) in bottom-right corner
|
|
- Equipped indicator ("E" badge) in top-left corner
|
|
- Empty state: Shows "Empty" message
|
|
- Items are clickable with hover effects
|
|
|
|
**File: `pwa/src/components/Game.css`**
|
|
- Added `.inventory-sidebar` with blue border theme (#6bb9f0)
|
|
- Created responsive grid: `repeat(auto-fill, minmax(60px, 1fr))`
|
|
- Item cards: 60x60px with aspect-ratio 1:1
|
|
- Hover effect: Scale 1.05, blue glow, border highlight
|
|
- Quantity badge: Yellow text (#ffc107) on dark background
|
|
- Equipped badge: Red background (#ff6b6b) with "E" indicator
|
|
- Image sizing: 80% of container with object-fit: contain
|
|
|
|
### 3. Interactable Images (Left Sidebar)
|
|
**File: `pwa/src/components/Game.tsx`**
|
|
- Restructured interactable display to show images
|
|
- Layout:
|
|
- Image container: 200px height, full-width
|
|
- Content section: Name and action buttons
|
|
- Images load from `interactable.image_path`
|
|
- Fallback: Hide image if load fails
|
|
- Image zoom effect on hover
|
|
|
|
**File: `pwa/src/components/Game.css`**
|
|
- Created `.interactable-card` replacing old `.interactable-item`
|
|
- Image container: 200px height, centered, cover fit
|
|
- Hover effects:
|
|
- Border color intensifies
|
|
- Yellow glow shadow
|
|
- Card lifts (-2px translateY)
|
|
- Image scales to 1.05
|
|
- Smooth transitions on all effects
|
|
- Maintained yellow theme (#ffc107) for consistency
|
|
|
|
## Visual Improvements
|
|
|
|
### Color Scheme
|
|
- **Health**: Red gradient with glow (#dc3545 → #ff6b6b)
|
|
- **Stamina**: Yellow gradient with glow (#ffc107 → #ffeb3b)
|
|
- **Profile**: Red borders (rgba(255, 107, 107, 0.3))
|
|
- **Inventory**: Blue borders (#6bb9f0)
|
|
- **Interactables**: Yellow borders (#ffc107)
|
|
|
|
### Animations
|
|
- Progress bar width transitions (0.3s ease)
|
|
- Hover effects: transform, box-shadow, scale
|
|
- Unspent points: Pulse animation (2s infinite)
|
|
- Image zoom on card hover
|
|
|
|
### Layout
|
|
- Right sidebar divided into two sections:
|
|
1. Profile (top) - Character stats
|
|
2. Inventory (bottom) - Item grid
|
|
- Left sidebar: Interactables with large images
|
|
- All sections have consistent rounded corners and dark backgrounds
|
|
|
|
## Data Flow
|
|
|
|
### Profile Data
|
|
```typescript
|
|
Profile {
|
|
name: string
|
|
level: number
|
|
xp: number
|
|
hp: number
|
|
max_hp: number
|
|
stamina: number
|
|
max_stamina: number
|
|
strength: number
|
|
agility: number
|
|
endurance: number
|
|
intellect: number
|
|
unspent_points: number
|
|
is_dead: boolean
|
|
}
|
|
```
|
|
|
|
### Inventory Data
|
|
```typescript
|
|
PlayerState {
|
|
inventory: Array<{
|
|
name: string
|
|
quantity: number
|
|
image_path?: string
|
|
description?: string
|
|
is_equipped?: boolean
|
|
}>
|
|
}
|
|
```
|
|
|
|
### Interactable Data
|
|
```typescript
|
|
Location {
|
|
interactables: Array<{
|
|
instance_id: string
|
|
name: string
|
|
image_path?: string
|
|
actions: Array<{
|
|
id: string
|
|
name: string
|
|
description: string
|
|
}>
|
|
}>
|
|
}
|
|
```
|
|
|
|
## API Endpoints Used
|
|
- `GET /api/game/state` - Player state with inventory
|
|
- `GET /api/game/profile` - Character profile with stats
|
|
- `GET /api/game/location` - Current location with interactables
|
|
|
|
## Browser Compatibility
|
|
- CSS Grid for responsive layouts
|
|
- Flexbox for alignments
|
|
- Modern CSS properties (aspect-ratio, object-fit)
|
|
- Smooth transitions and animations
|
|
- Works in all modern browsers (Chrome, Firefox, Safari, Edge)
|
|
|
|
## Future Enhancements
|
|
- Item interaction (Equip, Use, Drop buttons)
|
|
- Inventory sorting and filtering
|
|
- Item tooltips with detailed descriptions
|
|
- Drag-and-drop for item management
|
|
- Carry weight/volume display with progress bars
|
|
- Stat point allocation interface
|
|
|
|
## Testing
|
|
1. Profile displays correctly with all stats
|
|
2. Inventory grid shows items with images
|
|
3. Equipped items show "E" badge
|
|
4. Item quantities display correctly
|
|
5. Interactables show images (200px height)
|
|
6. Hover effects work smoothly
|
|
7. Responsive layout adapts to screen size
|
|
|
|
## Deployment
|
|
```bash
|
|
# Restart PWA container to apply changes
|
|
docker compose restart echoes_of_the_ashes_pwa
|
|
```
|
|
|
|
## Files Modified
|
|
- `pwa/src/components/Game.tsx` - UI components
|
|
- `pwa/src/components/Game.css` - Styling
|