@vnejs/plugins.views.scenario.qte 0.2.2 → 0.2.4

package/dist/index.js

@@ -2,6 +2,7 @@ import "@vnejs/contracts.scenario.qte";
 import "@vnejs/contracts.views.scenario.qte";
 import { regPlugin } from "@vnejs/shared";
 import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.scenario.qte";
-import { QteController } from "./modules/controller.js";
-import { QteView } from "./modules/view.js";
-regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [QteController, QteView]);
+import { QteViewController } from "./modules/controller.js";
+import { QteViewControllerAccept } from "./modules/controller.accept.js";
+import { QteViewView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [QteViewController, QteViewControllerAccept, QteViewView]);

package/dist/modules/controller.accept.d.ts

@@ -0,0 +1,10 @@
+import { ModuleControllerAccept } from "@vnejs/module.controller.accept";
+import type { QtePluginConstants, QtePluginEvents, QtePluginParams, QtePluginSettings } from "../types.js";
+export declare class QteViewControllerAccept extends ModuleControllerAccept<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams> {
+    name: string;
+    EVENT_SHOW: "vne:qte_view:show";
+    EVENT_HIDE: "vne:qte_view:hide";
+    EVENT_ACCEPT: "vne:qte_view:action";
+    CONTROLS_ZINDEX: number;
+    onAccept: () => undefined;
+}

package/dist/modules/controller.accept.js

@@ -0,0 +1,9 @@
+import { ModuleControllerAccept } from "@vnejs/module.controller.accept";
+export class QteViewControllerAccept extends ModuleControllerAccept {
+    name = "qte_view.controller.accept";
+    EVENT_SHOW = this.EVENTS.QTE_VIEW.SHOW;
+    EVENT_HIDE = this.EVENTS.QTE_VIEW.HIDE;
+    EVENT_ACCEPT = this.EVENTS.QTE_VIEW.ACTION;
+    CONTROLS_ZINDEX = this.PARAMS.QTE_VIEW.ZINDEX;
+    onAccept = () => undefined;
+}

package/dist/modules/controller.d.ts

@@ -2,14 +2,11 @@ import { ModuleController } from "@vnejs/module.components";
 import type { ViewActionPayload } from "@vnejs/module.components";
 import type { QtePluginConstants, QtePluginEvents, QtePluginParams, QtePluginSettings } from "../types.js";
 import type { QtePluginControllerState, QteVisibilityPayload } from "../utils/qte.js";
-export declare class QteController extends ModuleController<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
+export declare class QteViewController extends ModuleController<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
     name: string;
-    updateEvent: "vne:qte_view:update";
-    controls: {
-        abstract_accept: () => undefined;
-        abstract_interact: () => undefined;
-    };
-    controlsIndex: number;
+    EVENT_UPDATE_VIEW: "vne:qte_view:update";
+    CONTROLS: {};
+    CONTROLS_INDEX: number;
     activeStartedAt: number | null;
     isResolved: boolean;
     resultTimeout: ReturnType<typeof setTimeout> | null;

package/dist/modules/controller.js

@@ -1,13 +1,10 @@
 import { ModuleController } from "@vnejs/module.components";
 import { getFailAtProgress, getProgressFromElapsed, isProgressInsideZone } from "../utils/qte.js";
