# Datawhale Honor UI Asset Plan

## Runtime Layout Reference

- Godot panel script: `res://scenes/ui/DatawhaleHonorRankingPanel.gd`
- Logical panel size: `1500 x 850`
- Runtime safe margin: `64 px` total in each viewport axis
- Current compressed screenshot reference: `1355 x 761`
- Existing mall UI main frame reference: `1457 x 891`
- Honor board world prop reference: `160 x 193`

## Layout Estimate

- Main frame target: `1500 x 850`, 9-slice, warm carved wood outer frame
- Content margin: `32 px` left/right, `28 px` top/bottom
- Header: `1436 x 104`, 9-slice wooden plank
- Tabs row: `1436 x 58`, six to seven tabs, each roughly `188 x 50`
- Podium area: `1436 x 236`, parchment inset with top-three cards
- Rank list: `1436 x 240+`, Top10 compact rows, 4-10 visible rows about `44-48 px` each
- Footer: `1436 x 72`, parchment footer strip with reward button

## Source Generation Strategy

Generate sources on pure magenta background `#ff00ff`, no text, no fake data, no full scenic background.
Use BiRefNet cutout first, then trim/export components.
Text, numbers, ranking data, category labels, and user names must remain Godot-rendered.

## Required Components

### Nine-slice Surfaces

- `honor_panel_wood_frame.png`
  - Target use: main `StyleBoxTexture`
  - Source component size: about `1500 x 850`
  - Suggested texture margins: `72, 72, 72, 72`
- `honor_parchment_panel.png`
  - Target use: podium/list/footer inset panels
  - Source component size: about `1200 x 300`
  - Suggested texture margins: `42, 42, 42, 42`
- `honor_header_plank.png`
  - Target use: header panel
  - Source component size: about `1436 x 120`
  - Suggested texture margins: `64, 34, 64, 34`
- `honor_tab_normal.png`
  - Target use: inactive category tab
  - Source component size: about `220 x 62`
  - Suggested texture margins: `34, 24, 34, 24`
- `honor_tab_active.png`
  - Target use: active category tab
  - Source component size: about `220 x 62`
  - Suggested texture margins: `34, 24, 34, 24`
- `honor_claim_button.png`
  - Target use: reward button
  - Source component size: about `330 x 68`
  - Suggested texture margins: `40, 24, 40, 24`

### Fixed Icons

- `honor_close_button.png`: `64 x 64`
- `honor_whale_crest.png`: `96 x 96`
- `honor_medal_gold.png`: `72 x 72`
- `honor_medal_silver.png`: `72 x 72`
- `honor_medal_bronze.png`: `72 x 72`
- `honor_icon_score_globe.png`: `40 x 40`
- `honor_icon_contribution_whale.png`: `40 x 40`
- `honor_icon_repo_chest.png`: `40 x 40`
- `honor_icon_star.png`: `40 x 40`
- `honor_icon_reward_gem.png`: `40 x 40`
- `honor_icon_gift.png`: `44 x 44`

## Visual Direction

- Cozy WhaleTown guild entrance style, not web dashboard.
- Materials: carved oak, brass corner caps, cream parchment, soft blue enamel accents.
- Pixel-friendly painterly UI, readable at runtime scale.
- Keep corners modest and practical for dense ranking UI.