diff --git a/stories/dom-decorator.jsx b/stories/dom-decorator.jsx index 1d989b8..60cc1af 100644 --- a/stories/dom-decorator.jsx +++ b/stories/dom-decorator.jsx @@ -1,6 +1,6 @@ import {useEffect, useRef, useState} from 'react'; -import Dom from '@/components/dom.jsx'; +import Dom from '@/react-components/dom.jsx'; import {RESOLUTION} from '@/constants.js'; function Decorator({children, style}) { @@ -26,6 +26,7 @@ function Decorator({children, style}) { ref={ref} style={{ backgroundColor: '#1099bb', + flexDirection: 'column', opacity: 0 === scale ? 0 : 1, position: 'relative', height: `calc(${RESOLUTION.y}px * ${scale})`, diff --git a/stories/hotbar.stories.js b/stories/hotbar.stories.js index e6dfad9..cd301d3 100644 --- a/stories/hotbar.stories.js +++ b/stories/hotbar.stories.js @@ -1,14 +1,12 @@ import {useArgs} from '@storybook/preview-api'; import {fn} from '@storybook/test'; -import Hotbar from '@/components/hotbar.jsx'; +import Hotbar from '@/react-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}; +slots[2] = {qty: 24, source: '/assets/potion'}; export default { title: 'Dom/Inventory/Hotbar', @@ -25,7 +23,12 @@ export default { }; return Hotbar(); }, - DomDecorator(), + DomDecorator({ + style: { + display: 'flex', + flexDirection: 'column', + }, + }), ], tags: ['autodocs'], args: { diff --git a/stories/slot.stories.js b/stories/slot.stories.js index f99668a..088711d 100644 --- a/stories/slot.stories.js +++ b/stories/slot.stories.js @@ -1,9 +1,7 @@ -import Slot from '@/components/slot.jsx'; +import Slot from '@/react-components/slot.jsx'; import DomDecorator from './dom-decorator.jsx'; -import potion from '/assets/potion.png?url'; - export default { title: 'Dom/Inventory/Slot', component: Slot, @@ -33,7 +31,7 @@ export default { }, }, args: { - image: potion, + source: '/assets/potion', }, };