# Cain's Frontend Asset Manifest
## Asset Loading Strategy
This document catalogs all frontend assets and defines the loading priority strategy.
### Loading Phases
1. **Critical Assets (Phase 1)** - Loaded immediately on page load
- Required for initial render and basic functionality
- Blocks the loading screen until complete
2. **Deferred Assets (Phase 2)** - Loaded after initial render
- Non-critical decorative elements
- Loaded asynchronously after scene creation
3. **On-Demand Assets (Phase 3)** - Loaded only when needed
- Rarely used features (guest agents, error states)
- Loaded on first use
---
## Asset Catalog
### Critical Assets (Phase 1) - ~3.6MB
| Asset | Size | Type | Description |
|-------|------|------|-------------|
| office_bg_small.webp | 982KB | Image | Main office background |
| star-idle-v5.png | 1.8MB | Spritesheet | Main character idle animation |
| sofa-idle-v3.png | 49KB | Image | Main furniture - sofa |
| sofa-shadow-v1.png | 14KB | Image | Sofa shadow |
| desk-v3.webp | 52KB | Image | Office desk |
| memo-bg.webp | 3KB | Image | Memo panel background |
| star-working-spritesheet-grid.webp | 1.3MB | Spritesheet | Writing/working state |
| sync-animation-v3-grid.webp | 2.0MB | Spritesheet | Sync state animation |
**Font (Locale-based):** ~700KB
- ark-pixel-12px-proportional-[locale].ttf.woff2
### Deferred Assets (Phase 2) - ~4.2MB
| Asset | Size | Type | Description |
|-------|------|------|-------------|
| plants-spritesheet.webp | 193KB | Spritesheet | Decorative plants |
| posters-spritesheet.webp | 580KB | Spritesheet | Wall posters |
| cats-spritesheet.webp | 567KB | Spritesheet | Cat animations |
| flowers-bloom-v2.webp | 341KB | Spritesheet | Flower bloom animation |
| serverroom-spritesheet.webp | 995KB | Spritesheet | Server room decor |
| coffee-machine-v3-grid.webp | 2.5MB | Spritesheet | Coffee machine |
| coffee-machine-shadow-v1.png | 1KB | Image | Coffee machine shadow |
### On-Demand Assets (Phase 3) - ~1.8MB
| Asset | Size | Type | Description | Trigger |
|-------|------|------|-------------|---------|
| error-bug-spritesheet-grid.webp | 1.8MB | Spritesheet | Error state animation | On error |
| guest_anim_1-6.webp | ~0KB each | Spritesheet | Guest agent animations | On guest join |
| guest_role_1-6.png | ~0-1KB each | Image | Guest static avatars | On guest join |
### UI Button Assets - ~5KB
| Asset | Size | Type | Description |
|-------|------|------|-------------|
| btn-state-sprite.png | 1KB | Sprite | State toggle button |
| btn-open-drawer-sprite.png | 1KB | Sprite | Drawer button |
| btn-move-house-sprite.png | ~0KB | Sprite | Move house button |
| btn-back-home-sprite.png | ~0KB | Sprite | Back home button |
| btn-broker-sprite.png | ~0KB | Sprite | Broker button |
| btn-diy-sprite.png | ~0KB | Sprite | DIY button |
**Note:** Button assets are loaded via CSS background-image and don't use Phaser loader.
---
## Optimization Strategy
### Current Total
- **All Assets:** ~13.8MB
- **Initial Load (Phase 1):** ~4.3MB (including font)
- **Deferred Load (Phase 2):** ~4.2MB
- **On-Demand (Phase 3):** ~1.8MB (only as needed)
### Implementation Details
1. **HTML Preload Hints** - Added for critical assets in ``:
```html
```
2. **Phaser Asset Loader** - Modified preload() function:
- Phase 1: Loads 8 critical assets (blocks loading screen)
- Phase 2: Loads 7 deferred assets after scene.create()
- Phase 3: Loads on-demand assets when needed
3. **Lazy Loading Implementation** - After scene creation:
```javascript
function loadDeferredAssets() {
// Load decorative assets asynchronously
game.load.spritesheet('plants', '/static/plants-spritesheet.webp', ...);
game.load.spritesheet('posters', '/static/posters-spritesheet.webp', ...);
// ... etc
game.load.start();
}
```
### Expected Performance Improvements
- **Initial Load Time:** Reduced by ~40% (4.3MB vs 13.8MB)
- **Time to Interactive:** Improved as critical UI renders faster
- **Perceived Performance:** Loading screen shows progress for essential assets only
---
## Maintenance Notes
### Adding New Assets
1. **Determine the phase:** Is this critical for initial render?
2. **Update this manifest:** Add asset with size and description
3. **Modify preload() function:** Add to appropriate loading phase
4. **Update totalAssets count:** Adjust progress bar calculation
### Re-compressing Existing Assets
Consider:
- Converting PNG sprites to WebP (smaller size, same quality)
- Reducing frame counts in spritesheets where possible
- Using texture atlases for smaller sprites
### Font Optimization
Current: All locale fonts are ~700KB each
- Consider subsetting fonts to include only used characters
- Or load font asynchronously after initial render
---
*Generated: 2026-03-14*
*Last Updated: See git history for modifications*