Hotkey display

src/components/Hotkey.vue

@@ -0,0 +1,50 @@
+<!-- Make eslint not whine about putting spaces before the +'s -->
+<!-- eslint-disable prettier/prettier -->
+<template>
+    <template v-if="isCtrl"
+        ><div class="key">Ctrl</div
+        >+</template
+    ><template v-if="isShift"
+        ><div class="key">Shift</div
+        >+</template
+    >
+    <div class="key">{{ key }}</div>
+</template>
+
+<script setup lang="ts">
+import { GenericHotkey } from "features/hotkey";
+import { reactive } from "vue";
+
+const props = defineProps<{
+    hotkey: GenericHotkey;
+}>();
+
+let key = reactive(props.hotkey).key;
+
+let isCtrl = key.startsWith("ctrl+");
+if (isCtrl) key = key.slice(5);
+
+let isShift = key.startsWith("shift+");
+if (isShift) key = key.slice(6);
+
+let isAlpha = key.length == 1 && key.toLowerCase() != key.toUpperCase();
+if (isAlpha) key = key.toUpperCase();
+</script>
+
+<style scoped>
+.key {
+    display: inline-block;
+    height: 1.4em;
+    min-width: 1em;
+    margin: 0.1em;
+    padding-inline: 0.2em;
+
+    background: var(--foreground);
+    color: var(--feature-foreground);
+    border: 1px solid #0007;
+    border-radius: 0.3em;
+
+    font-size: smaller;
+    text-align: center;
+}
+</style>

src/data/layers/cloth.tsx

@@ -2,6 +2,7 @@
  * @module
  * @hidden
  */
+import HotkeyVue from "components/Hotkey.vue";
 import Row from "components/layout/Row.vue";
 import Spacer from "components/layout/Spacer.vue";
 import Modal from "components/Modal.vue";
