Autoplay

spec/system/actions/setAutoplayDelay.spec.yaml

@@ -0,0 +1,59 @@
+file: "../../../src/stores/system.store.js"
+group: systemStore.setAutoplayDelay
+suites: [setAutoplayDelay]
+---
+suite: setAutoplayDelay
+exportName: setAutoplayDelay
+---
+case: set autoplay delay when auto mode is OFF
+in:
+  - state:
+      global:
+        autoMode: false
+        autoplayDelay: 1000
+        pendingEffects: []
+  - delay: 2000
+out:
+  global:
+    autoMode: false
+    autoplayDelay: 2000
+    pendingEffects:
+      - name: render
+---
+case: set autoplay delay when auto mode is ON (should restart timer)
+in:
+  - state:
+      global:
+        autoMode: true
+        autoplayDelay: 1000
+        pendingEffects: []
+  - delay: 500
+out:
+  global:
+    autoMode: true
+    autoplayDelay: 500
+    pendingEffects:
+      - name: clearAutoNextTimer
+      - name: startAutoNextTimer
+        payload:
+          delay: 500
+      - name: render
+---
+case: set autoplay delay with existing pending effects
+in:
+  - state:
+      global:
+        autoMode: false
+        autoplayDelay: 1000
+        pendingEffects:
+          - name: existingEffect
+            data: test
+  - delay: 500
+out:
+  global:
+    autoMode: false
+    autoplayDelay: 500
+    pendingEffects:
+      - name: existingEffect
+        data: test
+      - name: render

spec/system/actions/startAutoMode.spec.yaml

@@ -11,12 +11,16 @@ in:
       global:
         autoMode: false
         pendingEffects: []
+        autoplayDelay: 1000
 out:
   global:
     autoMode: true
+    autoplayDelay: 1000
     pendingEffects:
       - name: clearAutoNextTimer
       - name: startAutoNextTimer
+        payload:
+          delay: 1000
       - name: render
 ---
 case: start auto mode when already enabled
@@ -25,64 +29,14 @@ in:
       global:
         autoMode: true
         pendingEffects: []
+        autoplayDelay: 1000
 out:
   global:
     autoMode: true
+    autoplayDelay: 1000
     pendingEffects:
       - name: clearAutoNextTimer
       - name: startAutoNextTimer
-      - name: render
----
-case: start auto mode with skip mode enabled
-in:
-  - state:
-      global:
-        autoMode: false
-        skipMode: true
-        pendingEffects: []
-out:
-  global:
-    autoMode: true
-    skipMode: false
-    pendingEffects:
-      - name: clearSkipNextTimer
-      - name: clearAutoNextTimer
-      - name: startAutoNextTimer
-      - name: render
----
-case: start auto mode with existing pending effects
-in:
-  - state:
-      global:
-        autoMode: false
-        pendingEffects:
-          - name: existingEffect
-            data: test
-out:
-  global:
-    autoMode: true
-    pendingEffects:
-      - name: existingEffect
-        data: test
-      - name: clearAutoNextTimer
-      - name: startAutoNextTimer
-      - name: render
----
-case: start auto mode with both auto and skip mode enabled
-in:
-  - state:
-      global:
-        autoMode: true
-        skipMode: true
-        pendingEffects:
-          - name: existingEffect
-out:
-  global:
-    autoMode: true
-    skipMode: false
-    pendingEffects:
-      - name: existingEffect
-      - name: clearSkipNextTimer
-      - name: clearAutoNextTimer
-      - name: startAutoNextTimer
-      - name: render
+        payload:
+          delay: 1000
+      - name: render

spec/system/actions/toggleAutoMode.spec.yaml

@@ -11,12 +11,16 @@ in:
       global:
         autoMode: false
         pendingEffects: []
+        autoplayDelay: 1000
 out:
   global:
     autoMode: true
+    autoplayDelay: 1000
     pendingEffects:
       - name: clearAutoNextTimer
       - name: startAutoNextTimer
+        payload:
+          delay: 1000
       - name: render
 ---
 case: toggle auto mode from true to false
@@ -25,9 +29,11 @@ in:
       global:
         autoMode: true
         pendingEffects: []
+        autoplayDelay: 1000
 out:
   global:
     autoMode: false
+    autoplayDelay: 1000
     pendingEffects:
       - name: clearAutoNextTimer
       - name: render
@@ -39,14 +45,18 @@ in:
         autoMode: false
         skipMode: true
         pendingEffects: []
+        autoplayDelay: 1000
 out:
   global:
     autoMode: true
+    autoplayDelay: 1000
     skipMode: false
     pendingEffects:
       - name: clearSkipNextTimer
       - name: clearAutoNextTimer
       - name: startAutoNextTimer
+        payload:
+          delay: 1000
       - name: render
 ---
 case: toggle auto mode from true to false with skip mode enabled
@@ -56,9 +66,11 @@ in:
         autoMode: true
         skipMode: true
         pendingEffects: []
+        autoplayDelay: 1000
 out:
   global:
     autoMode: false
+    autoplayDelay: 1000
     skipMode: true
     pendingEffects:
       - name: clearAutoNextTimer
