initial

src/stories/BlurSymbolsSystem.stories.ts

@@ -0,0 +1,84 @@
+import { Assets, Ticker } from 'pixi.js';
+import { Meta, PixiStory, StoryFn } from '@pixi/storybook-renderer';
+import ReelsMachine from 'src/slotMachines/ReelsMachine';
+import { argTypes, getDefaultArgs } from 'src/stories/utils/argTypes';
+import { createScreenInputMap } from 'src/stories/utils/createScreenInputMap';
+import MachineContainer from 'src/stories/utils/MachineContainer';
+import { centerView } from 'src/stories/utils/resize';
+import MockSystem from 'src/systems/MockSystem';
+import BlurSymbolsSystem, { BlurSymbolsSystemSettings } from 'src/systems/BlurSymbolsSystem';
+import MaskingSystem from 'src/systems/MaskingSystem';
+import { STATES } from 'src/states/ClassicReelsStateMachine';
+import { SlotMachineConfig } from 'src/types/SlotMachineConfig';
+
+const args = {
+    velocityX: 0,
+    velocityY: -50,
+    kernelSize: 15,
+    offset: 7,
+};
+
+const meta: Meta<typeof BlurSymbolsSystem> = {
+    title: 'Systems/BlurSymbolsSystem',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            story: {
+                height: 600,
+            },
+            description: {
+                component: 'Adjust the blur filter velocity, kernel size, and offset to preview motion blur strength while the reels spin. The story mirrors the standard machine boot flow and calls `setSettings` so designers can iterate on blur intensity in real time.',
+            },
+        },
+    },
+    argTypes: argTypes(args),
+    args: getDefaultArgs(args),
+};
+
+export default meta;
+
+export const BlurSymbolsSystemStory: StoryFn<typeof args> = (_params, context) => new PixiStory({
+    context,
+    init: async (view) =>
+    {
+        Assets.reset();
+        await Assets.init({
+            manifest: 'area69/manifest.json',
+        });
+        await Assets.loadBundle('configs');
+        await Assets.loadBundle('symbols');
+
+        const config: SlotMachineConfig = Assets.get('slot_machine_config');
+        const machine = new ReelsMachine(config);
+        machine.systems.masking = new MaskingSystem(machine);
+        machine.stateMachine.states[STATES.SPINNING].systems.push('masking');
+        const container = new MachineContainer(machine, false);
+
+        view.addChild(container);
+        context.machine = machine;
+        machine.systems.blockExitState = new MockSystem(machine);
+        machine.inputs.initMap = createScreenInputMap(config);
+        machine.inputs.screenMap = createScreenInputMap(config);
+
+        const blurSettings: Partial<BlurSymbolsSystemSettings> = {
+            velocity: [_params.velocityX, _params.velocityY],
+            kernelSize: _params.kernelSize,
+            offset: _params.offset,
+        };
+        (machine.systems.blurSymbols as BlurSymbolsSystem).setSettings(blurSettings);
+
+        machine.inputs.spin = true;
+
+        machine.inputs.blockExitState = true;
+        setTimeout(() =>
+        {
+            machine.inputs.blockExitState = false;
+        }, 250);
+        centerView(view);
+    },
+    resize: centerView,
+    update: () =>
+    {
+        context.machine && context.machine.update(Ticker.shared.deltaMS);
+    }
+});