85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
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);
|
|
}
|
|
});
|