@@ -61,7 +62,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
     }));
     const breeding = createClickable(() => ({
         display: {
-            title: "Breed sheep",
+            title: jsx(() => (
+                <h3>
+                    Breed sheep <HotkeyVue hotkey={breedSheepHK} />
+                </h3>
+            )),
             description: jsx(() => (
                 <>
                     Breed {formatWhole(Decimal.floor(computedSheepGain.value))} sheep
@@ -99,7 +104,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
     }));
     const shearing = createClickable(() => ({
         display: {
-            title: "Shear sheep",
+            title: jsx(() => (
+                <h3>
+                    Shear sheep <HotkeyVue hotkey={shearSheepHK} />
+                </h3>
+            )),
             description: jsx(() => (
                 <>
                     Shear up to {formatWhole(Decimal.floor(computedShearingAmount.value))} sheep
@@ -137,7 +146,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
     }));
     const spinning = createClickable(() => ({
         display: {
-            title: "Spinning wool",
+            title: jsx(() => (
+                <h3>
+                    Spin wool <HotkeyVue hotkey={spinWoolHK} />
+                </h3>
+            )),
             description: jsx(() => (
                 <>
                     Spin {formatWhole(Decimal.floor(computedSpinningAmount.value))} wool
@@ -165,7 +178,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const breedSheepHK = createHotkey(() => ({
         key: "b",
-        description: 'Press the "Breed Sheep" button',
+        description: "Breed sheep",
         onPress: () => {
             if (breeding.canClick.value) breeding.onClick();
         }
@@ -173,7 +186,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const shearSheepHK = createHotkey(() => ({
         key: "h", // For some reason, "shift+s" doesn't work properly
-        description: 'Press the "Shear Sheep" button',
+        description: "Shear sheep",
         onPress: () => {
             if (shearing.canClick.value) shearing.onClick();
         }
@@ -181,7 +194,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const spinWoolHK = createHotkey(() => ({
         key: "s",
-        description: 'Press the "Spin Wool" button',
+        description: "Spin wool",
         onPress: () => {
             if (spinning.canClick.value) spinning.onClick();
         }

src/data/layers/letters.tsx

@@ -27,6 +27,8 @@ import paper from "./paper";
 import SqrtVue from "components/math/Sqrt.vue";
 import { globalBus } from "game/events";
 import { main } from "data/projEntry";
+import { createHotkey } from "features/hotkey";
+import HotkeyVue from "components/Hotkey.vue";
 
 const id = "letters";
 const day = 14;
@@ -43,13 +45,17 @@ const layer = createLayer(id, function (this: BaseLayer) {
         height: 10,
         style: "margin-top: 8px",
         borderStyle: "border-color: black",
-        baseStyle: "margin-top: 0",
+        baseStyle: "margin-top: -1px",
-        fillStyle: "margin-top: 0; transition-duration: 0s; background: black",
+        fillStyle: "margin-top: -1px; transition-duration: 0s; background: black",
         progress: () => Decimal.div(processingProgress.value, computedProcessingCooldown.value)
     }));
     const process = createClickable(() => ({
         display: {
-            title: "Process Letters",
+            title: jsx(() => (
+                <h3>
+                    Process letters <HotkeyVue hotkey={processHK} />
+                </h3>
+            )),
             description: jsx(() => (
                 <>
                     Process {format(computedLettersGain.value, 1)} letters
@@ -77,6 +83,14 @@ const layer = createLayer(id, function (this: BaseLayer) {
         }
     }));
 
+    const processHK = createHotkey(() => ({
+        key: "l",
+        description: "Process letters",
+        onPress: () => {
+            if (process.canClick.value) process.onClick();
+        }
+    }));
+
     const metalBuyable = createBuyable(() => ({
         display: {
             title: "Sorting Machine",
@@ -285,6 +299,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         letters,
         totalLetters,
         processingProgress,
+        processHK,
         buyables,
         milestones,
         minWidth: 700,

src/data/layers/trees.tsx

@@ -2,6 +2,7 @@
  * @module
  * @hidden
  */
+import HotkeyVue from "components/Hotkey.vue";
 import Spacer from "components/layout/Spacer.vue";
 import Modal from "components/Modal.vue";
 import { createCollapsibleModifierSections, setUpDailyProgressTracker } from "data/common";
@@ -564,7 +565,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const cutTree = createClickable(() => ({
         display: {
-            title: "Cut trees",
+            title: jsx(() => (
+                <h3>
+                    Cut trees <HotkeyVue hotkey={cutTreeHK} />
+                </h3>
+            )),
             description: jsx(() => (
                 <>
                     Cut down up to {formatWhole(Decimal.floor(computedManualCuttingAmount.value))}{" "}
@@ -620,7 +625,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
     }));
     const plantTree = createClickable(() => ({
         display: {
-            title: "Plant trees",
+            title: jsx(() => (
+                <h3>
+                    Plant trees <HotkeyVue hotkey={plantTreeHK} />
+                </h3>
+            )),
             description: jsx(() => (
                 <>
                     Plant up to {formatWhole(Decimal.floor(computedManualPlantingAmount.value))}{" "}
@@ -792,14 +801,14 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const cutTreeHK = createHotkey(() => ({
         key: "c",
-        description: 'Press the "Cut trees" button.',
+        description: "Cut trees",
         onPress: () => {
             if (cutTree.canClick.value) cutTree.onClick();
         }
     }));
     const plantTreeHK = createHotkey(() => ({
         key: "p",
-        description: 'Press the "Plant trees" button.',
+        description: "Plant trees",
         onPress: () => {
             if (plantTree.canClick.value) plantTree.onClick();
         }

src/data/layers/workshop.tsx

@@ -2,6 +2,7 @@
  * @module
  * @hidden
  */
+import HotkeyVue from "components/Hotkey.vue";
 import Spacer from "components/layout/Spacer.vue";
 import { createCollapsibleMilestones } from "data/common";
 import { main } from "data/projEntry";
@@ -76,7 +77,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         display: jsx(() => (
             <>
                 <b style="font-size: x-large">
-                    Build {formatWhole(foundationConversion.actualGain.value)}% of the foundation
+                    Build {formatWhole(foundationConversion.actualGain.value)}% of the foundation{" "}
+                    <HotkeyVue hotkey={buildFoundationHK} />
                 </b>
                 <br />
                 <br />
@@ -131,7 +133,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const buildFoundationHK = createHotkey(() => ({
         key: "w",
-        description: "Build part of the foundation.",
+        description: "Build foundation",
         onPress: () => {
             if (buildFoundation.canClick.value) buildFoundation.onClick();
         }

src/features/hotkey.tsx

@@ -13,6 +13,7 @@ import type {
 import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { shallowReactive, unref } from "vue";
+import HotkeyVue from "components/Hotkey.vue";
 
 export const hotkeys: Record<string, GenericHotkey | undefined> = shallowReactive({});
 export const HotkeyType = Symbol("Hotkey");
@@ -102,8 +103,8 @@ registerInfoComponent(
                 <br />
                 <h4>Hotkeys</h4>
                 {keys.map(hotkey => (
-                    <div>
+                    <div v-if={hotkey !== undefined}>
-                        {hotkey?.key}: {hotkey?.description}
+                        <HotkeyVue hotkey={hotkey as GenericHotkey} /> {hotkey?.description}
                     </div>
                 ))}
             </div>