From 6ab3628e2664da73e0c0e2887996df1ce24e0900 Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Tue, 5 Sep 2023 14:04:28 +0300 Subject: [PATCH] wip --- src/stories/complex/SidePanel.stories.ts | 171 ++++++++++ .../components/ModeSwitcher.ts | 0 src/stories/styles/SidePanel.stories.ts | 94 ------ src/stories/styles/components/BetInput.ts | 137 -------- .../styles/components/BlockWithBorder.ts | 85 ----- src/stories/styles/components/ControlBlock.ts | 314 ------------------ src/stories/styles/components/PlayButton.ts | 60 ---- src/stories/styles/components/Slider.ts | 44 --- 8 files changed, 171 insertions(+), 734 deletions(-) create mode 100644 src/stories/complex/SidePanel.stories.ts rename src/stories/{styles => complex}/components/ModeSwitcher.ts (100%) delete mode 100644 src/stories/styles/SidePanel.stories.ts delete mode 100644 src/stories/styles/components/BetInput.ts delete mode 100644 src/stories/styles/components/BlockWithBorder.ts delete mode 100644 src/stories/styles/components/ControlBlock.ts delete mode 100644 src/stories/styles/components/PlayButton.ts delete mode 100644 src/stories/styles/components/Slider.ts diff --git a/src/stories/complex/SidePanel.stories.ts b/src/stories/complex/SidePanel.stories.ts new file mode 100644 index 0000000..efec205 --- /dev/null +++ b/src/stories/complex/SidePanel.stories.ts @@ -0,0 +1,171 @@ +import { Layout } from '../../Layout'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { Container } from '@pixi/display'; +import { toolTip } from '../components/ToolTip'; +import { preloadAssets } from '../utils/helpers'; +import { ModeSwitcher } from './components/ModeSwitcher'; +import { NineSlicePlane } from '@pixi/mesh-extras'; +import { Texture } from '@pixi/core'; + +const args = { + +}; + +const testAssets = { + SliderBG: 'Progress/SliderBG.png', +}; + +class LayoutStory +{ + private layout: Layout; + private toolTip: Layout; + view = new Container(); + w: number; + h: number; + + constructor(props: typeof args) + { + preloadAssets(Object.values(testAssets)).then(() => this.createLayout(props)); + } + + createLayout(props: typeof args) + { + const modeSwitcher = new ModeSwitcher(); + + const background = new NineSlicePlane( + Texture.from(testAssets.SliderBG), + 27, + 17, + 19, + 27, + ); + + this.layout = new Layout({ + content: { + leftBlock: { + content: { + content: 'Content', + styles: { + position: 'center', + color: 'white', + }, + }, + styles: { + background: 'black', + + landscape: { + position: 'left', + width: '73%', + height: '100%', + }, + portrait: { + position: 'top', + width: '100%', + height: '56%', + }, + }, + }, + rightBlock: { + content: { + innerContent: { + content: { + modeSwitcher, + blockWithBorder: { + content: { + title: { + content: 'Title', + styles: { + fontFamily: 'BlenderPro', + fontSize: 12, + color: 0xa8ffef, + landscape: { + display: 'block', + marginTop: 0, + marginLeft: 0, + }, + portrait: { + display: 'inline', + marginTop: 17, + marginLeft: 20, + }, + }, + }, + innerContent: { + content: ' ', + styles: { + background, + width: '100%', + height: '100%', + landscape: { + marginLeft: 0, + }, + portrait: { + marginLeft: 20, + }, + }, + }, + }, + styles: { + width: '100%', + height: '100%', + }, + }, + }, + styles: { + width: '100%', + height: '100%', + }, + } + }, + 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.resize(this.w, this.h); + 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: 'Complex', + argTypes: argTypes(args), + args: getDefaultArgs(args), +}; diff --git a/src/stories/styles/components/ModeSwitcher.ts b/src/stories/complex/components/ModeSwitcher.ts similarity index 100% rename from src/stories/styles/components/ModeSwitcher.ts rename to src/stories/complex/components/ModeSwitcher.ts diff --git a/src/stories/styles/SidePanel.stories.ts b/src/stories/styles/SidePanel.stories.ts deleted file mode 100644 index 220cb27..0000000 --- a/src/stories/styles/SidePanel.stories.ts +++ /dev/null @@ -1,94 +0,0 @@ -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), -}; diff --git a/src/stories/styles/components/BetInput.ts b/src/stories/styles/components/BetInput.ts deleted file mode 100644 index 171552d..0000000 --- a/src/stories/styles/components/BetInput.ts +++ /dev/null @@ -1,137 +0,0 @@ -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; - } -} diff --git a/src/stories/styles/components/BlockWithBorder.ts b/src/stories/styles/components/BlockWithBorder.ts deleted file mode 100644 index 91e48b5..0000000 --- a/src/stories/styles/components/BlockWithBorder.ts +++ /dev/null @@ -1,85 +0,0 @@ -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%', - }, - }, - }); - } -} diff --git a/src/stories/styles/components/ControlBlock.ts b/src/stories/styles/components/ControlBlock.ts deleted file mode 100644 index c622023..0000000 --- a/src/stories/styles/components/ControlBlock.ts +++ /dev/null @@ -1,314 +0,0 @@ -import { Layout } from '../../../Layout'; -import { ModeSwitcher } from './ModeSwitcher'; - -export class ControlBlock extends Layout -{ - constructor() - { - const modeSwitcher = new ModeSwitcher(); - // const betBlock = new BlockWithBorder(i18n('bet')); - // const playButton = new PlayButton(); - - super({ - content: { - // playButton, - // betBlock, - modeSwitcher, - }, - styles: { - width: '100%', - height: '100%', - }, - }); - - // this.addRiskBlock(); - // this.addRowsBlock(); - // this.addBallsBlock(); - // this.addBetPerBallBlock(); - } - - // private addRiskBlock() { - // const lowButton = getSquareCheckbox(i18n('low')); - // const mediumButton = getSquareCheckbox(i18n('medium')); - // const highButton = getSquareCheckbox(i18n('high')); - - // const radioGroup = new RadioGroup({ - // selectedItem: state.risk === 'low' ? 0 : state.risk === 'medium' ? 1 : 2, - // items: [lowButton, mediumButton, highButton], - // type: 'horizontal', - // elementsMargin: 25, - // }); - - // radioGroup.onChange.connect((item) => { - // switch (item) { - // case 0: - // state.risk = 'low'; - // break; - // case 1: - // state.risk = 'medium'; - // break; - // case 2: - // state.risk = 'high'; - // break; - // } - // }); - - // this.addContent({ - // content: { - // risk: { - // content: i18n('risk'), - // styles: { - // fontFamily: 'BlenderPro', - // fontSize: 12, - // color: 0xa8ffef, - // display: 'block', - - // landscape: { - // marginTop: 50, - // }, - // portrait: { - // marginTop: 17, - // }, - // }, - // }, - // riskInput: { - // content: radioGroup, - // styles: { - // display: 'block', - - // landscape: { - // marginTop: 50, - // marginLeft: 0, - // }, - // portrait: { - // marginTop: -23, - // marginLeft: 40, - // }, - // }, - // }, - // }, - // styles: { - // position: 'centerTop', - // width: blocksWidth, - // maxWidth: '95%', - // height: 40, - - // landscape: { - // marginTop: 130, - // marginLeft: 0, - // }, - // portrait: { - // marginTop: 225, - // marginLeft: -40, - // }, - // }, - // }); - // } - - // private addRowsBlock() { - // const rowsInput = new Slider(10, 13, state.rows); - - // rowsInput.slider.onUpdate.connect((value) => { - // state.rows = Math.round(value); - // }); - - // this.addContent({ - // content: { - // rows: { - // content: i18n('rows'), - // styles: { - // fontFamily: 'BlenderPro', - // fontSize: 12, - // color: 0xa8ffef, - // display: 'block', - // marginTop: 90, - // }, - // }, - // rowsInput: { - // content: rowsInput, - // styles: { - // display: 'block', - - // landscape: { - // marginLeft: 0, - // marginTop: 85, - // }, - // portrait: { - // marginLeft: 40, - // marginTop: 40, - // }, - // }, - // }, - // }, - // styles: { - // position: 'centerTop', - // width: blocksWidth, - // maxWidth: '95%', - // height: 50, - - // landscape: { - // marginTop: 190, - // marginLeft: 0, - // }, - // portrait: { - // marginTop: 70, - // marginLeft: -40, - // }, - // }, - // }); - // } - - // private addBallsBlock() { - // const ballsInput = new Slider(1, 34, state.balls); - - // ballsInput.slider.onUpdate.connect((value) => { - // state.balls = Math.round(value); - // }); - - // this.addContent({ - // content: { - // balls: { - // content: i18n('balls'), - // styles: { - // fontFamily: 'BlenderPro', - // fontSize: 12, - // color: 0xa8ffef, - // display: 'block', - - // landscape: { - // marginTop: 155, - // }, - // portrait: { - // marginTop: 160, - // }, - // }, - // }, - // ballsInput: { - // content: ballsInput, - // styles: { - // display: 'block', - - // landscape: { - // marginTop: 150, - // marginLeft: 0, - // }, - // portrait: { - // marginTop: 110, - // marginLeft: 40, - // }, - // }, - // }, - // }, - // styles: { - // position: 'centerTop', - // width: blocksWidth, - // height: 50, - - // landscape: { - // maxWidth: '95%', - // marginTop: 230, - // marginLeft: 0, - // }, - // portrait: { - // maxWidth: '200%', - // marginTop: 0, - // marginLeft: 120, - // }, - // }, - // }); - // } - - // private addBetPerBallBlock() { - // const coin = Sprite.from('coin'); - - // const betPerBallVal = new Text(state.betPerBall); - - // state.onChange(['betPerBall'], () => { - // betPerBallVal.text = state.betPerBall; - // this.resize(this.parent.width, this.parent.height); - // }); - - // this.addContent({ - // addBetPerBallBlockTitle: { - // content: i18n('betPerBALL'), - // styles: { - // fontFamily: 'BlenderPro', - // fontSize: 12, - // color: 0xffffff, - - // landscape: { - // position: 'bottomCenter', - // textAlign: 'center', - // marginTop: 0, - // marginLeft: -0, - // marginBottom: 170, - // }, - // portrait: { - // position: 'topCenter', - // textAlign: 'left', - // marginTop: 60, - // marginLeft: -140, - // marginBottom: 0, - // }, - // }, - // }, - // addBetPerBallValue: { - // content: { - // coin: { - // content: coin, - // styles: { - // marginTop: 3, - // landscape: { - // marginRight: 5, - // marginLeft: 0, - // position: 'left', - // }, - // portrait: { - // marginRight: 0, - // position: 'left', - // }, - // }, - // }, - // value: { - // content: betPerBallVal, - // styles: { - // fontFamily: 'BlenderPro', - // fontSize: 20, - // color: 0xffffff, - // breakWords: false, - // // position: 'left', - - // landscape: { - // marginLeft: coin.width + 5, - // }, - // portrait: { - // marginLeft: coin.width + 5, - // }, - // }, - // }, - // }, - // styles: { - // color: 0xffffff, - // maxWidth: '100%', - - // landscape: { - // position: 'bottomCenter', - // textAlign: 'center', - // marginBottom: 140, - // marginLeft: 10, - // marginTop: 0, - // width: 'auto', - // }, - // portrait: { - // width: 200, - // position: 'topCenter', - // textAlign: 'center', - // marginBottom: 0, - // marginLeft: 10, - // marginTop: 55, - // }, - // }, - // }, - // }); - // } -} diff --git a/src/stories/styles/components/PlayButton.ts b/src/stories/styles/components/PlayButton.ts deleted file mode 100644 index 67f62cf..0000000 --- a/src/stories/styles/components/PlayButton.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { Layout } from '@pixi/layout'; -import { FancyButton } from '@pixi/ui'; -import { frontEnd } from '../../../../plugins/FrontEnd'; -import { i18n } from '../../../../plugins/I18n'; -import { Text } from '@pixi/text'; -import { game } from '../../../game/Game'; -import { state } from '../../../../plugins/State'; - -export class PlayButton extends Layout { - constructor() { - const playButton = new FancyButton({ - defaultView: `images/${frontEnd.theme}/playButton.png`, - text: new Text(i18n('play'), { - fontFamily: 'CyberspaceRaceway', - fontSize: 13, - fill: 0xffffff, - dropShadow: true, - dropShadowColor: 0x000000, - dropShadowAlpha: 0.25, - dropShadowDistance: 1, - dropShadowAngle: 90, - }), - textOffset: { - y: -4, - }, - }); - - playButton.onPress.connect(() => { - for (let i = 0; i < state.balls; i++) { - game.addBall(); - } - }); - - super({ - content: playButton, - styles: { - width: '100%', - - marginBottom: 30, - - landscape: { - position: 'bottomCenter', - marginTop: 0, - marginRight: 0, - maxWidth: '95%', - maxHeight: 150, - height: 75, - }, - portrait: { - position: 'topRight', - marginRight: 10, - marginTop: 119, - maxWidth: '40%', - maxHeight: 156, - height: 75, - }, - }, - }); - } -} diff --git a/src/stories/styles/components/Slider.ts b/src/stories/styles/components/Slider.ts deleted file mode 100644 index dc87ccc..0000000 --- a/src/stories/styles/components/Slider.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Text } from '@pixi/text'; -import { Slider as UISlider } from '@pixi/ui'; -import { TEXT_STYLES } from '../../../../configs/styles'; -import { Layout } from '@pixi/layout'; - -export class Slider extends Layout { - slider: UISlider; - - constructor(min = 1, max = 100, value = 50) { - super(); - - this.slider = new UISlider({ - bg: 'progressBarBG', - fill: 'progressBarFill', - slider: 'progressBarPointer', - min, - max, - value, - showValue: false, - fillOffset: { - x: 0, - y: 0, - }, - }); - - const sliderValue = new Text(Math.round(this.slider.value), { - ...TEXT_STYLES.redDigital, - fontSize: 13, - }); - - this.slider.onUpdate.connect(() => { - sliderValue.text = Math.round(this.slider.value); - }); - - sliderValue.anchor.set(0.5); - sliderValue.x = 30; - sliderValue.y = this.height / 2 - 1; - - this.slider.x = this.width / 2 - this.slider.width / 2 + 20; - this.slider.y = this.height / 2 - 4; - - this.addChild(this.slider, sliderValue); - } -}