Skip to content

Commit 80bcd4c

Browse files
CyberDexCyberDex
committed
update some more components
1 parent a4983e1 commit 80bcd4c

File tree

5 files changed

+170
-68
lines changed

5 files changed

+170
-68
lines changed

‎src/stories/fancyButton/FancyButtonGraphics.stories.ts‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,16 +94,38 @@ export const UseGraphics: StoryFn<typeof args> = (
9494

9595
// Component usage !!!
9696
const button = new FancyButton({
97-
defaultView: new Graphics().roundRect(0, 0, width, height, radius).fill(color),
97+
defaultView: new Graphics()
98+
.roundRect(0, 0, width, height, radius)
99+
.fill(color)
100+
.roundRect(12, 12, width - 4, height - 4, radius)
101+
.stroke({
102+
color,
103+
width: 3,
104+
}),
98105
hoverView: new Graphics()
99106
.roundRect(0, 0, width, height, radius)
100-
.fill(hoverColor),
107+
.fill(hoverColor)
108+
.roundRect(12, 12, width - 4, height - 4, radius)
109+
.stroke({
110+
color: hoverColor,
111+
width: 3,
112+
}),
101113
pressedView: new Graphics()
102114
.roundRect(0, 0, width, height, radius)
103-
.fill(pressedColor),
115+
.fill(pressedColor)
116+
.roundRect(9, 8, width - 4, height - 4, radius)
117+
.stroke({
118+
color: pressedColor,
119+
width: 3,
120+
}),
104121
disabledView: new Graphics()
105122
.roundRect(0, 0, width, height, radius)
106-
.fill(disabledColor),
123+
.fill(disabledColor)
124+
.roundRect(12, 12, width - 4, height - 4, radius)
125+
.stroke({
126+
color: disabledColor,
127+
width: 3,
128+
}),
107129
icon,
108130
text: new Text({
109131
text,

‎src/stories/fancyButton/FancyButtonIcon.stories.ts‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,38 @@ export const UseIcon: StoryFn<typeof args> = (
7878

7979
// Component usage !!!
8080
const button = new FancyButton({
81-
defaultView: new Graphics().roundRect(0, 0, width, height, radius).fill(color),
81+
defaultView: new Graphics()
82+
.roundRect(0, 0, width, height, radius)
83+
.fill(color)
84+
.roundRect(6, 6, width, height, radius)
85+
.stroke({
86+
color,
87+
width: 3,
88+
}),
8289
hoverView: new Graphics()
8390
.roundRect(0, 0, width, height, radius)
84-
.fill(hoverColor),
91+
.fill(hoverColor)
92+
.roundRect(6, 6, width, height, radius)
93+
.stroke({
94+
color: hoverColor,
95+
width: 3,
96+
}),
8597
pressedView: new Graphics()
8698
.roundRect(0, 0, width, height, radius)
87-
.fill(pressedColor),
99+
.fill(pressedColor)
100+
.roundRect(3, 3, width, height, radius)
101+
.stroke({
102+
color: pressedColor,
103+
width: 3,
104+
}),
88105
disabledView: new Graphics()
89106
.roundRect(0, 0, width, height, radius)
90-
.fill(disabledColor),
107+
.fill(disabledColor)
108+
.roundRect(6, 6, width, height, radius)
109+
.stroke({
110+
color: disabledColor,
111+
width: 3,
112+
}),
91113
icon,
92114
padding,
93115
offset: {

‎src/stories/list/ListGraphics.stories.ts‎

Lines changed: 63 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,21 @@ import { PixiStory, StoryFn } from '@pixi/storybook-renderer';
33
import { FancyButton } from '../../FancyButton';
44
import { List, ListType } from '../../List';
55
import { centerElement } from '../../utils/helpers/resize';
6-
import { defaultTextStyle } from '../../utils/helpers/styles';
6+
import { colors, defaultTextStyle } from '../../utils/helpers/styles';
77
import { LIST_TYPE } from '../../utils/HelpTypes';
88
import { argTypes, getDefaultArgs } from '../utils/argTypes';
99
import { action } from '@storybook/addon-actions';
1010

1111
const args = {
1212
type: [null, ...LIST_TYPE],
13-
fontColor: '#000000',
14-
bgColor: '#f5e3a9',
15-
width: 271,
16-
height: 270,
13+
fontColor: colors.textColor,
14+
bgColor: colors.pannelColor,
15+
bgBorderColor: colors.pannelBorderColor,
16+
buttonColor: colors.color,
17+
hoverButtonColor: colors.hoverColor,
18+
pressedButtonColor: colors.pressedColor,
19+
width: 290,
20+
height: 290,
1721
radius: 20,
1822
elementsMargin: 10,
1923
topPadding: 20,
@@ -30,6 +34,10 @@ export const UseGraphics: StoryFn<typeof args & { type: ListType }> = (
3034
type,
3135
fontColor,
3236
bgColor,
37+
bgBorderColor,
38+
buttonColor,
39+
hoverButtonColor,
40+
pressedButtonColor,
3341
width,
3442
height,
3543
elementsMargin,
@@ -50,30 +58,67 @@ export const UseGraphics: StoryFn<typeof args & { type: ListType }> = (
5058
{
5159
const viewGraphics = new Graphics()
5260
.roundRect(0, 0, width, height, radius)
53-
.fill(bgColor);
61+
.fill(bgColor)
62+
.stroke({
63+
color: bgBorderColor,
64+
width: 1,
65+
});
5466

5567
const items = [];
5668

5769
for (let i = 0; i < itemsAmount; i++)
5870
{
71+
const text = new Text({
72+
text: i + 1,
73+
style: {
74+
...defaultTextStyle,
75+
fill: fontColor,
76+
},
77+
});
78+
5979
const button = new FancyButton({
6080
defaultView: new Graphics()
6181
.roundRect(0, 0, elementsWidth, elementsHeight, radius)
62-
.fill(0xa5e24d),
82+
.fill(buttonColor)
83+
.roundRect(8, 8, elementsWidth - 3, elementsHeight - 3, radius)
84+
.stroke({
85+
color: buttonColor,
86+
width: 2,
87+
}),
6388
hoverView: new Graphics()
6489
.roundRect(0, 0, elementsWidth, elementsHeight, radius)
65-
.fill(0xfec230),
90+
.fill(hoverButtonColor)
91+
.roundRect(8, 8, elementsWidth - 3, elementsHeight - 3, radius)
92+
.stroke({
93+
color: hoverButtonColor,
94+
width: 2,
95+
}),
6696
pressedView: new Graphics()
67-
.roundRect(0, 0, elementsWidth, elementsHeight, radius)
68-
.fill(0xfe6048),
69-
text: new Text({
70-
text: i + 1,
71-
style: {
72-
...defaultTextStyle,
73-
fontSize: 28,
74-
fill: fontColor,
75-
},
76-
}),
97+
.roundRect(4, 4, elementsWidth, elementsHeight, radius)
98+
.fill(pressedButtonColor)
99+
.roundRect(8, 8, elementsWidth - 1, elementsHeight - 1, radius)
100+
.stroke({
101+
color: pressedButtonColor,
102+
width: 2,
103+
}),
104+
text,
105+
});
106+
107+
button.onDown.connect(() =>
108+
{
109+
text.x += 4;
110+
text.y += 4;
111+
});
112+
113+
button.onUp.connect(() =>
114+
{
115+
text.x -= 4;
116+
text.y -= 4;
117+
});
118+
button.onUpOut.connect(() =>
119+
{
120+
text.x -= 4;
121+
text.y -= 4;
77122
});
78123

79124
button.anchor.set(0);

‎src/stories/list/ListSprite.stories.ts‎

Lines changed: 53 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,85 @@
1-
import { Container, Sprite, Text } from 'pixi.js';
1+
import { Container, Graphics, Text } from 'pixi.js';
22
import { PixiStory, StoryFn } from '@pixi/storybook-renderer';
33
import { FancyButton } from '../../FancyButton';
44
import { List, ListType } from '../../List';
55
import { centerElement } from '../../utils/helpers/resize';
6-
import { defaultTextStyle } from '../../utils/helpers/styles';
6+
import { colors, defaultTextStyle } from '../../utils/helpers/styles';
77
import { LIST_TYPE } from '../../utils/HelpTypes';
88
import { argTypes, getDefaultArgs } from '../utils/argTypes';
99
import { getColor } from '../utils/color';
1010
import { preload } from '../utils/loader';
1111
import { action } from '@storybook/addon-actions';
1212

1313
const args = {
14-
type: LIST_TYPE,
15-
fontColor: '#000000',
14+
type: [null, ...LIST_TYPE],
15+
width: 430,
16+
height: 330,
17+
radius: 20,
18+
bgColor: colors.pannelColor,
19+
bgBorderColor: colors.pannelBorderColor,
20+
fontColor: colors.textColor,
1621
elementsMargin: 29,
17-
itemsAmount: 12,
18-
maxWidth: 500,
22+
topPadding: 20,
23+
leftPadding: 20,
24+
rightPadding: 20,
25+
itemsAmount: 16,
1926
onPress: action('Button pressed'),
2027
};
2128

2229
export const UseSprite: StoryFn<typeof args & { type: ListType }> = (
2330
{
2431
fontColor,
32+
width,
33+
height,
34+
radius,
35+
bgColor,
36+
bgBorderColor,
2537
elementsMargin,
38+
topPadding,
39+
leftPadding,
40+
rightPadding,
2641
itemsAmount,
2742
type,
28-
maxWidth,
2943
onPress,
3044
},
3145
context,
3246
) =>
3347
new PixiStory<typeof args>({
3448
context,
35-
init: (view) =>
49+
init: async (view) =>
3650
{
3751
const assets = [
38-
`window.png`,
39-
`SmallButton.png`,
40-
`SmallButton-hover.png`,
41-
`SmallButton-pressed.png`,
52+
`button.png`,
53+
`button_hover.png`,
54+
`button_pressed.png`,
4255
];
4356

44-
preload(assets).then(() =>
45-
{
46-
const window = Sprite.from(`window.png`);
47-
const title = new Text({
48-
text: `Levels`,
49-
style: { fill: 0x000000, fontSize: 40 },
50-
});
51-
52-
title.anchor.set(0.5);
53-
window.addChild(title);
54-
title.x = window.width / 2;
55-
title.y = 25;
56-
57-
view.addChild(window);
58-
59-
const items: Container[] = createItems(itemsAmount, getColor(fontColor) ?? 0x000000, onPress);
57+
await preload(assets);
6058

61-
// Component usage !!!
62-
const list = new List({
63-
type,
64-
vertPadding: 70,
65-
horPadding: 50,
66-
elementsMargin,
67-
maxWidth,
59+
const viewGraphics = new Graphics()
60+
.roundRect(0, 0, width, height, radius)
61+
.fill(bgColor)
62+
.stroke({
63+
color: bgBorderColor,
64+
width: 1,
6865
});
6966

70-
items.forEach((item) => list.addChild(item));
67+
const items: Container[] = createItems(itemsAmount, getColor(fontColor) ?? 0x000000, onPress);
7168

72-
window.addChild(list);
73-
74-
centerElement(view);
69+
// Component usage !!!
70+
const list = new List({
71+
elementsMargin,
72+
topPadding,
73+
leftPadding,
74+
rightPadding,
75+
type,
7576
});
77+
78+
viewGraphics.addChild(list);
79+
view.addChild(viewGraphics);
80+
items.forEach((item) => list.addChild(item));
81+
82+
centerElement(view);
7683
},
7784
resize: centerElement,
7885
});
@@ -88,9 +95,10 @@ function createItems(
8895
for (let i = 0; i < itemsAmount; i++)
8996
{
9097
const button = new FancyButton({
91-
defaultView: `SmallButton.png`,
92-
hoverView: `SmallButton-hover.png`,
93-
pressedView: `SmallButton-pressed.png`,
98+
defaultView: `button.png`,
99+
hoverView: `button_hover.png`,
100+
pressedView: `button_pressed.png`,
101+
nineSliceSprite: [25, 20, 25, 20],
94102
text: new Text({
95103
text: i + 1,
96104
style: {
@@ -105,6 +113,9 @@ function createItems(
105113
},
106114
});
107115

116+
button.width = 150;
117+
button.height = 100;
118+
108119
button.scale.set(0.5);
109120

110121
button.onPress.connect(() => onPress(i + 1));

‎src/utils/helpers/styles.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,6 @@ export const colors = {
1919
pressedColor: '#b42e5b',
2020
disabledColor: '#6e6e6e',
2121
textColor: '#FFFFFF',
22+
pannelColor: '#222425',
23+
pannelBorderColor: '#3e3f40',
2224
};

0 commit comments

Comments
 (0)