-export class QteController extends ModuleController {
+export class QteViewController extends ModuleController {
     name = "qte_view.controller";
-    updateEvent = this.EVENTS.QTE_VIEW.UPDATE;
-    controls = {
-        [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => void this.onAction(),
-        [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.onAction(),
-    };
-    controlsIndex = this.PARAMS.QTE_VIEW.ZINDEX;
+    EVENT_UPDATE_VIEW = this.EVENTS.QTE_VIEW.UPDATE;
+    CONTROLS = {};
+    CONTROLS_INDEX = this.PARAMS.QTE_VIEW.ZINDEX;
     activeStartedAt = null;
     isResolved = false;
     resultTimeout = null;
@@ -81,10 +78,7 @@ export class QteController extends ModuleController {
             return;
         this.isResolved = true;
         this.clearFailTimeout();
-        this.updateStateAndViewFast({
-            phase: "resolved",
-            result: success ? "success" : "fail",
-        });
+        this.updateStateAndViewFast({ phase: "resolved", result: success ? "success" : "fail" });
         this.resultTimeout = setTimeout(() => {
             this.updateStateAndViewFast({ phase: "outro" });
             void this.emit(this.EVENTS.QTE.RESULT, { success });
@@ -105,12 +99,5 @@ export class QteController extends ModuleController {
         this.resultTimeout = null;
         this.activeStartedAt = null;
     };
-    getDefaultState = () => ({
-        isShow: false,
-        isForce: false,
-        id: "",
-        item: null,
-        phase: "idle",
-        result: "idle",
-    });
+    getDefaultState = () => ({ isShow: false, isForce: false, id: "", item: null, phase: "idle", result: "idle" });
 }

package/dist/modules/view.d.ts

@@ -1,11 +1,10 @@
 import { ModuleView } from "@vnejs/module.components";
 import type { QtePluginConstants, QtePluginEvents, QtePluginParams, QtePluginSettings } from "../types.js";
 import type { QtePluginControllerState } from "../utils/qte.js";
-export declare class QteView extends ModuleView<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
+export declare class QteViewView extends ModuleView<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
     name: string;
-    locLabel: string;
-    animationTime: number;
-    updateEvent: "vne:qte_view:update";
+    EVENT_UPDATE_VIEW: "vne:qte_view:update";
+    LOC_LABEL: string;
+    TRANSITION: number;
     renderFunc: import("@vnejs/module.components").ViewRenderFunc<QtePluginControllerState>;
-    updateHandler: (state?: QtePluginControllerState | undefined) => Promise<void>;
 }

package/dist/modules/view.js

@@ -1,10 +1,9 @@
 import { ModuleView } from "@vnejs/module.components";
 import { render } from "../view/index.js";
-export class QteView extends ModuleView {
+export class QteViewView extends ModuleView {
     name = "qte_view.view";
-    locLabel = this.PARAMS.QTE_VIEW.LOC_LABEL;
-    animationTime = this.PARAMS.QTE_VIEW.TRANSITION;
-    updateEvent = this.EVENTS.QTE_VIEW.UPDATE;
+    EVENT_UPDATE_VIEW = this.EVENTS.QTE_VIEW.UPDATE;
+    LOC_LABEL = this.PARAMS.QTE_VIEW.LOC_LABEL;
+    TRANSITION = this.PARAMS.QTE_VIEW.TRANSITION;
     renderFunc = render;
-    updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.views.scenario.qte",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,6 +36,8 @@
   "peerDependencies": {
     "@vnejs/contracts.controls": "~0.2.0",
     "@vnejs/module.components": "~0.2.0",
+    "@vnejs/module.core": "~0.2.0",
+    "@vnejs/module.controller.accept": "~0.2.0",
     "@vnejs/shared": "~0.2.0",
     "@vnejs/uis.react": "~0.2.0",
     "@vnejs/uis.utils": "~0.2.0"
@@ -48,6 +50,8 @@
     "@vnejs/contracts.scenario.qte": "~0.2.0",
     "@vnejs/contracts.views.scenario.qte": "~0.2.0",
     "@vnejs/module.components": "~0.2.0",
+    "@vnejs/module.core": "~0.2.0",
+    "@vnejs/module.controller.accept": "~0.2.0",
     "@vnejs/shared": "~0.2.0",
     "@vnejs/sources-set": "~0.2.0",
     "@vnejs/uis.react": "~0.2.0",

package/src/index.ts

@@ -4,7 +4,8 @@ import "@vnejs/contracts.views.scenario.qte";
 import { regPlugin } from "@vnejs/shared";
 import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.scenario.qte";
 
-import { QteController } from "./modules/controller.js";
-import { QteView } from "./modules/view.js";
+import { QteViewController } from "./modules/controller.js";
+import { QteViewControllerAccept } from "./modules/controller.accept.js";
+import { QteViewView } from "./modules/view.js";
 
-regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [QteController, QteView]);
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [QteViewController, QteViewControllerAccept, QteViewView]);

package/src/modules/controller.accept.ts

@@ -0,0 +1,15 @@
+import { ModuleControllerAccept } from "@vnejs/module.controller.accept";
+
+import type { QtePluginConstants, QtePluginEvents, QtePluginParams, QtePluginSettings } from "../types.js";
+
+export class QteViewControllerAccept extends ModuleControllerAccept<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams> {
+  name = "qte_view.controller.accept";
+
+  EVENT_SHOW = this.EVENTS.QTE_VIEW.SHOW;
+  EVENT_HIDE = this.EVENTS.QTE_VIEW.HIDE;
+  EVENT_ACCEPT = this.EVENTS.QTE_VIEW.ACTION;
+
+  CONTROLS_ZINDEX = this.PARAMS.QTE_VIEW.ZINDEX;
+
+  onAccept = () => undefined;
+}

package/src/modules/controller.ts

@@ -6,16 +6,13 @@ import type { QtePluginConstants, QtePluginEvents, QtePluginParams, QtePluginSet
 import type { QtePluginControllerState, QteVisibilityPayload } from "../utils/qte.js";
 import { getFailAtProgress, getProgressFromElapsed, isProgressInsideZone } from "../utils/qte.js";
 
-export class QteController extends ModuleController<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
+export class QteViewController extends ModuleController<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
   name = "qte_view.controller";
 
-  updateEvent = this.EVENTS.QTE_VIEW.UPDATE;
+  EVENT_UPDATE_VIEW = this.EVENTS.QTE_VIEW.UPDATE;
 
-  controls = {
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => void this.onAction(),
-    [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.onAction(),
-  };
-  controlsIndex = this.PARAMS.QTE_VIEW.ZINDEX;
+  CONTROLS = {};
+  CONTROLS_INDEX = this.PARAMS.QTE_VIEW.ZINDEX;
 
   activeStartedAt: number | null = null;
   isResolved = false;
@@ -104,10 +101,7 @@ export class QteController extends ModuleController<QtePluginEvents, QtePluginCo
 
     this.isResolved = true;
     this.clearFailTimeout();
-    this.updateStateAndViewFast({
-      phase: "resolved",
-      result: success ? "success" : "fail",
-    });
+    this.updateStateAndViewFast({ phase: "resolved", result: success ? "success" : "fail" });
 
     this.resultTimeout = setTimeout(() => {
       this.updateStateAndViewFast({ phase: "outro" });
@@ -129,12 +123,5 @@ export class QteController extends ModuleController<QtePluginEvents, QtePluginCo
     this.activeStartedAt = null;
   };
 
-  getDefaultState = (): QtePluginControllerState => ({
-    isShow: false,
-    isForce: false,
-    id: "",
-    item: null,
-    phase: "idle",
-    result: "idle",
-  });
+  getDefaultState = (): QtePluginControllerState => ({ isShow: false, isForce: false, id: "", item: null, phase: "idle", result: "idle" });
 }

package/src/modules/view.ts

@@ -4,13 +4,14 @@ import { render } from "../view/index.js";
 import type { QtePluginConstants, QtePluginEvents, QtePluginParams, QtePluginSettings } from "../types.js";
 import type { QtePluginControllerState } from "../utils/qte.js";
 
-export class QteView extends ModuleView<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
+export class QteViewView extends ModuleView<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
   name = "qte_view.view";
 
-  locLabel = this.PARAMS.QTE_VIEW.LOC_LABEL;
-  animationTime = this.PARAMS.QTE_VIEW.TRANSITION;
-  updateEvent = this.EVENTS.QTE_VIEW.UPDATE;
+  EVENT_UPDATE_VIEW = this.EVENTS.QTE_VIEW.UPDATE;
+
+  LOC_LABEL = this.PARAMS.QTE_VIEW.LOC_LABEL;
+
+  TRANSITION = this.PARAMS.QTE_VIEW.TRANSITION;
 
   renderFunc = render;
-  updateHandler = this.onUpdateStoreComponent;
 }

package/src/tests/accept.test.ts

@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { spyEvent } from "@vnejs/test-utils";
+
+import { QteViewControllerAccept } from "../modules/controller.accept.js";
+import { CONTROLS_EVENTS, createQteViewTestModule, registerQteViewPluginVne, SUBSCRIBE_EVENTS } from "./setup.js";
+
+describe("QteViewControllerAccept", () => {
+  beforeEach(() => {
+    registerQteViewPluginVne();
+  });
+
+  it("SHOW pushes ACCEPT and INTERACT controls", async () => {
+    const { module, observer } = createQteViewTestModule(QteViewControllerAccept);
+    const accept = module as QteViewControllerAccept;
+    const push = spyEvent(observer, CONTROLS_EVENTS.PUSH);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW);
+
+    expect(push).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
+        key: "qte_view.controller.accept",
+        checkNext: true,
+        index: accept.PARAMS.QTE_VIEW.ZINDEX + 1,
+      }),
+    );
+    expect(push.mock.calls[0][0].controls).toHaveProperty(accept.CONST.CONTROLS.BUTTONS.ACCEPT);
+    expect(push.mock.calls[0][0].controls).toHaveProperty(accept.CONST.CONTROLS.BUTTONS.INTERACT);
+  });
+
+  it("HIDE pops ACCEPT controls", async () => {
+    const { observer } = createQteViewTestModule(QteViewControllerAccept);
+    const pop = spyEvent(observer, CONTROLS_EVENTS.POP);
+
+    await observer.emit(SUBSCRIBE_EVENTS.HIDE);
+
+    expect(pop).toHaveBeenCalledExactlyOnceWith({ key: "qte_view.controller.accept" });
+  });
+
+  it("ACCEPT and INTERACT emit QTE_VIEW.ACTION", async () => {
+    const { module, observer } = createQteViewTestModule(QteViewControllerAccept);
+    const accept = module as QteViewControllerAccept;
+    const action = spyEvent(observer, SUBSCRIBE_EVENTS.ACTION);
+
+    accept.CONTROLS[accept.CONST.CONTROLS.BUTTONS.ACCEPT]();
+    accept.CONTROLS[accept.CONST.CONTROLS.BUTTONS.INTERACT]();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(action).toHaveBeenCalledTimes(2);
+  });
+});

package/src/tests/controller.test.ts

@@ -2,17 +2,17 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { spyEvent } from "@vnejs/test-utils";
 
-import { QteController } from "../modules/controller.js";
+import { QteViewController } from "../modules/controller.js";
 import { createQteViewTestModule, registerQteViewPluginVne, QTE_EVENTS, SUBSCRIBE_EVENTS } from "./setup.js";
 
-describe("QteController", () => {
+describe("QteViewController", () => {
   beforeEach(() => {
     registerQteViewPluginVne();
     vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout", "performance"] });
   });
 
   it("OPENED bridge emits SHOW with payload", async () => {
-    const { observer } = createQteViewTestModule(QteController);
+    const { observer } = createQteViewTestModule(QteViewController);
     const show = spyEvent(observer, SUBSCRIBE_EVENTS.SHOW);
     const payload = { id: "door_lock", item: { start: 70, size: 20, duration: 1500 } };
 
@@ -22,66 +22,66 @@ describe("QteController", () => {
   });
 
   it("SHOW starts in initial, then intro, then active", async () => {
-    const { module, observer } = createQteViewTestModule(QteController);
+    const { module, observer } = createQteViewTestModule(QteViewController);
     const item = { start: 70, size: 20, duration: 1500 };
-    const { INITIAL, TRANSITION } = (module as QteController).PARAMS.QTE_VIEW;
+    const { INITIAL, TRANSITION } = (module as QteViewController).PARAMS.QTE_VIEW;
 
     await observer.emit(SUBSCRIBE_EVENTS.SHOW, { id: "door_lock", item });
 
-    expect((module as QteController).state.id).toBe("door_lock");
-    expect((module as QteController).state.item).toEqual(item);
-    expect((module as QteController).state.phase).toBe("initial");
+    expect((module as QteViewController).state.id).toBe("door_lock");
+    expect((module as QteViewController).state.item).toEqual(item);
+    expect((module as QteViewController).state.phase).toBe("initial");
 
     await vi.advanceTimersByTimeAsync(INITIAL);
-    expect((module as QteController).state.phase).toBe("intro");
+    expect((module as QteViewController).state.phase).toBe("intro");
 
     await vi.advanceTimersByTimeAsync(TRANSITION - INITIAL);
-    expect((module as QteController).state.phase).toBe("active");
-    expect((module as QteController).activeStartedAt).not.toBeNull();
+    expect((module as QteViewController).state.phase).toBe("active");
+    expect((module as QteViewController).activeStartedAt).not.toBeNull();
   });
 
   it("ACTION resolves success inside zone by elapsed time", async () => {
-    const { module, observer } = createQteViewTestModule(QteController);
+    const { module, observer } = createQteViewTestModule(QteViewController);
     const result = spyEvent(observer, QTE_EVENTS.RESULT);
     const item = { start: 40, size: 20, duration: 1000 };
 
     await observer.emit(SUBSCRIBE_EVENTS.SHOW, { id: "door_lock", item });
-    await vi.advanceTimersByTimeAsync((module as QteController).PARAMS.QTE_VIEW.TRANSITION);
+    await vi.advanceTimersByTimeAsync((module as QteViewController).PARAMS.QTE_VIEW.TRANSITION);
     await vi.advanceTimersByTimeAsync(500);
 
     await observer.emit(SUBSCRIBE_EVENTS.ACTION);
 
-    expect((module as QteController).state.result).toBe("success");
+    expect((module as QteViewController).state.result).toBe("success");
 
-    await vi.advanceTimersByTimeAsync((module as QteController).PARAMS.QTE_VIEW.RESULT_DELAY);
+    await vi.advanceTimersByTimeAsync((module as QteViewController).PARAMS.QTE_VIEW.RESULT_DELAY);
 
     expect(result).toHaveBeenCalledExactlyOnceWith({ success: true });
   });
 
   it("ACTION resolves fail outside zone", async () => {
-    const { module, observer } = createQteViewTestModule(QteController);
+    const { module, observer } = createQteViewTestModule(QteViewController);
     const item = { start: 70, size: 20, duration: 1000 };
 
     await observer.emit(SUBSCRIBE_EVENTS.SHOW, { id: "door_lock", item });
-    await vi.advanceTimersByTimeAsync((module as QteController).PARAMS.QTE_VIEW.TRANSITION);
+    await vi.advanceTimersByTimeAsync((module as QteViewController).PARAMS.QTE_VIEW.TRANSITION);
     await vi.advanceTimersByTimeAsync(100);
 
-    (module as QteController).controls[(module as QteController).CONST.CONTROLS.BUTTONS.ACCEPT]();
+    await observer.emit(SUBSCRIBE_EVENTS.ACTION);
 
-    expect((module as QteController).state.result).toBe("fail");
+    expect((module as QteViewController).state.result).toBe("fail");
   });
 
   it("auto-fails when pointer leaves the zone", async () => {
-    const { module, observer } = createQteViewTestModule(QteController);
+    const { module, observer } = createQteViewTestModule(QteViewController);
     const result = spyEvent(observer, QTE_EVENTS.RESULT);
     const item = { start: 50, size: 10, duration: 1000 };
 
     await observer.emit(SUBSCRIBE_EVENTS.SHOW, { id: "door_lock", item });
-    await vi.advanceTimersByTimeAsync((module as QteController).PARAMS.QTE_VIEW.TRANSITION);
+    await vi.advanceTimersByTimeAsync((module as QteViewController).PARAMS.QTE_VIEW.TRANSITION);
     await vi.advanceTimersByTimeAsync(600);
-    await vi.advanceTimersByTimeAsync((module as QteController).PARAMS.QTE_VIEW.RESULT_DELAY);
+    await vi.advanceTimersByTimeAsync((module as QteViewController).PARAMS.QTE_VIEW.RESULT_DELAY);
 
-    expect((module as QteController).state.result).toBe("fail");
+    expect((module as QteViewController).state.result).toBe("fail");
     expect(result).toHaveBeenCalledExactlyOnceWith({ success: false });
   });
 });

package/src/tests/setup.ts

@@ -27,6 +27,7 @@ export const createQteViewTestModule = <T extends Parameters<typeof baseCreateTe
   stubSilentEvent(result.observer, QTE_VIEW_EVENTS.HIDE);
   stubSilentEvent(result.observer, QTE_VIEW_EVENTS.SHOW_BEFORE);
   stubSilentEvent(result.observer, QTE_VIEW_EVENTS.UPDATE);
+  stubSilentEvent(result.observer, QTE_VIEW_EVENTS.ACTION);
   stubSilentEvent(result.observer, CONTROLS_EVENTS.PUSH);
   stubSilentEvent(result.observer, CONTROLS_EVENTS.POP);