@vnejs/plugins.views.scenario.qte 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import "@vnejs/contracts.scenario.qte";
+import "@vnejs/contracts.views.scenario.qte";

package/dist/index.js

@@ -0,0 +1,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]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,31 @@
+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> {
+    name: string;
+    updateEvent: "vne:qte_view:update";
+    controls: {
+        abstract_accept: () => undefined;
+        abstract_interact: () => undefined;
+    };
+    controlsIndex: number;
+    activeStartedAt: number | null;
+    isResolved: boolean;
+    resultTimeout: ReturnType<typeof setTimeout> | null;
+    phaseTimeout: ReturnType<typeof setTimeout> | null;
+    failTimeout: ReturnType<typeof setTimeout> | null;
+    subscribe: () => void;
+    onQteOpened: (payload?: QteVisibilityPayload) => Promise<unknown[]> | undefined;
+    onQteClosed: (payload?: QteVisibilityPayload) => Promise<unknown[]> | undefined;
+    beforeShow: ({ id, item }?: ViewActionPayload) => Promise<void>;
+    schedulePhases: () => void;
+    startActive: () => void;
+    scheduleFailTimeout: () => void;
+    afterHide: () => void;
+    onAction: () => void;
+    resolveRound: (success: boolean) => void;
+    clearFailTimeout: () => void;
+    clearTimers: () => void;
+    getDefaultState: () => QtePluginControllerState;
+}

package/dist/modules/controller.js

