feat(text): autoplay now works on games without animate text

- Auto play now goes to the next line if pressed when the continue button is available - Clicking on the text while it's animating now skips the animation, like pressing space
liana-p · Jun 17, 2023 · af8e215 · af8e215
1 parent 37384ac
commit af8e215
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/packages/narrat/examples/games/default/data/config.yaml b/packages/narrat/examples/games/default/data/config.yaml
@@ -6,17 +6,16 @@ images:
   map: img/backgrounds/map.webp
   shopButton: img/ui/shop-button.webp
   parkButton: img/ui/park-button.webp
-dialoguePanel:
+dialogPanel:
   textSpeed: 30
   animateText: true
   timeBetweenLines: 100
+  overlayMode: true
+  rightOffset: 100
+  bottomOffset: 50
+  width: 475
+  height: 680
 layout:
-  dialogPanel:
-    overlayMode: true
-    rightOffset: 100
-    bottomOffset: 50
-    width: 475
-    height: 680
   backgrounds:
     # Default was 880 x 720
     width: 1280

diff --git a/packages/narrat/examples/games/default/scripts/default.nar b/packages/narrat/examples/games/default/scripts/default.nar
@@ -18,6 +18,15 @@ test_label_reload:
 set_config_overrides:
   set config.characters.characters.player.name $data.playerName
 
+long_label:
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus suscipit diam, vitae feugiat mi malesuada eget. Morbi eget leo volutpat"
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus suscipit diam, vitae feugiat mi malesuada eget. Morbi eget leo volutpat"
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus suscipit diam, vitae feugiat mi malesuada eget. Morbi eget leo volutpat"
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus suscipit diam, vitae feugiat mi malesuada eget. Morbi eget leo volutpat"
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus suscipit diam, vitae feugiat mi malesuada eget. Morbi eget leo volutpat"
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus suscipit diam, vitae feugiat mi malesuada eget. Morbi eget leo volutpat"
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus suscipit diam, vitae feugiat mi malesuada eget. Morbi eget leo volutpat"
+
 test_edit_config:
   set data.playerName (text_field "Enter your name")
   run set_config_overrides

diff --git a/packages/narrat/src/dialog-box.vue b/packages/narrat/src/dialog-box.vue
@@ -4,7 +4,7 @@
     :style="dialogBoxStyle"
     :class="dialogBoxClass"
   >
-    <div class="dialog-content">
+    <div class="dialog-content" v-on:click="dialogClick">
       <span
         class="dialog-title override"
         v-if="options.title"
@@ -166,6 +166,9 @@ export default defineComponent({
     skipping() {
       return useDialogStore().playMode === 'skip';
     },
+    autoPlay() {
+      return useDialogStore().playMode === 'auto';
+    },
     canInteract(): boolean {
       return (
         this.active &&
@@ -189,6 +192,11 @@ export default defineComponent({
         this.startSkip();
       }
     },
+    autoPlay(newValue, oldValue) {
+      if (newValue && !oldValue) {
+        this.startAutoPlay();
+      }
+    },
   },
   methods: {
     clearListeners() {
@@ -248,6 +256,13 @@ export default defineComponent({
         }
       }
     },
+    dialogClick() {
+      if (!this.canInteract) {
+        if (this.mounted && this.textAnimation) {
+          this.endTextAnimation({ pressedSpace: true });
+        }
+      }
+    },
     next() {
       if (!this.passed) {
         this.chooseOption(0);
@@ -316,7 +331,7 @@ export default defineComponent({
         anim.timer = setInterval(() => {
           this.updateTextAnimation();
         }, 30);
-      } else if (useDialogStore().playMode !== 'auto' && this.isBasicChoice) {
+      } else if (this.isBasicChoice) {
         this.autoTimer = setTimeout(() => {
           this.endTextAnimation();
         }, (getConfig().dialogPanel.textSpeed ?? DEFAULT_TEXT_SPEED) * this.options.text.length);
@@ -334,6 +349,13 @@ export default defineComponent({
         }
       }
     },
+    startAutoPlay() {
+      if (useDialogStore().playMode === 'auto' && !this.options.old) {
+        if (this.isBasicChoice && this.canInteract) {
+          this.next();
+        }
+      }
+    },
     updateTextAnimation() {
       const anim = this.textAnimation;
       if (!anim) {