diff --git a/TODO.md b/TODO.md index ab7b457..a87995a 100644 --- a/TODO.md +++ b/TODO.md @@ -50,7 +50,7 @@ and scene visuals with those mockups — verified with - [x] Wire the settings panel to `settings_panel` art. - [x] Wire the shift-review screen to `shift_review` art (backdrop + opaque panel cover). - [x] Wire the wand popup to `wand_screening` art. -- [ ] Wire the radial menu and remaining HUD chrome to their reference images. +- [x] Style the radial menu and finish the remaining HUD chrome against their reference images. ### Align in-game visuals diff --git a/src/game/ui/action_radial.gd b/src/game/ui/action_radial.gd index aef42c4..e4fe1a5 100644 --- a/src/game/ui/action_radial.gd +++ b/src/game/ui/action_radial.gd @@ -34,6 +34,11 @@ var _center_label: Label = null func _init() -> void: name = "ActionRadial" layer = 25 + var dim := ColorRect.new() + dim.color = Color(0.0, 0.0, 0.0, 0.2) + dim.set_anchors_preset(Control.PRESET_FULL_RECT) + dim.mouse_filter = Control.MOUSE_FILTER_IGNORE + add_child(dim) var wheel := Control.new() wheel.name = "Wheel" wheel.set_anchors_preset(Control.PRESET_FULL_RECT) @@ -48,8 +53,13 @@ func _init() -> void: _center_label.set_anchors_preset(Control.PRESET_CENTER) _center_label.offset_left = -120 _center_label.offset_right = 120 - _center_label.offset_top = -24 - _center_label.offset_bottom = 24 + _center_label.offset_top = -30 + _center_label.offset_bottom = 30 + _center_label.add_theme_font_size_override("font_size", 24) + _center_label.add_theme_color_override("font_color", Color(0.95, 0.95, 0.93)) + _center_label.add_theme_color_override("font_shadow_color", Color(0, 0, 0, 0.7)) + _center_label.add_theme_constant_override("shadow_offset_x", 1) + _center_label.add_theme_constant_override("shadow_offset_y", 1) _center_label.mouse_filter = Control.MOUSE_FILTER_IGNORE add_child(_center_label) hide() @@ -149,24 +159,33 @@ func _on_wheel_draw() -> void: return var center := _wheel.size * 0.5 var n := SLICE_DEFS.size() - var outer := 174.0 - var inner := 64.0 + var outer := 210.0 + var inner := 84.0 + var font := ThemeDB.fallback_font for i in n: var a0 := -PI / 2.0 + TAU * float(i) / float(n) var a1 := -PI / 2.0 + TAU * float(i + 1) / float(n) - var col := Color(0.12, 0.14, 0.18, 0.82) + var col := Color(0.09, 0.10, 0.12, 0.9) if i == selected: - col = Color(0.92, 0.78, 0.28, 0.9) + col = Color(0.27, 0.29, 0.33, 0.96) if not is_slice_enabled(i): - col = Color(0.2, 0.2, 0.22, 0.45) + col = Color(0.14, 0.14, 0.16, 0.5) _draw_slice(center, inner, outer, a0, a1, col) var mid := (a0 + a1) * 0.5 var label_pos := center + Vector2(cos(mid), sin(mid)) * ((inner + outer) * 0.5) var text := Strings.lookup(str(SLICE_DEFS[i]["label_key"])) - # With 12 slices the label box is tight: center it on the slice midpoint. - var font := ThemeDB.fallback_font - var text_size := font.get_string_size(text, HORIZONTAL_ALIGNMENT_LEFT, -1, 12) - _wheel.draw_string(font, label_pos - Vector2(text_size.x * 0.5, -4), text, HORIZONTAL_ALIGNMENT_LEFT, -1, 12, Color.WHITE) + var text_size := font.get_string_size(text, HORIZONTAL_ALIGNMENT_LEFT, -1, 14) + var text_color := Color(0.96, 0.96, 0.94) if is_slice_enabled(i) else Color(0.55, 0.55, 0.58) + _wheel.draw_string(font, label_pos - Vector2(text_size.x * 0.5, -5), text, + HORIZONTAL_ALIGNMENT_LEFT, -1, 14, text_color) + # Divider spokes and rings echo the crisp wedges in the radial mockup. + var sep := Color(0.45, 0.47, 0.51, 0.34) + for i in n: + var ang := -PI / 2.0 + TAU * float(i) / float(n) + var dir := Vector2(cos(ang), sin(ang)) + _wheel.draw_line(center + dir * inner, center + dir * outer, sep, 1.5, true) + _wheel.draw_arc(center, outer, 0.0, TAU, 96, Color(0.5, 0.52, 0.56, 0.4), 1.5, true) + _wheel.draw_arc(center, inner, 0.0, TAU, 96, Color(0.5, 0.52, 0.56, 0.4), 1.5, true) func _draw_slice(center: Vector2, inner: float, outer: float, a0: float, a1: float, color: Color) -> void: var pts := PackedVector2Array()