From bacd7878ce4df034634e2081aa9c2fd552b1802f Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Mon, 28 Oct 2024 15:33:28 +0000 Subject: [PATCH 1/2] Add Content Fitting Mode Option on Fancy Button --- src/FancyButton.ts | 70 +++++++++++++++++-- .../FancyButtonNineSliceSprite.stories.ts | 5 +- 2 files changed, 69 insertions(+), 6 deletions(-) diff --git a/src/FancyButton.ts b/src/FancyButton.ts index 04177aa..a5817d9 100644 --- a/src/FancyButton.ts +++ b/src/FancyButton.ts @@ -53,6 +53,14 @@ type ViewsInput = BasicViewsInput & { icon?: ButtonView; }; +type ContentFittingMode = + // Fits the text/icon content inside the button. + | 'default' + // Fill the button with the text/icon content, scaling it up to fill the view space with padding accounted for. + | 'fill' + // Only apply the default scaling and anchoring, without constraining to the button view's dimensions. + | 'none'; + export type ButtonOptions = ViewsInput & { padding?: number; scale?: number; @@ -68,6 +76,9 @@ export type ButtonOptions = ViewsInput & { defaultIconAnchor?: Pos | number; animations?: StateAnimations; nineSliceSprite?: [number, number, number, number]; + contentFittingMode?: ContentFittingMode; + + /** @deprecated refer to contentFittingMode instead */ ignoreRefitting?: boolean; }; @@ -413,12 +424,29 @@ export class FancyButton extends ButtonContainer if (activeView) { - if (!this.options?.ignoreRefitting) + if (!this.options.ignoreRefitting) { this._views.textView.scale.set(this._defaultTextScale.x, this._defaultTextScale.y); } - fitToView(activeView, this._views.textView, this.padding, false); + if (this.contentFittingMode === 'default') + { + fitToView(activeView, this._views.textView, this.padding, false); + } + + if (this.contentFittingMode === 'fill') + { + // reset to base dimensions for calculations + this._views.textView.scale.set(1); + + const availableWidth = activeView.width - (this.padding * 2); + const availableHeight = activeView.height - (this.padding * 2); + const targetScaleX = availableWidth / this._views.textView.width; + const targetScaleY = availableHeight / this._views.textView.height; + const scale = Math.min(targetScaleX, targetScaleY); + + this._views.textView.scale.set(scale * this._defaultTextScale.x, scale * this._defaultTextScale.y); + } this._views.textView.x = activeView.x + (activeView.width / 2); this._views.textView.y = activeView.y + (activeView.height / 2); @@ -447,14 +475,31 @@ export class FancyButton extends ButtonContainer return; } - if (!this.options?.ignoreRefitting) + if (!this.options.ignoreRefitting) { this._views.iconView.scale.set(this._defaultIconScale.x, this._defaultIconScale.y); } - const { x: anchorX, y: anchorY } = this._defaultIconAnchor; + if (this.contentFittingMode === 'default') + { + fitToView(activeView, this._views.iconView, this.padding, false); + } + + if (this.contentFittingMode === 'fill') + { + // reset to base dimensions for calculations + this._views.iconView.scale.set(1); + + const availableWidth = activeView.width - (this.padding * 2); + const availableHeight = activeView.height - (this.padding * 2); + const targetScaleX = availableWidth / this._views.iconView.width; + const targetScaleY = availableHeight / this._views.iconView.height; + const scale = Math.min(targetScaleX, targetScaleY); - fitToView(activeView, this._views.iconView, this.padding, false); + this._views.iconView.scale.set(scale * this._defaultIconScale.x, scale * this._defaultIconScale.y); + } + + const { x: anchorX, y: anchorY } = this._defaultIconAnchor; if ('anchor' in this._views.iconView) { @@ -509,6 +554,21 @@ export class FancyButton extends ButtonContainer this.adjustTextView(this.state); } + /** + * Sets the fitting mode for the button's content. + * @param {ContentFittingMode} mode - fitting mode type. + */ + set contentFittingMode(mode: ContentFittingMode) + { + this.options.contentFittingMode = mode; + } + + /** Returns the fitting mode for the button's content, defaulting to 'default'. */ + get contentFittingMode(): ContentFittingMode + { + return this.options.contentFittingMode ?? 'default'; + } + /** * Sets the default view of the button. * @param { string | Container } view - string (path to the image) or a Container-based view diff --git a/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts index 7f16343..cb752e0 100644 --- a/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts +++ b/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts @@ -24,10 +24,11 @@ const args = { anchorY: 0.5, animationDuration: 100, disabled: false, + contentFittingMode: ["default", "fill", "none"], onPress: action("button was pressed! (tap or click!)"), }; -export const UseNineSliceSprite: StoryFn = ( +export const UseNineSliceSprite: StoryFn = ( { text, textColor, @@ -45,6 +46,7 @@ export const UseNineSliceSprite: StoryFn = ( defaultTextAnchorY, defaultIconAnchorX, defaultIconAnchorY, + contentFittingMode, }, context, ) => @@ -98,6 +100,7 @@ export const UseNineSliceSprite: StoryFn = ( duration: animationDuration, }, }, + contentFittingMode, }); button.iconView = new MaskedFrame({ From a937ac3896d6c55155471a428f9ec394114a13f4 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Mon, 28 Oct 2024 15:50:07 +0000 Subject: [PATCH 2/2] Example lint fixes --- .../button/ButtonContainerSprite.stories.ts | 101 ++--- src/stories/button/ButtonGraphics.stories.ts | 97 ++--- src/stories/button/ButtonSprite.stories.ts | 206 ++++++----- .../checkbox/CheckBoxGraphics.stories.ts | 163 +++++---- src/stories/checkbox/CheckBoxHTML.stories.ts | 151 ++++---- .../checkbox/CheckBoxSprite.stories.ts | 109 +++--- .../FancyButtonBitmapText.stories.ts | 209 +++++------ .../FancyButtonDynamicUpdate.stories.ts | 291 +++++++-------- .../FancyButtonGraphics.stories.ts | 345 +++++++++--------- .../FancyButtonHTMLText.stories.ts | 193 +++++----- .../fancyButton/FancyButtonIcon.stories.ts | 265 +++++++------- .../FancyButtonNineSliceSprite.stories.ts | 305 ++++++++-------- .../fancyButton/FancyButtonSprite.stories.ts | 193 +++++----- .../FancyButtonTextLink.stories.ts | 110 +++--- src/stories/input/InputGraphics.stories.ts | 191 +++++----- .../input/InputNineSliceSprite.stories.ts | 159 ++++---- src/stories/input/InputSprite.stories.ts | 149 ++++---- src/stories/list/ListGraphics.stories.ts | 178 ++++----- src/stories/list/ListSprite.stories.ts | 194 +++++----- .../MaskedFrameGraphics.stories.ts | 90 ++--- .../maskedFrame/MaskedFrameSprite.stories.ts | 62 ++-- .../ProgressBarCircular.stories.ts | 130 +++---- .../ProgressBarGraphics.stories.ts | 189 +++++----- .../ProgressBarNineSliceSprite.stories.ts | 162 ++++---- .../progressBar/ProgressBarSprite.stories.ts | 142 +++---- src/stories/radio/RadioGraphics.stories.ts | 260 ++++++------- src/stories/radio/RadioSprite.stories.ts | 127 +++---- .../ScrollBoxDynamicDimensions.stories.ts | 154 ++++---- .../scrollBox/ScrollBoxGraphics.stories.ts | 176 ++++----- .../scrollBox/ScrollBoxProximity.stories.ts | 217 +++++------ .../scrollBox/ScrollBoxSprite.stories.ts | 232 ++++++------ src/stories/select/SelectGraphics.stories.ts | 268 +++++++------- src/stories/select/SelectHTMLText.stories.ts | 256 ++++++------- src/stories/select/SelectSprite.stories.ts | 159 ++++---- .../slider/DoubleSliderGraphics.stories.ts | 214 +++++------ .../DoubleSliderNineSliceSprite.stories.ts | 152 ++++---- .../slider/DoubleSliderSprite.stories.ts | 119 +++--- src/stories/slider/SliderGraphics.stories.ts | 199 +++++----- .../slider/SliderNineSliceSprite.stories.ts | 150 ++++---- src/stories/slider/SliderSprite.stories.ts | 125 +++---- src/stories/switcher/Switcher.stories.ts | 80 ++-- 41 files changed, 3726 insertions(+), 3546 deletions(-) diff --git a/src/stories/button/ButtonContainerSprite.stories.ts b/src/stories/button/ButtonContainerSprite.stories.ts index 4ffd711..116b2bb 100644 --- a/src/stories/button/ButtonContainerSprite.stories.ts +++ b/src/stories/button/ButtonContainerSprite.stories.ts @@ -1,59 +1,60 @@ -import { Container, Graphics, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { ButtonContainer } from "../../Button"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Container, Graphics, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { ButtonContainer } from '../../Button'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - color: "#A5E24D", - size: 150, - radius: 150, - disabled: false, - action: action("Button"), + color: '#A5E24D', + size: 150, + radius: 150, + disabled: false, + action: action('Button'), }; export const ButtonContainerSprite: StoryFn = ( - { size, color, disabled, radius, action }, - context, -) => - new PixiStory({ + { size, color, disabled, radius, action }, context, - init(view) { - // Component usage !!! - const button = new ButtonContainer(); - - button.enabled = !disabled; - - button.onPress.connect(() => action("onPress")); - button.onDown.connect(() => action("onDown")); - button.onUp.connect(() => action("onUp")); - button.onHover.connect(() => action("onHover")); - button.onOut.connect(() => action("onOut")); - button.onUpOut.connect(() => action("onUpOut")); - - const buttonView = new Container(); - const buttonBg = new Graphics() - .roundRect(0, 0, size, size, radius) - .fill(color); - const text = new Text({ text: "🤙", style: { fontSize: 70 } }); - - text.anchor.set(0.5); - text.x = buttonBg.width / 2; - text.y = buttonBg.height / 2; - - buttonView.addChild(buttonBg, text); - - button.addChild(buttonView); - view.addChild(button); - - centerElement(button); - }, - resize: (view) => centerElement(view.children[0]), - }); +) => + new PixiStory({ + context, + init(view) + { + // Component usage !!! + const button = new ButtonContainer(); + + button.enabled = !disabled; + + button.onPress.connect(() => action('onPress')); + button.onDown.connect(() => action('onDown')); + button.onUp.connect(() => action('onUp')); + button.onHover.connect(() => action('onHover')); + button.onOut.connect(() => action('onOut')); + button.onUpOut.connect(() => action('onUpOut')); + + const buttonView = new Container(); + const buttonBg = new Graphics() + .roundRect(0, 0, size, size, radius) + .fill(color); + const text = new Text({ text: '🤙', style: { fontSize: 70 } }); + + text.anchor.set(0.5); + text.x = buttonBg.width / 2; + text.y = buttonBg.height / 2; + + buttonView.addChild(buttonBg, text); + + button.addChild(buttonView); + view.addChild(button); + + centerElement(button); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Button/Button Container Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Button/Button Container Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/button/ButtonGraphics.stories.ts b/src/stories/button/ButtonGraphics.stories.ts index 9526a1c..d82eccf 100644 --- a/src/stories/button/ButtonGraphics.stories.ts +++ b/src/stories/button/ButtonGraphics.stories.ts @@ -1,57 +1,58 @@ -import { Container, Graphics, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Button } from "../../Button"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Container, Graphics, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Button } from '../../Button'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - color: "#A5E24D", - size: 150, - radius: 150, - disabled: false, - action: action("Button"), + color: '#A5E24D', + size: 150, + radius: 150, + disabled: false, + action: action('Button'), }; export const UseGraphics: StoryFn = ( - { size, color, disabled, radius, action }, - context, -) => - new PixiStory({ + { size, color, disabled, radius, action }, context, - init: (view) => { - const buttonView = new Container(); - const buttonBg = new Graphics() - .roundRect(0, 0, size, size, radius) - .fill(color); - const text = new Text({ text: "🤙", style: { fontSize: 70 } }); - - text.anchor.set(0.5); - text.x = buttonBg.width / 2; - text.y = buttonBg.height / 2; - - buttonView.addChild(buttonBg, text); - - // Component usage !!! - const button = new Button(buttonView); - - button.enabled = !disabled; - - button.onPress.connect(() => action("onPress")); - button.onDown.connect(() => action("onDown")); - button.onUp.connect(() => action("onUp")); - button.onHover.connect(() => action("onHover")); - button.onOut.connect(() => action("onOut")); - button.onUpOut.connect(() => action("onUpOut")); - view.addChild(buttonView); - - centerElement(buttonView); - }, - resize: (view) => centerElement(view.children[0]), - }); +) => + new PixiStory({ + context, + init: (view) => + { + const buttonView = new Container(); + const buttonBg = new Graphics() + .roundRect(0, 0, size, size, radius) + .fill(color); + const text = new Text({ text: '🤙', style: { fontSize: 70 } }); + + text.anchor.set(0.5); + text.x = buttonBg.width / 2; + text.y = buttonBg.height / 2; + + buttonView.addChild(buttonBg, text); + + // Component usage !!! + const button = new Button(buttonView); + + button.enabled = !disabled; + + button.onPress.connect(() => action('onPress')); + button.onDown.connect(() => action('onDown')); + button.onUp.connect(() => action('onUp')); + button.onHover.connect(() => action('onHover')); + button.onOut.connect(() => action('onOut')); + button.onUpOut.connect(() => action('onUpOut')); + view.addChild(buttonView); + + centerElement(buttonView); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Button/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Button/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index f5ffb21..c3d9687 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -1,113 +1,125 @@ -import { Container, isMobile, Sprite, Text, Texture } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Button } from "../../Button"; -import { centerView } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { Container, isMobile, Sprite, Text, Texture } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Button } from '../../Button'; +import { centerView } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Click me!", - textColor: "#FFFFFF", - disabled: false, - action: action("Button"), + text: 'Click me!', + textColor: '#FFFFFF', + disabled: false, + action: action('Button'), }; -export class SpriteButton extends Button { - private buttonView = new Container(); - private textView: Text; - private buttonBg = new Sprite(); - private action: (event: string) => void; - - constructor(props: { - text: string; - textColor: string; - disabled: boolean; - action: (event: string) => void; - }) { - super(/* we can set a view for button later */); - - this.view = this.buttonView; - - preload([`button.png`, `button_hover.png`, `button_pressed.png`]).then( - () => { - this.buttonBg.texture = Texture.from("button.png"); - - this.buttonBg.anchor.set(0.5); - - this.textView = new Text({ - text: props.text, - style: { - ...defaultTextStyle, - fontSize: 40, - fill: props.textColor, - }, - }); - this.textView.y = -10; - this.textView.anchor.set(0.5); - - this.buttonView.addChild(this.buttonBg, this.textView); - - this.enabled = !props.disabled; - }, - ); - - this.action = props.action; - } - - override down() { - this.buttonBg.texture = Texture.from("button_pressed.png"); - this.action("down"); - } - - override up() { - this.buttonBg.texture = isMobile.any - ? Texture.from("button.png") - : Texture.from("button_hover.png"); - - this.action("up"); - } - - override upOut() { - this.buttonBg.texture = Texture.from("button.png"); - this.action("upOut"); - } - - override out() { - if (!this.isDown) { - this.buttonBg.texture = Texture.from("button.png"); +export class SpriteButton extends Button +{ + private buttonView = new Container(); + private textView: Text; + private buttonBg = new Sprite(); + private action: (event: string) => void; + + constructor(props: { + text: string; + textColor: string; + disabled: boolean; + action: (event: string) => void; + }) + { + super(/* we can set a view for button later */); + + this.view = this.buttonView; + + preload([`button.png`, `button_hover.png`, `button_pressed.png`]).then( + () => + { + this.buttonBg.texture = Texture.from('button.png'); + + this.buttonBg.anchor.set(0.5); + + this.textView = new Text({ + text: props.text, + style: { + ...defaultTextStyle, + fontSize: 40, + fill: props.textColor, + }, + }); + this.textView.y = -10; + this.textView.anchor.set(0.5); + + this.buttonView.addChild(this.buttonBg, this.textView); + + this.enabled = !props.disabled; + }, + ); + + this.action = props.action; } - this.action("out"); - } - override press() { - this.action("onPress"); - } + override down() + { + this.buttonBg.texture = Texture.from('button_pressed.png'); + this.action('down'); + } + + override up() + { + this.buttonBg.texture = isMobile.any + ? Texture.from('button.png') + : Texture.from('button_hover.png'); + + this.action('up'); + } + + override upOut() + { + this.buttonBg.texture = Texture.from('button.png'); + this.action('upOut'); + } + + override out() + { + if (!this.isDown) + { + this.buttonBg.texture = Texture.from('button.png'); + } + this.action('out'); + } + + override press() + { + this.action('onPress'); + } - override hover() { - if (!this.isDown) { - this.buttonBg.texture = Texture.from("button_hover.png"); + override hover() + { + if (!this.isDown) + { + this.buttonBg.texture = Texture.from('button_hover.png'); + } + this.action('hover'); } - this.action("hover"); - } } export const UseSprite: StoryFn = (params, context) => - new PixiStory({ - context, - init: (view) => { - const buttonView = new SpriteButton(params); + new PixiStory({ + context, + init: (view) => + { + const buttonView = new SpriteButton(params); - view.addChild(buttonView.view); + view.addChild(buttonView.view); - centerView(view); - }, - resize: centerView, - }); + centerView(view); + }, + resize: centerView, + }); export default { - title: "Components/Button/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Button/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/checkbox/CheckBoxGraphics.stories.ts b/src/stories/checkbox/CheckBoxGraphics.stories.ts index f8a0add..19242c5 100644 --- a/src/stories/checkbox/CheckBoxGraphics.stories.ts +++ b/src/stories/checkbox/CheckBoxGraphics.stories.ts @@ -1,94 +1,97 @@ -import { Graphics } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { CheckBox } from "../../CheckBox"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { getColor } from "../utils/color"; -import { action } from "@storybook/addon-actions"; +import { Graphics } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { CheckBox } from '../../CheckBox'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { getColor } from '../utils/color'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Checkbox", - textColor: "#FFFFFF", - color: "#F1D583", - borderColor: "#DCB000", - fillBorderColor: "#FFFFFF", - fillColor: "#A5E24D", - width: 50, - height: 50, - radius: 11, - amount: 3, - checked: false, - onPress: action("Checkbox"), + text: 'Checkbox', + textColor: '#FFFFFF', + color: '#F1D583', + borderColor: '#DCB000', + fillBorderColor: '#FFFFFF', + fillColor: '#A5E24D', + width: 50, + height: 50, + radius: 11, + amount: 3, + checked: false, + onPress: action('Checkbox'), }; export const UseGraphics: StoryFn = ( - { - text, - amount, - checked, + { + text, + amount, + checked, - textColor, - borderColor, - fillBorderColor, - fillColor, - color, - width, - height, - radius, + textColor, + borderColor, + fillBorderColor, + fillColor, + color, + width, + height, + radius, - onPress, - }, - context, -) => - new PixiStory({ + onPress, + }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); - for (let i = 0; i < amount; i++) { - // Component usage !!! - const checkBox = new CheckBox({ - text: `${text} ${i + 1}`, - checked, - style: { - unchecked: new Graphics() - .roundRect(-2, -2, width + 4, height + 4, radius) - .fill(borderColor) - .roundRect(0, 0, width, height, radius) - .fill(color), - checked: new Graphics() - .roundRect(-2, -2, width + 4, height + 4, radius) - .fill(borderColor) - .roundRect(0, 0, width, height, radius) - .fill(color) - .roundRect(3, 3, width - 6, height - 6, radius) - .fill(fillBorderColor) - .roundRect(5, 5, width - 10, height - 10, radius) - .fill(fillColor), - text: { - ...defaultTextStyle, - fontSize: 22, - fill: getColor(textColor), - }, - }, - }); + for (let i = 0; i < amount; i++) + { + // Component usage !!! + const checkBox = new CheckBox({ + text: `${text} ${i + 1}`, + checked, + style: { + unchecked: new Graphics() + .roundRect(-2, -2, width + 4, height + 4, radius) + .fill(borderColor) + .roundRect(0, 0, width, height, radius) + .fill(color), + checked: new Graphics() + .roundRect(-2, -2, width + 4, height + 4, radius) + .fill(borderColor) + .roundRect(0, 0, width, height, radius) + .fill(color) + .roundRect(3, 3, width - 6, height - 6, radius) + .fill(fillBorderColor) + .roundRect(5, 5, width - 10, height - 10, radius) + .fill(fillColor), + text: { + ...defaultTextStyle, + fontSize: 22, + fill: getColor(textColor), + }, + }, + }); - checkBox.onCheck.connect((checked) => { - onPress(`checkBox ${i + 1} ${checked}`); - }); + checkBox.onCheck.connect((checked) => + { + onPress(`checkBox ${i + 1} ${checked}`); + }); - list.addChild(checkBox); - } - view.addChild(list); - centerElement(list); - }, - resize: (view) => centerElement(view.children[0]), - }); + list.addChild(checkBox); + } + view.addChild(list); + centerElement(list); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Checkbox/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Checkbox/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/checkbox/CheckBoxHTML.stories.ts b/src/stories/checkbox/CheckBoxHTML.stories.ts index d344855..23f4c25 100644 --- a/src/stories/checkbox/CheckBoxHTML.stories.ts +++ b/src/stories/checkbox/CheckBoxHTML.stories.ts @@ -1,91 +1,94 @@ -import { Graphics, HTMLText } from "pixi.js"; -import { CheckBox } from "../../CheckBox"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { getColor } from "../utils/color"; -import { action } from "@storybook/addon-actions"; +import { Graphics, HTMLText } from 'pixi.js'; +import { CheckBox } from '../../CheckBox'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { getColor } from '../utils/color'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Checkbox", - textColor: "#FFFFFF", - color: "#F1D583", - borderColor: "#DCB000", - fillBorderColor: "#FFFFFF", - fillColor: "#A5E24D", - width: 50, - height: 50, - radius: 11, - amount: 3, - checked: false, - onPress: action("Checkbox"), + text: 'Checkbox', + textColor: '#FFFFFF', + color: '#F1D583', + borderColor: '#DCB000', + fillBorderColor: '#FFFFFF', + fillColor: '#A5E24D', + width: 50, + height: 50, + radius: 11, + amount: 3, + checked: false, + onPress: action('Checkbox'), }; export const UseHtml = ({ - text, - amount, - checked, + text, + amount, + checked, - textColor, - borderColor, - fillBorderColor, - fillColor, - color, - width, - height, - radius, + textColor, + borderColor, + fillBorderColor, + fillColor, + color, + width, + height, + radius, - onPress, -}: any) => { - const view = new List({ type: "vertical", elementsMargin: 10 }); + onPress, +}: any) => +{ + const view = new List({ type: 'vertical', elementsMargin: 10 }); - color = getColor(color); - borderColor = getColor(borderColor); - fillColor = getColor(fillColor); - fillBorderColor = getColor(fillBorderColor); + color = getColor(color); + borderColor = getColor(borderColor); + fillColor = getColor(fillColor); + fillBorderColor = getColor(fillBorderColor); - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { // Component usage !!! - const checkBox = new CheckBox({ - text: `${text} ${i + 1}`, - TextClass: HTMLText, - checked, - style: { - unchecked: new Graphics() - .roundRect(-2, -2, width + 4, height + 4, radius) - .fill(borderColor) - .roundRect(0, 0, width, height, radius) - .fill(color), - checked: new Graphics() - .roundRect(-2, -2, width + 4, height + 4, radius) - .fill(borderColor) - .roundRect(0, 0, width, height, radius) - .fill(color) - .roundRect(3, 3, width - 6, height - 6, radius) - .fill(fillBorderColor) - .roundRect(5, 5, width - 10, height - 10, radius) - .fill(fillColor), - text: { - ...defaultTextStyle, - fontSize: 22, - fill: textColor, - }, - }, - }); + const checkBox = new CheckBox({ + text: `${text} ${i + 1}`, + TextClass: HTMLText, + checked, + style: { + unchecked: new Graphics() + .roundRect(-2, -2, width + 4, height + 4, radius) + .fill(borderColor) + .roundRect(0, 0, width, height, radius) + .fill(color), + checked: new Graphics() + .roundRect(-2, -2, width + 4, height + 4, radius) + .fill(borderColor) + .roundRect(0, 0, width, height, radius) + .fill(color) + .roundRect(3, 3, width - 6, height - 6, radius) + .fill(fillBorderColor) + .roundRect(5, 5, width - 10, height - 10, radius) + .fill(fillColor), + text: { + ...defaultTextStyle, + fontSize: 22, + fill: textColor, + }, + }, + }); - checkBox.onCheck.connect((checked) => { - onPress(`checkBox ${i + 1} ${checked}`); - }); + checkBox.onCheck.connect((checked) => + { + onPress(`checkBox ${i + 1} ${checked}`); + }); - view.addChild(checkBox); - } + view.addChild(checkBox); + } - return { view, resize: () => centerElement(view) }; + return { view, resize: () => centerElement(view) }; }; export default { - title: "Components/Checkbox/Use Html", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Checkbox/Use Html', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/checkbox/CheckBoxSprite.stories.ts b/src/stories/checkbox/CheckBoxSprite.stories.ts index 67f5a26..5ede0ea 100644 --- a/src/stories/checkbox/CheckBoxSprite.stories.ts +++ b/src/stories/checkbox/CheckBoxSprite.stories.ts @@ -1,68 +1,71 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { CheckBox } from "../../CheckBox"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { CheckBox } from '../../CheckBox'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "", - textColor: "#FFFFFF", - amount: 3, - checked: false, - onChange: action("Checkbox"), + text: '', + textColor: '#FFFFFF', + amount: 3, + checked: false, + onChange: action('Checkbox'), }; export const UseSprite: StoryFn = ( - { checked, onChange, amount, textColor, text }, - context, -) => - new PixiStory({ + { checked, onChange, amount, textColor, text }, context, - init: (view) => { - const list = new List({ - type: "vertical", - elementsMargin: 5, - }); +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ + type: 'vertical', + elementsMargin: 5, + }); - const assets = [`switch_off.png`, `switch_on.png`]; + const assets = [`switch_off.png`, `switch_on.png`]; - preload(assets).then(() => { - for (let i = 0; i < amount; i++) { - // Component usage !!! - const checkBox = new CheckBox({ - text: text ?? `${text} ${i + 1}`, - checked, - style: { - unchecked: `switch_off.png`, - checked: `switch_on.png`, - text: { - ...defaultTextStyle, - fontSize: 22, - fill: textColor, - }, - }, - }); + preload(assets).then(() => + { + for (let i = 0; i < amount; i++) + { + // Component usage !!! + const checkBox = new CheckBox({ + text: text ?? `${text} ${i + 1}`, + checked, + style: { + unchecked: `switch_off.png`, + checked: `switch_on.png`, + text: { + ...defaultTextStyle, + fontSize: 22, + fill: textColor, + }, + }, + }); - checkBox.onCheck.connect((checked) => - onChange(`${i + 1} ${checked}`), - ); + checkBox.onCheck.connect((checked) => + onChange(`${i + 1} ${checked}`), + ); - list.addChild(checkBox); - } + list.addChild(checkBox); + } - view.addChild(list); + view.addChild(list); - centerElement(view); - }); - }, - resize: centerElement, - }); + centerElement(view); + }); + }, + resize: centerElement, + }); export default { - title: "Components/Checkbox/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Checkbox/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/fancyButton/FancyButtonBitmapText.stories.ts b/src/stories/fancyButton/FancyButtonBitmapText.stories.ts index ef10b65..b99758f 100644 --- a/src/stories/fancyButton/FancyButtonBitmapText.stories.ts +++ b/src/stories/fancyButton/FancyButtonBitmapText.stories.ts @@ -1,120 +1,123 @@ -import { BitmapFontManager, BitmapText } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { centerView } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { BitmapFontManager, BitmapText } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { centerView } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Click me!", - textColor: "#FFFFFF", - padding: 11, - textOffsetX: 0, - textOffsetY: -7, - defaultTextScale: 0.99, - defaultTextAnchorX: 0.5, - defaultTextAnchorY: 0.5, - anchorX: 0.5, - anchorY: 0.5, - animationDuration: 100, - disabled: false, - onPress: action("button was pressed! (tap or click!)"), + text: 'Click me!', + textColor: '#FFFFFF', + padding: 11, + textOffsetX: 0, + textOffsetY: -7, + defaultTextScale: 0.99, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + anchorX: 0.5, + anchorY: 0.5, + animationDuration: 100, + disabled: false, + onPress: action('button was pressed! (tap or click!)'), }; export const UsingSpriteAndBitmapText: StoryFn = ( - { - text, - textColor, - disabled, - onPress, - padding, - textOffsetX, - textOffsetY, - defaultTextScale, - defaultTextAnchorX, - defaultTextAnchorY, - anchorX, - anchorY, - animationDuration, - }, - context, -) => - new PixiStory({ + { + text, + textColor, + disabled, + onPress, + padding, + textOffsetX, + textOffsetY, + defaultTextScale, + defaultTextAnchorX, + defaultTextAnchorY, + anchorX, + anchorY, + animationDuration, + }, context, - init: (view) => { - const assets = [ - `button.png`, - `button_hover.png`, - `button_pressed.png`, - `button_disabled.png`, - ]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [ + `button.png`, + `button_hover.png`, + `button_pressed.png`, + `button_disabled.png`, + ]; - preload(assets).then(() => { - BitmapFontManager.install({ - name: "TitleFont", - style: { - ...defaultTextStyle, - fill: textColor || defaultTextStyle.fill, - }, - }); + preload(assets).then(() => + { + BitmapFontManager.install({ + name: 'TitleFont', + style: { + ...defaultTextStyle, + fill: textColor || defaultTextStyle.fill, + }, + }); - const title = new BitmapText({ - text, - style: { - fontFamily: "TitleFont", - fontSize: defaultTextStyle.fontSize, - }, - }); + const title = new BitmapText({ + text, + style: { + fontFamily: 'TitleFont', + fontSize: defaultTextStyle.fontSize, + }, + }); - // Component usage !!! - const button = new FancyButton({ - defaultView: `button.png`, - hoverView: `button_hover.png`, - pressedView: `button_pressed.png`, - disabledView: `button_disabled.png`, - text: title, - padding, - textOffset: { x: textOffsetX, y: textOffsetY }, - defaultTextScale, - defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, - animations: { - hover: { - props: { - scale: { x: 1.03, y: 1.03 }, - y: 0, - }, - duration: animationDuration, - }, - pressed: { - props: { - scale: { x: 0.9, y: 0.9 }, - y: 10, - }, - duration: animationDuration, - }, - }, - }); + // Component usage !!! + const button = new FancyButton({ + defaultView: `button.png`, + hoverView: `button_hover.png`, + pressedView: `button_pressed.png`, + disabledView: `button_disabled.png`, + text: title, + padding, + textOffset: { x: textOffsetX, y: textOffsetY }, + defaultTextScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, + animations: { + hover: { + props: { + scale: { x: 1.03, y: 1.03 }, + y: 0, + }, + duration: animationDuration, + }, + pressed: { + props: { + scale: { x: 0.9, y: 0.9 }, + y: 10, + }, + duration: animationDuration, + }, + }, + }); - button.anchor.set(anchorX, anchorY); + button.anchor.set(anchorX, anchorY); - if (disabled) { - button.enabled = false; - } + if (disabled) + { + button.enabled = false; + } - button.onPress.connect(onPress); + button.onPress.connect(onPress); - centerView(view); + centerView(view); - view.addChild(button); - }); - }, - resize: centerView, - }); + view.addChild(button); + }); + }, + resize: centerView, + }); export default { - title: "Components/FancyButton/Using Sprite And BitmapText", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/FancyButton/Using Sprite And BitmapText', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts index 098ae5c..8843efb 100644 --- a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts +++ b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts @@ -1,153 +1,156 @@ -import { Sprite, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { centerView } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { randomItem } from "../utils/random"; -import { action } from "@storybook/addon-actions"; +import { Sprite, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { centerView } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { randomItem } from '../utils/random'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Click me!", - textColor: "#FFFFFF", - defaultTextScale: 0.99, - defaultIconScale: 0.2, - defaultTextAnchorX: 0.5, - defaultTextAnchorY: 0.5, - defaultIconAnchorX: 0.5, - defaultIconAnchorY: 0.5, - padding: 11, - anchorX: 0.5, - anchorY: 0.5, - disabled: false, - onPress: action("button was pressed! (tap or click!)"), + text: 'Click me!', + textColor: '#FFFFFF', + defaultTextScale: 0.99, + defaultIconScale: 0.2, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + defaultIconAnchorX: 0.5, + defaultIconAnchorY: 0.5, + padding: 11, + anchorX: 0.5, + anchorY: 0.5, + disabled: false, + onPress: action('button was pressed! (tap or click!)'), }; export const DynamicUpdate: StoryFn = ( - { - text, - textColor, - defaultTextScale, - defaultIconScale, - defaultTextAnchorX, - defaultTextAnchorY, - defaultIconAnchorX, - defaultIconAnchorY, - disabled, - onPress, - padding, - anchorX, - anchorY, - }, - context, -) => - new PixiStory({ - context, - init: (view) => { - const assets = [ - `button.png`, - `button_hover.png`, - `button_pressed.png`, - `button_disabled.png`, - ]; - const avatars = [ - `avatar-01.png`, - `avatar-02.png`, - `avatar-03.png`, - `avatar-04.png`, - `avatar-05.png`, - ]; - - preload([...assets, ...avatars]).then(() => { - // Component usage !!! - const button = new FancyButton(); - - button.defaultView = `button.png`; - button.hoverView = `button_hover.png`; - - let icon = avatars[0]; - - button.iconView = Sprite.from(icon); - button.defaultIconScale = defaultIconScale; - button.defaultIconAnchor = { - x: defaultIconAnchorX, - y: defaultIconAnchorY, - }; - button.iconOffset = { x: -100, y: -7 }; - - button.textView = new Text({ - text, - style: { - ...defaultTextStyle, - fill: textColor || defaultTextStyle.fill, - }, - }); - button.defaultTextScale = defaultTextScale; - button.defaultTextAnchor = { - x: defaultTextAnchorX, - y: defaultTextAnchorY, - }; - button.textOffset = { x: 30, y: -7 }; - - button.padding = padding; - - button.anchor.set(anchorX, anchorY); - - button.enabled = !disabled; - - button.onPress.connect(onPress); - - let currentTexture = "button_hover.png"; - - button.onPress.connect(() => { - currentTexture = randomItem( - [ - `button_hover.png`, - `button_pressed.png`, - `button_disabled.png`, - ].filter((texture) => texture !== currentTexture), - ) as string; - - button.hoverView = currentTexture; - - const texts: string[] = [ - "🤙", - "👌", - "👍", - "👏", - "👋", - "🤟", - "🤘", - "🤞", - ]; - const text = randomItem( - texts.filter((text) => text !== button.text), - ) as string; - - button.textView = new Text({ text, style: { fontSize: 70 } }); - - icon = randomItem( - avatars.filter((avatar) => avatar !== icon), - ) as string; - - const sprite = Sprite.from(icon); - - sprite.scale.set(0.2); - - button.iconView = sprite; - }); - - centerView(view); - - view.addChild(button); - }); + { + text, + textColor, + defaultTextScale, + defaultIconScale, + defaultTextAnchorX, + defaultTextAnchorY, + defaultIconAnchorX, + defaultIconAnchorY, + disabled, + onPress, + padding, + anchorX, + anchorY, }, - resize: centerView, - }); + context, +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [ + `button.png`, + `button_hover.png`, + `button_pressed.png`, + `button_disabled.png`, + ]; + const avatars = [ + `avatar-01.png`, + `avatar-02.png`, + `avatar-03.png`, + `avatar-04.png`, + `avatar-05.png`, + ]; + + preload([...assets, ...avatars]).then(() => + { + // Component usage !!! + const button = new FancyButton(); + + button.defaultView = `button.png`; + button.hoverView = `button_hover.png`; + + let icon = avatars[0]; + + button.iconView = Sprite.from(icon); + button.defaultIconScale = defaultIconScale; + button.defaultIconAnchor = { + x: defaultIconAnchorX, + y: defaultIconAnchorY, + }; + button.iconOffset = { x: -100, y: -7 }; + + button.textView = new Text({ + text, + style: { + ...defaultTextStyle, + fill: textColor || defaultTextStyle.fill, + }, + }); + button.defaultTextScale = defaultTextScale; + button.defaultTextAnchor = { + x: defaultTextAnchorX, + y: defaultTextAnchorY, + }; + button.textOffset = { x: 30, y: -7 }; + + button.padding = padding; + + button.anchor.set(anchorX, anchorY); + + button.enabled = !disabled; + + button.onPress.connect(onPress); + + let currentTexture = 'button_hover.png'; + + button.onPress.connect(() => + { + currentTexture = randomItem( + [ + `button_hover.png`, + `button_pressed.png`, + `button_disabled.png`, + ].filter((texture) => texture !== currentTexture), + ) as string; + + button.hoverView = currentTexture; + + const texts: string[] = [ + '🤙', + '👌', + '👍', + '👏', + '👋', + '🤟', + '🤘', + '🤞', + ]; + const text = randomItem( + texts.filter((text) => text !== button.text), + ) as string; + + button.textView = new Text({ text, style: { fontSize: 70 } }); + + icon = randomItem( + avatars.filter((avatar) => avatar !== icon), + ) as string; + + const sprite = Sprite.from(icon); + + sprite.scale.set(0.2); + + button.iconView = sprite; + }); + + centerView(view); + + view.addChild(button); + }); + }, + resize: centerView, + }); export default { - title: "Components/FancyButton/Dynamic Update", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/FancyButton/Dynamic Update', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/fancyButton/FancyButtonGraphics.stories.ts b/src/stories/fancyButton/FancyButtonGraphics.stories.ts index 2015b26..53ca560 100644 --- a/src/stories/fancyButton/FancyButtonGraphics.stories.ts +++ b/src/stories/fancyButton/FancyButtonGraphics.stories.ts @@ -1,188 +1,191 @@ -import { Graphics, Sprite, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { MaskedFrame } from "../../MaskedFrame"; -import { centerView } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { getColor } from "../utils/color"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { Graphics, Sprite, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { MaskedFrame } from '../../MaskedFrame'; +import { centerView } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { getColor } from '../utils/color'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Click me!", - textColor: "#FFFFFF", - color: "#A5E24D", - hoverColor: "#FEC230", - pressedColor: "#FE6048", - disabledColor: "#6E6E6E", - width: 350, - height: 350, - padding: 11, - radius: 50, - iconOffsetX: 0, - iconOffsetY: -30, - textOffsetX: 0, - textOffsetY: 140, - defaultTextScale: 0.99, - defaultIconScale: 0.99, - defaultTextAnchorX: 0.5, - defaultTextAnchorY: 0.5, - defaultIconAnchorX: 0.5, - defaultIconAnchorY: 0.5, - defaultOffsetY: 0, - hoverOffsetY: -1, - pressedOffsetY: 5, - disabledOffsetY: 0, - anchorX: 0.5, - anchorY: 0.5, - animationDuration: 100, - disabled: false, - action: action("Button"), + text: 'Click me!', + textColor: '#FFFFFF', + color: '#A5E24D', + hoverColor: '#FEC230', + pressedColor: '#FE6048', + disabledColor: '#6E6E6E', + width: 350, + height: 350, + padding: 11, + radius: 50, + iconOffsetX: 0, + iconOffsetY: -30, + textOffsetX: 0, + textOffsetY: 140, + defaultTextScale: 0.99, + defaultIconScale: 0.99, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + defaultIconAnchorX: 0.5, + defaultIconAnchorY: 0.5, + defaultOffsetY: 0, + hoverOffsetY: -1, + pressedOffsetY: 5, + disabledOffsetY: 0, + anchorX: 0.5, + anchorY: 0.5, + animationDuration: 100, + disabled: false, + action: action('Button'), }; export const UseGraphics: StoryFn = ( - { - width, - height, - radius, - text, - color, - hoverColor, - pressedColor, - disabledColor, - disabled, - padding, - anchorX, - anchorY, - textColor, - iconOffsetX, - iconOffsetY, - textOffsetX, - textOffsetY, - defaultTextScale, - defaultIconScale, - defaultTextAnchorX, - defaultTextAnchorY, - defaultIconAnchorX, - defaultIconAnchorY, - defaultOffsetY, - hoverOffsetY, - pressedOffsetY, - disabledOffsetY, - animationDuration, - action, - }, - context, -) => - new PixiStory({ + { + width, + height, + radius, + text, + color, + hoverColor, + pressedColor, + disabledColor, + disabled, + padding, + anchorX, + anchorY, + textColor, + iconOffsetX, + iconOffsetY, + textOffsetX, + textOffsetY, + defaultTextScale, + defaultIconScale, + defaultTextAnchorX, + defaultTextAnchorY, + defaultIconAnchorX, + defaultIconAnchorY, + defaultOffsetY, + hoverOffsetY, + pressedOffsetY, + disabledOffsetY, + animationDuration, + action, + }, context, - init: (view) => { - const assets = [`avatar-01.png`]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [`avatar-01.png`]; - preload(assets).then(() => { - const fill = getColor(textColor); - const target = Sprite.from(`avatar-01.png`); + preload(assets).then(() => + { + const fill = getColor(textColor); + const target = Sprite.from(`avatar-01.png`); - // Component usage !!! - const icon = new MaskedFrame({ - target, - mask: new Graphics() - .circle(target.width / 2, target.height / 2, target.width / 2) - .fill(0x000000), - borderWidth: 10, - borderColor: fill, - }); + // Component usage !!! + const icon = new MaskedFrame({ + target, + mask: new Graphics() + .circle(target.width / 2, target.height / 2, target.width / 2) + .fill(0x000000), + borderWidth: 10, + borderColor: fill, + }); - // Component usage !!! - const button = new FancyButton({ - defaultView: new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(color), - hoverView: new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(hoverColor), - pressedView: new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(pressedColor), - disabledView: new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(disabledColor), - icon, - text: new Text({ - text, - style: { - ...defaultTextStyle, - fill, - }, - }), - padding, - offset: { - default: { y: defaultOffsetY }, - hover: { y: hoverOffsetY }, - pressed: { y: pressedOffsetY }, - disabled: { y: disabledOffsetY }, - }, - textOffset: { - x: textOffsetX, - y: textOffsetY, - }, - iconOffset: { - x: iconOffsetX, - y: iconOffsetY, - }, - defaultTextScale, - defaultIconScale, - defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, - defaultIconAnchor: { x: defaultIconAnchorX, y: defaultIconAnchorY }, - animations: { - default: { - props: { - scale: { x: 1, y: 1 }, - y: defaultOffsetY, - }, - duration: animationDuration, - }, - hover: { - props: { - scale: { x: 1.03, y: 1.03 }, - y: hoverOffsetY, - }, - duration: animationDuration, - }, - pressed: { - props: { - scale: { x: 0.9, y: 0.9 }, - y: pressedOffsetY, - }, - duration: animationDuration, - }, - }, - }); + // Component usage !!! + const button = new FancyButton({ + defaultView: new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(color), + hoverView: new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(hoverColor), + pressedView: new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(pressedColor), + disabledView: new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(disabledColor), + icon, + text: new Text({ + text, + style: { + ...defaultTextStyle, + fill, + }, + }), + padding, + offset: { + default: { y: defaultOffsetY }, + hover: { y: hoverOffsetY }, + pressed: { y: pressedOffsetY }, + disabled: { y: disabledOffsetY }, + }, + textOffset: { + x: textOffsetX, + y: textOffsetY, + }, + iconOffset: { + x: iconOffsetX, + y: iconOffsetY, + }, + defaultTextScale, + defaultIconScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, + defaultIconAnchor: { x: defaultIconAnchorX, y: defaultIconAnchorY }, + animations: { + default: { + props: { + scale: { x: 1, y: 1 }, + y: defaultOffsetY, + }, + duration: animationDuration, + }, + hover: { + props: { + scale: { x: 1.03, y: 1.03 }, + y: hoverOffsetY, + }, + duration: animationDuration, + }, + pressed: { + props: { + scale: { x: 0.9, y: 0.9 }, + y: pressedOffsetY, + }, + duration: animationDuration, + }, + }, + }); - if (disabled) { - button.enabled = false; - } + if (disabled) + { + button.enabled = false; + } - button.anchor.set(anchorX, anchorY); + button.anchor.set(anchorX, anchorY); - button.onPress.connect(() => action("onPress")); - button.onDown.connect(() => action("onDown")); - button.onUp.connect(() => action("onUp")); - button.onHover.connect(() => action("onHover")); - button.onOut.connect(() => action("onOut")); - button.onUpOut.connect(() => action("onUpOut")); + button.onPress.connect(() => action('onPress')); + button.onDown.connect(() => action('onDown')); + button.onUp.connect(() => action('onUp')); + button.onHover.connect(() => action('onHover')); + button.onOut.connect(() => action('onOut')); + button.onUpOut.connect(() => action('onUpOut')); - view.addChild(button); + view.addChild(button); - centerView(view); - }); - }, - resize: centerView, - }); + centerView(view); + }); + }, + resize: centerView, + }); export default { - title: "Components/FancyButton/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/FancyButton/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/fancyButton/FancyButtonHTMLText.stories.ts b/src/stories/fancyButton/FancyButtonHTMLText.stories.ts index 4fab010..0517858 100644 --- a/src/stories/fancyButton/FancyButtonHTMLText.stories.ts +++ b/src/stories/fancyButton/FancyButtonHTMLText.stories.ts @@ -1,109 +1,112 @@ -import { HTMLText } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { centerView } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { HTMLText } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { centerView } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Click me!", - textColor: "#FFFFFF", - padding: 11, - textOffsetX: 0, - textOffsetY: -7, - defaultTextScale: 0.99, - defaultTextAnchorX: 0.5, - defaultTextAnchorY: 0.5, - anchorX: 0.5, - anchorY: 0.5, - animationDuration: 100, - disabled: false, - onPress: action("button was pressed! (tap or click!)"), + text: 'Click me!', + textColor: '#FFFFFF', + padding: 11, + textOffsetX: 0, + textOffsetY: -7, + defaultTextScale: 0.99, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + anchorX: 0.5, + anchorY: 0.5, + animationDuration: 100, + disabled: false, + onPress: action('button was pressed! (tap or click!)'), }; export const UsingSpriteAndHTMLText: StoryFn = ( - { - text, - textColor, - disabled, - onPress, - padding, - textOffsetX, - textOffsetY, - defaultTextScale, - defaultTextAnchorX, - defaultTextAnchorY, - anchorX, - anchorY, - animationDuration, - }, - context, -) => - new PixiStory({ + { + text, + textColor, + disabled, + onPress, + padding, + textOffsetX, + textOffsetY, + defaultTextScale, + defaultTextAnchorX, + defaultTextAnchorY, + anchorX, + anchorY, + animationDuration, + }, context, - init: (view) => { - const assets = [ - `button.png`, - `button_hover.png`, - `button_pressed.png`, - `button_disabled.png`, - ]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [ + `button.png`, + `button_hover.png`, + `button_pressed.png`, + `button_disabled.png`, + ]; - preload(assets).then(() => { - const title = new HTMLText({ - text, - style: { - ...defaultTextStyle, - fill: textColor || defaultTextStyle.fill, - }, - }); + preload(assets).then(() => + { + const title = new HTMLText({ + text, + style: { + ...defaultTextStyle, + fill: textColor || defaultTextStyle.fill, + }, + }); - // Component usage !!! - const button = new FancyButton({ - defaultView: `button.png`, - hoverView: `button_hover.png`, - pressedView: `button_pressed.png`, - disabledView: `button_disabled.png`, - text: title, - padding, - textOffset: { x: textOffsetX, y: textOffsetY }, - defaultTextScale, - defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, - animations: { - hover: { - props: { - scale: { x: 1.03, y: 1.03 }, - y: 0, - }, - duration: animationDuration, - }, - pressed: { - props: { - scale: { x: 0.9, y: 0.9 }, - y: 10, - }, - duration: animationDuration, - }, - }, - }); + // Component usage !!! + const button = new FancyButton({ + defaultView: `button.png`, + hoverView: `button_hover.png`, + pressedView: `button_pressed.png`, + disabledView: `button_disabled.png`, + text: title, + padding, + textOffset: { x: textOffsetX, y: textOffsetY }, + defaultTextScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, + animations: { + hover: { + props: { + scale: { x: 1.03, y: 1.03 }, + y: 0, + }, + duration: animationDuration, + }, + pressed: { + props: { + scale: { x: 0.9, y: 0.9 }, + y: 10, + }, + duration: animationDuration, + }, + }, + }); - button.anchor.set(anchorX, anchorY); + button.anchor.set(anchorX, anchorY); - if (disabled) { - button.enabled = false; - } + if (disabled) + { + button.enabled = false; + } - button.onPress.connect(onPress); - view.addChild(button); - }); - }, - resize: centerView, - }); + button.onPress.connect(onPress); + view.addChild(button); + }); + }, + resize: centerView, + }); export default { - title: "Components/FancyButton/Using Sprite And HTMLText", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/FancyButton/Using Sprite And HTMLText', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/fancyButton/FancyButtonIcon.stories.ts b/src/stories/fancyButton/FancyButtonIcon.stories.ts index 562f230..c77ffc0 100644 --- a/src/stories/fancyButton/FancyButtonIcon.stories.ts +++ b/src/stories/fancyButton/FancyButtonIcon.stories.ts @@ -1,148 +1,151 @@ -import { Graphics, Sprite } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { MaskedFrame } from "../../MaskedFrame"; -import { centerView } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { Graphics, Sprite } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { MaskedFrame } from '../../MaskedFrame'; +import { centerView } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - color: "#A5E24D", - hoverColor: "#FEC230", - pressedColor: "#FE6048", - disabledColor: "#6E6E6E", - width: 250, - height: 250, - padding: 30, - radius: 200, - iconOffsetX: 0, - iconOffsetY: 0, - defaultIconScale: 0.99, - defaultIconAnchorX: 0.5, - defaultIconAnchorY: 0.5, - defaultOffset: 0, - hoverOffset: -1, - pressedOffset: 5, - disabledOffset: 0, - animationDuration: 100, - anchorX: 0.5, - anchorY: 0.5, - disabled: false, - action: action("Button"), + color: '#A5E24D', + hoverColor: '#FEC230', + pressedColor: '#FE6048', + disabledColor: '#6E6E6E', + width: 250, + height: 250, + padding: 30, + radius: 200, + iconOffsetX: 0, + iconOffsetY: 0, + defaultIconScale: 0.99, + defaultIconAnchorX: 0.5, + defaultIconAnchorY: 0.5, + defaultOffset: 0, + hoverOffset: -1, + pressedOffset: 5, + disabledOffset: 0, + animationDuration: 100, + anchorX: 0.5, + anchorY: 0.5, + disabled: false, + action: action('Button'), }; export const UseIcon: StoryFn = ( - { - width, - height, - radius, - color, - hoverColor, - pressedColor, - disabledColor, - disabled, - padding, - iconOffsetX, - iconOffsetY, - defaultIconScale, - defaultIconAnchorX, - defaultIconAnchorY, - defaultOffset, - hoverOffset, - pressedOffset, - disabledOffset, - action, - anchorX, - anchorY, - animationDuration, - }, - context, -) => - new PixiStory({ + { + width, + height, + radius, + color, + hoverColor, + pressedColor, + disabledColor, + disabled, + padding, + iconOffsetX, + iconOffsetY, + defaultIconScale, + defaultIconAnchorX, + defaultIconAnchorY, + defaultOffset, + hoverOffset, + pressedOffset, + disabledOffset, + action, + anchorX, + anchorY, + animationDuration, + }, context, - init: (view) => { - const assets = [`avatar-01.png`]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [`avatar-01.png`]; - preload(assets).then(() => { - const target = Sprite.from(`avatar-01.png`); + preload(assets).then(() => + { + const target = Sprite.from(`avatar-01.png`); - const icon = new MaskedFrame({ - target, - mask: new Graphics() - .circle(target.width / 2, target.height / 2, target.width / 2) - .fill(0x000000), - borderWidth: 5, - borderColor: 0xffffff, - }); + const icon = new MaskedFrame({ + target, + mask: new Graphics() + .circle(target.width / 2, target.height / 2, target.width / 2) + .fill(0x000000), + borderWidth: 5, + borderColor: 0xffffff, + }); - // Component usage !!! - const button = new FancyButton({ - defaultView: new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(color), - hoverView: new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(hoverColor), - pressedView: new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(pressedColor), - disabledView: new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(disabledColor), - icon, - padding, - offset: { - default: { y: defaultOffset }, - disabled: { y: disabledOffset }, - }, - iconOffset: { - x: iconOffsetX, - y: iconOffsetY, - }, - defaultIconScale, - defaultIconAnchor: { x: defaultIconAnchorX, y: defaultIconAnchorY }, - animations: { - hover: { - props: { - scale: { x: 1.03, y: 1.03 }, - y: hoverOffset, - }, - duration: animationDuration, - }, - pressed: { - props: { - scale: { x: 0.9, y: 0.9 }, - y: pressedOffset, - }, - duration: animationDuration, - }, - }, - }); + // Component usage !!! + const button = new FancyButton({ + defaultView: new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(color), + hoverView: new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(hoverColor), + pressedView: new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(pressedColor), + disabledView: new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(disabledColor), + icon, + padding, + offset: { + default: { y: defaultOffset }, + disabled: { y: disabledOffset }, + }, + iconOffset: { + x: iconOffsetX, + y: iconOffsetY, + }, + defaultIconScale, + defaultIconAnchor: { x: defaultIconAnchorX, y: defaultIconAnchorY }, + animations: { + hover: { + props: { + scale: { x: 1.03, y: 1.03 }, + y: hoverOffset, + }, + duration: animationDuration, + }, + pressed: { + props: { + scale: { x: 0.9, y: 0.9 }, + y: pressedOffset, + }, + duration: animationDuration, + }, + }, + }); - button.anchor.set(anchorX, anchorY); + button.anchor.set(anchorX, anchorY); - if (disabled) { - button.enabled = false; - } + if (disabled) + { + button.enabled = false; + } - button.onPress.connect(() => action("onPress")); - button.onDown.connect(() => action("onDown")); - button.onUp.connect(() => action("onUp")); - button.onHover.connect(() => action("onHover")); - button.onOut.connect(() => action("onOut")); - button.onUpOut.connect(() => action("onUpOut")); + button.onPress.connect(() => action('onPress')); + button.onDown.connect(() => action('onDown')); + button.onUp.connect(() => action('onUp')); + button.onHover.connect(() => action('onHover')); + button.onOut.connect(() => action('onOut')); + button.onUpOut.connect(() => action('onUpOut')); - view.addChild(button); + view.addChild(button); - centerView(view); - }); - }, - resize: centerView, - }); + centerView(view); + }); + }, + resize: centerView, + }); export default { - title: "Components/FancyButton/Use Icon", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/FancyButton/Use Icon', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts index cb752e0..f0560ec 100644 --- a/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts +++ b/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts @@ -1,158 +1,163 @@ -import { Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { MaskedFrame } from "../../MaskedFrame"; -import { centerView } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { MaskedFrame } from '../../MaskedFrame'; +import { centerView } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Click me!", - textColor: "#FFFFFF", - padding: 11, - width: 300, - height: 137, - defaultTextScale: 0.99, - defaultIconScale: 0.2, - defaultTextAnchorX: 0.5, - defaultTextAnchorY: 0.5, - defaultIconAnchorX: 0.5, - defaultIconAnchorY: 0.5, - anchorX: 0.5, - anchorY: 0.5, - animationDuration: 100, - disabled: false, - contentFittingMode: ["default", "fill", "none"], - onPress: action("button was pressed! (tap or click!)"), + text: 'Click me!', + textColor: '#FFFFFF', + padding: 11, + width: 300, + height: 137, + defaultTextScale: 0.99, + defaultIconScale: 0.2, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + defaultIconAnchorX: 0.5, + defaultIconAnchorY: 0.5, + anchorX: 0.5, + anchorY: 0.5, + animationDuration: 100, + disabled: false, + contentFittingMode: ['default', 'fill', 'none'], + onPress: action('button was pressed! (tap or click!)'), }; -export const UseNineSliceSprite: StoryFn = ( - { - text, - textColor, - disabled, - onPress, - padding, - anchorX, - anchorY, - animationDuration, - width, - height, - defaultTextScale, - defaultIconScale, - defaultTextAnchorX, - defaultTextAnchorY, - defaultIconAnchorX, - defaultIconAnchorY, - contentFittingMode, - }, - context, -) => - new PixiStory({ - context, - init: (view) => { - const assets = [ - `button.png`, - `button_hover.png`, - `button_pressed.png`, - `button_disabled.png`, - `avatar-01.png`, - `avatar_mask.png`, - ]; - - preload(assets).then(() => { - // Component usage !!! - const button = new FancyButton({ - defaultView: `button.png`, - hoverView: `button_hover.png`, - pressedView: `button_pressed.png`, - disabledView: `button_disabled.png`, - nineSliceSprite: [150, 66, 150, 66], - text: new Text({ - text, - style: { - ...defaultTextStyle, - fill: textColor || defaultTextStyle.fill, - }, - }), - padding, - textOffset: { x: 30, y: -5 }, - iconOffset: { x: -100, y: -7 }, - defaultTextScale, - defaultIconScale, - defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, - defaultIconAnchor: { x: defaultIconAnchorX, y: defaultIconAnchorY }, - animations: { - hover: { - props: { - scale: { x: 1.03, y: 1.03 }, - y: 0, - }, - duration: animationDuration, - }, - pressed: { - props: { - scale: { x: 0.9, y: 0.9 }, - y: 10, - }, - duration: animationDuration, - }, - }, - contentFittingMode, - }); - - button.iconView = new MaskedFrame({ - target: `avatar-01.png`, - mask: `avatar_mask.png`, - borderWidth: 10, - borderColor: 0xffffff, - }); - - button.anchor.set(anchorX, anchorY); - - if (disabled) { - button.enabled = false; - } - - const sizes: { w: number; h: number }[] = [ - { w: width, h: height }, - { w: 300, h: 300 }, - { w: 600, h: 137 }, - { w: 600, h: 300 }, - ]; - - button.width = sizes[0].w; - button.height = sizes[0].h; - - let currentSizeID = 0; - - button.onPress.connect(() => { - currentSizeID++; - - if (currentSizeID >= sizes.length) { - currentSizeID = 0; - } - - const size = sizes[currentSizeID]; - - button.width = size.w; - button.height = size.h; - }); - - button.onPress.connect(onPress); - - centerView(view); - - view.addChild(button); - }); +export const UseNineSliceSprite: StoryFn = ( + { + text, + textColor, + disabled, + onPress, + padding, + anchorX, + anchorY, + animationDuration, + width, + height, + defaultTextScale, + defaultIconScale, + defaultTextAnchorX, + defaultTextAnchorY, + defaultIconAnchorX, + defaultIconAnchorY, + contentFittingMode, }, - resize: centerView, - }); + context, +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [ + `button.png`, + `button_hover.png`, + `button_pressed.png`, + `button_disabled.png`, + `avatar-01.png`, + `avatar_mask.png`, + ]; + + preload(assets).then(() => + { + // Component usage !!! + const button = new FancyButton({ + defaultView: `button.png`, + hoverView: `button_hover.png`, + pressedView: `button_pressed.png`, + disabledView: `button_disabled.png`, + nineSliceSprite: [150, 66, 150, 66], + text: new Text({ + text, + style: { + ...defaultTextStyle, + fill: textColor || defaultTextStyle.fill, + }, + }), + padding, + textOffset: { x: 30, y: -5 }, + iconOffset: { x: -100, y: -7 }, + defaultTextScale, + defaultIconScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, + defaultIconAnchor: { x: defaultIconAnchorX, y: defaultIconAnchorY }, + animations: { + hover: { + props: { + scale: { x: 1.03, y: 1.03 }, + y: 0, + }, + duration: animationDuration, + }, + pressed: { + props: { + scale: { x: 0.9, y: 0.9 }, + y: 10, + }, + duration: animationDuration, + }, + }, + contentFittingMode, + }); + + button.iconView = new MaskedFrame({ + target: `avatar-01.png`, + mask: `avatar_mask.png`, + borderWidth: 10, + borderColor: 0xffffff, + }); + + button.anchor.set(anchorX, anchorY); + + if (disabled) + { + button.enabled = false; + } + + const sizes: { w: number; h: number }[] = [ + { w: width, h: height }, + { w: 300, h: 300 }, + { w: 600, h: 137 }, + { w: 600, h: 300 }, + ]; + + button.width = sizes[0].w; + button.height = sizes[0].h; + + let currentSizeID = 0; + + button.onPress.connect(() => + { + currentSizeID++; + + if (currentSizeID >= sizes.length) + { + currentSizeID = 0; + } + + const size = sizes[currentSizeID]; + + button.width = size.w; + button.height = size.h; + }); + + button.onPress.connect(onPress); + + centerView(view); + + view.addChild(button); + }); + }, + resize: centerView, + }); export default { - title: "Components/FancyButton/Use NineSliceSprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/FancyButton/Use NineSliceSprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/fancyButton/FancyButtonSprite.stories.ts b/src/stories/fancyButton/FancyButtonSprite.stories.ts index 0f3748c..773f309 100644 --- a/src/stories/fancyButton/FancyButtonSprite.stories.ts +++ b/src/stories/fancyButton/FancyButtonSprite.stories.ts @@ -1,110 +1,113 @@ -import { Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { centerView } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { centerView } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Click me!", - textColor: "#FFFFFF", - padding: 11, - textOffsetX: 0, - textOffsetY: -7, - defaultTextScale: 0.99, - defaultTextAnchorX: 0.5, - defaultTextAnchorY: 0.5, - anchorX: 0.5, - anchorY: 0.5, - animationDuration: 100, - disabled: false, - onPress: action("button was pressed! (tap or click!)"), + text: 'Click me!', + textColor: '#FFFFFF', + padding: 11, + textOffsetX: 0, + textOffsetY: -7, + defaultTextScale: 0.99, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + anchorX: 0.5, + anchorY: 0.5, + animationDuration: 100, + disabled: false, + onPress: action('button was pressed! (tap or click!)'), }; export const UseSprite: StoryFn = ( - { - text, - textColor, - disabled, - onPress, - padding, - textOffsetX, - textOffsetY, - defaultTextScale, - defaultTextAnchorX, - defaultTextAnchorY, - anchorX, - anchorY, - animationDuration, - }, - context, -) => - new PixiStory({ + { + text, + textColor, + disabled, + onPress, + padding, + textOffsetX, + textOffsetY, + defaultTextScale, + defaultTextAnchorX, + defaultTextAnchorY, + anchorX, + anchorY, + animationDuration, + }, context, - init: (view) => { - const assets = [ - `button.png`, - `button_hover.png`, - `button_pressed.png`, - `button_disabled.png`, - ]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [ + `button.png`, + `button_hover.png`, + `button_pressed.png`, + `button_disabled.png`, + ]; - preload(assets).then(() => { - // Component usage !!! - const button = new FancyButton({ - defaultView: `button.png`, - hoverView: `button_hover.png`, - pressedView: `button_pressed.png`, - disabledView: `button_disabled.png`, - text: new Text({ - text, - style: { - ...defaultTextStyle, - fill: textColor || defaultTextStyle.fill, - }, - }), - padding, - textOffset: { x: textOffsetX, y: textOffsetY }, - defaultTextScale, - defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, - animations: { - hover: { - props: { - scale: { x: 1.03, y: 1.03 }, - y: 0, - }, - duration: animationDuration, - }, - pressed: { - props: { - scale: { x: 0.9, y: 0.9 }, - y: 10, - }, - duration: animationDuration, - }, - }, - }); + preload(assets).then(() => + { + // Component usage !!! + const button = new FancyButton({ + defaultView: `button.png`, + hoverView: `button_hover.png`, + pressedView: `button_pressed.png`, + disabledView: `button_disabled.png`, + text: new Text({ + text, + style: { + ...defaultTextStyle, + fill: textColor || defaultTextStyle.fill, + }, + }), + padding, + textOffset: { x: textOffsetX, y: textOffsetY }, + defaultTextScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, + animations: { + hover: { + props: { + scale: { x: 1.03, y: 1.03 }, + y: 0, + }, + duration: animationDuration, + }, + pressed: { + props: { + scale: { x: 0.9, y: 0.9 }, + y: 10, + }, + duration: animationDuration, + }, + }, + }); - button.anchor.set(anchorX, anchorY); + button.anchor.set(anchorX, anchorY); - if (disabled) { - button.enabled = false; - } + if (disabled) + { + button.enabled = false; + } - button.onPress.connect(onPress); + button.onPress.connect(onPress); - centerView(view); + centerView(view); - view.addChild(button); - }); - }, - resize: centerView, - }); + view.addChild(button); + }); + }, + resize: centerView, + }); export default { - title: "Components/FancyButton/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/FancyButton/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/fancyButton/FancyButtonTextLink.stories.ts b/src/stories/fancyButton/FancyButtonTextLink.stories.ts index bda407b..04128ec 100644 --- a/src/stories/fancyButton/FancyButtonTextLink.stories.ts +++ b/src/stories/fancyButton/FancyButtonTextLink.stories.ts @@ -1,67 +1,69 @@ -import { Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { centerView } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { centerView } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Click me!", - textColor: "#FFFFFF", - animationDuration: 100, - disabled: false, - onPress: action("button was pressed! (tap or click!)"), + text: 'Click me!', + textColor: '#FFFFFF', + animationDuration: 100, + disabled: false, + onPress: action('button was pressed! (tap or click!)'), }; export const TextLink: StoryFn = ( - { text, textColor, disabled, onPress, animationDuration }, - context, -) => - new PixiStory({ + { text, textColor, disabled, onPress, animationDuration }, context, - init: (view) => { - const button = new FancyButton({ - text: new Text({ - text, - style: { - ...defaultTextStyle, - fill: textColor || defaultTextStyle.fill, - }, - }), - animations: { - hover: { - props: { - scale: { x: 1.03, y: 1.03 }, - y: 0, - }, - duration: animationDuration, - }, - pressed: { - props: { - scale: { x: 0.9, y: 0.9 }, - y: 10, - }, - duration: animationDuration, - }, - }, - }); +) => + new PixiStory({ + context, + init: (view) => + { + const button = new FancyButton({ + text: new Text({ + text, + style: { + ...defaultTextStyle, + fill: textColor || defaultTextStyle.fill, + }, + }), + animations: { + hover: { + props: { + scale: { x: 1.03, y: 1.03 }, + y: 0, + }, + duration: animationDuration, + }, + pressed: { + props: { + scale: { x: 0.9, y: 0.9 }, + y: 10, + }, + duration: animationDuration, + }, + }, + }); - if (disabled) { - button.enabled = false; - } + if (disabled) + { + button.enabled = false; + } - button.onPress.connect(onPress); + button.onPress.connect(onPress); - centerView(view); + centerView(view); - view.addChild(button); - }, - resize: centerView, - }); + view.addChild(button); + }, + resize: centerView, + }); export default { - title: "Components/FancyButton/Text Link", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/FancyButton/Text Link', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts index 68d4603..6270044 100644 --- a/src/stories/input/InputGraphics.stories.ts +++ b/src/stories/input/InputGraphics.stories.ts @@ -1,107 +1,110 @@ -import { Graphics } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Input } from "../../Input"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Graphics } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Input } from '../../Input'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - text: "", - placeholder: "Enter text", - align: ["center", "left", "right"], - textColor: "#000000", - backgroundColor: "#F1D583", - borderColor: "#DCB000", - maxLength: 20, - fontSize: 24, - border: 5, - width: 320, - height: 70, - radius: 11, - amount: 1, - paddingTop: 0, - paddingRight: 0, - paddingBottom: 0, - paddingLeft: 0, - cleanOnFocus: true, - addMask: false, - onChange: action("Change"), + text: '', + placeholder: 'Enter text', + align: ['center', 'left', 'right'], + textColor: '#000000', + backgroundColor: '#F1D583', + borderColor: '#DCB000', + maxLength: 20, + fontSize: 24, + border: 5, + width: 320, + height: 70, + radius: 11, + amount: 1, + paddingTop: 0, + paddingRight: 0, + paddingBottom: 0, + paddingLeft: 0, + cleanOnFocus: true, + addMask: false, + onChange: action('Change'), }; export const UseGraphics: StoryFn< - typeof args & { align: "center" | "left" | "right" } + typeof args & { align: 'center' | 'left' | 'right' } > = ( - { - text, - amount, - border, - textColor, - fontSize, - backgroundColor, - borderColor, - width, - height, - radius, - maxLength, - align, - placeholder, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - onChange, - cleanOnFocus, - addMask, - }, - context, -) => - new PixiStory({ + { + text, + amount, + border, + textColor, + fontSize, + backgroundColor, + borderColor, + width, + height, + radius, + maxLength, + align, + placeholder, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + onChange, + cleanOnFocus, + addMask, + }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); - for (let i = 0; i < amount; i++) { - // Component usage - const input = new Input({ - bg: new Graphics() - .roundRect(0, 0, width, height, radius + border) - .fill(borderColor) - .roundRect( - border, - border, - width - border * 2, - height - border * 2, - radius, - ) - .fill(backgroundColor), - textStyle: { - fill: textColor, - fontSize, - fontWeight: "bold", - }, - maxLength, - align, - placeholder, - value: text, - padding: [paddingTop, paddingRight, paddingBottom, paddingLeft], - cleanOnFocus, - addMask, - }); + for (let i = 0; i < amount; i++) + { + // Component usage + const input = new Input({ + bg: new Graphics() + .roundRect(0, 0, width, height, radius + border) + .fill(borderColor) + .roundRect( + border, + border, + width - (border * 2), + height - (border * 2), + radius, + ) + .fill(backgroundColor), + textStyle: { + fill: textColor, + fontSize, + fontWeight: 'bold', + }, + maxLength, + align, + placeholder, + value: text, + padding: [paddingTop, paddingRight, paddingBottom, paddingLeft], + cleanOnFocus, + addMask, + }); - input.onEnter.connect((val) => { - onChange(`Input ${i + 1} (${val})`); - }); + input.onEnter.connect((val) => + { + onChange(`Input ${i + 1} (${val})`); + }); - list.addChild(input); - view.addChild(list); - } - }, - resize: (view) => centerElement(view.children[0]), - }); + list.addChild(input); + view.addChild(list); + } + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Input/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Input/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/input/InputNineSliceSprite.stories.ts b/src/stories/input/InputNineSliceSprite.stories.ts index 6614436..9abe7f9 100644 --- a/src/stories/input/InputNineSliceSprite.stories.ts +++ b/src/stories/input/InputNineSliceSprite.stories.ts @@ -1,95 +1,98 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Input } from "../../Input"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Input } from '../../Input'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "", - placeholder: "Enter text", - align: ["center", "left", "right"], - textColor: "#000000", - maxLength: 20, - fontSize: 24, - paddingTop: 0, - paddingRight: 0, - paddingBottom: 0, - paddingLeft: 0, - amount: 1, - width: 320, - height: 80, - addMask: false, - onChange: action("Input"), + text: '', + placeholder: 'Enter text', + align: ['center', 'left', 'right'], + textColor: '#000000', + maxLength: 20, + fontSize: 24, + paddingTop: 0, + paddingRight: 0, + paddingBottom: 0, + paddingLeft: 0, + amount: 1, + width: 320, + height: 80, + addMask: false, + onChange: action('Input'), }; export const UseNineSliceSprite: StoryFn< - typeof args & { align: "center" | "left" | "right" } + typeof args & { align: 'center' | 'left' | 'right' } > = ( - { - text, - amount, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - textColor, - fontSize, - maxLength, - align, - placeholder, - width, - height, - addMask, - onChange, - }, - context, -) => - new PixiStory({ + { + text, + amount, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + textColor, + fontSize, + maxLength, + align, + placeholder, + width, + height, + addMask, + onChange, + }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); - const assets = [`input.png`]; + const assets = [`input.png`]; - preload(assets).then(() => { - for (let i = 0; i < amount; i++) { - // Component usage - const input = new Input({ - bg: "input.png", - nineSliceSprite: [160, 27, 160, 27], - padding: [paddingTop, paddingRight, paddingBottom, paddingLeft], - textStyle: { - fill: textColor, - fontSize, - fontWeight: "bold", - }, - maxLength, - align, - placeholder, - value: text, - addMask, - }); + preload(assets).then(() => + { + for (let i = 0; i < amount; i++) + { + // Component usage + const input = new Input({ + bg: 'input.png', + nineSliceSprite: [160, 27, 160, 27], + padding: [paddingTop, paddingRight, paddingBottom, paddingLeft], + textStyle: { + fill: textColor, + fontSize, + fontWeight: 'bold', + }, + maxLength, + align, + placeholder, + value: text, + addMask, + }); - input.width = width; - input.height = height; + input.width = width; + input.height = height; - input.onChange.connect(() => onChange(`${i + 1} - ${input.value}`)); + input.onChange.connect(() => onChange(`${i + 1} - ${input.value}`)); - list.addChild(input); - } + list.addChild(input); + } - centerElement(list); - }); + centerElement(list); + }); - view.addChild(list); - }, - resize: (view) => centerElement(view.children[0]), - }); + view.addChild(list); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Input/Use NineSliceSprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Input/Use NineSliceSprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/input/InputSprite.stories.ts b/src/stories/input/InputSprite.stories.ts index 488b996..80c6886 100644 --- a/src/stories/input/InputSprite.stories.ts +++ b/src/stories/input/InputSprite.stories.ts @@ -1,88 +1,91 @@ -import { Sprite } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Input } from "../../Input"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { Sprite } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Input } from '../../Input'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "", - placeholder: "Enter text", - align: ["center", "left", "right"], - textColor: "#000000", - maxLength: 20, - fontSize: 24, - paddingTop: 0, - paddingRight: 0, - paddingBottom: 0, - paddingLeft: 0, - amount: 1, - addMask: false, - maxTextLength: 10, - onChange: action("Input"), + text: '', + placeholder: 'Enter text', + align: ['center', 'left', 'right'], + textColor: '#000000', + maxLength: 20, + fontSize: 24, + paddingTop: 0, + paddingRight: 0, + paddingBottom: 0, + paddingLeft: 0, + amount: 1, + addMask: false, + maxTextLength: 10, + onChange: action('Input'), }; export const UseSprite: StoryFn< - typeof args & { align: "center" | "left" | "right" } + typeof args & { align: 'center' | 'left' | 'right' } > = ( - { - text, - amount, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - textColor, - fontSize, - maxLength, - align, - placeholder, - addMask, - onChange, - }, - context, -) => - new PixiStory({ + { + text, + amount, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + textColor, + fontSize, + maxLength, + align, + placeholder, + addMask, + onChange, + }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); - const assets = [`input.png`]; + const assets = [`input.png`]; - preload(assets).then(() => { - for (let i = 0; i < amount; i++) { - // Component usage - const input = new Input({ - bg: Sprite.from("input.png"), - padding: [paddingTop, paddingRight, paddingBottom, paddingLeft], - textStyle: { - fill: textColor, - fontSize, - fontWeight: "bold", - }, - maxLength, - align, - placeholder, - value: text, - addMask, - }); + preload(assets).then(() => + { + for (let i = 0; i < amount; i++) + { + // Component usage + const input = new Input({ + bg: Sprite.from('input.png'), + padding: [paddingTop, paddingRight, paddingBottom, paddingLeft], + textStyle: { + fill: textColor, + fontSize, + fontWeight: 'bold', + }, + maxLength, + align, + placeholder, + value: text, + addMask, + }); - input.onChange.connect(() => onChange(`${i + 1} - ${input.value}`)); + input.onChange.connect(() => onChange(`${i + 1} - ${input.value}`)); - list.addChild(input); - } + list.addChild(input); + } - centerElement(list); - }); - view.addChild(list); - }, - resize: (view) => centerElement(view.children[0]), - }); + centerElement(list); + }); + view.addChild(list); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Input/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Input/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/list/ListGraphics.stories.ts b/src/stories/list/ListGraphics.stories.ts index d32cf79..d60b44e 100644 --- a/src/stories/list/ListGraphics.stories.ts +++ b/src/stories/list/ListGraphics.stories.ts @@ -1,104 +1,106 @@ -import { Graphics, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Graphics, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - type: [null, "horizontal", "vertical"], - fontColor: "#000000", - bgColor: "#f5e3a9", - width: 271, - height: 270, - radius: 20, - elementsMargin: 10, - topPadding: 20, - leftPadding: 20, - rightPadding: 20, - elementsWidth: 70, - elementsHeight: 70, - itemsAmount: 9, - onPress: action("Button pressed"), + type: [null, 'horizontal', 'vertical'], + fontColor: '#000000', + bgColor: '#f5e3a9', + width: 271, + height: 270, + radius: 20, + elementsMargin: 10, + topPadding: 20, + leftPadding: 20, + rightPadding: 20, + elementsWidth: 70, + elementsHeight: 70, + itemsAmount: 9, + onPress: action('Button pressed'), }; export const UseGraphics: StoryFn< - typeof args & { type: "horizontal" | "vertical" } + typeof args & { type: 'horizontal' | 'vertical' } > = ( - { - type, - fontColor, - bgColor, - width, - height, - elementsMargin, - topPadding, - leftPadding, - rightPadding, - elementsWidth, - elementsHeight, - radius, - itemsAmount, - onPress, - }, - context, -) => - new PixiStory({ + { + type, + fontColor, + bgColor, + width, + height, + elementsMargin, + topPadding, + leftPadding, + rightPadding, + elementsWidth, + elementsHeight, + radius, + itemsAmount, + onPress, + }, context, - init: (view) => { - const viewGraphics = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(bgColor); +) => + new PixiStory({ + context, + init: (view) => + { + const viewGraphics = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(bgColor); - const items = []; + const items = []; - for (let i = 0; i < itemsAmount; i++) { - const button = new FancyButton({ - defaultView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xa5e24d), - hoverView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xfec230), - pressedView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xfe6048), - text: new Text({ - text: i + 1, - style: { - ...defaultTextStyle, - fontSize: 28, - fill: fontColor, - }, - }), - }); + for (let i = 0; i < itemsAmount; i++) + { + const button = new FancyButton({ + defaultView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xa5e24d), + hoverView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xfec230), + pressedView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xfe6048), + text: new Text({ + text: i + 1, + style: { + ...defaultTextStyle, + fontSize: 28, + fill: fontColor, + }, + }), + }); - button.anchor.set(0); - button.onPress.connect(() => onPress(i + 1)); + button.anchor.set(0); + button.onPress.connect(() => onPress(i + 1)); - items.push(button); - } + items.push(button); + } - // Component usage !!! - const list = new List({ - elementsMargin, - topPadding, - leftPadding, - rightPadding, - type, - }); + // Component usage !!! + const list = new List({ + elementsMargin, + topPadding, + leftPadding, + rightPadding, + type, + }); - viewGraphics.addChild(list); - view.addChild(viewGraphics); - items.forEach((item) => list.addChild(item)); - }, - resize: (view) => centerElement(view.children[0]), - }); + viewGraphics.addChild(list); + view.addChild(viewGraphics); + items.forEach((item) => list.addChild(item)); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/List/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/List/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/list/ListSprite.stories.ts b/src/stories/list/ListSprite.stories.ts index 85e651f..d1bd21c 100644 --- a/src/stories/list/ListSprite.stories.ts +++ b/src/stories/list/ListSprite.stories.ts @@ -1,111 +1,115 @@ -import { Container, Sprite, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { getColor } from "../utils/color"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { Container, Sprite, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { getColor } from '../utils/color'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - type: [null, "horizontal", "vertical"], - fontColor: "#000000", - elementsMargin: 29, - itemsAmount: 10, - onPress: action("Button pressed"), + type: [null, 'horizontal', 'vertical'], + fontColor: '#000000', + elementsMargin: 29, + itemsAmount: 10, + onPress: action('Button pressed'), }; export const UseSprite: StoryFn< - typeof args & { type: "horizontal" | "vertical" } + typeof args & { type: 'horizontal' | 'vertical' } > = ({ fontColor, elementsMargin, itemsAmount, onPress, type }, context) => - new PixiStory({ - context, - init: (view) => { - const assets = [ - `window.png`, - `SmallButton.png`, - `SmallButton-hover.png`, - `SmallButton-pressed.png`, - ]; - - preload(assets).then(() => { - const window = Sprite.from(`window.png`); - const title = new Text({ - text: `Levels`, - style: { fill: 0x000000, fontSize: 40 }, - }); - - title.anchor.set(0.5); - window.addChild(title); - title.x = window.width / 2; - title.y = 25; - - view.addChild(window); - - const items: Container[] = createItems( - itemsAmount, - getColor(fontColor), - onPress, - ); - - // Component usage !!! - const list = new List({ - type, - vertPadding: 70, - horPadding: 50, - elementsMargin, - }); - - items.forEach((item) => list.addChild(item)); - - window.addChild(list); - - centerElement(view); - }); - }, - resize: centerElement, - }); - -function createItems( - itemsAmount: number, - fontColor: number, - onPress: (buttonID: number) => void, -): FancyButton[] { - const items = []; - - for (let i = 0; i < itemsAmount; i++) { - const button = new FancyButton({ - defaultView: `SmallButton.png`, - hoverView: `SmallButton-hover.png`, - pressedView: `SmallButton-pressed.png`, - text: new Text({ - text: i + 1, - style: { - ...defaultTextStyle, - fontSize: 68, - fill: fontColor, + new PixiStory({ + context, + init: (view) => + { + const assets = [ + `window.png`, + `SmallButton.png`, + `SmallButton-hover.png`, + `SmallButton-pressed.png`, + ]; + + preload(assets).then(() => + { + const window = Sprite.from(`window.png`); + const title = new Text({ + text: `Levels`, + style: { fill: 0x000000, fontSize: 40 }, + }); + + title.anchor.set(0.5); + window.addChild(title); + title.x = window.width / 2; + title.y = 25; + + view.addChild(window); + + const items: Container[] = createItems( + itemsAmount, + getColor(fontColor), + onPress, + ); + + // Component usage !!! + const list = new List({ + type, + vertPadding: 70, + horPadding: 50, + elementsMargin, + }); + + items.forEach((item) => list.addChild(item)); + + window.addChild(list); + + centerElement(view); + }); }, - }), - textOffset: { - x: 0, - y: -7, - }, + resize: centerElement, }); - button.scale.set(0.5); +function createItems( + itemsAmount: number, + fontColor: number, + onPress: (buttonID: number) => void, +): FancyButton[] +{ + const items = []; + + for (let i = 0; i < itemsAmount; i++) + { + const button = new FancyButton({ + defaultView: `SmallButton.png`, + hoverView: `SmallButton-hover.png`, + pressedView: `SmallButton-pressed.png`, + text: new Text({ + text: i + 1, + style: { + ...defaultTextStyle, + fontSize: 68, + fill: fontColor, + }, + }), + textOffset: { + x: 0, + y: -7, + }, + }); + + button.scale.set(0.5); - button.onPress.connect(() => onPress(i + 1)); + button.onPress.connect(() => onPress(i + 1)); - items.push(button); - } + items.push(button); + } - return items; + return items; } export default { - title: "Components/List/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/List/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts index 609acb1..040c218 100644 --- a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts +++ b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts @@ -1,61 +1,67 @@ -import { Graphics, Sprite } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { MaskedFrame } from "../../MaskedFrame"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; +import { Graphics, Sprite } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { MaskedFrame } from '../../MaskedFrame'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; const args = { - borderColor: "#FFFFFF", - borderWidth: 10, - radius: 250, + borderColor: '#FFFFFF', + borderWidth: 10, + radius: 250, }; // TODO: implement preloading export const UseGraphics: StoryFn = ( - { borderColor, radius, borderWidth }, - context, -) => - new PixiStory({ + { borderColor, radius, borderWidth }, context, - init: (view) => { - const assets = [`avatar-01.png`]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [`avatar-01.png`]; - preload(assets).then(() => { - const target = Sprite.from(`avatar-01.png`); + preload(assets).then(() => + { + const target = Sprite.from(`avatar-01.png`); - // Component usage !!! - const frame = new MaskedFrame({ - target, - mask: getMask(target.width, target.height, radius), - borderWidth, - borderColor, - }); + // Component usage !!! + const frame = new MaskedFrame({ + target, + mask: getMask(target.width, target.height, radius), + borderWidth, + borderColor, + }); - view.addChild(frame); + view.addChild(frame); - centerElement(view); - }); - }, - resize: centerElement, - }); + centerElement(view); + }); + }, + resize: centerElement, + }); -function getMask(width: number, height: number, radius: number): Graphics { - const isCircle = width === height && radius >= width / 2; +function getMask(width: number, height: number, radius: number): Graphics +{ + const isCircle = width === height && radius >= width / 2; - const mask = new Graphics(); + const mask = new Graphics(); - if (isCircle) { - mask.circle(width / 2, height / 2, width / 2).fill(0x000000); - } else { - mask.roundRect(0, 0, width, height, radius).fill(0x000000); - } + if (isCircle) + { + mask.circle(width / 2, height / 2, width / 2).fill(0x000000); + } + else + { + mask.roundRect(0, 0, width, height, radius).fill(0x000000); + } - return mask; + return mask; } export default { - title: "Components/MaskedFrame/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/MaskedFrame/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/maskedFrame/MaskedFrameSprite.stories.ts b/src/stories/maskedFrame/MaskedFrameSprite.stories.ts index 37c1a41..83c2d01 100644 --- a/src/stories/maskedFrame/MaskedFrameSprite.stories.ts +++ b/src/stories/maskedFrame/MaskedFrameSprite.stories.ts @@ -1,42 +1,44 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { MaskedFrame } from "../../MaskedFrame"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { MaskedFrame } from '../../MaskedFrame'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; const args = { - borderColor: "#FFFFFF", - borderWidth: 10, + borderColor: '#FFFFFF', + borderWidth: 10, }; export const UseSprite: StoryFn = ( - { borderColor, borderWidth }, - context, -) => - new PixiStory({ + { borderColor, borderWidth }, context, - init: (view) => { - const assets = [`avatar-01.png`, `avatar_mask.png`]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [`avatar-01.png`, `avatar_mask.png`]; - preload(assets).then(() => { - // Component usage !!! - const frame = new MaskedFrame({ - target: `avatar-01.png`, - mask: `avatar_mask.png`, - borderWidth, - borderColor, - }); + preload(assets).then(() => + { + // Component usage !!! + const frame = new MaskedFrame({ + target: `avatar-01.png`, + mask: `avatar_mask.png`, + borderWidth, + borderColor, + }); - view.addChild(frame); + view.addChild(frame); - centerElement(view); - }); - }, - resize: centerElement, - }); + centerElement(view); + }); + }, + resize: centerElement, + }); export default { - title: "Components/MaskedFrame/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/MaskedFrame/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/progressBar/ProgressBarCircular.stories.ts b/src/stories/progressBar/ProgressBarCircular.stories.ts index d4ad508..f0e8761 100644 --- a/src/stories/progressBar/ProgressBarCircular.stories.ts +++ b/src/stories/progressBar/ProgressBarCircular.stories.ts @@ -1,83 +1,91 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { CircularProgressBar } from "../../CircularProgressBar"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { CircularProgressBar } from '../../CircularProgressBar'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; const args = { - backgroundColor: "#3d3d3d", - fillColor: "#00b1dd", - radius: 50, - lineWidth: 15, - value: 50, - backgroundAlpha: 0.5, - fillAlpha: 0.8, - animate: true, - cap: ["round", "butt", "square"], + backgroundColor: '#3d3d3d', + fillColor: '#00b1dd', + radius: 50, + lineWidth: 15, + value: 50, + backgroundAlpha: 0.5, + fillAlpha: 0.8, + animate: true, + cap: ['round', 'butt', 'square'], }; export const circular: StoryFn< - typeof args & { cap: "round" | "butt" | "square" } + typeof args & { cap: 'round' | 'butt' | 'square' } > = ( - { - backgroundColor, - fillColor, - radius, - lineWidth, - value, - backgroundAlpha, - fillAlpha, - animate, - cap, - }, - context, -) => { - let isFilling = true; - let progressBar1: CircularProgressBar; - - return new PixiStory({ - context, - init: (view) => { - progressBar1 = new CircularProgressBar({ + { backgroundColor, - lineWidth, fillColor, radius, + lineWidth, value, backgroundAlpha, fillAlpha, + animate, cap, - }); + }, + context, +) => +{ + let isFilling = true; + let progressBar1: CircularProgressBar; - progressBar1.x += progressBar1.width / 2; - progressBar1.y += -progressBar1.height / 2; + return new PixiStory({ + context, + init: (view) => + { + progressBar1 = new CircularProgressBar({ + backgroundColor, + lineWidth, + fillColor, + radius, + value, + backgroundAlpha, + fillAlpha, + cap, + }); - view.addChild(progressBar1); - }, - resize: (view) => { - centerElement(view); - view.y += view.height; - }, - update: () => { - if (!animate) { - return; - } + progressBar1.x += progressBar1.width / 2; + progressBar1.y += -progressBar1.height / 2; - isFilling ? value++ : value--; + view.addChild(progressBar1); + }, + resize: (view) => + { + centerElement(view); + view.y += view.height; + }, + update: () => + { + if (!animate) + { + return; + } - if (value >= 100) { - isFilling = false; - } else if (value <= 0) { - isFilling = true; - } + isFilling ? value++ : value--; - progressBar1.progress = value; - progressBar1.rotation += 0.1; - }, - }); + if (value >= 100) + { + isFilling = false; + } + else if (value <= 0) + { + isFilling = true; + } + + progressBar1.progress = value; + progressBar1.rotation += 0.1; + }, + }); }; export default { - title: "Components/ProgressBar/Circular", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/ProgressBar/Circular', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/progressBar/ProgressBarGraphics.stories.ts b/src/stories/progressBar/ProgressBarGraphics.stories.ts index 82e673a..fcf0b4a 100644 --- a/src/stories/progressBar/ProgressBarGraphics.stories.ts +++ b/src/stories/progressBar/ProgressBarGraphics.stories.ts @@ -1,108 +1,117 @@ -import { Graphics } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { List } from "../../List"; -import { ProgressBar } from "../../ProgressBar"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; +import { Graphics } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { List } from '../../List'; +import { ProgressBar } from '../../ProgressBar'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; const args = { - fillColor: "#00b1dd", - borderColor: "#FFFFFF", - backgroundColor: "#fe6048", - value: 50, - width: 450, - height: 35, - radius: 25, - border: 3, - animate: true, - vertical: false, + fillColor: '#00b1dd', + borderColor: '#FFFFFF', + backgroundColor: '#fe6048', + value: 50, + width: 450, + height: 35, + radius: 25, + border: 3, + animate: true, + vertical: false, }; export const UseGraphics: StoryFn = ( - { - value, - borderColor, - backgroundColor, - fillColor, - width, - height, - radius, - border, - animate, - vertical, - }, - context, -) => { - let isFilling = true; - let progressBar: ProgressBar; - - return new PixiStory({ + { + value, + borderColor, + backgroundColor, + fillColor, + width, + height, + radius, + border, + animate, + vertical, + }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); +) => +{ + let isFilling = true; + let progressBar: ProgressBar; - const bg = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(borderColor) - .roundRect( - border, - border, - width - border * 2, - height - border * 2, - radius, - ) - .fill(backgroundColor); + return new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); - const fill = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(borderColor) - .roundRect( - border, - border, - width - border * 2, - height - border * 2, - radius, - ) - .fill(fillColor); + const bg = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(borderColor) + .roundRect( + border, + border, + width - (border * 2), + height - (border * 2), + radius, + ) + .fill(backgroundColor); - // Component usage - progressBar = new ProgressBar({ - bg, - fill, - progress: value, - }); + const fill = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(borderColor) + .roundRect( + border, + border, + width - (border * 2), + height - (border * 2), + radius, + ) + .fill(fillColor); - if (vertical) { - progressBar.rotation = -Math.PI / 2; - } + // Component usage + progressBar = new ProgressBar({ + bg, + fill, + progress: value, + }); - list.addChild(progressBar); - view.addChild(list); - }, - resize: (view) => { - centerElement(view); - view.y += view.height; - }, - update: () => { - if (!animate || !progressBar) { - return; - } + if (vertical) + { + progressBar.rotation = -Math.PI / 2; + } - isFilling ? value++ : value--; + list.addChild(progressBar); + view.addChild(list); + }, + resize: (view) => + { + centerElement(view); + view.y += view.height; + }, + update: () => + { + if (!animate || !progressBar) + { + return; + } - if (value > 150) { - isFilling = false; - } else if (value < -50) { - isFilling = true; - } + isFilling ? value++ : value--; - progressBar.progress = value; - }, - }); + if (value > 150) + { + isFilling = false; + } + else if (value < -50) + { + isFilling = true; + } + + progressBar.progress = value; + }, + }); }; export default { - title: "Components/ProgressBar/UseGraphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/ProgressBar/UseGraphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/progressBar/ProgressBarNineSliceSprite.stories.ts b/src/stories/progressBar/ProgressBarNineSliceSprite.stories.ts index a2dc7d4..e798b3b 100644 --- a/src/stories/progressBar/ProgressBarNineSliceSprite.stories.ts +++ b/src/stories/progressBar/ProgressBarNineSliceSprite.stories.ts @@ -1,94 +1,108 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { List } from "../../List"; -import { ProgressBar } from "../../ProgressBar"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { List } from '../../List'; +import { ProgressBar } from '../../ProgressBar'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; const args = { - value: 50, - width: 500, - height: 60, - animate: true, - vertical: false, + value: 50, + width: 500, + height: 60, + animate: true, + vertical: false, }; export const NineSliceSprite: StoryFn = ( - { value, animate, vertical, width, height }, - context, -) => { - let isFilling = true; - let progressBar: ProgressBar; - - return new PixiStory({ + { value, animate, vertical, width, height }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); +) => +{ + let isFilling = true; + let progressBar: ProgressBar; + + return new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); - const assets = ["slider_bg.png", "slider_progress.png"]; + const assets = ['slider_bg.png', 'slider_progress.png']; - preload(assets).then(() => { - // Component usage !!! - progressBar = new ProgressBar({ - bg: "slider_bg.png", - fill: "slider_progress.png", - nineSliceSprite: { - bg: [22, 15, 22, 23], - fill: [22, 15, 22, 15], - }, - progress: value, - fillPaddings: { - top: 3, - right: 5, - bottom: 4.5, - left: 4.5, - }, - }); + preload(assets).then(() => + { + // Component usage !!! + progressBar = new ProgressBar({ + bg: 'slider_bg.png', + fill: 'slider_progress.png', + nineSliceSprite: { + bg: [22, 15, 22, 23], + fill: [22, 15, 22, 15], + }, + progress: value, + fillPaddings: { + top: 3, + right: 5, + bottom: 4.5, + left: 4.5, + }, + }); - progressBar.width = width; - progressBar.height = height; + progressBar.width = width; + progressBar.height = height; - list.addChild(progressBar); + list.addChild(progressBar); - if (vertical) { - progressBar.rotation = -Math.PI / 2; - list.y += list.height / 2; - } else { - list.x += -list.width / 2; - } - }); + if (vertical) + { + progressBar.rotation = -Math.PI / 2; + list.y += list.height / 2; + } + else + { + list.x += -list.width / 2; + } + }); - view.addChild(list); - }, + view.addChild(list); + }, - resize: (view) => { - centerElement(view); - if (vertical) { - view.y += view.height; - } - }, - update: () => { - if (!animate || !progressBar) { - return; - } + resize: (view) => + { + centerElement(view); + if (vertical) + { + view.y += view.height; + } + }, + update: () => + { + if (!animate || !progressBar) + { + return; + } - isFilling ? value++ : value--; + isFilling ? value++ : value--; - if (value > 150) { - isFilling = false; - } else if (value < -50) { - isFilling = true; - } + if (value > 150) + { + isFilling = false; + } + else if (value < -50) + { + isFilling = true; + } - if (progressBar) { - progressBar.progress = value; - } - }, - }); + if (progressBar) + { + progressBar.progress = value; + } + }, + }); }; export default { - title: "Components/ProgressBar/NineSliceSprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/ProgressBar/NineSliceSprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/progressBar/ProgressBarSprite.stories.ts b/src/stories/progressBar/ProgressBarSprite.stories.ts index 482453e..26ddd9e 100644 --- a/src/stories/progressBar/ProgressBarSprite.stories.ts +++ b/src/stories/progressBar/ProgressBarSprite.stories.ts @@ -1,82 +1,96 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { List } from "../../List"; -import { ProgressBar } from "../../ProgressBar"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { List } from '../../List'; +import { ProgressBar } from '../../ProgressBar'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; const args = { - value: 50, - animate: true, - vertical: false, + value: 50, + animate: true, + vertical: false, }; export const Sprite: StoryFn = ( - { value, animate, vertical }, - context, -) => { - let isFilling = true; - let progressBar: ProgressBar; - - return new PixiStory({ + { value, animate, vertical }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); - const assets = ["slider_bg.png", "slider_progress.png"]; +) => +{ + let isFilling = true; + let progressBar: ProgressBar; + + return new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); + const assets = ['slider_bg.png', 'slider_progress.png']; - preload(assets).then(() => { - // Component usage !!! - progressBar = new ProgressBar({ - bg: "slider_bg.png", - fill: "slider_progress.png", - progress: value, - fillPaddings: { - top: 3, - left: 4.5, - }, - }); + preload(assets).then(() => + { + // Component usage !!! + progressBar = new ProgressBar({ + bg: 'slider_bg.png', + fill: 'slider_progress.png', + progress: value, + fillPaddings: { + top: 3, + left: 4.5, + }, + }); - list.addChild(progressBar); + list.addChild(progressBar); - if (vertical) { - progressBar.rotation = -Math.PI / 2; - list.y += list.height / 2; - } else { - list.x += -list.width / 2; - } - }); + if (vertical) + { + progressBar.rotation = -Math.PI / 2; + list.y += list.height / 2; + } + else + { + list.x += -list.width / 2; + } + }); - view.addChild(list); - }, + view.addChild(list); + }, - resize: (view) => { - centerElement(view); - if (vertical) { - view.y += view.height; - } - }, - update: () => { - if (!animate || !progressBar) { - return; - } + resize: (view) => + { + centerElement(view); + if (vertical) + { + view.y += view.height; + } + }, + update: () => + { + if (!animate || !progressBar) + { + return; + } - isFilling ? value++ : value--; + isFilling ? value++ : value--; - if (value > 150) { - isFilling = false; - } else if (value < -50) { - isFilling = true; - } + if (value > 150) + { + isFilling = false; + } + else if (value < -50) + { + isFilling = true; + } - if (progressBar) { - progressBar.progress = value; - } - }, - }); + if (progressBar) + { + progressBar.progress = value; + } + }, + }); }; export default { - title: "Components/ProgressBar/Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/ProgressBar/Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/radio/RadioGraphics.stories.ts b/src/stories/radio/RadioGraphics.stories.ts index b0ca54c..cf050b7 100644 --- a/src/stories/radio/RadioGraphics.stories.ts +++ b/src/stories/radio/RadioGraphics.stories.ts @@ -1,149 +1,159 @@ -import { ColorSource, Graphics } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { CheckBox } from "../../CheckBox"; -import { RadioGroup } from "../../RadioGroup"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { ColorSource, Graphics } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { CheckBox } from '../../CheckBox'; +import { RadioGroup } from '../../RadioGroup'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Radio", - textColor: "#FFFFFF", - bgColor: "#F1D583", - fillColor: "#82C822", - width: 50, - height: 50, - padding: 5, - radius: 25, - amount: 3, - - onChange: action("Radio changed"), + text: 'Radio', + textColor: '#FFFFFF', + bgColor: '#F1D583', + fillColor: '#82C822', + width: 50, + height: 50, + padding: 5, + radius: 25, + amount: 3, + + onChange: action('Radio changed'), }; export const UseGraphics: StoryFn = ( - { - amount, - text, + { + amount, + text, - textColor, - fillColor, - bgColor, + textColor, + fillColor, + bgColor, + + width, + height, + padding, + radius, + + onChange, + }, + context, +) => + new PixiStory({ + context, + init: (view) => + { + const items = []; + + for (let i = 0; i < amount; i++) + { + items.push( + new CheckBox({ + text: `${text} ${i + 1}`, + style: { + unchecked: drawRadio({ + color: bgColor, + width, + height, + padding, + radius, + }), + checked: drawRadio({ + color: bgColor, + fillColor, + width, + height, + padding, + radius, + }), + text: { + ...defaultTextStyle, + fontSize: 22, + fill: textColor, + }, + }, + }), + ); + } + + // Component usage + const radioGroup = new RadioGroup({ + selectedItem: 0, + items, + type: 'vertical', + elementsMargin: 10, + }); + + radioGroup.onChange.connect( + (selectedItemID: number, selectedVal: string) => + onChange({ id: selectedItemID, val: selectedVal }), + ); + + view.addChild(radioGroup.innerView); + }, + resize: (view) => centerElement(view), + }); +function drawRadio({ + color, + fillColor, width, height, - padding, radius, + padding, +}: GraphicsType) +{ + const graphics = new Graphics(); - onChange, - }, - context, -) => - new PixiStory({ - context, - init: (view) => { - const items = []; - - for (let i = 0; i < amount; i++) { - items.push( - new CheckBox({ - text: `${text} ${i + 1}`, - style: { - unchecked: drawRadio({ - color: bgColor, - width, - height, + const isCircle = width === height && radius >= width / 2; + + if (isCircle) + { + graphics.circle(width / 2, width / 2, width / 2); + } + else + { + graphics.roundRect(0, 0, width, height, radius); + } + + graphics.fill(color); + + if (fillColor !== undefined) + { + const center = width / 2; + + if (isCircle) + { + graphics.circle(center, center, center - padding); + } + else + { + graphics.roundRect( padding, - radius, - }), - checked: drawRadio({ - color: bgColor, - fillColor, - width, - height, padding, + width - (padding * 2), + height - (padding * 2), radius, - }), - text: { - ...defaultTextStyle, - fontSize: 22, - fill: textColor, - }, - }, - }), - ); - } - - // Component usage - const radioGroup = new RadioGroup({ - selectedItem: 0, - items, - type: "vertical", - elementsMargin: 10, - }); - - radioGroup.onChange.connect( - (selectedItemID: number, selectedVal: string) => - onChange({ id: selectedItemID, val: selectedVal }), - ); - - view.addChild(radioGroup.innerView); - }, - resize: (view) => centerElement(view), - }); + ); + } -function drawRadio({ - color, - fillColor, - width, - height, - radius, - padding, -}: GraphicsType) { - const graphics = new Graphics(); - - const isCircle = width === height && radius >= width / 2; - - if (isCircle) { - graphics.circle(width / 2, width / 2, width / 2); - } else { - graphics.roundRect(0, 0, width, height, radius); - } - - graphics.fill(color); - - if (fillColor !== undefined) { - const center = width / 2; - - if (isCircle) { - graphics.circle(center, center, center - padding); - } else { - graphics.roundRect( - padding, - padding, - width - padding * 2, - height - padding * 2, - radius, - ); + graphics.fill(fillColor); } - graphics.fill(fillColor); - } - - return graphics; + return graphics; } type GraphicsType = { - color: ColorSource; - fillColor?: ColorSource; - width?: number; - height?: number; - radius?: number; - padding?: number; + color: ColorSource; + fillColor?: ColorSource; + width?: number; + height?: number; + radius?: number; + padding?: number; }; export default { - title: "Components/RadioGroup/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/RadioGroup/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/radio/RadioSprite.stories.ts b/src/stories/radio/RadioSprite.stories.ts index b37fae7..e0189a9 100644 --- a/src/stories/radio/RadioSprite.stories.ts +++ b/src/stories/radio/RadioSprite.stories.ts @@ -1,78 +1,81 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { CheckBox } from "../../CheckBox"; -import { List } from "../../List"; -import { RadioGroup } from "../../RadioGroup"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { CheckBox } from '../../CheckBox'; +import { List } from '../../List'; +import { RadioGroup } from '../../RadioGroup'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - text: "Radio", - textColor: "#FFFFFF", - amount: 3, - onChange: action("Radio changed"), + text: 'Radio', + textColor: '#FFFFFF', + amount: 3, + onChange: action('Radio changed'), }; export const UseSprite: StoryFn = ( - { amount, text, textColor, onChange }, - context, -) => - new PixiStory({ + { amount, text, textColor, onChange }, context, - init: (view) => { - const list = new List({ - type: "vertical", - elementsMargin: 20, - }); +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ + type: 'vertical', + elementsMargin: 20, + }); - const assets = [`radio.png`, `radio_checked.png`]; + const assets = [`radio.png`, `radio_checked.png`]; - preload(assets).then(() => { - const items = []; + preload(assets).then(() => + { + const items = []; - for (let i = 0; i < amount; i++) { - items.push( - new CheckBox({ - text: `${text} ${i + 1}`, - style: { - unchecked: "radio.png", - checked: "radio_checked.png", - text: { - ...defaultTextStyle, - fontSize: 22, - fill: textColor, - }, - }, - }), - ); - } + for (let i = 0; i < amount; i++) + { + items.push( + new CheckBox({ + text: `${text} ${i + 1}`, + style: { + unchecked: 'radio.png', + checked: 'radio_checked.png', + text: { + ...defaultTextStyle, + fontSize: 22, + fill: textColor, + }, + }, + }), + ); + } - // Component usage - const radioGroup = new RadioGroup({ - selectedItem: 0, - items, - type: "vertical", - elementsMargin: 10, - }); + // Component usage + const radioGroup = new RadioGroup({ + selectedItem: 0, + items, + type: 'vertical', + elementsMargin: 10, + }); - radioGroup.onChange.connect( - (selectedItemID: number, selectedVal: string) => - onChange({ id: selectedItemID, val: selectedVal }), - ); + radioGroup.onChange.connect( + (selectedItemID: number, selectedVal: string) => + onChange({ id: selectedItemID, val: selectedVal }), + ); - list.addChild(radioGroup.innerView); + list.addChild(radioGroup.innerView); - centerElement(list); - }); - view.addChild(list); - }, - resize: (view) => centerElement(view.children[0]), - }); + centerElement(list); + }); + view.addChild(list); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/RadioGroup/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/RadioGroup/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/scrollBox/ScrollBoxDynamicDimensions.stories.ts b/src/stories/scrollBox/ScrollBoxDynamicDimensions.stories.ts index 0b738e6..ccfadaa 100644 --- a/src/stories/scrollBox/ScrollBoxDynamicDimensions.stories.ts +++ b/src/stories/scrollBox/ScrollBoxDynamicDimensions.stories.ts @@ -1,94 +1,98 @@ -import { Graphics, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { ScrollBox } from "../../ScrollBox"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; +import { Graphics, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { ScrollBox } from '../../ScrollBox'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; const args = { - fontColor: "#000000", - backgroundColor: "#F5E3A9", - itemsAmount: 100, + fontColor: '#000000', + backgroundColor: '#F5E3A9', + itemsAmount: 100, }; export const UseDynamicDimensions: StoryFn = ( - { fontColor, itemsAmount, backgroundColor }, - context, -) => - new PixiStory({ + { fontColor, itemsAmount, backgroundColor }, context, - init(view) { - const sizes: { w: number; h: number }[] = [ - { w: 320, h: 440 }, - { w: 630, h: 440 }, - { w: 630, h: 360 }, - { w: 320, h: 200 }, - ]; - const elementsWidth = 300; - const elementsHeight = 80; - const radius = 20; - let currentSizeID = 0; +) => + new PixiStory({ + context, + init(view) + { + const sizes: { w: number; h: number }[] = [ + { w: 320, h: 440 }, + { w: 630, h: 440 }, + { w: 630, h: 360 }, + { w: 320, h: 200 }, + ]; + const elementsWidth = 300; + const elementsHeight = 80; + const radius = 20; + let currentSizeID = 0; - // Component usage !!! - const scrollBox = new ScrollBox({ - background: backgroundColor, - elementsMargin: 10, - width: sizes[currentSizeID].w, - height: sizes[currentSizeID].h, - radius, - padding: 10, - }); + // Component usage !!! + const scrollBox = new ScrollBox({ + background: backgroundColor, + elementsMargin: 10, + width: sizes[currentSizeID].w, + height: sizes[currentSizeID].h, + radius, + padding: 10, + }); - const items = []; - const resizeScrollBox = () => { - currentSizeID++; + const items = []; + const resizeScrollBox = () => + { + currentSizeID++; - if (currentSizeID >= sizes.length) { - currentSizeID = 0; - } + if (currentSizeID >= sizes.length) + { + currentSizeID = 0; + } - const size = sizes[currentSizeID]; + const size = sizes[currentSizeID]; - scrollBox.width = size.w; - scrollBox.height = size.h; - }; + scrollBox.width = size.w; + scrollBox.height = size.h; + }; - for (let i = 0; i < itemsAmount; i++) { - const button = new FancyButton({ - defaultView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xa5e24d), - hoverView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xfec230), - pressedView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xfe6048), - text: new Text({ - text: `Item ${i + 1}`, - style: { - ...defaultTextStyle, - fill: fontColor, - }, - }), - }); + for (let i = 0; i < itemsAmount; i++) + { + const button = new FancyButton({ + defaultView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xa5e24d), + hoverView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xfec230), + pressedView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xfe6048), + text: new Text({ + text: `Item ${i + 1}`, + style: { + ...defaultTextStyle, + fill: fontColor, + }, + }), + }); - button.anchor.set(0); - button.onPress.connect(() => resizeScrollBox()); + button.anchor.set(0); + button.onPress.connect(() => resizeScrollBox()); - items.push(button); - } + items.push(button); + } - scrollBox.addItems(items); + scrollBox.addItems(items); - view.addChild(scrollBox); - }, - resize: (view) => centerElement(view.children[0]), - }); + view.addChild(scrollBox); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/ScrollBox/Use Dynamic Dimensions", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/ScrollBox/Use Dynamic Dimensions', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts index 9c70986..c7f2d0a 100644 --- a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts +++ b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts @@ -1,106 +1,108 @@ -import { Graphics, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { ScrollBox } from "../../ScrollBox"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Graphics, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { ScrollBox } from '../../ScrollBox'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - fontColor: "#000000", - backgroundColor: "#F5E3A9", - width: 320, - height: 420, - radius: 20, - elementsMargin: 10, - elementsPadding: 10, - elementsWidth: 300, - elementsHeight: 80, - itemsAmount: 100, - disableEasing: false, - globalScroll: true, - shiftScroll: false, - type: [undefined, "vertical", "horizontal"], - onPress: action("Button pressed"), + fontColor: '#000000', + backgroundColor: '#F5E3A9', + width: 320, + height: 420, + radius: 20, + elementsMargin: 10, + elementsPadding: 10, + elementsWidth: 300, + elementsHeight: 80, + itemsAmount: 100, + disableEasing: false, + globalScroll: true, + shiftScroll: false, + type: [undefined, 'vertical', 'horizontal'], + onPress: action('Button pressed'), }; export const UseGraphics: StoryFn< - typeof args & { type: "vertical" | "horizontal" | undefined } + typeof args & { type: 'vertical' | 'horizontal' | undefined } > = ( - { - fontColor, - elementsMargin, - elementsPadding, - elementsWidth, - elementsHeight, - width, - height, - radius, - itemsAmount, - backgroundColor, - disableEasing, - type, - onPress, - globalScroll, - shiftScroll, - }, - context, -) => - new PixiStory({ - context, - init: (view) => { - const items = []; - - for (let i = 0; i < itemsAmount; i++) { - const button = new FancyButton({ - defaultView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xa5e24d), - hoverView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xfec230), - pressedView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xfe6048), - text: new Text({ - text: `Item ${i + 1}`, - style: { - ...defaultTextStyle, - fill: fontColor, - }, - }), - }); - - button.anchor.set(0); - button.onPress.connect(() => onPress(i + 1)); - - items.push(button); - } - - // Component usage !!! - const scrollBox = new ScrollBox({ - background: backgroundColor, + { + fontColor, elementsMargin, + elementsPadding, + elementsWidth, + elementsHeight, width, height, radius, - padding: elementsPadding, + itemsAmount, + backgroundColor, disableEasing, type, + onPress, globalScroll, shiftScroll, - }); + }, + context, +) => + new PixiStory({ + context, + init: (view) => + { + const items = []; - scrollBox.addItems(items); + for (let i = 0; i < itemsAmount; i++) + { + const button = new FancyButton({ + defaultView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xa5e24d), + hoverView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xfec230), + pressedView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xfe6048), + text: new Text({ + text: `Item ${i + 1}`, + style: { + ...defaultTextStyle, + fill: fontColor, + }, + }), + }); - view.addChild(scrollBox); - }, - resize: (view) => centerElement(view.children[0]), - }); + button.anchor.set(0); + button.onPress.connect(() => onPress(i + 1)); + + items.push(button); + } + + // Component usage !!! + const scrollBox = new ScrollBox({ + background: backgroundColor, + elementsMargin, + width, + height, + radius, + padding: elementsPadding, + disableEasing, + type, + globalScroll, + shiftScroll, + }); + + scrollBox.addItems(items); + + view.addChild(scrollBox); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/ScrollBox/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/ScrollBox/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/scrollBox/ScrollBoxProximity.stories.ts b/src/stories/scrollBox/ScrollBoxProximity.stories.ts index 6b70e7b..436a953 100644 --- a/src/stories/scrollBox/ScrollBoxProximity.stories.ts +++ b/src/stories/scrollBox/ScrollBoxProximity.stories.ts @@ -1,128 +1,133 @@ -import { Graphics, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { ScrollBox } from "../../ScrollBox"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Graphics, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { ScrollBox } from '../../ScrollBox'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - proximityRange: 100, - proximityDebounce: 10, - width: 320, - height: 420, - radius: 20, - elementsMargin: 10, - elementsPadding: 10, - elementsWidth: 300, - elementsHeight: 80, - itemsAmount: 100, - type: [undefined, "vertical", "horizontal"], - fadeSpeed: 0.5, + proximityRange: 100, + proximityDebounce: 10, + width: 320, + height: 420, + radius: 20, + elementsMargin: 10, + elementsPadding: 10, + elementsWidth: 300, + elementsHeight: 80, + itemsAmount: 100, + type: [undefined, 'vertical', 'horizontal'], + fadeSpeed: 0.5, }; const items: FancyButton[] = []; const inRangeCache: boolean[] = []; export const ProximityEvent: StoryFn< - typeof args & { type: "vertical" | "horizontal" | undefined } + typeof args & { type: 'vertical' | 'horizontal' | undefined } > = ( - { - width, - height, - radius, - elementsMargin, - elementsPadding, - elementsWidth, - elementsHeight, - itemsAmount, - proximityRange, - proximityDebounce, - type, - fadeSpeed, - }, - context, -) => - new PixiStory({ + { + width, + height, + radius, + elementsMargin, + elementsPadding, + elementsWidth, + elementsHeight, + itemsAmount, + proximityRange, + proximityDebounce, + type, + fadeSpeed, + }, context, - init: (view) => { - const fontColor = "#000000"; - const backgroundColor = "#F5E3A9"; - const disableEasing = false; - const globalScroll = true; - const shiftScroll = type === "horizontal"; - const onPress = action("Button pressed"); +) => + new PixiStory({ + context, + init: (view) => + { + const fontColor = '#000000'; + const backgroundColor = '#F5E3A9'; + const disableEasing = false; + const globalScroll = true; + const shiftScroll = type === 'horizontal'; + const onPress = action('Button pressed'); - items.length = 0; - inRangeCache.length = 0; + items.length = 0; + inRangeCache.length = 0; - for (let i = 0; i < itemsAmount; i++) { - const button = new FancyButton({ - defaultView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xa5e24d), - hoverView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xfec230), - pressedView: new Graphics() - .roundRect(0, 0, elementsWidth, elementsHeight, radius) - .fill(0xfe6048), - text: new Text({ - text: `Item ${i + 1}`, - style: { - ...defaultTextStyle, - fill: fontColor, - }, - }), - }); + for (let i = 0; i < itemsAmount; i++) + { + const button = new FancyButton({ + defaultView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xa5e24d), + hoverView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xfec230), + pressedView: new Graphics() + .roundRect(0, 0, elementsWidth, elementsHeight, radius) + .fill(0xfe6048), + text: new Text({ + text: `Item ${i + 1}`, + style: { + ...defaultTextStyle, + fill: fontColor, + }, + }), + }); - button.anchor.set(0); - button.onPress.connect(() => onPress(i + 1)); - button.alpha = 0; + button.anchor.set(0); + button.onPress.connect(() => onPress(i + 1)); + button.alpha = 0; - items.push(button); - inRangeCache.push(false); - } + items.push(button); + inRangeCache.push(false); + } - const scrollBox = new ScrollBox({ - background: backgroundColor, - elementsMargin, - width, - height, - radius, - padding: elementsPadding, - disableEasing, - globalScroll, - shiftScroll, - type, - proximityRange, - proximityDebounce, - }); + const scrollBox = new ScrollBox({ + background: backgroundColor, + elementsMargin, + width, + height, + radius, + padding: elementsPadding, + disableEasing, + globalScroll, + shiftScroll, + type, + proximityRange, + proximityDebounce, + }); - scrollBox.addItems(items); + scrollBox.addItems(items); - // Handle on proximity change event. - scrollBox.onProximityChange.connect(({ index, inRange }) => { - inRangeCache[index] = inRange; - }); + // Handle on proximity change event. + scrollBox.onProximityChange.connect(({ index, inRange }) => + { + inRangeCache[index] = inRange; + }); - view.addChild(scrollBox); - }, - resize: (view) => centerElement(view.children[0]), - update: () => { - items.forEach((item, index) => { - const inRange = inRangeCache[index]; + view.addChild(scrollBox); + }, + resize: (view) => centerElement(view.children[0]), + update: () => + { + items.forEach((item, index) => + { + const inRange = inRangeCache[index]; - // Fade in/out according to whether the item is within the specified range. - if (inRange && item.alpha < 1) item.alpha += 0.04 * fadeSpeed; - else if (!inRange && item.alpha > 0) item.alpha -= 0.04 * fadeSpeed; - }); - }, - }); + // Fade in/out according to whether the item is within the specified range. + if (inRange && item.alpha < 1) item.alpha += 0.04 * fadeSpeed; + else if (!inRange && item.alpha > 0) item.alpha -= 0.04 * fadeSpeed; + }); + }, + }); export default { - title: "Components/ScrollBox/Proximity Event", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/ScrollBox/Proximity Event', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/scrollBox/ScrollBoxSprite.stories.ts b/src/stories/scrollBox/ScrollBoxSprite.stories.ts index 261ff48..6e77abd 100644 --- a/src/stories/scrollBox/ScrollBoxSprite.stories.ts +++ b/src/stories/scrollBox/ScrollBoxSprite.stories.ts @@ -1,132 +1,136 @@ -import { ColorSource, Container, Sprite, Text } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { FancyButton } from "../../FancyButton"; -import { ScrollBox } from "../../ScrollBox"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { ColorSource, Container, Sprite, Text } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { FancyButton } from '../../FancyButton'; +import { ScrollBox } from '../../ScrollBox'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - fontColor: "#000000", - elementsMargin: 6, - itemsAmount: 100, - disableEasing: false, - type: [undefined, "vertical", "horizontal"], - onPress: action("Button pressed"), - globalScroll: true, - shiftScroll: false, + fontColor: '#000000', + elementsMargin: 6, + itemsAmount: 100, + disableEasing: false, + type: [undefined, 'vertical', 'horizontal'], + onPress: action('Button pressed'), + globalScroll: true, + shiftScroll: false, }; export const UseSprite: StoryFn< - typeof args & { type: "vertical" | "horizontal" | undefined } + typeof args & { type: 'vertical' | 'horizontal' | undefined } > = ( - { - fontColor, - elementsMargin, - itemsAmount, - disableEasing, - type, - onPress, - globalScroll, - shiftScroll, - }, - context, -) => - new PixiStory({ - context, - init: (view) => { - const assets = [ - `window.png`, - `SmallButton.png`, - `SmallButton-hover.png`, - `SmallButton-pressed.png`, - ]; - - preload(assets).then(() => { - const window = new Container(); - const windowBg = Sprite.from(`window.png`); - const title = new Text({ - text: `Levels`, - style: { fill: 0x000000, fontSize: 40 }, - }); - - title.anchor.set(0.5); - window.addChild(windowBg, title); - title.x = windowBg.width / 2; - title.y = 25; - - view.addChild(window); - - const items: Container[] = createItems(itemsAmount, fontColor, onPress); - - // Component usage !!! - const scrollBox = new ScrollBox({ - elementsMargin, - width: window.width - 80, - height: window.height - 90, - vertPadding: 18, - radius: 5, - disableEasing, - type, - globalScroll, - shiftScroll, - }); - - scrollBox.addItems(items); - - scrollBox.x = window.width / 2 - scrollBox.width / 2; - scrollBox.y = window.height / 2 - scrollBox.height / 2 + 18; - - window.addChild(scrollBox); - - centerElement(view); - }); + { + fontColor, + elementsMargin, + itemsAmount, + disableEasing, + type, + onPress, + globalScroll, + shiftScroll, }, + context, +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [ + `window.png`, + `SmallButton.png`, + `SmallButton-hover.png`, + `SmallButton-pressed.png`, + ]; + + preload(assets).then(() => + { + const window = new Container(); + const windowBg = Sprite.from(`window.png`); + const title = new Text({ + text: `Levels`, + style: { fill: 0x000000, fontSize: 40 }, + }); + + title.anchor.set(0.5); + window.addChild(windowBg, title); + title.x = windowBg.width / 2; + title.y = 25; + + view.addChild(window); + + const items: Container[] = createItems(itemsAmount, fontColor, onPress); + + // Component usage !!! + const scrollBox = new ScrollBox({ + elementsMargin, + width: window.width - 80, + height: window.height - 90, + vertPadding: 18, + radius: 5, + disableEasing, + type, + globalScroll, + shiftScroll, + }); + + scrollBox.addItems(items); + + scrollBox.x = (window.width / 2) - (scrollBox.width / 2); + scrollBox.y = (window.height / 2) - (scrollBox.height / 2) + 18; + + window.addChild(scrollBox); + + centerElement(view); + }); + }, - resize: centerElement, - }); + resize: centerElement, + }); function createItems( - itemsAmount: number, - fontColor: ColorSource, - onPress: (buttonID: number) => void, -): FancyButton[] { - const items = []; - - for (let i = 0; i < itemsAmount; i++) { - const button = new FancyButton({ - defaultView: `SmallButton.png`, - hoverView: `SmallButton-hover.png`, - pressedView: `SmallButton-pressed.png`, - text: new Text({ - text: i + 1, - style: { - ...defaultTextStyle, - fontSize: 68, - fill: fontColor, - }, - }), - textOffset: { - x: 0, - y: -7, - }, - }); + itemsAmount: number, + fontColor: ColorSource, + onPress: (buttonID: number) => void, +): FancyButton[] +{ + const items = []; + + for (let i = 0; i < itemsAmount; i++) + { + const button = new FancyButton({ + defaultView: `SmallButton.png`, + hoverView: `SmallButton-hover.png`, + pressedView: `SmallButton-pressed.png`, + text: new Text({ + text: i + 1, + style: { + ...defaultTextStyle, + fontSize: 68, + fill: fontColor, + }, + }), + textOffset: { + x: 0, + y: -7, + }, + }); - button.anchor.set(0); - button.scale.set(0.5); + button.anchor.set(0); + button.scale.set(0.5); - button.onPress.connect(() => onPress(i + 1)); + button.onPress.connect(() => onPress(i + 1)); - items.push(button); - } + items.push(button); + } - return items; + return items; } export default { - title: "Components/ScrollBox/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/ScrollBox/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/select/SelectGraphics.stories.ts b/src/stories/select/SelectGraphics.stories.ts index 5125060..521f09a 100644 --- a/src/stories/select/SelectGraphics.stories.ts +++ b/src/stories/select/SelectGraphics.stories.ts @@ -1,151 +1,159 @@ -import { ColorSource, Container, Graphics, Sprite, TextStyle } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Select } from "../../Select"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { ColorSource, Container, Graphics, Sprite, TextStyle } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Select } from '../../Select'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - backgroundColor: "#F5E3A9", - dropDownBackgroundColor: "#F5E3A9", - dropDownHoverColor: "#A5E24D", - fontColor: "#000000", - fontSize: 28, - width: 250, - height: 50, - radius: 15, - itemsAmount: 100, - onSelect: action("Item selected"), + backgroundColor: '#F5E3A9', + dropDownBackgroundColor: '#F5E3A9', + dropDownHoverColor: '#A5E24D', + fontColor: '#000000', + fontSize: 28, + width: 250, + height: 50, + radius: 15, + itemsAmount: 100, + onSelect: action('Item selected'), }; export const UseGraphics: StoryFn = ( - { - fontColor, - fontSize, - width, - height, - radius, - itemsAmount, - backgroundColor, - dropDownBackgroundColor, - dropDownHoverColor, - onSelect, - }, - context, -) => - new PixiStory({ - context, - init: (view) => { - const textStyle = { - ...defaultTextStyle, - fill: fontColor, + { + fontColor, fontSize, - } as TextStyle; - - const items = getItems(itemsAmount, "Item"); - - // Component usage !!! - // Important: in order scroll to work, you have to call update() method in your game loop. - const select = new Select({ - closedBG: getClosedBG(backgroundColor, width, height, radius), - openBG: getOpenBG(dropDownBackgroundColor, width, height, radius), - textStyle, - items: { - items, - backgroundColor, - hoverColor: dropDownHoverColor, - width, - height, - textStyle, - radius, - }, - scrollBox: { - width, - height: height * 5, - radius, - }, - }); - - select.y = 10; - - select.onSelect.connect((_, text) => { - onSelect({ - id: select.value, - text, - }); - }); - - view.addChild(select); + width, + height, + radius, + itemsAmount, + backgroundColor, + dropDownBackgroundColor, + dropDownHoverColor, + onSelect, }, + context, +) => + new PixiStory({ + context, + init: (view) => + { + const textStyle = { + ...defaultTextStyle, + fill: fontColor, + fontSize, + } as TextStyle; + + const items = getItems(itemsAmount, 'Item'); + + // Component usage !!! + // Important: in order scroll to work, you have to call update() method in your game loop. + const select = new Select({ + closedBG: getClosedBG(backgroundColor, width, height, radius), + openBG: getOpenBG(dropDownBackgroundColor, width, height, radius), + textStyle, + items: { + items, + backgroundColor, + hoverColor: dropDownHoverColor, + width, + height, + textStyle, + radius, + }, + scrollBox: { + width, + height: height * 5, + radius, + }, + }); + + select.y = 10; + + select.onSelect.connect((_, text) => + { + onSelect({ + id: select.value, + text, + }); + }); + + view.addChild(select); + }, - resize: (view) => centerElement(view, 0.5, 0), - }); + resize: (view) => centerElement(view, 0.5, 0), + }); function getClosedBG( - backgroundColor: ColorSource, - width: number, - height: number, - radius: number, -) { - const view = new Container(); - const closedBG = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(backgroundColor); - - view.addChild(closedBG); - - preload(["arrow_down.png"]).then(() => { - const arrowDown = Sprite.from("arrow_down.png"); - - arrowDown.anchor.set(0.5); - arrowDown.x = width * 0.9; - arrowDown.y = height / 2; - view.addChild(arrowDown); - }); - - return view; + backgroundColor: ColorSource, + width: number, + height: number, + radius: number, +) +{ + const view = new Container(); + const closedBG = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(backgroundColor); + + view.addChild(closedBG); + + preload(['arrow_down.png']).then(() => + { + const arrowDown = Sprite.from('arrow_down.png'); + + arrowDown.anchor.set(0.5); + arrowDown.x = width * 0.9; + arrowDown.y = height / 2; + view.addChild(arrowDown); + }); + + return view; } function getOpenBG( - backgroundColor: ColorSource, - width: number, - height: number, - radius: number, -) { - const view = new Container(); - const openBG = new Graphics() - .roundRect(0, 0, width, height * 6, radius) - .fill(backgroundColor); - - view.addChild(openBG); - - preload(["arrow_down.png"]).then(() => { - const arrowUp = Sprite.from("arrow_down.png"); - - arrowUp.angle = 180; - arrowUp.anchor.set(0.5); - arrowUp.x = width * 0.9; - arrowUp.y = height / 2; - view.addChild(arrowUp); - }); - - return view; + backgroundColor: ColorSource, + width: number, + height: number, + radius: number, +) +{ + const view = new Container(); + const openBG = new Graphics() + .roundRect(0, 0, width, height * 6, radius) + .fill(backgroundColor); + + view.addChild(openBG); + + preload(['arrow_down.png']).then(() => + { + const arrowUp = Sprite.from('arrow_down.png'); + + arrowUp.angle = 180; + arrowUp.anchor.set(0.5); + arrowUp.x = width * 0.9; + arrowUp.y = height / 2; + view.addChild(arrowUp); + }); + + return view; } -function getItems(itemsAmount: number, text: string): string[] { - const items: string[] = []; +function getItems(itemsAmount: number, text: string): string[] +{ + const items: string[] = []; - for (let i = 0; i < itemsAmount; i++) { - items.push(`${text} ${i + 1}`); - } + for (let i = 0; i < itemsAmount; i++) + { + items.push(`${text} ${i + 1}`); + } - return items; + return items; } export default { - title: "Components/Select/Use Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Select/Use Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/select/SelectHTMLText.stories.ts b/src/stories/select/SelectHTMLText.stories.ts index bb73b5f..3487f0f 100644 --- a/src/stories/select/SelectHTMLText.stories.ts +++ b/src/stories/select/SelectHTMLText.stories.ts @@ -1,147 +1,155 @@ -import { Container, Graphics, HTMLText, Sprite } from "pixi.js"; -import { Select } from "../../Select"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { getColor } from "../utils/color"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { Container, Graphics, HTMLText, Sprite } from 'pixi.js'; +import { Select } from '../../Select'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { getColor } from '../utils/color'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; -import type { StoryFn } from "@storybook/types"; +import type { StoryFn } from '@storybook/types'; const args = { - backgroundColor: "#F5E3A9", - dropDownBackgroundColor: "#F5E3A9", - dropDownHoverColor: "#A5E24D", - fontColor: "#000000", - fontSize: 28, - width: 250, - height: 50, - radius: 15, - itemsAmount: 5, - onSelect: action("Item selected"), + backgroundColor: '#F5E3A9', + dropDownBackgroundColor: '#F5E3A9', + dropDownHoverColor: '#A5E24D', + fontColor: '#000000', + fontSize: 28, + width: 250, + height: 50, + radius: 15, + itemsAmount: 5, + onSelect: action('Item selected'), }; export const UseHTMLText: StoryFn = ({ - fontColor, - fontSize, - width, - height, - radius, - itemsAmount, - backgroundColor, - dropDownBackgroundColor, - dropDownHoverColor, - onSelect, -}: any) => { - const view = new Container(); - - backgroundColor = getColor(backgroundColor); - fontColor = getColor(fontColor); - dropDownBackgroundColor = getColor(dropDownBackgroundColor); - const hoverColor = getColor(dropDownHoverColor); - const textStyle = { ...defaultTextStyle, fill: fontColor, fontSize }; - - const items = getItems(itemsAmount, "Item"); - - // Component usage !!! - // Important: in order scroll to work, you have to call update() method in your game loop. - const select = new Select({ - closedBG: getClosedBG(backgroundColor, width, height, radius), - openBG: getOpenBG(dropDownBackgroundColor, width, height, radius), - textStyle, - TextClass: HTMLText, - items: { - items, - backgroundColor, - hoverColor, - width, - height, - textStyle, - TextClass: HTMLText, - radius, - }, - scrollBox: { - width, - height: height * 5, - radius, - }, - }); - - select.y = 10; - - select.onSelect.connect((_, text) => { - onSelect({ - id: select.value, - text, + fontColor, + fontSize, + width, + height, + radius, + itemsAmount, + backgroundColor, + dropDownBackgroundColor, + dropDownHoverColor, + onSelect, +}: any) => +{ + const view = new Container(); + + backgroundColor = getColor(backgroundColor); + fontColor = getColor(fontColor); + dropDownBackgroundColor = getColor(dropDownBackgroundColor); + const hoverColor = getColor(dropDownHoverColor); + const textStyle = { ...defaultTextStyle, fill: fontColor, fontSize }; + + const items = getItems(itemsAmount, 'Item'); + + // Component usage !!! + // Important: in order scroll to work, you have to call update() method in your game loop. + const select = new Select({ + closedBG: getClosedBG(backgroundColor, width, height, radius), + openBG: getOpenBG(dropDownBackgroundColor, width, height, radius), + textStyle, + TextClass: HTMLText, + items: { + items, + backgroundColor, + hoverColor, + width, + height, + textStyle, + TextClass: HTMLText, + radius, + }, + scrollBox: { + width, + height: height * 5, + radius, + }, }); - }); - view.addChild(select); + select.y = 10; - return { - view, - resize: () => centerElement(view, 0.5, 0), - }; + select.onSelect.connect((_, text) => + { + onSelect({ + id: select.value, + text, + }); + }); + + view.addChild(select); + + return { + view, + resize: () => centerElement(view, 0.5, 0), + }; }; function getClosedBG( - backgroundColor: number, - width: number, - height: number, - radius: number, -) { - const closedBG = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(backgroundColor); - - preload(["arrow_down.png"]).then(() => { - const arrowDown = Sprite.from("arrow_down.png"); - - arrowDown.anchor.set(0.5); - arrowDown.x = width * 0.9; - arrowDown.y = height / 2; - closedBG.addChild(arrowDown); - }); - - return closedBG; + backgroundColor: number, + width: number, + height: number, + radius: number, +) +{ + const closedBG = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(backgroundColor); + + preload(['arrow_down.png']).then(() => + { + const arrowDown = Sprite.from('arrow_down.png'); + + arrowDown.anchor.set(0.5); + arrowDown.x = width * 0.9; + arrowDown.y = height / 2; + closedBG.addChild(arrowDown); + }); + + return closedBG; } function getOpenBG( - backgroundColor: number, - width: number, - height: number, - radius: number, -) { - const openBG = new Graphics() - .roundRect(0, 0, width, height * 6, radius) - .fill(backgroundColor); - - preload(["arrow_down.png"]).then(() => { - const arrowUp = Sprite.from("arrow_down.png"); - - arrowUp.angle = 180; - arrowUp.anchor.set(0.5); - arrowUp.x = width * 0.9; - arrowUp.y = height / 2; - openBG.addChild(arrowUp); - }); - - return openBG; + backgroundColor: number, + width: number, + height: number, + radius: number, +) +{ + const openBG = new Graphics() + .roundRect(0, 0, width, height * 6, radius) + .fill(backgroundColor); + + preload(['arrow_down.png']).then(() => + { + const arrowUp = Sprite.from('arrow_down.png'); + + arrowUp.angle = 180; + arrowUp.anchor.set(0.5); + arrowUp.x = width * 0.9; + arrowUp.y = height / 2; + openBG.addChild(arrowUp); + }); + + return openBG; } -function getItems(itemsAmount: number, text: string): string[] { - const items: string[] = []; +function getItems(itemsAmount: number, text: string): string[] +{ + const items: string[] = []; - for (let i = 0; i < itemsAmount; i++) { - items.push(`${text} ${i + 1}`); - } + for (let i = 0; i < itemsAmount; i++) + { + items.push(`${text} ${i + 1}`); + } - return items; + return items; } export default { - title: "Components/Select/Use HTML Text", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Select/Use HTML Text', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/select/SelectSprite.stories.ts b/src/stories/select/SelectSprite.stories.ts index 64b98da..258558f 100644 --- a/src/stories/select/SelectSprite.stories.ts +++ b/src/stories/select/SelectSprite.stories.ts @@ -1,99 +1,104 @@ -import { TextStyle } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Select } from "../../Select"; -import { centerElement } from "../../utils/helpers/resize"; -import { defaultTextStyle } from "../../utils/helpers/styles"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { TextStyle } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Select } from '../../Select'; +import { centerElement } from '../../utils/helpers/resize'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - dropDownHoverColor: "#A5E24D", - fontColor: "#FFFFFF", - fontSize: 28, - itemsAmount: 100, - onSelect: action("Item selected"), + dropDownHoverColor: '#A5E24D', + fontColor: '#FFFFFF', + fontSize: 28, + itemsAmount: 100, + onSelect: action('Item selected'), }; export const UseSprite: StoryFn = ( - { fontColor, fontSize, itemsAmount, dropDownHoverColor, onSelect }, - context, -) => - new PixiStory({ + { fontColor, fontSize, itemsAmount, dropDownHoverColor, onSelect }, context, - init: (view) => { - const assets = [`select_closed.png`, `select_open.png`]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = [`select_closed.png`, `select_open.png`]; - let select: Select; + let select: Select; - preload(assets).then(() => { - const textStyle = { - ...defaultTextStyle, - fill: fontColor, - fontSize, - } as TextStyle; + preload(assets).then(() => + { + const textStyle = { + ...defaultTextStyle, + fill: fontColor, + fontSize, + } as TextStyle; - const items = getItems(itemsAmount, "Item"); + const items = getItems(itemsAmount, 'Item'); - // Component usage !!! - // Important: in order scroll to work, you have to call update() method in your game loop. - select = new Select({ - closedBG: `select_closed.png`, - openBG: `select_open.png`, - textStyle, - items: { - items, - backgroundColor: "RGBA(0, 0, 0, 0.0001)", - hoverColor: dropDownHoverColor, - width: 200, - height: 50, - textStyle, - radius: 25, - }, - selectedTextOffset: { - y: -13, - }, - scrollBox: { - width: 200, - height: 350, - radius: 30, - offset: { - y: -16, - x: 24, - }, - }, - }); + // Component usage !!! + // Important: in order scroll to work, you have to call update() method in your game loop. + select = new Select({ + closedBG: `select_closed.png`, + openBG: `select_open.png`, + textStyle, + items: { + items, + backgroundColor: 'RGBA(0, 0, 0, 0.0001)', + hoverColor: dropDownHoverColor, + width: 200, + height: 50, + textStyle, + radius: 25, + }, + selectedTextOffset: { + y: -13, + }, + scrollBox: { + width: 200, + height: 350, + radius: 30, + offset: { + y: -16, + x: 24, + }, + }, + }); - select.y = 10; + select.y = 10; - select.onSelect.connect((_, text) => { - onSelect({ - id: select.value, - text, - }); - }); + select.onSelect.connect((_, text) => + { + onSelect({ + id: select.value, + text, + }); + }); - view.addChild(select); + view.addChild(select); - centerElement(view, 0.5, 0); - }); - }, + centerElement(view, 0.5, 0); + }); + }, - resize: (view) => centerElement(view, 0.5, 0), - }); + resize: (view) => centerElement(view, 0.5, 0), + }); -function getItems(itemsAmount: number, text: string): string[] { - const items: string[] = []; +function getItems(itemsAmount: number, text: string): string[] +{ + const items: string[] = []; - for (let i = 0; i < itemsAmount; i++) { - items.push(`${text} ${i + 1}`); - } + for (let i = 0; i < itemsAmount; i++) + { + items.push(`${text} ${i + 1}`); + } - return items; + return items; } export default { - title: "Components/Select/Use Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Select/Use Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/slider/DoubleSliderGraphics.stories.ts b/src/stories/slider/DoubleSliderGraphics.stories.ts index 60e5361..8f52c45 100644 --- a/src/stories/slider/DoubleSliderGraphics.stories.ts +++ b/src/stories/slider/DoubleSliderGraphics.stories.ts @@ -1,122 +1,124 @@ -import { Graphics } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { DoubleSlider } from "../../DoubleSlider"; -import { List } from "../../List"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Graphics } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { DoubleSlider } from '../../DoubleSlider'; +import { List } from '../../List'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - meshColor: "#a5e34d", - fillColor: "#00b1dd", - borderColor: "#FFFFFF", - backgroundColor: "#fe6048", - fontColor: "#FFFFFF", - min: 0, - max: 100, - value1: 15, - value2: 85, - width: 450, - height: 35, - radius: 25, - fontSize: 20, - border: 5, - handleBorder: 3, - showValue: true, - onChange: action("Slider"), + meshColor: '#a5e34d', + fillColor: '#00b1dd', + borderColor: '#FFFFFF', + backgroundColor: '#fe6048', + fontColor: '#FFFFFF', + min: 0, + max: 100, + value1: 15, + value2: 85, + width: 450, + height: 35, + radius: 25, + fontSize: 20, + border: 5, + handleBorder: 3, + showValue: true, + onChange: action('Slider'), }; export const Double: StoryFn = ( - { - min, - max, - value1, - value2, - meshColor, - borderColor, - backgroundColor, - fillColor, - width, - height, - radius, - fontSize, - fontColor, - border, - handleBorder, - showValue, - onChange, - }, - context, -) => - new PixiStory({ + { + min, + max, + value1, + value2, + meshColor, + borderColor, + backgroundColor, + fillColor, + width, + height, + radius, + fontSize, + fontColor, + border, + handleBorder, + showValue, + onChange, + }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); - const bg = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(borderColor) - .roundRect( - border, - border, - width - border * 2, - height - border * 2, - radius, - ) - .fill(backgroundColor); + const bg = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(borderColor) + .roundRect( + border, + border, + width - (border * 2), + height - (border * 2), + radius, + ) + .fill(backgroundColor); - const fill = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(borderColor) - .roundRect( - border, - border, - width - border * 2, - height - border * 2, - radius, - ) - .fill(fillColor); + const fill = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(borderColor) + .roundRect( + border, + border, + width - (border * 2), + height - (border * 2), + radius, + ) + .fill(fillColor); - const slider1 = new Graphics() - .circle(0, 0, 20 + handleBorder) - .fill(borderColor) - .circle(0, 0, 20) - .fill(meshColor); + const slider1 = new Graphics() + .circle(0, 0, 20 + handleBorder) + .fill(borderColor) + .circle(0, 0, 20) + .fill(meshColor); - const slider2 = new Graphics() - .circle(0, 0, 20 + handleBorder) - .fill(borderColor) - .circle(0, 0, 20) - .fill(meshColor); + const slider2 = new Graphics() + .circle(0, 0, 20 + handleBorder) + .fill(borderColor) + .circle(0, 0, 20) + .fill(meshColor); - const doubleSlider = new DoubleSlider({ - bg, - fill, - slider1, - slider2, - min, - max, - value1, - value2, - valueTextStyle: { - fill: fontColor, - fontSize, - }, - showValue, - }); + const doubleSlider = new DoubleSlider({ + bg, + fill, + slider1, + slider2, + min, + max, + value1, + value2, + valueTextStyle: { + fill: fontColor, + fontSize, + }, + showValue, + }); - doubleSlider.onChange.connect((value1, value2) => { - onChange(`${value1} - ${value2}`); - }); + doubleSlider.onChange.connect((value1, value2) => + { + onChange(`${value1} - ${value2}`); + }); - list.addChild(doubleSlider); - view.addChild(list); - }, - resize: (view) => centerElement(view.children[0]), - }); + list.addChild(doubleSlider); + view.addChild(list); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Slider/Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Slider/Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/slider/DoubleSliderNineSliceSprite.stories.ts b/src/stories/slider/DoubleSliderNineSliceSprite.stories.ts index ff33dfe..1d16732 100644 --- a/src/stories/slider/DoubleSliderNineSliceSprite.stories.ts +++ b/src/stories/slider/DoubleSliderNineSliceSprite.stories.ts @@ -1,89 +1,91 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { DoubleSlider } from "../../DoubleSlider"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { DoubleSlider } from '../../DoubleSlider'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - fontColor: "#FFFFFF", - min: 0, - max: 100, - value1: 15, - value2: 85, - fontSize: 20, - showValue: true, - width: 500, - height: 38, - onChange: action("Slider"), + fontColor: '#FFFFFF', + min: 0, + max: 100, + value1: 15, + value2: 85, + fontSize: 20, + showValue: true, + width: 500, + height: 38, + onChange: action('Slider'), }; export const Double: StoryFn = ( - { - min, - max, - value1, - value2, - fontSize, - fontColor, - onChange, - showValue, - width, - height, - }, - context, -) => - new PixiStory({ + { + min, + max, + value1, + value2, + fontSize, + fontColor, + onChange, + showValue, + width, + height, + }, context, - init: (view) => { - const assets = ["slider_bg.png", "slider.png", "slider_progress.png"]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = ['slider_bg.png', 'slider.png', 'slider_progress.png']; - preload(assets).then(() => { - // Component usage !!! - const singleSlider = new DoubleSlider({ - bg: "slider_bg.png", - fill: "slider_progress.png", - slider1: "slider.png", - slider2: "slider.png", - nineSliceSprite: { - bg: [22, 15, 22, 23], - fill: [22, 15, 22, 15], - }, - fillPaddings: { - top: 2.5, - left: 5, - right: 5, - bottom: 7, - }, - min, - max, - value1, - value2, - valueTextStyle: { - fill: fontColor, - fontSize, - }, - showValue, - valueTextOffset: { - y: -40, - }, - }); + preload(assets).then(() => + { + // Component usage !!! + const singleSlider = new DoubleSlider({ + bg: 'slider_bg.png', + fill: 'slider_progress.png', + slider1: 'slider.png', + slider2: 'slider.png', + nineSliceSprite: { + bg: [22, 15, 22, 23], + fill: [22, 15, 22, 15], + }, + fillPaddings: { + top: 2.5, + left: 5, + right: 5, + bottom: 7, + }, + min, + max, + value1, + value2, + valueTextStyle: { + fill: fontColor, + fontSize, + }, + showValue, + valueTextOffset: { + y: -40, + }, + }); - singleSlider.width = width; - singleSlider.height = height; + singleSlider.width = width; + singleSlider.height = height; - singleSlider.onChange.connect((value) => onChange(`${value}`)); + singleSlider.onChange.connect((value) => onChange(`${value}`)); - view.addChild(singleSlider); + view.addChild(singleSlider); - centerElement(view); - }); - }, - resize: centerElement, - }); + centerElement(view); + }); + }, + resize: centerElement, + }); export default { - title: "Components/Slider/SpriteNineSliceSprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Slider/SpriteNineSliceSprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/slider/DoubleSliderSprite.stories.ts b/src/stories/slider/DoubleSliderSprite.stories.ts index 13c9521..9e53ed4 100644 --- a/src/stories/slider/DoubleSliderSprite.stories.ts +++ b/src/stories/slider/DoubleSliderSprite.stories.ts @@ -1,72 +1,75 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { DoubleSlider } from "../../DoubleSlider"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { DoubleSlider } from '../../DoubleSlider'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - fontColor: "#FFFFFF", - min: 0, - max: 100, - value1: 15, - value2: 85, - fontSize: 20, - showValue: true, - onChange: action("Slider"), + fontColor: '#FFFFFF', + min: 0, + max: 100, + value1: 15, + value2: 85, + fontSize: 20, + showValue: true, + onChange: action('Slider'), }; export const Double: StoryFn = ( - { min, max, value1, value2, fontSize, fontColor, showValue, onChange }, - context, -) => - new PixiStory({ + { min, max, value1, value2, fontSize, fontColor, showValue, onChange }, context, - init: (view) => { - const assets = ["slider_bg.png", "slider.png", "slider_progress.png"]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = ['slider_bg.png', 'slider.png', 'slider_progress.png']; - preload(assets).then(() => { - // Component usage !!! - const doubleSlider = new DoubleSlider({ - bg: "slider_bg.png", - fill: "slider_progress.png", - slider1: "slider.png", - slider2: "slider.png", - min, - max, - value1, - value2, - valueTextStyle: { - fill: fontColor, - fontSize, - }, - showValue, - valueTextOffset: { - y: -40, - }, - fillPaddings: { - left: 4.5, - top: 2, - }, - }); + preload(assets).then(() => + { + // Component usage !!! + const doubleSlider = new DoubleSlider({ + bg: 'slider_bg.png', + fill: 'slider_progress.png', + slider1: 'slider.png', + slider2: 'slider.png', + min, + max, + value1, + value2, + valueTextStyle: { + fill: fontColor, + fontSize, + }, + showValue, + valueTextOffset: { + y: -40, + }, + fillPaddings: { + left: 4.5, + top: 2, + }, + }); - doubleSlider.value1 = value1; - doubleSlider.value2 = value2; + doubleSlider.value1 = value1; + doubleSlider.value2 = value2; - doubleSlider.onChange.connect((value1, value2) => { - onChange(`${value1} - ${value2}`); - }); + doubleSlider.onChange.connect((value1, value2) => + { + onChange(`${value1} - ${value2}`); + }); - view.addChild(doubleSlider); + view.addChild(doubleSlider); - centerElement(view); - }); - }, - resize: centerElement, - }); + centerElement(view); + }); + }, + resize: centerElement, + }); export default { - title: "Components/Slider/Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Slider/Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/slider/SliderGraphics.stories.ts b/src/stories/slider/SliderGraphics.stories.ts index ec37613..4ace244 100644 --- a/src/stories/slider/SliderGraphics.stories.ts +++ b/src/stories/slider/SliderGraphics.stories.ts @@ -1,116 +1,117 @@ -import { Graphics } from "pixi.js"; -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { List } from "../../List"; -import { Slider } from "../../Slider"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { action } from "@storybook/addon-actions"; +import { Graphics } from 'pixi.js'; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { List } from '../../List'; +import { Slider } from '../../Slider'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { action } from '@storybook/addon-actions'; const args = { - meshColor: "#a5e34d", - fillColor: "#00b1dd", - borderColor: "#FFFFFF", - backgroundColor: "#fe6048", - fontColor: "#FFFFFF", - min: 0, - max: 100, - step: 1, - value: 50, - width: 450, - height: 35, - radius: 25, - fontSize: 20, - border: 3, - handleBorder: 3, - showValue: true, - onChange: action("Slider"), + meshColor: '#a5e34d', + fillColor: '#00b1dd', + borderColor: '#FFFFFF', + backgroundColor: '#fe6048', + fontColor: '#FFFFFF', + min: 0, + max: 100, + step: 1, + value: 50, + width: 450, + height: 35, + radius: 25, + fontSize: 20, + border: 3, + handleBorder: 3, + showValue: true, + onChange: action('Slider'), }; export const Single: StoryFn = ( - { - min, - max, - step, - value, - meshColor, - borderColor, - backgroundColor, - fillColor, - handleBorder, - width, - height, - radius, - fontSize, - fontColor, - border, - onChange, - showValue, - }, - context, -) => - new PixiStory({ - context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); - const bg = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(borderColor) - .roundRect( - border, - border, - width - border * 2, - height - border * 2, - radius, - ) - .fill(backgroundColor); - - const fill = new Graphics() - .roundRect(0, 0, width, height, radius) - .fill(borderColor) - .roundRect( - border, - border, - width - border * 2, - height - border * 2, - radius, - ) - .fill(fillColor); - - const slider = new Graphics() - .circle(0, 0, 20 + handleBorder) - .fill(borderColor) - .circle(0, 0, 20) - .fill(meshColor); - - // Component usage - const singleSlider = new Slider({ - bg, - fill, - slider, + { min, max, step, value, - valueTextStyle: { - fill: fontColor, - fontSize, - }, + meshColor, + borderColor, + backgroundColor, + fillColor, + handleBorder, + width, + height, + radius, + fontSize, + fontColor, + border, + onChange, showValue, - }); + }, + context, +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); + const bg = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(borderColor) + .roundRect( + border, + border, + width - (border * 2), + height - (border * 2), + radius, + ) + .fill(backgroundColor); - singleSlider.value = value; + const fill = new Graphics() + .roundRect(0, 0, width, height, radius) + .fill(borderColor) + .roundRect( + border, + border, + width - (border * 2), + height - (border * 2), + radius, + ) + .fill(fillColor); - singleSlider.onUpdate.connect((value) => onChange(`${value}`)); + const slider = new Graphics() + .circle(0, 0, 20 + handleBorder) + .fill(borderColor) + .circle(0, 0, 20) + .fill(meshColor); - list.addChild(singleSlider); + // Component usage + const singleSlider = new Slider({ + bg, + fill, + slider, + min, + max, + step, + value, + valueTextStyle: { + fill: fontColor, + fontSize, + }, + showValue, + }); - view.addChild(list); - }, - resize: (view) => centerElement(view.children[0]), - }); + singleSlider.value = value; + + singleSlider.onUpdate.connect((value) => onChange(`${value}`)); + + list.addChild(singleSlider); + + view.addChild(list); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Slider/Graphics", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Slider/Graphics', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/slider/SliderNineSliceSprite.stories.ts b/src/stories/slider/SliderNineSliceSprite.stories.ts index d282643..36d3de3 100644 --- a/src/stories/slider/SliderNineSliceSprite.stories.ts +++ b/src/stories/slider/SliderNineSliceSprite.stories.ts @@ -1,88 +1,90 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Slider } from "../../Slider"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Slider } from '../../Slider'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - fontColor: "#FFFFFF", - min: 0, - max: 100, - step: 1, - value: 50, - fontSize: 20, - showValue: true, - width: 500, - height: 38, - onChange: action("Slider"), + fontColor: '#FFFFFF', + min: 0, + max: 100, + step: 1, + value: 50, + fontSize: 20, + showValue: true, + width: 500, + height: 38, + onChange: action('Slider'), }; export const Single: StoryFn = ( - { - min, - max, - step, - value, - fontSize, - fontColor, - onChange, - showValue, - width, - height, - }, - context, -) => - new PixiStory({ + { + min, + max, + step, + value, + fontSize, + fontColor, + onChange, + showValue, + width, + height, + }, context, - init: (view) => { - const assets = ["slider_bg.png", "slider.png", "slider_progress.png"]; +) => + new PixiStory({ + context, + init: (view) => + { + const assets = ['slider_bg.png', 'slider.png', 'slider_progress.png']; - preload(assets).then(() => { - // Component usage !!! - const singleSlider = new Slider({ - bg: "slider_bg.png", - fill: "slider_progress.png", - slider: "slider.png", - nineSliceSprite: { - bg: [22, 15, 22, 23], - fill: [22, 15, 22, 15], - }, - fillPaddings: { - top: 2.5, - left: 5, - right: 5, - bottom: 7, - }, - min, - max, - step, - value, - valueTextStyle: { - fill: fontColor, - fontSize, - }, - showValue, - valueTextOffset: { - y: -40, - }, - }); + preload(assets).then(() => + { + // Component usage !!! + const singleSlider = new Slider({ + bg: 'slider_bg.png', + fill: 'slider_progress.png', + slider: 'slider.png', + nineSliceSprite: { + bg: [22, 15, 22, 23], + fill: [22, 15, 22, 15], + }, + fillPaddings: { + top: 2.5, + left: 5, + right: 5, + bottom: 7, + }, + min, + max, + step, + value, + valueTextStyle: { + fill: fontColor, + fontSize, + }, + showValue, + valueTextOffset: { + y: -40, + }, + }); - singleSlider.width = width; - singleSlider.height = height; + singleSlider.width = width; + singleSlider.height = height; - singleSlider.onChange.connect((value) => onChange(`${value}`)); + singleSlider.onChange.connect((value) => onChange(`${value}`)); - view.addChild(singleSlider); + view.addChild(singleSlider); - centerElement(view); - }); - }, - resize: centerElement, - }); + centerElement(view); + }); + }, + resize: centerElement, + }); export default { - title: "Components/Slider/SpriteNineSliceSprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Slider/SpriteNineSliceSprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/slider/SliderSprite.stories.ts b/src/stories/slider/SliderSprite.stories.ts index 6d13f83..22ab4ad 100644 --- a/src/stories/slider/SliderSprite.stories.ts +++ b/src/stories/slider/SliderSprite.stories.ts @@ -1,75 +1,78 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { List } from "../../List"; -import { Slider } from "../../Slider"; -import { centerElement } from "../../utils/helpers/resize"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { List } from '../../List'; +import { Slider } from '../../Slider'; +import { centerElement } from '../../utils/helpers/resize'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - fontColor: "#FFFFFF", - min: 0, - max: 100, - step: 1, - value: 50, - fontSize: 20, - showValue: true, - amount: 1, - onChange: action("Slider"), + fontColor: '#FFFFFF', + min: 0, + max: 100, + step: 1, + value: 50, + fontSize: 20, + showValue: true, + amount: 1, + onChange: action('Slider'), }; export const Single: StoryFn = ( - { min, max, step, value, fontSize, fontColor, onChange, showValue, amount }, - context, -) => - new PixiStory({ + { min, max, step, value, fontSize, fontColor, onChange, showValue, amount }, context, - init: (view) => { - const list = new List({ type: "vertical", elementsMargin: 10 }); +) => + new PixiStory({ + context, + init: (view) => + { + const list = new List({ type: 'vertical', elementsMargin: 10 }); - const assets = ["slider_bg.png", "slider.png", "slider_progress.png"]; + const assets = ['slider_bg.png', 'slider.png', 'slider_progress.png']; - preload(assets).then(() => { - for (let i = 0; i < amount; i++) { - // Component usage !!! - const singleSlider = new Slider({ - bg: "slider_bg.png", - fill: "slider_progress.png", - slider: "slider.png", - min, - max, - step, - value, - valueTextStyle: { - fill: fontColor, - fontSize, - }, - showValue, - valueTextOffset: { - y: -40, - }, - fillPaddings: { - left: 4.5, - top: 2, - }, - }); + preload(assets).then(() => + { + for (let i = 0; i < amount; i++) + { + // Component usage !!! + const singleSlider = new Slider({ + bg: 'slider_bg.png', + fill: 'slider_progress.png', + slider: 'slider.png', + min, + max, + step, + value, + valueTextStyle: { + fill: fontColor, + fontSize, + }, + showValue, + valueTextOffset: { + y: -40, + }, + fillPaddings: { + left: 4.5, + top: 2, + }, + }); - singleSlider.onChange.connect((value) => - onChange(`onChange ${i + 1}: ${value}`), - ); + singleSlider.onChange.connect((value) => + onChange(`onChange ${i + 1}: ${value}`), + ); - list.addChild(singleSlider); - } - centerElement(list); - }); + list.addChild(singleSlider); + } + centerElement(list); + }); - view.addChild(list); - }, - resize: (view) => centerElement(view.children[0]), - }); + view.addChild(list); + }, + resize: (view) => centerElement(view.children[0]), + }); export default { - title: "Components/Slider/Sprite", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Slider/Sprite', + argTypes: argTypes(args), + args: getDefaultArgs(args), }; diff --git a/src/stories/switcher/Switcher.stories.ts b/src/stories/switcher/Switcher.stories.ts index 668960d..4495a29 100644 --- a/src/stories/switcher/Switcher.stories.ts +++ b/src/stories/switcher/Switcher.stories.ts @@ -1,16 +1,16 @@ -import { PixiStory, StoryFn } from "@pixi/storybook-renderer"; -import { Switcher } from "../../Switcher"; -import { centerElement } from "../../utils/helpers/resize"; -import { BUTTON_EVENTS } from "../../utils/HelpTypes"; -import { argTypes, getDefaultArgs } from "../utils/argTypes"; -import { preload } from "../utils/loader"; -import { action } from "@storybook/addon-actions"; +import { PixiStory, StoryFn } from '@pixi/storybook-renderer'; +import { Switcher } from '../../Switcher'; +import { centerElement } from '../../utils/helpers/resize'; +import { BUTTON_EVENTS } from '../../utils/HelpTypes'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { preload } from '../utils/loader'; +import { action } from '@storybook/addon-actions'; const args = { - triggerEvent1: BUTTON_EVENTS, - triggerEvent2: ["onHover", ...BUTTON_EVENTS], - triggerEvent3: ["onOut", ...BUTTON_EVENTS], - action: action("swich: "), + triggerEvent1: BUTTON_EVENTS, + triggerEvent2: ['onHover', ...BUTTON_EVENTS], + triggerEvent3: ['onOut', ...BUTTON_EVENTS], + action: action('swich: '), }; export const Sprites: StoryFn< @@ -18,39 +18,41 @@ export const Sprites: StoryFn< triggerEvent1: string; triggerEvent2: string; triggerEvent3: string; - } +} > = ({ action, triggerEvent1, triggerEvent2, triggerEvent3 }, context) => - new PixiStory({ - context, - init: (view) => { - const assets = [ - `avatar-01.png`, - `avatar-02.png`, - `avatar-03.png`, - `avatar-04.png`, - `avatar-05.png`, - ]; + new PixiStory({ + context, + init: (view) => + { + const assets = [ + `avatar-01.png`, + `avatar-02.png`, + `avatar-03.png`, + `avatar-04.png`, + `avatar-05.png`, + ]; - preload(assets).then(() => { - // Component usage !!! - const swich = new Switcher(assets, [ - triggerEvent1, - triggerEvent2, - triggerEvent3, - ]); + preload(assets).then(() => + { + // Component usage !!! + const swich = new Switcher(assets, [ + triggerEvent1, + triggerEvent2, + triggerEvent3, + ]); - swich.onChange.connect((state) => action(`state ${state}`)); + swich.onChange.connect((state) => action(`state ${state}`)); - view.addChild(swich); + view.addChild(swich); - centerElement(view); - }); - }, - resize: centerElement, - }); + centerElement(view); + }); + }, + resize: centerElement, + }); export default { - title: "Components/Switcher/Sprites", - argTypes: argTypes(args), - args: getDefaultArgs(args), + title: 'Components/Switcher/Sprites', + argTypes: argTypes(args), + args: getDefaultArgs(args), };