danchie/tekton
3
1
Fork 0
Code Issues 20 Pull Requests Actions Packages Projects 10 Releases 1 Wiki Activity

feat: updated UI UX for profile and leaderboard menu

Browse Source
This commit is contained in:
adtpdn
2026-03-27 22:18:29 +08:00
parent 3a50d2d324
commit a916a57c05
9 changed files with 776 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/ui/leaderboard_panel.gd
+120 -51
View File
@@ -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])
scripts/ui/profile_panel.gd
+150 -43
View File
@@ -1,10 +1,15 @@
extends PanelContainer
## Profile panel controller - displays and edits user profile
extends Control
## Profile panel controller — full-scene loadout screen.
## Left: profile info + default character selector.
## Right: 3D SubViewport character preview.
signal closed
signal profile_updated
@onready var close_button := %CloseButton as Button
# -------------------------------------------------------------------------
# UI References
# -------------------------------------------------------------------------
@onready var back_btn := %BackBtn as Button
@onready var avatar_display := %AvatarDisplay as TextureRect
@onready var change_avatar_btn := %ChangeAvatarBtn as Button
@onready var display_name_input := %DisplayNameInput as LineEdit
@@ -19,40 +24,70 @@ signal profile_updated
@onready var avatar_popup := %AvatarSelectionPopup as PopupPanel
@onready var avatar_grid := %GridContainer as GridContainer
# Loadout refs
@onready var char_left_btn := %CharLeftBtn as Button
@onready var char_right_btn := %CharRightBtn as Button
@onready var loadout_char_name := %LoadoutCharName as Label
@onready var set_default_btn := %SetDefaultBtn as Button
# 3D Preview refs
@onready var character_root := %CharacterRoot as Node3D
@onready var anim_player: AnimationPlayer
# -------------------------------------------------------------------------
# State
# -------------------------------------------------------------------------
const CHARACTERS: Array[String] = ["Copper", "Dabro", "Gatot", "Pip"]
# 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"
}
var _loadout_index: int = 0 # Index into CHARACTERS
var _default_character: String = "Copper"
func _ready() -> void:
_connect_signals()
_load_profile_data()
_setup_avatar_grid()
_load_loadout()
_setup_3d_preview()
func _connect_signals() -> void:
close_button.pressed.connect(_on_close_pressed)
back_btn.pressed.connect(_on_close_pressed)
change_avatar_btn.pressed.connect(_on_change_avatar_pressed)
save_name_btn.pressed.connect(_on_save_name_pressed)
link_account_btn.pressed.connect(_on_link_account_pressed)
logout_btn.pressed.connect(_on_logout_pressed)
char_left_btn.pressed.connect(func(): _cycle_loadout_char(-1))
char_right_btn.pressed.connect(func(): _cycle_loadout_char(1))
set_default_btn.pressed.connect(_on_set_default_pressed)
UserProfileManager.profile_updated.connect(_on_profile_updated)
UserProfileManager.profile_update_failed.connect(_on_profile_update_failed)
# -------------------------------------------------------------------------
# Profile
# -------------------------------------------------------------------------
func _load_profile_data() -> void:
var profile := UserProfileManager.profile
var stats := UserProfileManager.stats
# Display name
display_name_input.text = profile.get("display_name", "Guest")
display_name_input.max_length = 6
# Avatar
var avatar_url: String = UserProfileManager.get_avatar_url()
if ResourceLoader.exists(avatar_url):
avatar_display.texture = load(avatar_url)
# Stats
games_played_label.text = "Games Played: %d" % stats.get("games_played", 0)
win_rate_label.text = "Win Rate: %.1f%%" % UserProfileManager.get_win_rate()
high_score_label.text = "High Score: %d" % stats.get("high_score", 0)
# Account type
if AuthManager.is_guest:
account_type_label.text = "Account: Guest"
link_account_btn.visible = true
@@ -61,7 +96,7 @@ func _load_profile_data() -> void:
var mode_name := _get_auth_mode_name(AuthManager.auth_mode)
account_type_label.text = "Account: %s" % mode_name
link_account_btn.visible = false
status_label.text = ""
func _get_auth_mode_name(mode: int) -> String:
@@ -77,38 +112,108 @@ func _get_auth_mode_name(mode: int) -> String:
_:
return "Guest"
# -------------------------------------------------------------------------
# Loadout
# -------------------------------------------------------------------------
func _load_loadout() -> void:
"""Load the saved default character from profile storage."""
var saved = UserProfileManager.profile.get("loadout_character", "Copper")
var idx = CHARACTERS.find(saved)
_loadout_index = max(idx, 0)
_default_character = CHARACTERS[_loadout_index]
_refresh_loadout_ui()
func _cycle_loadout_char(direction: int) -> void:
_loadout_index = wrapi(_loadout_index + direction, 0, CHARACTERS.size())
_refresh_loadout_ui()
_update_3d_preview(CHARACTERS[_loadout_index])
func _refresh_loadout_ui() -> void:
var char_name := CHARACTERS[_loadout_index]
loadout_char_name.text = char_name
var is_default := char_name == _default_character
set_default_btn.text = "✓ DEFAULT" if is_default else "Set as Default"
set_default_btn.disabled = is_default
_update_3d_preview(char_name)
func _on_set_default_pressed() -> void:
var char_name := CHARACTERS[_loadout_index]
_default_character = char_name
UserProfileManager.profile["loadout_character"] = char_name
# Also apply immediately to LobbyManager
if LobbyManager.available_characters.has(char_name):
LobbyManager.local_character_index = LobbyManager.available_characters.find(char_name)
status_label.text = "Loadout set to: " + char_name
status_label.add_theme_color_override("font_color", Color(0.4, 0.8, 0.4))
_refresh_loadout_ui()
# Persist to storage
_save_loadout_to_profile()
func _save_loadout_to_profile() -> void:
"""Save loadout_character field to Nakama profile storage."""
if not NakamaManager.session:
return
var data := {
"avatar_index": UserProfileManager.profile.get("avatar_index", 0),
"bio": UserProfileManager.profile.get("bio", ""),
"country": UserProfileManager.profile.get("country", ""),
"language": UserProfileManager.profile.get("language", "en"),
"loadout_character": _default_character
}
var write_obj := NakamaWriteStorageObject.new(
"profiles", "profile", 2, 1, JSON.stringify(data), ""
)
await NakamaManager.client.write_storage_objects_async(NakamaManager.session, [write_obj])
# -------------------------------------------------------------------------
# 3D Preview
# -------------------------------------------------------------------------
func _setup_3d_preview() -> void:
anim_player = character_root.get_node_or_null("AnimationPlayer")
_update_3d_preview(_default_character)
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)
# Update AnimationPlayer root
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])
# -------------------------------------------------------------------------
# Avatar
# -------------------------------------------------------------------------
func _setup_avatar_grid() -> void:
# Clear existing
for child in avatar_grid.get_children():
child.queue_free()
# Add avatar buttons
for i in range(UserProfileManager.AVATARS.size()):
var avatar_path: String = UserProfileManager.AVATARS[i]
var btn := Button.new()
btn.custom_minimum_size = Vector2(64, 64)
if ResourceLoader.exists(avatar_path):
var tex := load(avatar_path) as Texture2D
btn.icon = tex
btn.expand_icon = true
else:
btn.text = str(i + 1)
btn.pressed.connect(_on_avatar_selected.bind(i))
avatar_grid.add_child(btn)
func _on_close_pressed() -> void:
hide()
emit_signal("closed")
func _on_change_avatar_pressed() -> void:
avatar_popup.popup_centered()
func _on_avatar_selected(index: int) -> void:
avatar_popup.hide()
status_label.text = "Saving avatar..."
var success := await UserProfileManager.update_avatar(index)
if success:
var avatar_url: String = UserProfileManager.get_avatar_url()
@@ -118,20 +223,18 @@ func _on_avatar_selected(index: int) -> void:
else:
status_label.text = "Failed to update avatar"
# -------------------------------------------------------------------------
# Name
# -------------------------------------------------------------------------
func _on_save_name_pressed() -> void:
var new_name := display_name_input.text.strip_edges()
if new_name.is_empty():
status_label.text = "Name cannot be empty"
return
status_label.text = "Saving..."
save_name_btn.disabled = true
var success := await UserProfileManager.update_display_name(new_name)
save_name_btn.disabled = false
if success:
status_label.add_theme_color_override("font_color", Color.GREEN)
status_label.text = "Name updated!"
@@ -142,45 +245,38 @@ func _on_save_name_pressed() -> void:
status_label.add_theme_color_override("font_color", Color.RED)
status_label.text = "Failed to update name"
# -------------------------------------------------------------------------
# Account
# -------------------------------------------------------------------------
func _on_link_account_pressed() -> void:
# Show link account dialog
# For now, just show a simple popup
var dialog := AcceptDialog.new()
dialog.title = "Link Email"
dialog.dialog_text = "Enter your email and password to link this guest account.\nYour progress will be preserved!"
var vbox := VBoxContainer.new()
var email_input := LineEdit.new()
email_input.placeholder_text = "Email"
var password_input := LineEdit.new()
password_input.placeholder_text = "Password"
password_input.secret = true
vbox.add_child(email_input)
vbox.add_child(password_input)
dialog.add_child(vbox)
add_child(dialog)
dialog.popup_centered()
dialog.confirmed.connect(func():
var email := email_input.text.strip_edges()
var password := password_input.text
if email.is_empty() or password.is_empty():
status_label.text = "Please fill in all fields"
return
status_label.text = "Linking account..."
var success := await AuthManager.link_email(email, password)
if success:
status_label.text = "Account linked successfully!"
link_account_btn.visible = false
account_type_label.text = "Account: Email"
else:
status_label.text = "Failed to link account"
dialog.queue_free()
)
@@ -188,6 +284,21 @@ func _on_logout_pressed() -> void:
AuthManager.logout()
get_tree().change_scene_to_file("res://scenes/ui/login_screen.tscn")
# -------------------------------------------------------------------------
# Close / Show
# -------------------------------------------------------------------------
func _on_close_pressed() -> void:
hide()
emit_signal("closed")
func show_panel() -> void:
_load_profile_data()
_load_loadout()
show()
# -------------------------------------------------------------------------
# Signal handlers
# -------------------------------------------------------------------------
func _on_profile_updated() -> void:
_load_profile_data()
@@ -196,7 +307,3 @@ func _on_profile_update_failed(error: String) -> void:
status_label.text = error
await get_tree().create_timer(3.0).timeout
status_label.text = ""
func show_panel() -> void:
_load_profile_data()
show()