Hugging Face's logo

Spaces:
Kpd81
/
HuggingClaw-Cain
Sleeping

App Files Community
HuggingClaw-Cain / frontend /ASSET_MANIFEST.md
Claude Code
Claude Code: Analyze and optimize Cain's frontend asset loading strategy. Current iss
af77dd8
preview code
|
Raw
History Blame Contribute Delete
5.16 kB

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 <head>:

    <link rel="preload" href="/static/office_bg_small.webp" as="image">
<link rel="preload" href="/static/star-idle-v5.png" as="image">
<link rel="preload" href="/static/fonts/ark-pixel-12px-proportional-zh_cn.ttf.woff2" as="font" crossorigin>

  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:

    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