drbenway / dungeons-and-doodles Goto Github PK

Accpentace criteria:

a working local setup that can generate a demo, show a storybook for hello-world, running unit tests

as a developer I want to have an inventory component so that I can give my character some items

acceptance criteria

• has an x property to indicate how many slots the inventory has on the x access
• has an y property to indicate how many rows with slots the inventory item has
• it uses css grid and has elements for each slot with a custom background a border color and a rounded border
• has a class to show an empty slot should have the option to overwrite this if the slot contains an item

not sure if this will be Lerna or yarn worspace but it should support a mono repo.

maybe have a look at ING lion components or material webcomponenents

GIVEN I use the spritesheet component
THEN I should have the option to style it via css variables

Acceptance criteria:

• add --dnd-spritesheet-border
• add ui tests to check this works
• add info in storybook how to style

Given I use the component
THEN I should have the option to specify the number of sprites on x and y
AND I should have the option to pick a slot nr for the sprite I want to show

Acceptance criteria:

• src attribute for an image/sprite url
• slotsX attribute (Int)
• slotsY attribute (Int)
• slot attribute (Int) => the sprite part you show
• unit tests
• UI tests
• storybook explaining the options
• a working demo
• pushed to npm @dnd/spritesheet

working setup to test componentes on different platforms.

think cypress

support Edge, FF, Chrome, Brave.

mobile is for later

make sure that a successful build publishes the storybooks to pages

As a developer I want to have a component that can loop over animations so that i can make interactive icons and portraits

acceptance criteria:

• takes in a sprite sheet
• has an x an y property so we can indicate how many frames are in the sheet
• only loops horizontal
• has a steps property that indicates how many frames we will loop during one second (css steps)

• has a title
• can be draggged
• can be transparent