feat: updated UI UX for profile and leaderboard menu
This commit is contained in:
+120
-51
@@ -1,25 +1,54 @@
|
||||
extends PanelContainer
|
||||
extends Control
|
||||
## Leaderboard panel — full-scene layout.
|
||||
## Left: sortable leaderboard list.
|
||||
## Right: 3D SubViewport character preview of the selected/top-ranked player.
|
||||
|
||||
signal closed
|
||||
|
||||
@onready var close_btn := %CloseBtn as Button
|
||||
# -------------------------------------------------------------------------
|
||||
# UI References
|
||||
# -------------------------------------------------------------------------
|
||||
@onready var back_btn := %BackBtn as Button
|
||||
@onready var sort_score_btn := %SortScoreBtn as Button
|
||||
@onready var sort_win_rate_btn := %SortWinRateBtn as Button
|
||||
@onready var sort_games_btn := %SortGamesBtn as Button
|
||||
@onready var leaderboard_list := %LeaderboardList as VBoxContainer
|
||||
@onready var status_label := %StatusLabel as Label
|
||||
|
||||
# 3D Preview
|
||||
@onready var character_root := %CharacterRoot as Node3D
|
||||
@onready var selected_name_label := %SelectedNameLabel as Label
|
||||
@onready var selected_rank_label := %SelectedRankLabel as Label
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
# State
|
||||
# -------------------------------------------------------------------------
|
||||
var leaderboard_data: Array = []
|
||||
var current_sort_key: String = "high_score"
|
||||
var _anim_player: AnimationPlayer
|
||||
|
||||
# Maps game character name -> GLB node name in the SubViewport
|
||||
# Must match the mapping in player.gd's set_character()
|
||||
const CHAR_NODE_MAP: Dictionary = {
|
||||
"Copper": "Oldpop",
|
||||
"Dabro": "Masbro",
|
||||
"Gatot": "Gatot",
|
||||
"Pip": "Bob"
|
||||
}
|
||||
# Avatar index -> character name (same order as UserProfileManager.AVATARS)
|
||||
const AVATAR_TO_CHAR: Array[String] = ["Pip", "Gatot", "Dabro", "Copper"]
|
||||
|
||||
func _ready() -> void:
|
||||
close_btn.pressed.connect(_on_close_pressed)
|
||||
back_btn.pressed.connect(_on_close_pressed)
|
||||
sort_score_btn.pressed.connect(func(): _sort_by("high_score"))
|
||||
sort_win_rate_btn.pressed.connect(func(): _sort_by("win_rate"))
|
||||
sort_games_btn.pressed.connect(func(): _sort_by("games_played"))
|
||||
|
||||
_update_tab_visuals()
|
||||
_setup_3d_preview()
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
# Show / Close
|
||||
# -------------------------------------------------------------------------
|
||||
func show_panel() -> void:
|
||||
show()
|
||||
_fetch_leaderboard_data()
|
||||
@@ -28,29 +57,28 @@ func _on_close_pressed() -> void:
|
||||
hide()
|
||||
emit_signal("closed")
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
# Data
|
||||
# -------------------------------------------------------------------------
|
||||
func _fetch_leaderboard_data() -> void:
|
||||
if not NakamaManager.session:
|
||||
status_label.text = "Not connected to Nakama"
|
||||
return
|
||||
|
||||
|
||||
status_label.text = "Loading data..."
|
||||
|
||||
# Clear existing items
|
||||
for child in leaderboard_list.get_children():
|
||||
child.queue_free()
|
||||
|
||||
|
||||
var payload = JSON.stringify({})
|
||||
var result = await NakamaManager.client.rpc_async(NakamaManager.session, "get_leaderboard_stats", payload)
|
||||
|
||||
|
||||
if result.is_exception():
|
||||
status_label.text = "Failed to load leaderboard"
|
||||
push_error("[Leaderboard] RPC failed: ", result.get_exception().message)
|
||||
return
|
||||
|
||||
var response_text = result.payload
|
||||
|
||||
var json = JSON.new()
|
||||
var error = json.parse(response_text)
|
||||
|
||||
var error = json.parse(result.payload)
|
||||
if error == OK:
|
||||
var data = json.get_data()
|
||||
if data.has("leaderboard"):
|
||||
@@ -58,6 +86,9 @@ func _fetch_leaderboard_data() -> void:
|
||||
_calculate_win_rates()
|
||||
status_label.text = ""
|
||||
_sort_by(current_sort_key)
|
||||
# Show top player's character in 3D preview
|
||||
if leaderboard_data.size() > 0:
|
||||
_show_entry_preview(0)
|
||||
else:
|
||||
status_label.text = "No data found"
|
||||
else:
|
||||
@@ -67,23 +98,20 @@ func _calculate_win_rates() -> void:
|
||||
for entry in leaderboard_data:
|
||||
var played = entry.get("games_played", 0)
|
||||
var won = entry.get("games_won", 0)
|
||||
if played > 0:
|
||||
entry["win_rate"] = float(won) / float(played) * 100.0
|
||||
else:
|
||||
entry["win_rate"] = 0.0
|
||||
entry["win_rate"] = float(won) / float(played) * 100.0 if played > 0 else 0.0
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
# Sorting / Display
|
||||
# -------------------------------------------------------------------------
|
||||
func _sort_by(key: String) -> void:
|
||||
current_sort_key = key
|
||||
_update_tab_visuals()
|
||||
|
||||
leaderboard_data.sort_custom(func(a, b): return a.get(key, 0) > b.get(key, 0))
|
||||
|
||||
_populate_list()
|
||||
|
||||
func _update_tab_visuals() -> void:
|
||||
var color_active = Color(0.647, 0.996, 0.224, 1)
|
||||
var color_inactive = Color(0.69, 0.529, 0.357, 1)
|
||||
|
||||
sort_score_btn.add_theme_color_override("font_color", color_active if current_sort_key == "high_score" else color_inactive)
|
||||
sort_win_rate_btn.add_theme_color_override("font_color", color_active if current_sort_key == "win_rate" else color_inactive)
|
||||
sort_games_btn.add_theme_color_override("font_color", color_active if current_sort_key == "games_played" else color_inactive)
|
||||
@@ -91,48 +119,43 @@ func _update_tab_visuals() -> void:
|
||||
func _populate_list() -> void:
|
||||
for child in leaderboard_list.get_children():
|
||||
child.queue_free()
|
||||
|
||||
|
||||
if leaderboard_data.size() == 0:
|
||||
status_label.text = "No players found"
|
||||
return
|
||||
|
||||
|
||||
for i in range(leaderboard_data.size()):
|
||||
var entry = leaderboard_data[i]
|
||||
_create_leaderboard_item(i + 1, entry)
|
||||
_create_leaderboard_item(i + 1, entry, i)
|
||||
|
||||
func _create_leaderboard_item(rank: int, entry: Dictionary) -> void:
|
||||
func _create_leaderboard_item(rank: int, entry: Dictionary, index: int) -> void:
|
||||
var item = PanelContainer.new()
|
||||
var style = StyleBoxFlat.new()
|
||||
style.bg_color = Color(0.15, 0.15, 0.15, 1.0)
|
||||
if rank <= 3:
|
||||
style.bg_color = Color(0.2, 0.2, 0.15, 1.0) # Slightly highlight top 3
|
||||
style.bg_color = Color(0.2, 0.2, 0.15, 1.0)
|
||||
style.set_corner_radius_all(4)
|
||||
style.content_margin_left = 10
|
||||
style.content_margin_right = 10
|
||||
style.content_margin_top = 8
|
||||
style.content_margin_bottom = 8
|
||||
item.add_theme_stylebox_override("panel", style)
|
||||
|
||||
|
||||
var hbox = HBoxContainer.new()
|
||||
hbox.theme_override_constants.separation = 16
|
||||
item.add_child(hbox)
|
||||
|
||||
|
||||
# Rank
|
||||
var rank_label = Label.new()
|
||||
rank_label.text = "#" + str(rank)
|
||||
rank_label.custom_minimum_size = Vector2(40, 0)
|
||||
|
||||
if rank == 1:
|
||||
rank_label.add_theme_color_override("font_color", Color.GOLD)
|
||||
elif rank == 2:
|
||||
rank_label.add_theme_color_override("font_color", Color.SILVER)
|
||||
elif rank == 3:
|
||||
rank_label.add_theme_color_override("font_color", Color.DARK_ORANGE)
|
||||
else:
|
||||
rank_label.add_theme_color_override("font_color", Color.LIGHT_GRAY)
|
||||
|
||||
match rank:
|
||||
1: rank_label.add_theme_color_override("font_color", Color.GOLD)
|
||||
2: rank_label.add_theme_color_override("font_color", Color.SILVER)
|
||||
3: rank_label.add_theme_color_override("font_color", Color.DARK_ORANGE)
|
||||
_: rank_label.add_theme_color_override("font_color", Color.LIGHT_GRAY)
|
||||
hbox.add_child(rank_label)
|
||||
|
||||
|
||||
# Avatar
|
||||
var avatar_rect = TextureRect.new()
|
||||
avatar_rect.custom_minimum_size = Vector2(32, 32)
|
||||
@@ -142,29 +165,75 @@ func _create_leaderboard_item(rank: int, entry: Dictionary) -> void:
|
||||
avatar_url = UserProfileManager.AVATARS[0]
|
||||
avatar_rect.texture = load(avatar_url)
|
||||
hbox.add_child(avatar_rect)
|
||||
|
||||
|
||||
# Name
|
||||
var name_label = Label.new()
|
||||
name_label.text = entry.get("display_name", "Unknown")
|
||||
name_label.size_flags_horizontal = Control.SIZE_EXPAND_FILL
|
||||
name_label.add_theme_color_override("font_color", Color.WHITE)
|
||||
hbox.add_child(name_label)
|
||||
|
||||
# Value based on current sort
|
||||
|
||||
# Value
|
||||
var value_label = Label.new()
|
||||
var color = Color(0.647, 0.996, 0.224, 1) # TEKTON green
|
||||
|
||||
var color = Color(0.647, 0.996, 0.224, 1)
|
||||
match current_sort_key:
|
||||
"high_score":
|
||||
value_label.text = str(entry.get("high_score", 0))
|
||||
"win_rate":
|
||||
value_label.text = "%.1f%%" % entry.get("win_rate", 0.0)
|
||||
"games_played":
|
||||
value_label.text = str(entry.get("games_played", 0))
|
||||
|
||||
"high_score": value_label.text = str(entry.get("high_score", 0))
|
||||
"win_rate": value_label.text = "%.1f%%" % entry.get("win_rate", 0.0)
|
||||
"games_played": value_label.text = str(entry.get("games_played", 0))
|
||||
value_label.add_theme_color_override("font_color", color)
|
||||
value_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_RIGHT
|
||||
value_label.custom_minimum_size = Vector2(80, 0)
|
||||
hbox.add_child(value_label)
|
||||
|
||||
|
||||
leaderboard_list.add_child(item)
|
||||
|
||||
# Make row clickable to update 3D preview
|
||||
item.gui_input.connect(func(event: InputEvent):
|
||||
if event is InputEventMouseButton and event.pressed and event.button_index == MOUSE_BUTTON_LEFT:
|
||||
_show_entry_preview(index)
|
||||
)
|
||||
item.mouse_filter = Control.MOUSE_FILTER_STOP
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
# 3D Preview
|
||||
# -------------------------------------------------------------------------
|
||||
func _setup_3d_preview() -> void:
|
||||
if not character_root:
|
||||
return
|
||||
_anim_player = character_root.get_node_or_null("AnimationPlayer")
|
||||
|
||||
func _show_entry_preview(index: int) -> void:
|
||||
if index >= leaderboard_data.size():
|
||||
return
|
||||
var entry = leaderboard_data[index]
|
||||
|
||||
# Determine character from avatar_url index
|
||||
var avatar_url: String = entry.get("avatar_url", "")
|
||||
var char_name := "Copper"
|
||||
for i in range(UserProfileManager.AVATARS.size()):
|
||||
if UserProfileManager.AVATARS[i] == avatar_url:
|
||||
char_name = AVATAR_TO_CHAR[i] if i < AVATAR_TO_CHAR.size() else "Copper"
|
||||
break
|
||||
|
||||
_update_3d_preview(char_name)
|
||||
|
||||
var display_name: String = entry.get("display_name", "Unknown")
|
||||
var rank := index + 1
|
||||
selected_name_label.text = display_name
|
||||
selected_rank_label.text = "#%d" % rank
|
||||
|
||||
func _update_3d_preview(character_name: String) -> void:
|
||||
if not character_root:
|
||||
return
|
||||
var node_name: String = CHAR_NODE_MAP.get(character_name, "Masbro")
|
||||
for child in character_root.get_children():
|
||||
if child is Node3D:
|
||||
child.visible = (child.name == node_name)
|
||||
if _anim_player:
|
||||
var new_root := character_root.get_node_or_null(node_name)
|
||||
if new_root:
|
||||
_anim_player.root_node = new_root.get_path()
|
||||
if _anim_player.has_animation("animation-pack/idle"):
|
||||
_anim_player.play("animation-pack/idle")
|
||||
elif _anim_player.get_animation_list().size() > 0:
|
||||
_anim_player.play(_anim_player.get_animation_list()[0])
|
||||
|
||||
Reference in New Issue
Block a user