feat: gamepad UI improved to handle the saves picking menu (#122)

* feat(inputs): WIP save slots UI update to use new inputs * feat: changes to make gamepad work in save UI * chore: deps update (vue, pinia, typescript, vitest, prettier, vue-tsc). Also update narrat version in template * chore: pnpm-lock * feat: gamepad support working save loading widget
liana-p · Jul 9, 2023 · e1e62e8 · e1e62e8
1 parent 2220a85
commit e1e62e8
Show file tree

Hide file tree

Showing 18 changed files with 504 additions and 12,719 deletions.
diff --git a/packages/create-narrat/template/package-lock.json b/packages/create-narrat/template/package-lock.json
diff --git a/packages/create-narrat/template/package.json b/packages/create-narrat/template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "narrat-template",
-  "version": "3.2.1",
+  "version": "3.2.8",
   "description": "Template for Narrat game engine",
   "main": "electron-main.js",
   "engines": {
@@ -33,8 +33,8 @@
   "dependencies": {
     "electron-squirrel-startup": "^1.0.0",
     "es6-promise": "^4.2.8",
-    "narrat": "^3.2.1",
-    "pinia": "^2.1.3",
+    "narrat": "^3.2.8",
+    "pinia": "^2.1.4",
     "steamworks.js": "^0.2.0",
     "vue": "^3.3.4"
   },
@@ -53,7 +53,7 @@
     "shx": "^0.3.4",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
-    "vite-plugin-narrat": "^3.0.1"
+    "vite-plugin-narrat": "^3.2.8"
   },
   "config": {
     "forge": {

diff --git a/packages/narrat-plugin-counter/src/scripts/game.narrat b/packages/narrat-plugin-counter/src/scripts/game.narrat
@@ -1,2 +1,2 @@
 main:
-  "Hello world"
+  "Hello world"
diff --git a/packages/narrat/package.json b/packages/narrat/package.json
@@ -55,8 +55,8 @@
   "license": "MIT",
   "peerDependencies": {
     "es6-promise": "^4.2.8",
-    "pinia": "^2.0.14",
-    "vue": "^3.2.37"
+    "pinia": "^2.1.4",
+    "vue": "^3.3.4"
   },
   "dependencies": {
     "@sinclair/typebox": "^0.29.1",
@@ -93,24 +93,24 @@
     "eslint-plugin-n": "^15.2.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-vue": "^9.1.1",
+    "eslint-plugin-vue": "^9.15.1",
     "jsdom": "^20.0.0",
     "kolorist": "^1.5.1",
-    "pinia": "^2.0.34",
-    "prettier": "^2.7.1",
+    "pinia": "^2.1.4",
+    "prettier": "^3.0.0",
     "shelljs": "^0.8.5",
     "shx": "^0.3.4",
     "ts-prune": "^0.10.3",
     "tsc-alias": "^1.6.11",
     "tslib": "^2.4.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.3.9",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.2",
     "vite-plugin-inspect": "^0.7.28",
     "vite-plugin-narrat": "workspace:*",
     "vite-plugin-windicss": "^1.9.0",
-    "vitest": "^0.32.2",
-    "vue": "^3.2.47",
-    "vue-tsc": "^1.8.1",
+    "vitest": "^0.33.0",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.4",
     "windicss": "^3.5.6"
   }
 }
diff --git a/packages/narrat/src/components/StartMenu.vue b/packages/narrat/src/components/StartMenu.vue
@@ -75,7 +75,7 @@ import { useNavigation } from '@/inputs/useNavigation';
 import { useConfig } from '@/lib';
 
 const inputListener = ref<InputListener | null>(
-  useInputs().registerInputListener({}),
+  useInputs().registerInputListener('start-menu', {}),
 );
 
 const buttons = ref<StartMenuButtonProps[]>([]);
@@ -96,7 +96,7 @@ const navigation = useNavigation({
   mode: 'list',
   container: buttonsContainer,
   listener: inputListener.value,
-  onSelected: (index) => {
+  onChosen: (index) => {
     buttonClicked(buttons.value[index]);
   },
 })!;

diff --git a/packages/narrat/src/components/debug/debug-jumping.vue b/packages/narrat/src/components/debug/debug-jumping.vue
@@ -82,7 +82,7 @@ onMounted(() => {
       }
     });
   }, 10);
