hz/step3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign answer choice rows into a cleaner divided list

Browse Source 
Unselected/eliminated choices now sit in a flat list with a thin
bottom divider instead of each getting its own bordered box, and only
the selected/correct/wrong choice pops out as a rounded, tinted card -
closer to the reference mockup and less visually busy than every
option looking like an separate boxed card.
This commit is contained in:
hz
2026-07-22 23:18:13 -05:00
parent b56d48d570
commit 6c388dfa5e
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/ui/question_player.gd
+22 -16
View File
@@ -423,10 +423,14 @@ func _ready() -> void:
_set_scaled_label(question_elo_label, 16, Style.AMBER) _set_scaled_label(question_elo_label, 16, Style.AMBER)
question_content.add_child(question_elo_label) question_content.add_child(question_elo_label)
var choices_container := VBoxContainer.new()
choices_container.add_theme_constant_override("separation", 8)
question_content.add_child(choices_container)
for index in range(5): for index in range(5):
var choice_row := VBoxContainer.new() var choice_row := VBoxContainer.new()
choice_row.add_theme_constant_override("separation", 6) choice_row.add_theme_constant_override("separation", 6)
question_content.add_child(choice_row) choices_container.add_child(choice_row)
choice_rows.append(choice_row) choice_rows.append(choice_row)
var button := Button.new() var button := Button.new()
@@ -678,28 +682,30 @@ func _question_content_box(dark: bool) -> StyleBoxFlat:
func _answer_box(dark: bool, state: String) -> StyleBoxFlat: func _answer_box(dark: bool, state: String) -> StyleBoxFlat:
var box := StyleBoxFlat.new() var box := StyleBoxFlat.new()
var background := Color("0b172b") if dark else Color("ffffff") box.content_margin_left = 54
var border := Color("2b3958") if dark else Brand.LIGHT_BORDER box.content_margin_right = 82
if state == "selected": box.content_margin_top = 16
background = Color("17183b") if dark else Color("f7f3ff") box.content_margin_bottom = 16
border = Brand.PURPLE if state == "default" or state == "eliminated":
elif state == "correct": # Flat, divider-style row - most choices sit in a plain list; only the
# states below need to visually pop out as their own card.
box.bg_color = Color("0b172b") if dark else Color("ffffff")
box.border_color = Color("22304d") if dark else Color("e7ebf2")
box.border_width_bottom = 1
box.set_corner_radius_all(0)
return box
var background := Color("17183b") if dark else Color("eff4ff")
var border := Brand.PURPLE
if state == "correct":
background = Color("08251d") if dark else Color("ecfdf3") background = Color("08251d") if dark else Color("ecfdf3")
border = Brand.SUCCESS border = Brand.SUCCESS
elif state == "wrong": elif state == "wrong":
background = Color("32131d") if dark else Color("fff1f2") background = Color("32131d") if dark else Color("fff1f2")
border = Color("fb7185") border = Color("fb7185")
elif state == "eliminated":
background = Color("0a1323") if dark else Color("f8fafc")
border = Color("26344f") if dark else Color("e2e8f0")
box.bg_color = background box.bg_color = background
box.border_color = border box.border_color = border
box.set_border_width_all(1) box.set_border_width_all(2)
box.set_corner_radius_all(7) box.set_corner_radius_all(14)
box.content_margin_left = 54
box.content_margin_right = 82
box.content_margin_top = 12
box.content_margin_bottom = 12
return box return box