@@ -72,14 +84,18 @@ in:
         pendingEffects:
           - name: existingEffect
             data: test
+        autoplayDelay: 1000
 out:
   global:
     autoMode: true
+    autoplayDelay: 1000
     pendingEffects:
       - name: existingEffect
         data: test
       - name: clearAutoNextTimer
       - name: startAutoNextTimer
+        payload:
+          delay: 1000
       - name: render
 ---
 case: toggle auto mode with existing pending effects (enabled to disabled)
@@ -90,11 +106,13 @@ in:
         pendingEffects:
           - name: existingEffect
             data: test
+        autoplayDelay: 1000
 out:
   global:
     autoMode: false
+    autoplayDelay: 1000
     pendingEffects:
       - name: existingEffect
         data: test
       - name: clearAutoNextTimer
-      - name: render
+      - name: render

spec/system/createInitialState.spec.yaml

@@ -22,6 +22,7 @@ in:
                     actions: {}
 out:
   global:
+    autoplayDelay: 1000
     isLineCompleted: false
     pendingEffects: []
     autoMode: false

src/createEffectsHandler.js

@@ -42,7 +42,8 @@ const startAutoNextTimer = ({ engine, ticker, autoTimer }, payload) => {
 
     // Auto advance every 1000ms (1 second) - hardcoded
     // TODO: Speed can adjust in the future
-    if (autoTimer.getElapsed() >= 1000) {
+    const delay = payload.delay ?? 1000;
+    if (autoTimer.getElapsed() >= delay) {
       autoTimer.setElapsed(0);
       engine.handleAction("nextLine", {});
     }

src/stores/system.store.js

@@ -24,6 +24,7 @@ export const createInitialState = (payload) => {
   const state = {
     projectData,
     global: {
+      autoplayDelay: 1000,
       isLineCompleted: false,
       pendingEffects: [],
       autoMode: false,
@@ -43,6 +44,7 @@ export const createInitialState = (payload) => {
         },
         auto: {
           enabled: false,
+          //delay: 1000,
         },
       },
       saveSlots: {},
@@ -103,6 +105,10 @@ export const selectDialogueUIHidden = ({ state }) => {
   return state.global.dialogueUIHidden;
 };
 
+export const selectAutoplayDelay = ({ state }) => {
+  return state.global.autoplayDelay;
+};
+
 export const selectDialogueHistory = ({ state }) => {
   const lastContext = state.contexts[state.contexts.length - 1];
   if (!lastContext) {
@@ -404,6 +410,7 @@ export const startAutoMode = ({ state }) => {
   });
   state.global.pendingEffects.push({
     name: "startAutoNextTimer",
+    payload: { delay: state.global.autoplayDelay },
   });
   state.global.pendingEffects.push({
     name: "render",
@@ -655,6 +662,23 @@ export const setNextLineConfig = ({ state }, payload) => {
   return state;
 };
 
+export const setAutoplayDelay = ({ state }, { delay }) => {
+  state.global.autoplayDelay = delay;
+
+  if (state.global.autoMode) {
+    state.global.pendingEffects.push({ name: "clearAutoNextTimer" });
+    state.global.pendingEffects.push({
+      name: "startAutoNextTimer",
+      payload: { delay: state.global.autoplayDelay },
+    });
+  }
+
+  state.global.pendingEffects.push({
+    name: "render",
+  });
+  return state;
+};
+
 /**
  * Replaces a save slot with new data
  * @param {Object} state - Current state object
@@ -1095,6 +1119,7 @@ export const createSystemStore = (initialState) => {
     selectSection,
     selectCurrentLine,
     selectPresentationState,
+    selectAutoplayDelay,
     selectRenderState,
     selectLayeredViews,
 
@@ -1119,6 +1144,7 @@ export const createSystemStore = (initialState) => {
     addViewedResource,
     setNextLineConfig,
     replaceSaveSlot,
+    setAutoplayDelay,
     updateProjectData,
     sectionTransition,
     jumpToLine,

tasks/TASK/000/TASK-007.md

@@ -1,8 +1,8 @@
 ---
 title: Check autoplay speed
-status: todo
+status: done
 priority: high
-assignee: 
+assignee: nellow
 labels: []
 ---
 

vt/specs/dialogue/autoplay.yaml

@@ -101,6 +101,41 @@ resources:
               actions:
                 toggleSkipMode: {}
 
+        - id: speed-slow-button
+          type: text
+          x: 1400
+          y: 50
+          content: "Slow"
+          textStyle:
+            fontSize: 32
+            fill: "white"
+          hover:
+            textStyle:
+              fontSize: 32
+              fill: "yellow"
+          click:
+            actionPayload:
+              actions:
+                setAutoplayDelay:
+                  delay: 2000
+        - id: speed-fast-button
+          type: text
+          x: 1250
+          y: 50
+          content: "Fast"
+          textStyle:
+            fontSize: 32
+            fill: "white"
+          hover:
+            textStyle:
+              fontSize: 32
+              fill: "yellow"
+          click:
+            actionPayload:
+              actions:
+                setAutoplayDelay:
+                  delay: 250
+
 story:
   initialSceneId: test_scene
   scenes: