wip

src/stories/styles/SidePanel.stories.ts

@@ -0,0 +1,94 @@
+import { Layout } from '../../Layout';
+import { argTypes, getDefaultArgs } from '../utils/argTypes';
+import { Container } from '@pixi/display';
+import { toolTip } from '../components/ToolTip';
+import { ControlBlock } from './components/ControlBlock';
+
+const args = {
+
+};
+
+class LayoutStory
+{
+    private layout: Layout;
+    private toolTip: Layout;
+    view = new Container();
+    w: number;
+    h: number;
+
+    constructor({ }: any)
+    {
+        const controlBlock = new ControlBlock();
+
+        this.layout = new Layout({
+            content: {
+                game: {
+                    content: ' ',
+                    styles: {
+                        background: 'black',
+
+                        landscape: {
+                            position: 'left',
+                            width: '72%',
+                            height: '100%',
+                        },
+                        portrait: {
+                            position: 'top',
+                            width: '100%',
+                            height: '55%',
+                        },
+                    },
+                },
+                controlBlock: {
+                    content: controlBlock,
+                    styles: {
+                        background: 0x12081c,
+                        landscape: {
+                            position: 'right',
+                            width: '28%',
+                            height: '100%',
+                        },
+                        portrait: {
+                            position: 'bottom',
+                            width: '100%',
+                            height: '45%',
+                        },
+                    },
+                },
+            },
+            styles: {
+                position: 'center',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                width: '100%',
+                height: '100%',
+            },
+        });
+
+        this.view.addChild(this.layout);
+    }
+
+    async addTooltip(text: string)
+    {
+        this.toolTip = await toolTip(text);
+        this.view.addChild(this.toolTip);
+        this.toolTip.resize(this.w, this.h);
+    }
+
+    resize(w: number, h: number)
+    {
+        this.w = w;
+        this.h = h;
+
+        this.layout?.resize(w, h);
+        this.toolTip?.resize(w, h);
+    }
+}
+
+export const SidePanel = (params: any) => new LayoutStory(params);
+
+export default {
+    title: 'Styles',
+    argTypes: argTypes(args),
+    args: getDefaultArgs(args),
+};

src/stories/styles/components/BetInput.ts

