Moves help menu to end, fixes Hotkeys Help (#65295)

About The Pull Request

    Moves the Help menu to the end of the menu bar, like every app that has ever had a Help menu.

image

    Makes Hotkeys Help actually do something, given the verb that menu item calls was removed 3 years ago.
        It now show all of your hotkeys, as set in preferences, in a TGUI table. They're in Binding sort order, as opposed to the preferences window, which may be of use to people.

image
Why It's Good For The Game

halp how do i standup
Changelog

cl
add: Re-added the Hotkeys-Help verb, and linked the Hotkeys menu item to it.
qol: Move Help menu to the end of the menu bar.
/cl

code/_globalvars/tgui.dm

@@ -1,2 +1,3 @@
 GLOBAL_DATUM(crew_manifest_tgui, /datum/crew_manifest)
 GLOBAL_DATUM(changelog_tgui, /datum/changelog)
+GLOBAL_DATUM(hotkeys_tgui, /datum/hotkeys_help)

code/datums/hotkeys_help.dm

@@ -0,0 +1,40 @@
+/datum/hotkeys_help
+	var/static/list/hotkeys = list()
+
+/datum/hotkeys_help/ui_state()
+	return GLOB.always_state
+
+/datum/hotkeys_help/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if (!ui)
+		ui = new(user, src, "HotkeysHelp")
+		ui.open()
+
+// Not static data since user could rebind keys.
+/datum/hotkeys_help/ui_data(mob/user)
+	// List every keybind to chat.
+	var/list/keys_list = list()
+
+	// Show them in alphabetical order by key
+	var/list/key_bindings_by_key = user.client.prefs.key_bindings_by_key.Copy()
+	sortTim(key_bindings_by_key, cmp = /proc/cmp_text_asc)
+
+	for(var/key in key_bindings_by_key)
+		// Get the full names
+		var/list/binding_names = list()
+		for(var/kb_name in key_bindings_by_key[key])
+			var/datum/keybinding/binding = GLOB.keybindings_by_name[kb_name]
+			binding_names += list(list(
+				"name" = binding.full_name,
+				"desc" = binding.description
+			))
+
+		// Add to list
+		keys_list += list(list(
+			"key" = key,
+			"bindings" = binding_names
+		))
+
+	return list(
+		"hotkeys" = keys_list
+	)

code/modules/client/client_procs.dm

@@ -1123,6 +1123,9 @@ GLOBAL_LIST_INIT(blacklisted_builds, list(
 				if (verbpath.name[1] != "@")
 					new child(src)
 
+	// Place Help back at the end.
+	winset(src, "help-menu", "index=1000")
+
 /client/proc/open_filter_editor(atom/in_atom)
 	if(holder)
 		holder.filteriffic = new /datum/filter_editor(in_atom)

interface/interface.dm

@@ -109,3 +109,12 @@
 		prefs.lastchangelog = GLOB.changelog_hash
 		prefs.save_preferences()
 		winset(src, "infowindow.changelog", "font-style=;")
+
+/client/verb/hotkeys_help()
+	set name = "Hotkeys Help"
+	set category = "OOC"
+
+	if(!GLOB.hotkeys_tgui)
+		GLOB.hotkeys_tgui = new /datum/hotkeys_help()
+
+	GLOB.hotkeys_tgui.ui_interact(mob)

interface/skin.dmf

@@ -39,7 +39,7 @@ menu "menu"
 		command = ".quit"
 		category = "&File"
 		saved-params = "is-checked"
-	elem
+	elem "help-menu"
 		name = "&Help"
 		command = ""
 		saved-params = "is-checked"
@@ -50,7 +50,7 @@ menu "menu"
 		saved-params = "is-checked"
 	elem
 		name = "&Hotkeys"
-		command = "hotkeys-help"
+		command = "Hotkeys-Help"
 		category = "&Help"
 		saved-params = "is-checked"
 

tgstation.dme

@@ -554,6 +554,7 @@
 #include "code\datums\forced_movement.dm"
 #include "code\datums\hailer_phrase.dm"
 #include "code\datums\holocall.dm"
+#include "code\datums\hotkeys_help.dm"
 #include "code\datums\http.dm"
 #include "code\datums\hud.dm"
 #include "code\datums\map_config.dm"

tgui/packages/tgui/interfaces/HotkeysHelp.tsx

@@ -0,0 +1,135 @@
+import { useBackend } from '../backend';
+import {
+  Box,
+  Section,
+  Table,
+  Tooltip,
+} from '../components';
+import { Window } from '../layouts';
+
+type BindingInfo = {
+  name: string;
+  desc: string;
+}
+
+type HotkeyInfo = {
+  key: string;
+  bindings: BindingInfo[];
+}
+
+type HotkeysHelpData = {
+  hotkeys: HotkeyInfo[];
+};
+
+type KeyBindingBoxProps = {
+  keycode: string,
+}
+
+type ModkeyProps = {
+  text: string,
+  color: string
+}
+
+const shiftRegex = /(.*)(Shift)(.*)/;
+const ctrlRegex = /(.*)(Ctrl)(.*)/;
+const altRegex = /(.*)(Alt)(.*)/;
+
+const addColorModifier = (content: string, regex: RegExp, color: string):
+    JSX.Element | null => {
+  const match = content.match(regex);
+
+  if (match) {
+    return (
+      <>
+        {processColorModifiers(match[1])}
+        <Box inline style={{ color }}>{match[2]}</Box>
+        {processColorModifiers(match[3])}
+      </>
+    );
+  }
+
+  return null;
+};
+
+const processColorModifiers = (content: string): string | JSX.Element => {
+  const shifted = addColorModifier(content, shiftRegex, "#88f");
+
+  if (shifted) {
+    return shifted;
+  }
+
+  const ctrled = addColorModifier(content, ctrlRegex, "#8f8");
+
+  if (ctrled) {
+    return ctrled;
+  }
+
+  const alted = addColorModifier(content, altRegex, "#fc4");
+
+  if (alted) {
+    return alted;
+  }
+
+  // Fix the weirdly named keys
+
+  return ` ${content}`
+    .replace("Northeast", "Page Up")
+    .replace("Southeast", "Page Down")
+    .replace("Northwest", "Home")
+    .replace("Southwest", "End")
+    .replace("North", "Up")
+    .replace("South", "Down")
+    .replace("East", "Right")
+    .replace("West", "Left")
+    .replace("Numpad", "Numpad ");
+};
+
+const KeyBinding = (props: KeyBindingBoxProps) => (
+  <>{processColorModifiers(props.keycode)}</>
+);
+
+export const HotkeysHelp = (_, context) => {
+  const { data } = useBackend<HotkeysHelpData>(context);
+
+  return (
+    <Window title="Hotkeys Help" width={500} height={800}>
+      <Window.Content scrollable>
+        <Section title="Sorted by Key">
+          <Table>
+            <Table.Row header>
+              <Table.Cell textAlign="center" m={1}>
+                Key
+              </Table.Cell>
+              <Table.Cell textAlign="center" m={1}>
+                Binding
+              </Table.Cell>
+            </Table.Row>
+            {data.hotkeys.map(hotkey => (
+              <Table.Row key={hotkey.key} className="candystripe">
+                <Table.Cell bold textAlign="right" p={1}>
+                  <KeyBinding keycode={hotkey.key} />
+                </Table.Cell>
+                <Table.Cell style={{ position: "relative" }}>
+                  {hotkey.bindings.map(binding => (
+                    binding.desc
+                      ? (
+                        <Tooltip key={binding.name} content={binding.desc} position="bottom">
+                          <Box p={1} m={1} inline className="HotkeysHelp__pill">
+                            {binding.name}
+                          </Box>
+                        </Tooltip>
+                      ) : (
+                        <Box p={1} m={1} inline className="HotkeysHelp__pill">
+                          {binding.name}
+                        </Box>
+                      )
+                  ))}
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};

tgui/packages/tgui/styles/interfaces/HotKeysHelp.scss

@@ -0,0 +1,4 @@
+.HotkeysHelp__pill {
+  border-radius: 5px;
+  background-color: rgba(255, 255, 255, 0.125);
+}

tgui/packages/tgui/styles/main.scss

@@ -54,6 +54,7 @@
 @include meta.load-css('./interfaces/CrewManifest.scss');
 @include meta.load-css('./interfaces/ExperimentConfigure.scss');
 @include meta.load-css('./interfaces/HellishRunes.scss');
+@include meta.load-css('./interfaces/HotkeysHelp.scss');
 @include meta.load-css('./interfaces/Hypertorus.scss');
 @include meta.load-css('./interfaces/LibraryComputer.scss');
 @include meta.load-css('./interfaces/NuclearBomb.scss');