fix(buttons): issue with changing button state after changing screens… (

#127) fix(buttons): issue with changing button state after changing screens fixed
liana-p · Jul 13, 2023 · 3de80f7 · 3de80f7
1 parent 82e8160
commit 3de80f7
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 48 deletions.
diff --git a/packages/narrat/examples/games/default/data/buttons.yaml b/packages/narrat/examples/games/default/data/buttons.yaml
@@ -1,4 +1,26 @@
 buttons:
+  shopButton:
+    enabled: false
+    text: 'Shop'
+    cssClass: test-class
+    position:
+      left: 272
+      top: 142
+      width: 200
+      height: 50
+    anchor:
+      x: 0.5
+      y: 0.5
+    action: shopButton
+  tester:
+    enabled: true
+    text: 'Test'
+    position:
+      left: 400
+      top: 300
+      width: 200
+      height: 50
+    action: quest_demo
   parkButton:
     enabled: false
     text: Park

diff --git a/packages/narrat/examples/games/default/data/screens.yaml b/packages/narrat/examples/games/default/data/screens.yaml
@@ -16,46 +16,12 @@ screens:
   map:
     background: img/backgrounds/map.webp
     buttons:
-      # - id: saveButton
-      #   enabled: true
-      #   text: 'Manual Save'
-      #   position:
-      #     left: 0
-      #     top: 0
-      #     width: 200
-      #     height: 50
-      #   action: save
-      - id: shopButton
-        enabled: false
-        text: 'Shop'
-        cssClass: test-class
-        position:
-          left: 272
-          top: 142
-          width: 200
-          height: 50
-        anchor:
-          x: 0.5
-          y: 0.5
-        action: shopButton
-      - id: tester
-        enabled: true
-        text: 'Test'
-        position:
-          left: 400
-          top: 300
-          width: 200
-          height: 50
-        action: quest_demo
-      - id: parkButton
-        enabled: false
-        text: Park
-        position:
-          left: 682
-          top: 462
-          width: 200
-          height: 50
-        anchor:
-          x: 0.5
-          y: 0.5
-        action: parkButton
+      - shopButton
+      - tester
+      - parkButton
+  map_2:
+    background: img/backgrounds/map.webp
+    buttons:
+      - tester
+      - parkButton
+      - shopButton
diff --git a/packages/narrat/src/components/screen-layer.vue b/packages/narrat/src/components/screen-layer.vue
@@ -6,8 +6,8 @@
     v-if="inGame"
   >
     <ViewportButton
-      v-for="(button, index) in screenButtons"
-      :key="index"
+      v-for="button in screenButtons"
+      :key="button"
       :id="button"
       :layerSelected="isLayerSelected"
       :transitioning="transitioning"

diff --git a/packages/narrat/src/components/screens.vue b/packages/narrat/src/components/screens.vue
@@ -5,7 +5,11 @@
     :style="viewportStyle"
     v-if="inGame"
   >
-    <div v-for="(layer, index) in layers" :key="index" class="layer-container">
+    <div
+      v-for="(layer, index) in layers"
+      :key="layer.screen ?? ''"
+      class="layer-container"
+    >
       <NarratTransition
         v-if="layer.transition"
         :name="layer.transition.transition"

diff --git a/packages/narrat/src/examples/default/scripts.ts b/packages/narrat/src/examples/default/scripts.ts
@@ -1,4 +1,6 @@
 import game from './scripts/default.narrat';
 import arrays from './scripts/arrays.narrat';
 import objects from './scripts/objects.narrat';
-export default [game, arrays, objects];
+import buttons from './scripts/buttons.narrat';
+
+export default [game, arrays, objects, buttons];
diff --git a/packages/narrat/src/examples/default/scripts/buttons.narrat b/packages/narrat/src/examples/default/scripts/buttons.narrat
@@ -0,0 +1,31 @@
+test_buttons:
+  set_screen map
+  jump test_buttons_menu
+
+test_buttons_menu:
+  choice:
+    "What do we want to test?"
+    "Let's enable some buttons":
+      jump enable_buttons
+    "Let's disable some buttons":
+      jump disable_buttons
+
+enable_buttons:
+  set_button shopButton true
+  set_button tester true
+  set_button parkButton true
+  jump test_map_2
+  // jump test_buttons_menu
+
+test_map_2:
+  set_screen map_2
+  set_button shopButton hidden
+  set_button tester hidden
+
+disable_buttons:
+  set_button shopButton hidden
+  set_button tester hidden
+  set_button parkButton hidden
+  jump test_map_2
+
+  // jump test_buttons_menu
diff --git a/packages/narrat/src/stores/vm-store.ts b/packages/narrat/src/stores/vm-store.ts
@@ -88,7 +88,7 @@ export const useVM = defineStore('vm', {
       labelStack: ['main'],
       commandsWaitingForPlayerAnswer: [],
       hasJumped: false,
-    } as VMState),
+    }) as VMState,
   actions: {
     generateSaveData(): { vmSave: VMSave; globalData: DataState } {
       return {