@@ -0,0 +1,137 @@
+import { state } from '../../../../plugins/State';
+import { InputField } from '../../../../ui/components/InputField';
+import { blockUIWithDelay } from '../../../../utils/helpers';
+import { i18n } from '../../../../plugins/I18n';
+import { frontEnd } from '../../../../plugins/FrontEnd';
+import { Layout } from '@pixi/layout';
+import { Text } from '@pixi/text';
+import { FancyButton } from '@pixi/ui';
+import { spriteFromGraphics } from '../../../../utils/render';
+import { Graphics } from '@pixi/graphics';
+
+export class BetInput extends Layout {
+    constructor() {
+        super({
+            styles: {
+                position: 'center',
+                display: 'block',
+                width: '100%',
+                height: '100%',
+            },
+        });
+
+        const betInput = new InputField({
+            width: 100,
+            height: 45,
+            value: state.betAmount.toString(),
+            allowedSymbols: '0123456789.,',
+        });
+
+        this.addContent(betInput);
+
+        const doubleButton = this.getRoundButton('x2', () => {
+            state.setBet(state.betAmount * 2);
+        });
+
+        this.addContent({
+            content: doubleButton,
+            styles: {
+                position: 'rightCenter',
+                marginTop: -2,
+                marginRight: 20,
+            },
+        });
+
+        const halfButton = this.getRoundButton('1/2', () => {
+            state.setBet(state.betAmount / 2);
+        });
+
+        this.addContent({
+            content: halfButton,
+            styles: {
+                position: 'rightCenter',
+                marginTop: -2,
+                marginRight: 60,
+            },
+        });
+
+        state.subscribe(({ bet }) => {
+            betInput.value = (bet || 0).toString();
+        });
+
+        betInput.onEnter.connect((value) => {
+            const val = Number(value);
+            // const { betAmount } = state;
+
+            // if (val >= state.maxBetAmount) {
+            //     sounds.play('ui/bet_max');
+            // } else if (val <= betAmount) {
+            //     sounds.play('ui/bet_down');
+            // } else {
+            //     sounds.play('ui/bet_up');
+            // }
+
+            if (state.data.phase === 'idle') {
+                if (!value) {
+                    blockUIWithDelay();
+                } else if (val > state.maxBetAmount) {
+                    blockUIWithDelay();
+
+                    if (state.maxBetAmount > 0) {
+                        frontEnd.showError(i18n('maxBetError', { max: state.maxBetAmount }));
+                    }
+                } else if (val < state.minBetAmount) {
+                    blockUIWithDelay();
+
+                    frontEnd.showError(i18n('minBetError', { min: state.minBetAmount }));
+                }
+
+                const betAmount = Number(value);
+
+                if (state.data.userBalance !== undefined && state.data.userBalance < betAmount) {
+                    frontEnd.showNoBalancePopup();
+                }
+            }
+
+            betInput.value = state.betAmount.toString();
+        });
+
+        betInput.onChange.connect((value) => {
+            const val = Number(value);
+
+            state.setBet(val);
+        });
+    }
+
+    private getRoundButton(text: string, onclick: () => void): FancyButton {
+        const textView = new Text(text, {
+            fontFamily: 'BlenderPro',
+            fontSize: 14,
+            fill: 0xa8ffef,
+        });
+
+        const button = new FancyButton({
+            defaultView: spriteFromGraphics(
+                new Graphics().lineStyle(1, 0xa8ffef).beginFill(0x0a0c11).drawCircle(0, 0, 15),
+            ),
+            hoverView: spriteFromGraphics(
+                new Graphics().lineStyle(1, 0xf0196c).beginFill(0x0a0c11).drawCircle(0, 0, 15),
+            ),
+            text: textView,
+        });
+
+        button.onHover.connect(() => {
+            textView.style.fill = 0xf0196c;
+        });
+
+        button.onOut.connect(() => {
+            textView.style.fill = 0xa8ffef;
+        });
+
+        button.onPress.connect(() => {
+            onclick();
+        });
+
+        return button;
+    }
+}

src/stories/styles/components/BlockWithBorder.ts

@@ -0,0 +1,85 @@
+import { Layout } from '@pixi/layout';
+import { BetInput } from './BetInput';
+import { NineSlicePlane } from '@pixi/mesh-extras';
+import { Graphics } from '@pixi/graphics';
+import { pixi } from '../../../../plugins/Pixi';
+
+export class BlockWithBorder extends Layout {
+    constructor(title: string) {
+        const radius = 8;
+
+        const background = new NineSlicePlane(
+            pixi.renderer.generateTexture(
+                new Graphics()
+                    .lineStyle(2, 0xa8ffef)
+                    .beginFill(0x0a0c11)
+                    .drawRoundedRect(0, 0, radius * 2, radius * 2, radius),
+            ),
+            radius,
+            radius,
+            radius,
+            radius,
+        );
+
+        super({
+            content: {
+                bet: {
+                    content: title,
+                    styles: {
+                        fontFamily: 'BlenderPro',
+                        fontSize: 12,
+                        color: 0xa8ffef,
+                        landscape: {
+                            display: 'block',
+                            marginTop: 0,
+                            marginLeft: 0,
+                        },
+                        portrait: {
+                            display: 'inline',
+                            marginTop: 17,
+                            marginLeft: 20,
+                        },
+                    },
+                },
+                betInput: {
+                    content: {
+                        betInput: {
+                            content: new BetInput(),
+                            styles: {
+                                width: '100%',
+                                height: '100%',
+                                marginLeft: 10,
+                                marginTop: 2,
+                            },
+                        },
+                    },
+                    styles: {
+                        background,
+                        width: '100%',
+                        height: '100%',
+                        landscape: {
+                            marginLeft: 0,
+                        },
+                        portrait: {
+                            marginLeft: 20,
+                        },
+                    },
+                },
+            },
+            styles: {
+                height: 50,
+                marginTop: 70,
+                landscape: {
+                    position: 'centerTop',
+                    width: '90%',
+                    maxWidth: '90%',
+                },
+                portrait: {
+                    position: 'leftTop',
+                    width: '52%',
+                    maxWidth: '52%',
+                },
+            },
+        });
+    }
+}