Added hotkeys to info modal

src/components/Info.vue

@@ -44,17 +44,21 @@
                 </div>
                 <br />
                 <div>Time Played: {{ timePlayed }}</div>
+                <component :is="infoComponent" />
             </div>
         </template>
     </Modal>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import Modal from "components/Modal.vue";
 import type Changelog from "data/Changelog.vue";
 import projInfo from "data/projInfo.json";
+import { jsx } from "features/feature";
 import player from "game/player";
+import { infoComponents } from "game/settings";
 import { formatTime } from "util/bignum";
+import { coerceComponent, render } from "util/vue";
 import { computed, ref, toRefs, unref } from "vue";
 
 const { title, logo, author, discordName, discordLink, versionNumber, versionTitle } = projInfo;
@@ -66,6 +70,10 @@ const isOpen = ref(false);
 
 const timePlayed = computed(() => formatTime(player.timePlayed));
 
+const infoComponent = computed(() => {
+    return coerceComponent(jsx(() => <>{infoComponents.map(render)}</>));
+});
+
 defineExpose({
     open() {
         isOpen.value = true;

src/features/hotkey.tsx

@@ -1,6 +1,7 @@
 import { hasWon } from "data/projEntry";
 import { globalBus } from "game/events";
 import player from "game/player";
+import { registerInfoComponent } from "game/settings";
 import {
     Computable,
     GetComputableTypeWithDefault,
@@ -9,10 +10,10 @@ import {
     processComputable
 } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import { unref } from "vue";
+import { shallowReactive, unref } from "vue";
-import { findFeatures, Replace, setDefault } from "./feature";
+import { findFeatures, jsx, Replace, setDefault } from "./feature";
 
-export const hotkeys: Record<string, GenericHotkey | undefined> = {};
+export const hotkeys: Record<string, GenericHotkey | undefined> = shallowReactive({});
 export const HotkeyType = Symbol("Hotkey");
 
 export interface HotkeyOptions {
@@ -88,3 +89,23 @@ document.onkeydown = function (e) {
         hotkey.onPress();
     }
 };
+
+registerInfoComponent(
+    jsx(() => {
+        const keys = Object.values(hotkeys).filter(hotkey => unref(hotkey?.enabled));
+        if (keys.length === 0) {
+            return "";
+        }
+        return (
+            <div>
+                <br />
+                <h4>Hotkeys</h4>
+                {keys.map(hotkey => (
+                    <div>
+                        {hotkey?.key}: {hotkey?.description}
+                    </div>
+                ))}
+            </div>
+        );
+    })
+);

src/game/settings.ts

@@ -24,7 +24,10 @@ const state = reactive<Partial<Settings>>({
 watch(
     state,
     state =>
-        localStorage.setItem(projInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(state))))),
+        localStorage.setItem(
+            projInfo.id,
+            btoa(unescape(encodeURIComponent(JSON.stringify(state))))
+        ),
     { deep: true }
 );
 export default window.settings = state as Settings;
@@ -56,7 +59,11 @@ export const hardResetSettings = (window.hardResetSettings = () => {
 });
 
 export const settingFields: CoercableComponent[] = reactive([]);
-
 export function registerSettingField(component: CoercableComponent) {
     settingFields.push(component);
 }
+
+export const infoComponents: CoercableComponent[] = reactive([]);
+export function registerInfoComponent(component: CoercableComponent) {
+    infoComponents.push(component);
+}