@@ -0,0 +1,116 @@
+import { ModuleController } from "@vnejs/module.components";
+import { getFailAtProgress, getProgressFromElapsed, isProgressInsideZone } from "../utils/qte.js";
+export class QteController 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;
+    activeStartedAt = null;
+    isResolved = false;
+    resultTimeout = null;
+    phaseTimeout = null;
+    failTimeout = null;
+    subscribe = () => {
+        this.on(this.EVENTS.QTE_VIEW.SHOW, this.onShow);
+        this.on(this.EVENTS.QTE_VIEW.HIDE, this.onHide);
+        this.on(this.EVENTS.QTE_VIEW.ACTION, this.onAction);
+        this.on(this.EVENTS.QTE.OPENED, this.onQteOpened);
+        this.on(this.EVENTS.QTE.CLOSED, this.onQteClosed);
+    };
+    onQteOpened = (payload = {}) => this.emit(this.EVENTS.QTE_VIEW.SHOW, payload);
+    onQteClosed = (payload = {}) => this.emit(this.EVENTS.QTE_VIEW.HIDE, payload);
+    beforeShow = async ({ id = "", item = null } = {}) => {
+        this.clearTimers();
+        this.isResolved = false;
+        this.activeStartedAt = null;
+        this.updateState({
+            id: String(id),
+            item: item ?? null,
+            phase: "initial",
+            result: "idle",
+        });
+        await this.emit(this.EVENTS.QTE_VIEW.SHOW_BEFORE);
+        this.schedulePhases();
+    };
+    schedulePhases = () => {
+        const { INITIAL, TRANSITION } = this.PARAMS.QTE_VIEW;
+        const introDuration = Math.max(TRANSITION - INITIAL, 0);
+        this.phaseTimeout = setTimeout(() => {
+            if (this.isResolved)
+                return;
+            this.updateStateAndViewFast({ phase: "intro" });
+            this.phaseTimeout = setTimeout(() => {
+                if (this.isResolved)
+                    return;
+                this.startActive();
+            }, introDuration);
+        }, INITIAL);
+    };
+    startActive = () => {
+        if (!this.state.item)
+            return;
+        this.activeStartedAt = performance.now();
+        this.updateStateAndViewFast({ phase: "active" });
+        this.scheduleFailTimeout();
+    };
+    scheduleFailTimeout = () => {
+        if (!this.state.item)
+            return;
+        const { duration, start, size } = this.state.item;
+        const failAt = getFailAtProgress(start, size);
+        const failMs = (failAt / 100) * Math.max(duration, 1);
+        this.failTimeout = setTimeout(() => this.resolveRound(false), failMs);
+    };
+    afterHide = () => {
+        this.clearTimers();
+        this.setDefaultState();
+    };
+    onAction = () => {
+        if (this.state.phase !== "active" || this.isResolved || !this.state.item || this.activeStartedAt === null)
+            return;
+        const { start, size, duration } = this.state.item;
+        const progress = getProgressFromElapsed(performance.now() - this.activeStartedAt, duration);
+        const success = isProgressInsideZone(progress, start, size);
+        this.resolveRound(success);
+    };
+    resolveRound = (success) => {
+        if (this.isResolved)
+            return;
+        this.isResolved = true;
+        this.clearFailTimeout();
+        this.updateStateAndViewFast({
+            phase: "resolved",
+            result: success ? "success" : "fail",
+        });
+        this.resultTimeout = setTimeout(() => {
+            this.updateStateAndViewFast({ phase: "outro" });
+            void this.emit(this.EVENTS.QTE.RESULT, { success });
+        }, this.PARAMS.QTE_VIEW.RESULT_DELAY);
+    };
+    clearFailTimeout = () => {
+        if (this.failTimeout)
+            clearTimeout(this.failTimeout);
+        this.failTimeout = null;
+    };
+    clearTimers = () => {
+        this.clearFailTimeout();
+        if (this.phaseTimeout)
+            clearTimeout(this.phaseTimeout);
+        if (this.resultTimeout)
+            clearTimeout(this.resultTimeout);
+        this.phaseTimeout = null;
+        this.resultTimeout = null;
+        this.activeStartedAt = null;
+    };
+    getDefaultState = () => ({
+        isShow: false,
+        isForce: false,
+        id: "",
+        item: null,
+        phase: "idle",
+        result: "idle",
+    });
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,11 @@
+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> {
+    name: string;
+    locLabel: string;
+    animationTime: number;
+    updateEvent: "vne:qte_view:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<QtePluginControllerState>;
+    updateHandler: (state?: QtePluginControllerState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+export class QteView 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;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { PluginName as ControlsPluginName, Constants as ControlsConstants } from "@vnejs/contracts.controls";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/contracts.core.logs";
+import type { PluginName as VendorsPluginName, SubscribeEvents as VendorsSubscribeEvents } from "@vnejs/contracts.core.vendors";
+import type { PluginName as QtePluginName, SubscribeEvents as QteSubscribeEvents, Params as QteParams } from "@vnejs/contracts.scenario.qte";
+import type { PluginName, SubscribeEvents, Params } from "@vnejs/contracts.views.scenario.qte";
+export type QtePluginEvents = ModuleComponentsEvents & Record<QtePluginName, QteSubscribeEvents> & Record<PluginName, SubscribeEvents> & Record<VendorsPluginName, VendorsSubscribeEvents> & Record<LogsPluginName, LogsSubscribeEvents>;
+export type QtePluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type QtePluginSettings = ModuleComponentsSettings;
+export type QtePluginParams = ModuleComponentsParams & Record<QtePluginName, QteParams> & Record<PluginName, Params>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/qte.d.ts

@@ -0,0 +1,16 @@
+import type { ModuleControllerState } from "@vnejs/module.components";
+import type { QteItem } from "@vnejs/contracts.views.scenario.qte";
+export type QtePhase = "idle" | "initial" | "intro" | "active" | "resolved" | "outro";
+export type QteResult = "idle" | "success" | "fail";
+export type QtePluginControllerState = ModuleControllerState & {
+    id: string;
+    item: QteItem | null;
+    phase: QtePhase;
+    result: QteResult;
+    locs?: Record<string, string>;
+};
+export type { QteItem, QteVisibilityPayload } from "@vnejs/contracts.views.scenario.qte";
+export declare const percentToDegrees: (percent: number) => number;
+export declare const getProgressFromElapsed: (elapsedMs: number, duration: number) => number;
+export declare const isProgressInsideZone: (progress: number, start: number, size: number) => boolean;
+export declare const getFailAtProgress: (start: number, size: number) => number;

package/dist/utils/qte.js

@@ -0,0 +1,11 @@
+export const percentToDegrees = (percent) => (percent / 100) * 360;
+export const getProgressFromElapsed = (elapsedMs, duration) => {
+    if (duration <= 0)
+        return 100;
+    return Math.min(Math.max((elapsedMs / duration) * 100, 0), 100);
+};
+export const isProgressInsideZone = (progress, start, size) => {
+    const zoneEnd = Math.min(start + size, 100);
+    return progress >= start && progress <= zoneEnd;
+};
+export const getFailAtProgress = (start, size) => Math.min(start + size, 100);

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { QtePluginControllerState } from "../utils/qte.js";
+export declare const render: ViewRenderFunc<QtePluginControllerState>;

package/dist/view/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PositionBox, Screen, createRenderFunc, useCallback, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+import { percentToDegrees } from "../utils/qte.js";
+import { b } from "./index.styles.js";
+const CIRCLE_SIZE = 1200;
+const CENTER = CIRCLE_SIZE / 2;
+const RADIUS = 480;
+const polarToCartesian = (angle, radius) => {
+    const radians = ((angle - 90) * Math.PI) / 180;
+    return { x: CENTER + radius * Math.cos(radians), y: CENTER + radius * Math.sin(radians) };
+};
+const describeArc = (sectorStart, sectorWidth) => {
+    const start = polarToCartesian(sectorStart + sectorWidth, RADIUS);
+    const end = polarToCartesian(sectorStart, RADIUS);
+    const largeArcFlag = sectorWidth <= 180 ? "0" : "1";
+    return ["M", start.x, start.y, "A", RADIUS, RADIUS, 0, largeArcFlag, 0, end.x, end.y].join(" ");
+};
+const Qte = ({ store, onMount, emit, EVENTS, PARAMS }) => {
+    const { isShow = false, isForce = false, phase = "", result = "", item = null, locs = {}, } = useStoreState(store, onMount);
+    const isRealForce = useIsForceHook(isForce);
+    const propsView = PARAMS.QTE_VIEW.VIEW_PROPS;
+    const transition = isRealForce ? 0 : PARAMS.QTE_VIEW.TRANSITION;
+    const introTransition = isRealForce ? 0 : Math.max(PARAMS.QTE_VIEW.TRANSITION - PARAMS.QTE_VIEW.INITIAL, 0);
+    const duration = item?.duration ?? 0;
+    const start = item?.start ?? 0;
+    const size = item?.size ?? 0;
+    const sectorStart = percentToDegrees(start);
+    const sectorWidth = percentToDegrees(size);
+    const sectorPath = useMemo(() => describeArc(sectorStart, sectorWidth), [sectorStart, sectorWidth]);
+    const isPointerSpinning = phase === "active" || phase === "resolved" || phase === "outro";
+    const isPointerPaused = phase === "resolved" || phase === "outro";
+    const onDialClick = useCallback(() => void emit(EVENTS.QTE_VIEW.ACTION), [emit, EVENTS.QTE_VIEW.ACTION]);
+    const propsScreen = useMemo(() => ({ ...propsView.screen, isDisableAutoread: true, isIgnoreOnScreenshot: true, isShow, isForce: isRealForce, transition }), [isShow, isRealForce, propsView.screen, transition]);
+    return (_jsx(Screen, { ...propsScreen, children: _jsx(PositionBox, { ...propsView.position, children: _jsx("div", { className: b("shell", { phase }), style: { ["--qte-intro-transition"]: `${introTransition}ms` }, children: _jsxs("div", { className: b("arena"), children: [_jsxs("svg", { className: b("dial"), viewBox: `0 0 ${CIRCLE_SIZE} ${CIRCLE_SIZE}`, onClick: onDialClick, children: [_jsx("circle", { className: b("trackShadow"), cx: CENTER, cy: CENTER, r: RADIUS }), _jsx("circle", { className: b("track"), cx: CENTER, cy: CENTER, r: RADIUS }), _jsx("path", { className: b("sector"), d: sectorPath })] }), _jsx("div", { className: b("pointerSpin", { spinning: isPointerSpinning, paused: isPointerPaused }), style: { ["--qte-duration"]: `${duration}ms` }, children: _jsx("div", { className: b("pointer") }) }), _jsx("div", { className: b("status"), "aria-live": "polite", children: locs[result] ?? "" })] }) }) }) }));
+};
+export const render = createRenderFunc(Qte);

package/dist/view/index.styles.d.ts

@@ -0,0 +1 @@
+export declare const b: import("@bem-react/classname").ClassNameFormatter;

package/dist/view/index.styles.js

@@ -0,0 +1,116 @@
+import { cn, getVneLength, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Qte");
+const CSS = `
+@keyframes qte-pointer-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+${sel(b("shell"))} {
+  transform-origin: center;
+  transition: opacity var(--qte-intro-transition, 400ms), transform var(--qte-intro-transition, 400ms);
+  opacity: 0;
+  transform: scale(0.25);
+}
+
+${sel(b("shell", { phase: "intro" }))},
+${sel(b("shell", { phase: "active" }))},
+${sel(b("shell", { phase: "resolved" }))} {
+  opacity: 1;
+  transform: scale(1);
+}
+
+${sel(b("shell", { phase: "initial" }))},
+${sel(b("shell", { phase: "intro" }))},
+${sel(b("shell", { phase: "resolved" }))},
+${sel(b("shell", { phase: "outro" }))} {
+  pointer-events: none;
+}
+
+${sel(b("shell", { phase: "outro" }))} {
+  opacity: 0;
+  transform: scale(1.75);
+}
+
+${sel(b("arena"))} {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: ${getVneLength(1200)};
+  height: ${getVneLength(1200)};
+}
+
+${sel(b("dial"))} {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  cursor: pointer;
+}
+
+${sel(b("trackShadow"))} {
+  fill: none;
+  stroke: rgba(0, 0, 0, 0.42);
+  stroke-width: 72;
+}
+
+${sel(b("track"))} {
+  fill: rgba(15, 23, 42, 0.42);
+  stroke: rgba(226, 232, 240, 0.16);
+  stroke-width: 36;
+}
+
+${sel(b("sector"))} {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.9);
+  stroke-linecap: round;
+  stroke-width: 36;
+}
+
+${sel(b("pointerSpin"))} {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  transform-origin: center center;
+}
+
+${sel(b("pointerSpin", { spinning: true }))} {
+  animation-name: qte-pointer-spin;
+  animation-duration: var(--qte-duration, 1800ms);
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+${sel(b("pointerSpin", { paused: true }))} {
+  animation-play-state: paused;
+}
+
+${sel(b("pointer"))} {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: ${getVneLength(96)};
+  height: ${getVneLength(96)};
+  border-radius: 50%;
+  background: #ffffff;
+  filter: drop-shadow(0 0 ${getVneLength(12)} rgba(0, 0, 0, 0.3));
+  transform: translate(-50%, -50%) translateY(${getVneLength(-480)});
+}
+
+${sel(b("status"))} {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  width: ${getVneLength(528)};
+  text-align: center;
+  pointer-events: none;
+  color: #ffffff;
+  font-size: ${getVneLength(72)};
+  font-weight: 900;
+}
+`;
+injectStyles(CSS);

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@vnejs/plugins.views.scenario.qte",
+  "version": "0.1.1",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
+  "scripts": {
+    "test": "npx @vnejs/monorepo test",
+    "build": "npx @vnejs/monorepo package",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@vnejs/contracts.scenario.qte": "~0.1.0",
+    "@vnejs/contracts.views.scenario.qte": "~0.1.0"
+  },
+  "peerDependencies": {
+    "@vnejs/contracts.controls": "~0.1.0",
+    "@vnejs/module.components": "~0.1.0",
+    "@vnejs/shared": "~0.1.0",
+    "@vnejs/uis.react": "~0.1.0",
+    "@vnejs/uis.utils": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.1.0",
+    "@vnejs/configs.vitest": "~0.1.0",
+    "@vnejs/test-utils": "~0.1.0",
+    "@vnejs/contracts.controls": "~0.1.0",
+    "@vnejs/contracts.scenario.qte": "~0.1.0",
+    "@vnejs/contracts.views.scenario.qte": "~0.1.0",
+    "@vnejs/module.components": "~0.1.0",
+    "@vnejs/shared": "~0.1.0",
+    "@vnejs/sources-set": "~0.1.0",
+    "@vnejs/uis.react": "~0.1.0",
+    "@vnejs/uis.utils": "~0.1.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+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]);

package/src/modules/controller.ts

@@ -0,0 +1,140 @@
+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";
+import { getFailAtProgress, getProgressFromElapsed, isProgressInsideZone } from "../utils/qte.js";
+
+export class QteController extends ModuleController<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState> {
+  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;
+
+  activeStartedAt: number | null = null;
+  isResolved = false;
+  resultTimeout: ReturnType<typeof setTimeout> | null = null;
+  phaseTimeout: ReturnType<typeof setTimeout> | null = null;
+  failTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  subscribe = () => {
+    this.on(this.EVENTS.QTE_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.QTE_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.QTE_VIEW.ACTION, this.onAction);
+
+    this.on(this.EVENTS.QTE.OPENED, this.onQteOpened);
+    this.on(this.EVENTS.QTE.CLOSED, this.onQteClosed);
+  };
+
+  onQteOpened = (payload: QteVisibilityPayload = {}) => this.emit(this.EVENTS.QTE_VIEW.SHOW, payload);
+  onQteClosed = (payload: QteVisibilityPayload = {}) => this.emit(this.EVENTS.QTE_VIEW.HIDE, payload);
+
+  beforeShow = async ({ id = "", item = null }: ViewActionPayload = {}) => {
+    this.clearTimers();
+    this.isResolved = false;
+    this.activeStartedAt = null;
+    this.updateState({
+      id: String(id),
+      item: (item as QtePluginControllerState["item"]) ?? null,
+      phase: "initial",
+      result: "idle",
+    });
+    await this.emit(this.EVENTS.QTE_VIEW.SHOW_BEFORE);
+    this.schedulePhases();
+  };
+
+  schedulePhases = () => {
+    const { INITIAL, TRANSITION } = this.PARAMS.QTE_VIEW;
+    const introDuration = Math.max(TRANSITION - INITIAL, 0);
+
+    this.phaseTimeout = setTimeout(() => {
+      if (this.isResolved) return;
+
+      this.updateStateAndViewFast({ phase: "intro" });
+
+      this.phaseTimeout = setTimeout(() => {
+        if (this.isResolved) return;
+
+        this.startActive();
+      }, introDuration);
+    }, INITIAL);
+  };
+
+  startActive = () => {
+    if (!this.state.item) return;
+
+    this.activeStartedAt = performance.now();
+    this.updateStateAndViewFast({ phase: "active" });
+    this.scheduleFailTimeout();
+  };
+
+  scheduleFailTimeout = () => {
+    if (!this.state.item) return;
+
+    const { duration, start, size } = this.state.item;
+    const failAt = getFailAtProgress(start, size);
+    const failMs = (failAt / 100) * Math.max(duration, 1);
+
+    this.failTimeout = setTimeout(() => this.resolveRound(false), failMs);
+  };
+
+  afterHide = () => {
+    this.clearTimers();
+    this.setDefaultState();
+  };
+
+  onAction = () => {
+    if (this.state.phase !== "active" || this.isResolved || !this.state.item || this.activeStartedAt === null) return;
+
+    const { start, size, duration } = this.state.item;
+    const progress = getProgressFromElapsed(performance.now() - this.activeStartedAt, duration);
+    const success = isProgressInsideZone(progress, start, size);
+
+    this.resolveRound(success);
+  };
+
+  resolveRound = (success: boolean) => {
+    if (this.isResolved) return;
+
+    this.isResolved = true;
+    this.clearFailTimeout();
+    this.updateStateAndViewFast({
+      phase: "resolved",
+      result: success ? "success" : "fail",
+    });
+
+    this.resultTimeout = setTimeout(() => {
+      this.updateStateAndViewFast({ phase: "outro" });
+      void this.emit(this.EVENTS.QTE.RESULT, { success });
+    }, this.PARAMS.QTE_VIEW.RESULT_DELAY);
+  };
+
+  clearFailTimeout = () => {
+    if (this.failTimeout) clearTimeout(this.failTimeout);
+    this.failTimeout = null;
+  };
+
+  clearTimers = () => {
+    this.clearFailTimeout();
+    if (this.phaseTimeout) clearTimeout(this.phaseTimeout);
+    if (this.resultTimeout) clearTimeout(this.resultTimeout);
+    this.phaseTimeout = null;
+    this.resultTimeout = null;
+    this.activeStartedAt = null;
+  };
+
+  getDefaultState = (): QtePluginControllerState => ({
+    isShow: false,
+    isForce: false,
+    id: "",
+    item: null,
+    phase: "idle",
+    result: "idle",
+  });
+}

package/src/modules/view.ts

@@ -0,0 +1,16 @@
+import { ModuleView } from "@vnejs/module.components";
+
+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> {
+  name = "qte_view.view";
+
+  locLabel = this.PARAMS.QTE_VIEW.LOC_LABEL;
+  animationTime = this.PARAMS.QTE_VIEW.TRANSITION;
+  updateEvent = this.EVENTS.QTE_VIEW.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/tests/controller.test.ts

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

package/src/tests/qte.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+
+import { getFailAtProgress, getProgressFromElapsed, isProgressInsideZone, percentToDegrees } from "../utils/qte.js";
+
+describe("qte utils", () => {
+  it("percentToDegrees maps full track to circle", () => {
+    expect(percentToDegrees(0)).toBe(0);
+    expect(percentToDegrees(50)).toBe(180);
+    expect(percentToDegrees(100)).toBe(360);
+  });
+
+  it("getProgressFromElapsed maps time to percent", () => {
+    expect(getProgressFromElapsed(0, 1000)).toBe(0);
+    expect(getProgressFromElapsed(500, 1000)).toBe(50);
+    expect(getProgressFromElapsed(1500, 1000)).toBe(100);
+  });
+
+  it("isProgressInsideZone checks inclusive bounds", () => {
+    expect(isProgressInsideZone(70, 70, 20)).toBe(true);
+    expect(isProgressInsideZone(90, 70, 20)).toBe(true);
+    expect(isProgressInsideZone(69, 70, 20)).toBe(false);
+    expect(isProgressInsideZone(91, 70, 20)).toBe(false);
+  });
+
+  it("getFailAtProgress caps at 100", () => {
+    expect(getFailAtProgress(70, 20)).toBe(90);
+    expect(getFailAtProgress(90, 20)).toBe(100);
+  });
+});

package/src/tests/setup.ts

@@ -0,0 +1,36 @@
+import { CONSTANTS as CONTROLS_CONST, PLUGIN_NAME as CONTROLS, SUBSCRIBE_EVENTS as CONTROLS_EVENTS } from "@vnejs/contracts.controls";
+import { PARAMS as QTE_PARAMS, PLUGIN_NAME as QTE, SUBSCRIBE_EVENTS as QTE_EVENTS } from "@vnejs/contracts.scenario.qte";
+import { PARAMS as QTE_VIEW_PARAMS, PLUGIN_NAME as QTE_VIEW, SUBSCRIBE_EVENTS as QTE_VIEW_EVENTS } from "@vnejs/contracts.views.scenario.qte";
+import { SourcesSet } from "@vnejs/sources-set";
+import { createTestModule as baseCreateTestModule, registerCoreVne, registerVnePlugin, stubSilentEvent } from "@vnejs/test-utils";
+
+export const registerQteViewPluginVne = () => {
+  registerCoreVne();
+  registerVnePlugin(CONTROLS, { constants: CONTROLS_CONST, events: CONTROLS_EVENTS });
+  registerVnePlugin(QTE, { events: QTE_EVENTS, params: QTE_PARAMS });
+  registerVnePlugin(QTE_VIEW, { events: QTE_VIEW_EVENTS, params: QTE_VIEW_PARAMS });
+};
+
+export const createQteViewTestModule = <T extends Parameters<typeof baseCreateTestModule>[0]>(
+  ModuleClass: T,
+  options: Parameters<typeof baseCreateTestModule>[1] = {},
+) => {
+  const result = baseCreateTestModule(ModuleClass, {
+    shared: {
+      viewForceAnimationSources: new SourcesSet(),
+      ...(options.shared ?? {}),
+    },
+    ...options,
+  });
+
+  stubSilentEvent(result.observer, QTE_VIEW_EVENTS.SHOW);
+  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, CONTROLS_EVENTS.PUSH);
+  stubSilentEvent(result.observer, CONTROLS_EVENTS.POP);
+
+  return result;
+};
+
+export { QTE_VIEW_EVENTS as SUBSCRIBE_EVENTS, QTE_EVENTS, CONTROLS_EVENTS };

package/src/types.ts

@@ -0,0 +1,20 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+
+import type { PluginName as ControlsPluginName, Constants as ControlsConstants } from "@vnejs/contracts.controls";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/contracts.core.logs";
+import type { PluginName as VendorsPluginName, SubscribeEvents as VendorsSubscribeEvents } from "@vnejs/contracts.core.vendors";
+import type { PluginName as QtePluginName, SubscribeEvents as QteSubscribeEvents, Params as QteParams } from "@vnejs/contracts.scenario.qte";
+
+import type { PluginName, SubscribeEvents, Params } from "@vnejs/contracts.views.scenario.qte";
+
+export type QtePluginEvents = ModuleComponentsEvents &
+  Record<QtePluginName, QteSubscribeEvents> &
+  Record<PluginName, SubscribeEvents> &
+  Record<VendorsPluginName, VendorsSubscribeEvents> &
+  Record<LogsPluginName, LogsSubscribeEvents>;
+
+export type QtePluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type QtePluginSettings = ModuleComponentsSettings;
+
+export type QtePluginParams = ModuleComponentsParams & Record<QtePluginName, QteParams> & Record<PluginName, Params>;

package/src/utils/qte.ts

@@ -0,0 +1,31 @@
+import type { ModuleControllerState } from "@vnejs/module.components";
+import type { QteItem } from "@vnejs/contracts.views.scenario.qte";
+
+export type QtePhase = "idle" | "initial" | "intro" | "active" | "resolved" | "outro";
+export type QteResult = "idle" | "success" | "fail";
+
+export type QtePluginControllerState = ModuleControllerState & {
+  id: string;
+  item: QteItem | null;
+  phase: QtePhase;
+  result: QteResult;
+  locs?: Record<string, string>;
+};
+
+export type { QteItem, QteVisibilityPayload } from "@vnejs/contracts.views.scenario.qte";
+
+export const percentToDegrees = (percent: number) => (percent / 100) * 360;
+
+export const getProgressFromElapsed = (elapsedMs: number, duration: number) => {
+  if (duration <= 0) return 100;
+
+  return Math.min(Math.max((elapsedMs / duration) * 100, 0), 100);
+};
+
+export const isProgressInsideZone = (progress: number, start: number, size: number) => {
+  const zoneEnd = Math.min(start + size, 100);
+
+  return progress >= start && progress <= zoneEnd;
+};
+
+export const getFailAtProgress = (start: number, size: number) => Math.min(start + size, 100);

package/src/view/index.styles.ts

@@ -0,0 +1,119 @@
+import { cn, getVneLength, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Qte");
+
+const CSS = `
+@keyframes qte-pointer-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+${sel(b("shell"))} {
+  transform-origin: center;
+  transition: opacity var(--qte-intro-transition, 400ms), transform var(--qte-intro-transition, 400ms);
+  opacity: 0;
+  transform: scale(0.25);
+}
+
+${sel(b("shell", { phase: "intro" }))},
+${sel(b("shell", { phase: "active" }))},
+${sel(b("shell", { phase: "resolved" }))} {
+  opacity: 1;
+  transform: scale(1);
+}
+
+${sel(b("shell", { phase: "initial" }))},
+${sel(b("shell", { phase: "intro" }))},
+${sel(b("shell", { phase: "resolved" }))},
+${sel(b("shell", { phase: "outro" }))} {
+  pointer-events: none;
+}
+
+${sel(b("shell", { phase: "outro" }))} {
+  opacity: 0;
+  transform: scale(1.75);
+}
+
+${sel(b("arena"))} {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: ${getVneLength(1200)};
+  height: ${getVneLength(1200)};
+}
+
+${sel(b("dial"))} {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  cursor: pointer;
+}
+
+${sel(b("trackShadow"))} {
+  fill: none;
+  stroke: rgba(0, 0, 0, 0.42);
+  stroke-width: 72;
+}
+
+${sel(b("track"))} {
+  fill: rgba(15, 23, 42, 0.42);
+  stroke: rgba(226, 232, 240, 0.16);
+  stroke-width: 36;
+}
+
+${sel(b("sector"))} {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.9);
+  stroke-linecap: round;
+  stroke-width: 36;
+}
+
+${sel(b("pointerSpin"))} {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  transform-origin: center center;
+}
+
+${sel(b("pointerSpin", { spinning: true }))} {
+  animation-name: qte-pointer-spin;
+  animation-duration: var(--qte-duration, 1800ms);
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+${sel(b("pointerSpin", { paused: true }))} {
+  animation-play-state: paused;
+}
+
+${sel(b("pointer"))} {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: ${getVneLength(96)};
+  height: ${getVneLength(96)};
+  border-radius: 50%;
+  background: #ffffff;
+  filter: drop-shadow(0 0 ${getVneLength(12)} rgba(0, 0, 0, 0.3));
+  transform: translate(-50%, -50%) translateY(${getVneLength(-480)});
+}
+
+${sel(b("status"))} {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  width: ${getVneLength(528)};
+  text-align: center;
+  pointer-events: none;
+  color: #ffffff;
+  font-size: ${getVneLength(72)};
+  font-weight: 900;
+}
+`;
+
+injectStyles(CSS);

package/src/view/index.tsx

@@ -0,0 +1,111 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { PositionBox, Screen, createRenderFunc, useCallback, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { QtePluginConstants, QtePluginEvents, QtePluginParams, QtePluginSettings } from "../types.js";
+import type { QtePluginControllerState } from "../utils/qte.js";
+import { percentToDegrees } from "../utils/qte.js";
+import { b } from "./index.styles.js";
+
+const CIRCLE_SIZE = 1200;
+const CENTER = CIRCLE_SIZE / 2;
+const RADIUS = 480;
+
+type QteComponentProps = ReactComponentProps<QtePluginEvents, QtePluginConstants, QtePluginSettings, QtePluginParams, QtePluginControllerState>;
+
+const polarToCartesian = (angle: number, radius: number) => {
+  const radians = ((angle - 90) * Math.PI) / 180;
+
+  return { x: CENTER + radius * Math.cos(radians), y: CENTER + radius * Math.sin(radians) };
+};
+
+const describeArc = (sectorStart: number, sectorWidth: number) => {
+  const start = polarToCartesian(sectorStart + sectorWidth, RADIUS);
+  const end = polarToCartesian(sectorStart, RADIUS);
+  const largeArcFlag = sectorWidth <= 180 ? "0" : "1";
+
+  return ["M", start.x, start.y, "A", RADIUS, RADIUS, 0, largeArcFlag, 0, end.x, end.y].join(" ");
+};
+
+const Qte = ({ store, onMount, emit, EVENTS, PARAMS }: QteComponentProps) => {
+  const {
+    isShow = false,
+    isForce = false,
+    phase = "",
+    result = "",
+    item = null,
+    locs = {},
+  } = useStoreState<QtePluginControllerState>(store, onMount);
+
+  const isRealForce = useIsForceHook(isForce);
+  const propsView = PARAMS.QTE_VIEW.VIEW_PROPS;
+  const transition = isRealForce ? 0 : PARAMS.QTE_VIEW.TRANSITION;
+  const introTransition = isRealForce ? 0 : Math.max(PARAMS.QTE_VIEW.TRANSITION - PARAMS.QTE_VIEW.INITIAL, 0);
+  const duration = item?.duration ?? 0;
+
+  const start = item?.start ?? 0;
+  const size = item?.size ?? 0;
+  const sectorStart = percentToDegrees(start);
+  const sectorWidth = percentToDegrees(size);
+  const sectorPath = useMemo(() => describeArc(sectorStart, sectorWidth), [sectorStart, sectorWidth]);
+
+  const isPointerSpinning = phase === "active" || phase === "resolved" || phase === "outro";
+  const isPointerPaused = phase === "resolved" || phase === "outro";
+
+  const onDialClick = useCallback(() => void emit(EVENTS.QTE_VIEW.ACTION), [emit, EVENTS.QTE_VIEW.ACTION]);
+
+  const propsScreen = useMemo(
+    () => ({ ...propsView.screen, isDisableAutoread: true, isIgnoreOnScreenshot: true, isShow, isForce: isRealForce, transition }),
+    [isShow, isRealForce, propsView.screen, transition],
+  );
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...propsView.position}>
+        <div
+          className={b("shell", { phase })}
+          style={{ ["--qte-intro-transition" as string]: `${introTransition}ms` }}
+        >
+          <div className={b("arena")}>
+            <svg
+              className={b("dial")}
+              viewBox={`0 0 ${CIRCLE_SIZE} ${CIRCLE_SIZE}`}
+              onClick={onDialClick}
+            >
+              <circle
+                className={b("trackShadow")}
+                cx={CENTER}
+                cy={CENTER}
+                r={RADIUS}
+              />
+              <circle
+                className={b("track")}
+                cx={CENTER}
+                cy={CENTER}
+                r={RADIUS}
+              />
+              <path
+                className={b("sector")}
+                d={sectorPath}
+              />
+            </svg>
+            <div
+              className={b("pointerSpin", { spinning: isPointerSpinning, paused: isPointerPaused })}
+              style={{ ["--qte-duration" as string]: `${duration}ms` }}
+            >
+              <div className={b("pointer")} />
+            </div>
+            <div
+              className={b("status")}
+              aria-live="polite"
+            >
+              {locs[result] ?? ""}
+            </div>
+          </div>
+        </div>
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<QtePluginControllerState> = createRenderFunc(Qte);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules", "src/tests"]
+}