feat: controls panel showing keyboard controls

project.godot

@@ -38,35 +38,35 @@ ui_left={
 "events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":0,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":4194319,"physical_keycode":0,"key_label":0,"unicode":0,"echo":false,"script":null)
 , Object(InputEventJoypadButton,"resource_local_to_scene":false,"resource_name":"","device":0,"button_index":13,"pressure":0.0,"pressed":false,"script":null)
 , Object(InputEventJoypadMotion,"resource_local_to_scene":false,"resource_name":"","device":0,"axis":0,"axis_value":-1.0,"script":null)
-, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":65,"key_label":0,"unicode":97,"echo":false,"script":null)
-, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":72,"key_label":0,"unicode":104,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":65,"physical_keycode":0,"key_label":0,"unicode":97,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":72,"physical_keycode":0,"key_label":0,"unicode":104,"echo":false,"script":null)
 ]
 }
 ui_right={
 "deadzone": 0.5,
 "events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":0,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":4194321,"physical_keycode":0,"key_label":0,"unicode":0,"echo":false,"script":null)
 , Object(InputEventJoypadButton,"resource_local_to_scene":false,"resource_name":"","device":0,"button_index":14,"pressure":0.0,"pressed":false,"script":null)
 , Object(InputEventJoypadMotion,"resource_local_to_scene":false,"resource_name":"","device":0,"axis":0,"axis_value":1.0,"script":null)
-, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":68,"key_label":0,"unicode":100,"echo":false,"script":null)
-, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":76,"key_label":0,"unicode":108,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":68,"physical_keycode":0,"key_label":0,"unicode":100,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":76,"physical_keycode":0,"key_label":0,"unicode":108,"echo":false,"script":null)
 ]
 }
 ui_up={
 "deadzone": 0.5,
 "events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":0,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":4194320,"physical_keycode":0,"key_label":0,"unicode":0,"echo":false,"script":null)
 , Object(InputEventJoypadButton,"resource_local_to_scene":false,"resource_name":"","device":0,"button_index":11,"pressure":0.0,"pressed":false,"script":null)
 , Object(InputEventJoypadMotion,"resource_local_to_scene":false,"resource_name":"","device":0,"axis":1,"axis_value":-1.0,"script":null)
-, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":87,"key_label":0,"unicode":119,"echo":false,"script":null)
-, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":75,"key_label":0,"unicode":107,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":87,"physical_keycode":0,"key_label":0,"unicode":119,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":75,"physical_keycode":0,"key_label":0,"unicode":107,"echo":false,"script":null)
 ]
 }
 ui_down={
 "deadzone": 0.5,
 "events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":0,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":4194322,"physical_keycode":0,"key_label":0,"unicode":0,"echo":false,"script":null)
 , Object(InputEventJoypadButton,"resource_local_to_scene":false,"resource_name":"","device":0,"button_index":12,"pressure":0.0,"pressed":false,"script":null)
 , Object(InputEventJoypadMotion,"resource_local_to_scene":false,"resource_name":"","device":0,"axis":1,"axis_value":1.0,"script":null)
-, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":83,"key_label":0,"unicode":115,"echo":false,"script":null)
-, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":74,"key_label":0,"unicode":106,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":83,"physical_keycode":0,"key_label":0,"unicode":115,"echo":false,"script":null)
+, Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":74,"physical_keycode":0,"key_label":0,"unicode":106,"echo":false,"script":null)
 ]
 }
 ui_undo={
@@ -77,22 +77,22 @@ ui_undo={
 }
 pause={
 "deadzone": 0.5,
-"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":4194305,"key_label":0,"unicode":0,"echo":false,"script":null)
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":4194305,"physical_keycode":0,"key_label":0,"unicode":0,"echo":false,"script":null)
 ]
 }
 restart={
 "deadzone": 0.5,
-"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":true,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":82,"key_label":0,"unicode":82,"echo":false,"script":null)
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":true,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":82,"physical_keycode":0,"key_label":0,"unicode":82,"echo":false,"script":null)
 ]
 }
 close={
 "deadzone": 0.5,
-"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":81,"key_label":0,"unicode":113,"echo":false,"script":null)
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":81,"physical_keycode":0,"key_label":0,"unicode":113,"echo":false,"script":null)
 ]
 }
 debug_toggle={
 "deadzone": 0.5,
-"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":80,"key_label":0,"unicode":112,"echo":false,"script":null)
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":80,"physical_keycode":0,"key_label":0,"unicode":112,"echo":false,"script":null)
 ]
 }
 

src/menus/ActionInputIcon.gd

@@ -1,29 +1,64 @@
 @tool
 extends RichTextLabel
 
-@export var input_text = "a" :
+@export var input_text = "" :
 	set(v):
 		input_text = v
-		render_icon()
+		if Engine.is_editor_hint():
+			render_icon()
 
 func _ready():
 	render_icon()
 
-func render_icon():
-	if input_text == null or input_text == "":
-		return
-
-	var ei_key = keymap.get(input_text)
-	var ei_key_extra = keymap_extra.get(input_text)
+func get_literal_text(input_key):
+	var ei_key = keymap.get(input_key)
+	var ei_key_extra = keymap_extra.get(input_key)
 
 	if ei_key:
-		text = "%s" % ei_key
+		return ei_key
 	elif ei_key_extra:
 		# our bold font is the enter_input_extra variant
