48 lines
918 B
JavaScript
48 lines
918 B
JavaScript
|
import {useArgs} from '@storybook/preview-api';
|
||
|
|
import {fn} from '@storybook/test';
|
||
|
|
|
||
|
|
import Hotbar from '@/components/hotbar.jsx';
|
||
|
|
|
||
|
|
import DomDecorator from './dom-decorator.jsx';
|
||
|
|
|
||
|
|
import potion from '/assets/potion.png?url';
|
||
|
|
|
||
|
|
const slots = Array(10).fill({});
|
||
|
|
slots[2] = {image: potion, qty: 24};
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: 'Dom/Inventory/Hotbar',
|
||
|
|
component: Hotbar,
|
||
|
|
decorators: [
|
||
|
|
(Hotbar, ctx) => {
|
||
|
|
const [, updateArgs] = useArgs();
|
||
|
|
const {onActivate} = ctx.args;
|
||
|
|
ctx.args.onActivate = (i) => {
|
||
|
|
updateArgs({active: i});
|
||
|
|
if (onActivate) {
|
||
|
|
onActivate(i);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Hotbar();
|
||
|
|
},
|
||
|
|
DomDecorator(),
|
||
|
|
],
|
||
|
|
tags: ['autodocs'],
|
||
|
|
args: {
|
||
|
|
active: 0,
|
||
|
|
onActivate: fn(),
|
||
|
|
slots,
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
active: {
|
||
|
|
control: {
|
||
|
|
type: 'number',
|
||
|
|
min: 0,
|
||
|
|
max: 9,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Default = {};
|