whale-town-front-v2/assets/ui/datawhale_honor/asset_plan.md

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.