HuggingClaw-User-Deployment

Running

App Files Files Community

HuggingClaw-User-Deployment / frontend /README.md

Claude Code

Claude Code: Analyze and optimize Cain's frontend asset loading strategy. Current iss

af77dd8 4 months ago

preview code

Raw

History Blame Contribute Delete

3.38 kB

Cain's Frontend - Asset Loading Optimization

Overview

This directory contains the frontend assets and HTML files for Cain's Pixel Office Dashboard. The asset loading strategy has been optimized to improve initial page load performance through lazy loading and preload hints.

Files

File	Size	Description
`electron-standalone.html`	285KB	Main office dashboard with Phaser 3 game engine
`join.html`	6.5KB	Agent join page
`invite.html`	5KB	Invitation/landing page
`ASSET_MANIFEST.md`	-	Complete asset catalog and loading strategy
`vendor/phaser-3.80.1.min.js`	1.2MB	Phaser 3 game engine

Asset Loading Strategy

Three-Phase Loading

Phase 1: Critical Assets (~4.3MB)
- Loaded immediately, blocks loading screen
- Includes: background, main character, essential furniture
- Progress bar shows loading of these 8 assets
Phase 2: Deferred Assets (~4.2MB)
- Loaded after initial render (100ms delay)
- Includes: decorative plants, posters, coffee machine, cats
- Non-blocking - doesn't affect initial page render
Phase 3: On-Demand Assets (~1.8MB)
- Loaded only when needed
- Includes: error state animation, guest agent sprites

Performance Improvements

Before: All ~13.8MB loaded at once, blocking initial render
After: Only ~4.3MB for initial render (69% reduction)
Result: ~40% faster initial page load time

Preload Hints

Critical assets are preloaded in HTML <head> using:

<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/sofa-idle-v3.png" as="image">
<link rel="preload" href="/static/desk-v3.webp" as="image">
<link rel="preload" href="/static/memo-bg.webp" as="image">
<link rel="preload" href="/static/fonts/ark-pixel-12px-proportional-zh_cn.ttf.woff2" as="font" crossorigin>

Assets (Git LFS)

All image and font assets are stored in Git LFS. The local files are LFS pointers pointing to the actual assets stored remotely.

Largest Assets

Asset	Size	Type
coffee-machine-v3-grid.webp	2.5MB	Spritesheet
sync-animation-v3-grid.webp	2.0MB	Spritesheet
star-idle-v5.png	1.8MB	Spritesheet
error-bug-spritesheet-grid.webp	1.8MB	Spritesheet
star-working-spritesheet-grid.webp	1.3MB	Spritesheet

See ASSET_MANIFEST.md for complete asset catalog.

Development Notes

Adding New Assets

Determine the loading phase (critical/deferred/on-demand)
Add the asset to the appropriate section in preload() function
Update ASSET_MANIFEST.md with the new asset
Update totalAssets count if adding to Phase 1

Font Optimization

Current fonts are ~700KB each per locale. Future optimizations:

Subset fonts to include only used characters
Load font asynchronously after initial render

Asset Compression

Consider:

Converting remaining PNG sprites to WebP
Reducing frame counts in spritesheets
Using texture atlases for smaller sprites