feat: new button prompts system

packages/create-narrat/template-games/demo/src/config/common.yaml

@@ -14,6 +14,10 @@ dialogPanel:
   historyLength: 200 # The number of dialogue lines to keep in the history
   hideDuringTransition: true # Setting this to true will make the dialog panel hide during screen transitions
   showAfterScriptEnd: false # Setting this to true will make the dialog panel stay on even if the narrat script ends
+input:
+  showPromptsOnGamepad: true
+  showPromptsOnKeyboard: true
+  showBottomLegend: true
 graphics:
   allowFullscreen: true
 layout:

packages/create-narrat/template-games/empty/src/config/common.yaml

@@ -15,6 +15,10 @@ dialogPanel:
   historyLength: 200 # The number of dialogue lines to keep in the history
   hideDuringTransition: true # Setting this to true will make the dialog panel hide during screen transitions
   showAfterScriptEnd: false # Setting this to true will make the dialog panel stay on even if the narrat script ends
+input:
+  showPromptsOnGamepad: true
+  showPromptsOnKeyboard: true
+  showBottomLegend: true
 graphics:
   allowFullscreen: true
 layout:

packages/narrat/src/app.vue

@@ -22,6 +22,7 @@
       </div>
     </div>
     <TooltipsUi />
+    <InputsLegend :extraInputs="[`movement`]" />
     <div id="modals"></div>
   </div>
 </template>
@@ -43,6 +44,7 @@ import { preloadAndSetupGame } from '@/application/application-start';
 import { useScenes } from './stores/scenes-store';
 import GameScene from './components/GameScene.vue';
 import '@/data/all-stores';