-		text = "[b]%s[/b]" % ei_key_extra
+		return "[b]%s[/b]" % ei_key_extra
 	else:
-		Log.warn("No key found for input", input_text)
+		Log.warn("No key found for input", input_key)
+		return
+
+func render_icon():
+	if input_text == null or input_text in ignores:
+		set_visible(false)
+		return
+	set_visible(true)
+	Log.pr("rendering input icon for text", input_text)
+
+	var input_key = ""
+	var mods = []
+	var parts = input_text.split("+")
+	if len(parts) == 0:
+		set_visible(false)
 		return
+	parts.reverse()
+	input_key = parts[0]
+	if len(parts) > 1:
+		mods = parts.slice(1)
+
+	var key = get_literal_text(input_key)
+	if key == null or key == "":
+		return
+	var mod_width = 0
+
+	for m in mods:
+		var mod_text = get_literal_text(m)
+		key = "%s%s" % [mod_text, key]
+		mod_width += 80
+
+	text = key
+
+	if input_text in ["Space", "Enter"]:
+		set_custom_minimum_size(Vector2(80 + mod_width, 0))
+	else:
+		set_custom_minimum_size(Vector2(32 + mod_width, 0))
+
+var ignores = ["", "Kp Enter"]
 
 var keymap = {
 	"A"="a",
@@ -96,7 +131,7 @@ var keymap = {
 	"@"="@",
 	"Ctrl"="C",
 	"Scroll Lock"="L",
-	"Esc"="R",
+	"Escape"="R",
 	"Alt"="A",
 	"Tab"="T",
 	"Menu"="M",
@@ -113,11 +148,11 @@ var keymap = {
 	"Pause"="U",
 	"Page Up"="K",
 	"Page Down"="J",
-	"Up Arrow"="G",
-	"Down Arrow"="F",
-	"Left Arrow"="V",
-	"Right Arrow"="Q",
-	"Space Bar"="Z",
+	"Up"="G",
+	"Down"="F",
+	"Left"="V",
+	"Right"="Q",
+	"Space"="Z",
 	}
 
 

src/menus/ActionInputIcon.tscn

@@ -4,12 +4,16 @@
 [ext_resource type="Script" path="res://src/menus/ActionInputIcon.gd" id="2_lnakd"]
 
 [node name="ActionInputIcon" type="RichTextLabel"]
+visible = false
 clip_contents = false
-custom_minimum_size = Vector2(32, 32)
+custom_minimum_size = Vector2(32, 0)
+offset_top = -16.0
+offset_right = 32.0
+offset_bottom = 32.0
 theme = ExtResource("1_v6qpj")
 bbcode_enabled = true
-text = "[b]X[/b]"
+text = "a"
 fit_content = true
 scroll_active = false
 script = ExtResource("2_lnakd")
-input_text = "X Button"
+input_text = ""

src/menus/ControlsPanel.gd

@@ -5,8 +5,10 @@ extends CanvasLayer
 
 @onready var action_rows = $%EditActionRows
 
-# TODO list all relevant dothop actions
-var displayed_actions = ["ui_accept", "ui_undo", "ui_redo"]
+var displayed_actions = [
+	"ui_accept", "ui_undo", "pause", "close", "restart",
+	"ui_left", "ui_right", "ui_up", "ui_down"
+	]
 
 func _ready():
 	Log.pr("displayed actions", displayed_actions)

src/menus/EditActionRow.gd

@@ -4,7 +4,9 @@ extends HBoxContainer
 @export var action_name = "ui_accept"
 
 @onready var action_name_label = $%ActionName
-@onready var action_name_inputs = $%ActionInputs
+@onready var action_inputs = $%ActionInputs
+
+var input_icon_scene = preload("res://src/menus/ActionInputIcon.tscn")
 
 func _ready():
 	action_name_label.text = "[center]%s[/center]" % action_name
@@ -15,7 +17,18 @@ func render_action_icons():
 	var keyboard_inputs = InputHelper.get_keyboard_inputs_for_action(action_name)
 	var joypad_inputs = InputHelper.get_joypad_inputs_for_action(action_name)
 
+	U.remove_children(action_inputs)
+
+	Log.pr("\n\nicons for", action_name)
 	Log.pr("kbd inputs", keyboard_inputs)
+	for inp in keyboard_inputs:
+		var icon = input_icon_scene.instantiate()
+		var key_str_mods = OS.get_keycode_string(inp.get_keycode_with_modifiers())
+		icon.input_text = key_str_mods
+		# TODO if no action icon is found, we ought to remove the icon
+		action_inputs.add_child(icon)
+
 	Log.pr("joy inputs", joypad_inputs)
 
+
 	# TODO pull controller icons for the given inputs

src/menus/EditActionRow.tscn

@@ -25,7 +25,7 @@ custom_minimum_size = Vector2(200, 0)
 layout_mode = 2
 size_flags_horizontal = 3
 bbcode_enabled = true
-text = "[center]ui_accept[center]"
+text = "[center]ui_accept[/center]"
 fit_content = true
 scroll_active = false
 
@@ -34,7 +34,3 @@ unique_name_in_owner = true
 layout_mode = 2
 size_flags_horizontal = 3
 alignment = 1
-
-[node name="TextureRect" type="TextureRect" parent="ActionInputs"]
-custom_minimum_size = Vector2(32, 32)
-layout_mode = 2