From 1cf72b433751e6179a670fb4698a275dbd6d2864 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Fri, 11 Mar 2022 16:38:49 -0600
Subject: [PATCH] Added hotkeys to info modal

---
 src/components/Info.vue                | 10 +++++++++-
 src/features/{hotkey.ts => hotkey.tsx} | 27 +++++++++++++++++++++++---
 src/game/settings.ts                   | 11 +++++++++--
 3 files changed, 42 insertions(+), 6 deletions(-)
 rename src/features/{hotkey.ts => hotkey.tsx} (76%)

diff --git a/src/components/Info.vue b/src/components/Info.vue
index 5573421..21ac2f9 100644
--- a/src/components/Info.vue
+++ b/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;
diff --git a/src/features/hotkey.ts b/src/features/hotkey.tsx
similarity index 76%
rename from src/features/hotkey.ts
rename to src/features/hotkey.tsx
index 99b074f..e62f432 100644
--- a/src/features/hotkey.ts
+++ b/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 { findFeatures, Replace, setDefault } from "./feature";
+import { shallowReactive, unref } from "vue";
+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>
+        );
+    })
+);
diff --git a/src/game/settings.ts b/src/game/settings.ts
index d2230a8..fee1a12 100644
--- a/src/game/settings.ts
+++ b/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);
+}