+import InputsLegend from './components/input-prompt/inputs-legend.vue';
 
 const props = defineProps<{
   options: AppOptions;

packages/narrat/src/components/game-dialog.vue

@@ -40,12 +40,14 @@
             @click="autoPlay"
           >
             Auto
+            <InputPrompt input="autoPlay" />
           </div>
           <div
             class="nrt-button menu-toggle-button auto-button skip"
             @click="skip"
           >
             Skip
+            <InputPrompt input="skip" />
           </div>
           <div
             v-if="getCommonConfig().dialogPanel.allowHistoryToggling !== false"
@@ -88,6 +90,7 @@ import {
 import { Timeout } from '@/utils/time-helpers';
 import AutoPlayFeedback from './auto-play/AutoPlayFeedback.vue';
 import AutoSaveFeedback from './auto-save/auto-save-feedback.vue';
+import InputPrompt from './input-prompt/input-prompt.vue';
 
 const layoutMode = computed(() => useRenderingStore().layoutMode);
 const inputListener = computed(() => useInputs().inGameInputListener);

packages/narrat/src/components/input-prompt/input-prompt.vue

@@ -0,0 +1,54 @@
+<template>
+  <span class="input-prompt-container" v-if="inputs.showPrompts && action">
+    <span class="input-prompt-label" v-if="showLabel || label">{{
+      labelText
+    }}</span>
+    <img :src="getImageUrl(iconPath)" class="input-prompt-icon" />
+  </span>
+</template>
+<script lang="ts" setup>
+import { getImageUrl } from '@/config';
+import { useInputs } from '@/stores/inputs-store';
+import { computed } from 'vue';
+import { error } from '@/utils/error-handling';
+
+const inputs = useInputs();
+
+const props = defineProps<{
+  input: string;
+  label?: string;
+  showLabel?: boolean;
+}>();
+
+const action = computed(() => {
+  const result = inputs.getAction(props.input);
+  if (!result) {
+    error(`Input action ${props.input} does not exist.`);
+  }
+  return result;
+});
+
+const iconPath = computed(() => {
+  if (inputs.inputMode === 'gamepad') {
+    return action.value?.gamepadIcon;
+  } else {
+    return action.value?.keyboardIcon;
+  }
+});
+
+const labelText = computed(() => {
+  if (props.label) {
+    return props.label;
+  } else {
+    return action.value?.label ?? 'NONE';
+  }
+});
+</script>
+<style>
+.input-prompt-icon {
+  width: 1.4em;
+  height: 1.4em;
+  margin-left: 0.5em;
+  display: inline-block;
+}
+</style>

packages/narrat/src/components/input-prompt/inputs-legend.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="inputs-legend"
+    v-if="
+      inputs.showPrompts && getCommonConfig().input.showBottomLegend !== false
+    "
+  >
+    <InputPrompt
+      v-for="prompt in legend"
+      :key="prompt"
+      :input="prompt"
+      :showLabel="true"
+      class="legend-prompt"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useInputs } from '@/stores/inputs-store';
+import InputPrompt from './input-prompt.vue';
+import { getCommonConfig } from '@/config';
+import { computed } from 'vue';
+
+const inputs = useInputs();
+
+const props = defineProps<{
+  extraInputs?: string[];
+}>();
+
+const legend = computed(() => {
+  return [...(props.extraInputs ?? []), ...inputs.inputLegend];
+});
+</script>
+<style>
+.inputs-legend {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  opacity: 0.7;
+}
+
+.legend-prompt {
+  border: 1px solid white;
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 5px;
+  margin-right: 10px;
+}
+</style>

packages/narrat/src/components/menu-buttons.vue

@@ -8,6 +8,10 @@
       class="nrt-button menu-toggle-button"
     >
       {{ menuButton.label }}
+      <InputPrompt
+        :input="menuButton.inputPrompt"
+        v-if="menuButton.inputPrompt"
+      />
     </button>
     <Teleport to="#narrat-app-container" v-if="menu">
       <Modal
@@ -38,6 +42,7 @@ import { inputEvents } from '@/utils/InputsListener';
 import Modal from './utils/modal-window.vue';
 import TabsController from './tabs/TabsController.vue';
 import { TabOptions } from './tabs/tab-selector.vue';
+import InputPrompt from './input-prompt/input-prompt.vue';
 
 const menuStore = useMenu();
 const keyboardListener = ref<any>(null);

packages/narrat/src/config/common-config.ts

@@ -161,6 +161,13 @@ export const ScenesConfigSchema = Type.Object({
 
 export type ScenesConfig = Static<typeof ScenesConfigSchema>;
 
+export const InputConfigSchema = Type.Object({
+  showPromptsOnKeyboard: Type.Optional(Type.Boolean()),
+  showPromptsOnGamepad: Type.Optional(Type.Boolean()),
+  showBottomLegend: Type.Optional(Type.Boolean()),
+});
+export type InputConfig = Static<typeof InputConfigSchema>;
+
 export const CommonConfigInputSchema = Type.Object({
   baseAssetsPath: Type.Optional(Type.String()),
   baseDataPath: Type.Optional(Type.String()),
@@ -184,6 +191,7 @@ export const CommonConfigInputSchema = Type.Object({
   menuButtons: Type.Optional(MenuButtonsConfigSchema),
   debugging: Type.Optional(DebuggingConfigSchema),
   saves: Type.Optional(SavesConfigSchema),
+  input: Type.Optional(InputConfigSchema),
   hotkeys: HotkeysConfigSchema,
   scenes: Type.Optional(ScenesConfigSchema),
 });
@@ -213,6 +221,7 @@ export interface CommonConfig {
   menuButtons: MenuButtonsConfig;
   debugging: DebuggingConfig;
   saves: SavesConfig;
+  input: InputConfig;
   hotkeys: HotkeysConfig;
   scenes: ScenesConfig;
 }
@@ -259,6 +268,10 @@ export const defaultCommonConfig: CommonConfig = {
     mode: 'manual',
     slots: 10,
   },
+  input: {
+    showPromptsOnKeyboard: true,
+    showPromptsOnGamepad: true,
+  },
   hotkeys: {},
   scenes: {},
 };

packages/narrat/src/dialog-box.vue

@@ -58,6 +58,7 @@
             class="interact-button nrt-button override"
           >
             Continue
+            <InputPrompt input="continue" />
           </div>
         </div>
       </div>
@@ -84,6 +85,7 @@ import { InputListener, useInputs } from '@/stores/inputs-store';
 import { Interval, Timeout } from '@/utils/time-helpers';
 import { playLetterAudio, playDialogLineAudio } from '@/audio/audio-helpers';
 import { useVM } from '@/stores/vm-store';
+import InputPrompt from './components/input-prompt/input-prompt.vue';
 
 export interface TextAnimation {
   text: string;

packages/narrat/src/examples/default/config/common.yaml

@@ -61,7 +61,10 @@ saves:
     text: saving...
     backgroundImage: 'img/ui/autosave_spinner_background.png'
     foregroundImage: 'img/ui/autosave_spinner.png'
-
+input:
+  showPromptsOnGamepad: true
+  showPromptsOnKeyboard: true
+  showBottomLegend: true
 notifications:
   timeOnScreen: 2.5
   alsoPrintInDialogue: false

packages/narrat/src/inputs/Inputs.ts

@@ -11,10 +11,18 @@ export type NarratGamepadButton = {
   state: GamepadButton;
   previous: GamepadButton;
 };
+
+export interface NarratGamepadAxes {
+  index: number;
+  value: number;
+  previous: number;
+}
+
 export type NarratGamepad = {
   id: string;
   gamepad: Gamepad;
   buttons: NarratGamepadButton[];
+  axes: NarratGamepadAxes[];
 };
 
 export type ButtonEvent = (
@@ -40,14 +48,21 @@ export interface AnalogKeybind {
   down: string;
 }
 
-export interface ButtonAction {
+export interface BaseAction {
   id: string;
+  type: 'button' | 'analog';
+  label: string;
+  keyboardIcon: string;
+  gamepadIcon: string;
+  showInLegend: boolean;
+}
+export interface ButtonAction extends BaseAction {
   type: 'button';
   action: 'press' | 'release';
   keybinds: ButtonKeybind[];
 }
 
-export interface AnalogAction {
+export interface AnalogAction extends BaseAction {
   id: string;
   type: 'analog';
   keybinds: AnalogKeybind[];
@@ -191,6 +206,13 @@ export class Inputs extends EventTarget {
       buttons: gamepad.buttons.map((button, index) => {
         return this.getNarratButtonFromGamepad(button, button, index);
       }),
+      axes: gamepad.axes.map((axis, index) => {
+        return {
+          index,
+          value: axis,
+          previous: axis,
+        };
+      }),
     };
     return narratGamepad;
   }
@@ -210,6 +232,14 @@ export class Inputs extends EventTarget {
         this.gamepadEvent();
       }
     }
+    for (const [index, axis] of gamepad.axes.entries()) {
+      const narratAxis = narratGamepad.axes[index];
+      narratAxis.previous = narratAxis.value;
+      narratAxis.value = axis;
+      if (narratAxis.previous !== narratAxis.value) {
+        this.gamepadEvent();
+      }
+    }
   }
 
   public getNarratButtonFromGamepad(

packages/narrat/src/menu-buttons/menu-buttons.ts

@@ -19,6 +19,7 @@ export function registerDefaultMenuButtons(app: any) {
       label: 'System',
       cssClass: 'system-menu',
       id: 'system',
+      inputPrompt: 'system',
       tabs: [
         {
           id: 'system-tab',
@@ -33,6 +34,7 @@ export function registerDefaultMenuButtons(app: any) {
       label: 'Menu',
       id: 'menu',
       cssClass: 'menu-menu',
+      inputPrompt: 'menu',
       tabs: [
         {
           id: 'skills',