-  inputListener.value = useInputs().registerInputListener({
+  inputListener.value = useInputs().registerInputListener('debug-jumping', {
     up: {
       press: () => {
         if (matchCursor.value > 0) {

diff --git a/packages/narrat/src/components/game-splash/game-splash.vue b/packages/narrat/src/components/game-splash/game-splash.vue
@@ -42,7 +42,7 @@ function goToMainMenu() {
   main.flowState = 'menu';
 }
 onMounted(() => {
-  inputListener.value = useInputs().registerInputListener({
+  inputListener.value = useInputs().registerInputListener('game-splash', {
     continue: {
       press: () => {
         goToMainMenu();

diff --git a/packages/narrat/src/components/in-game.vue b/packages/narrat/src/components/in-game.vue
@@ -90,7 +90,7 @@ function saveRefuse() {
 }
 
 onBeforeMount(() => {
-  listener.value = useInputs().registerInputListener({
+  listener.value = useInputs().registerInputListener('in-game', {
     system: {
       press: () => {
         useMenu().openMenu('system');

diff --git a/packages/narrat/src/components/save-slots.vue b/packages/narrat/src/components/save-slots.vue
@@ -22,6 +22,9 @@
               :id="slot.id"
               :actions="actions"
               @choice="(choice) => slotChosen(slot.id, choice)"
+              :inputListener="inputListener"
+              :selected="selectedSlotId === slot.id"
+              ref="autoSlotsElements"
             />
           </transition-group>
         </div>
@@ -35,6 +38,9 @@
               :id="slot.id"
               :actions="actions"
               @choice="(choice) => slotChosen(slot.id, choice)"
+              :inputListener="inputListener"
+              :selected="selectedSlotId === slot.id"
+              ref="manualSlotsElements"
             />
           </transition-group>
         </div>
@@ -50,6 +56,9 @@
               :id="slot.id"
               :actions="actions"
               @choice="(choice) => slotChosen(slot.id, choice)"
+              :selected="selectedSlotId === slot.id"
+              :inputListener="inputListener"
+              ref="saveSlotsElements"
             />
           </transition-group>
         </div>
@@ -73,24 +82,84 @@
 <script setup lang="ts">
 import { SaveSlot } from '../types/game-save';
 import { ChosenSlot, deleteSave, getSaveFile } from '../utils/save-helpers';
-import { computed, onMounted, PropType, reactive } from 'vue';
+import {
+  computed,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+} from 'vue';
 import Modal from './utils/modal-window.vue';
 import SaveSlotUi from './saves/save-slot-ui.vue';
 import YesNo from './utils/yes-no.vue';
 import { getConfig } from '../config';
 import { useMain } from '../stores/main-store';
+import { NavigationState, useNavigation } from '@/inputs/useNavigation';
+import { InputListener, useInputs } from '@/stores/inputs-store';
 
-const props = defineProps({
-  mode: {
-    type: String as PropType<'load' | 'pick'>,
-    required: true,
-  },
-});
+const props = defineProps<{
+  mode: 'load' | 'pick';
+}>();
+
+const inputListener = ref<InputListener | null>(
+  useInputs().registerInputListener('save-slots', {
+    cancel: {
+      press: () => {
+        tryToClose();
+      },
+    },
+  }),
+);
 
+const navigationSelected = ref(0);
 const saveSlots = reactive<SaveSlot[]>([] as SaveSlot[]);
 const autoSlots = computed(() => saveSlots.slice(0, 1));
 const manualSlots = computed(() => saveSlots.slice(1));
 
+// Container divs of all the save slot elements to pass to navigation UI
+type SlotInstanceType = InstanceType<typeof SaveSlotUi>;
+type SlotListType = SlotInstanceType[];
+const saveSlotsElements = ref<SlotListType>([]);
+const autoSlotsElements = ref<SlotListType>([]);
+const manualSlotsElements = ref<SlotListType>([]);
+
+type SaveElementContent = HTMLElement | null;
+const saveElements = ref<SaveElementContent[]>([]);
+const saveElementsIndexes = ref<{ id: string }[]>([]);
+
+const navigationProps = ref({
+  mode: 'list',
+  elements: saveElements,
+  listener: inputListener.value,
+  onlyVertical: true,
+  noChoosing: true,
+  onSelected: (index: number) => {
+    // Do Stuff
+    navigationSelected.value = index;
+  },
+});
+const navigation = useNavigation({
+  mode: 'list',
+  elements: saveElements,
+  listener: inputListener.value,
+  onlyVertical: true,
+  noChoosing: true,
+  onSelected: (index: number) => {
+    // Do Stuff
+    navigationSelected.value = index;
+  },
+}) as any;
+
+const selectedSlotId = computed(() => {
+  const selected = navigationSelected.value;
+  if (saveElementsIndexes.value.length < selected + 1) {
+    return null;
+  }
+  const id = saveElementsIndexes.value[selected].id;
+  return id;
+});
+
 const actions = reactive(
   props.mode === 'load' ? ['Load', 'Delete'] : ['Choose'],
 );
@@ -119,14 +188,46 @@ const saveConfirmation = reactive({
 });
 
 const emit = defineEmits(['chosen', 'close']);
-onMounted(() => {
+onBeforeMount(() => {
   const saveFile = getSaveFile();
   const slots: SaveSlot[] = saveFile.slots;
   console.log(slots);
   slots.forEach((slot, index) => {
     saveSlots[index] = slot;
   });
-  // Extra slot push to create a new save slot
+});
+
+function setupSaveElements() {
+  console.log(autoSlotsElements.value);
+  saveElements.value =
+    saveMode.value === 'manual'
+      ? [
+          ...autoSlotsElements.value.map((slot) => slot.slotContainer),
+          ...manualSlotsElements.value.map((slot) => slot.slotContainer),
+        ]
+      : saveSlotsElements.value.map((slot) => slot.slotContainer);
+  const saves =
+    saveMode.value === 'manual'
+      ? [...autoSlots.value, ...manualSlots.value]
+      : saveSlots;
+  saveElementsIndexes.value = saves.map((save) => {
+    return {
+      id: save.id,
+    };
+  });
+}
+onMounted(() => {
+  setupSaveElements();
+});
+
+onUnmounted(() => {
+  if (navigation.value) {
+    navigation.value.disable();
+    navigation.value = null;
+  }
+  if (inputListener.value) {
+    useInputs().unregisterInputListener(inputListener.value);
+  }
 });
 
 // function chooseNewSlot() {
@@ -162,6 +263,7 @@ function actuallyDeleteSaveSlot(slotId: string) {
   if (slot) {
     slot.saveData = null;
   }
+  setupSaveElements();
 }
 
 function tryToClose() {