From 238938076998ac53ad2781f4751a10876046f713 Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Wed, 11 Dec 2024 13:25:08 +0200 Subject: [PATCH 1/3] Refactor LargeButton --- .../src/app/ui/LargeButton.ts | 30 +++++-------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/templates/template-creation-web/src/app/ui/LargeButton.ts b/templates/template-creation-web/src/app/ui/LargeButton.ts index fd43118..d2bc0db 100644 --- a/templates/template-creation-web/src/app/ui/LargeButton.ts +++ b/templates/template-creation-web/src/app/ui/LargeButton.ts @@ -21,29 +21,10 @@ export class LargeButton extends FancyButton { constructor(options: Partial = {}) { const opts = { ...defaultLargeButtonOptions, ...options }; - const defaultView = new NineSliceSprite({ - texture: Texture.from("button-large.png"), - leftWidth: 36, - topHeight: 42, - rightWidth: 36, - bottomHeight: 52, - width: opts.width, - height: opts.height, - }); - - const pressedView = new NineSliceSprite({ - texture: Texture.from("button-large-press.png"), - leftWidth: 36, - topHeight: 42, - rightWidth: 36, - bottomHeight: 52, - width: opts.width, - height: opts.height, - }); - super({ - defaultView, - pressedView, + defaultView: "button-large.png", + pressedView: "button-large-press.png", + nineSliceSprite: [38, 42, 38, 50], anchor: 0.5, text: new Label({ text: opts.text, @@ -65,13 +46,16 @@ export class LargeButton extends FancyButton { }, pressed: { props: { - scale: { x: 1.03, y: 1.03 }, + scale: { x: 1.0, y: 1.0 }, }, duration: 100, }, }, }); + this.width = opts.width; + this.height = opts.height; + this.onDown.connect(this.handleDown.bind(this)); this.onUp.connect(this.handleUp.bind(this)); this.onHover.connect(this.handleHover.bind(this)); From e82ce338dfa6fbffc9f5538cf4f0d3571e718313 Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Wed, 11 Dec 2024 14:14:08 +0200 Subject: [PATCH 2/3] wrapup --- .../main{m}/ui{tps}/button-large-press.png | Bin 7041 -> 0 bytes .../ui{tps}/{button-large.png => button.png} | Bin .../src/app/popups/PausePopup.ts | 6 ++-- .../src/app/popups/SettingsPopup.ts | 6 ++-- .../src/app/screens/main/MainScreen.ts | 6 ++-- .../src/app/ui/{LargeButton.ts => Button.ts} | 26 +++++++----------- 6 files changed, 19 insertions(+), 25 deletions(-) delete mode 100644 templates/template-creation-web/raw-assets/main{m}/ui{tps}/button-large-press.png rename templates/template-creation-web/raw-assets/main{m}/ui{tps}/{button-large.png => button.png} (100%) rename templates/template-creation-web/src/app/ui/{LargeButton.ts => Button.ts} (64%) diff --git a/templates/template-creation-web/raw-assets/main{m}/ui{tps}/button-large-press.png b/templates/template-creation-web/raw-assets/main{m}/ui{tps}/button-large-press.png deleted file mode 100644 index 71deb76fbda9e739d807abe3f7ea833d9d2dce8f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7041 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�QFn!4s}Br#c(aj$^P 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 engine().navigation.dismissPopup()); this.panel.addChild(this.doneButton); diff --git a/templates/template-creation-web/src/app/popups/SettingsPopup.ts b/templates/template-creation-web/src/app/popups/SettingsPopup.ts index d4e6ad7..ec815b2 100644 --- a/templates/template-creation-web/src/app/popups/SettingsPopup.ts +++ b/templates/template-creation-web/src/app/popups/SettingsPopup.ts @@ -5,7 +5,7 @@ import { BlurFilter, Container, Sprite, Texture } from "pixi.js"; import { engine } from "../getEngine"; import { Label } from "../ui/Label"; -import { LargeButton } from "../ui/LargeButton"; +import { Button } from "../ui/Button"; import { RoundedBox } from "../ui/RoundedBox"; import { VolumeSlider } from "../ui/VolumeSlider"; import { userSettings } from "../utils/userSettings"; @@ -19,7 +19,7 @@ export class SettingsPopup extends Container { /** The popup title label */ private title: Text; /** Button that closes the popup */ - private doneButton: LargeButton; + private doneButton: Button; /** The panel background */ private panelBase: RoundedBox; /** The build version label */ @@ -57,7 +57,7 @@ export class SettingsPopup extends Container { this.title.y = -this.panelBase.boxHeight * 0.5 + 60; this.panel.addChild(this.title); - this.doneButton = new LargeButton({ text: "OK" }); + this.doneButton = new Button({ text: "OK" }); this.doneButton.y = this.panelBase.boxHeight * 0.5 - 78; this.doneButton.onPress.connect(() => engine().navigation.dismissPopup()); this.panel.addChild(this.doneButton); diff --git a/templates/template-creation-web/src/app/screens/main/MainScreen.ts b/templates/template-creation-web/src/app/screens/main/MainScreen.ts index f412c6b..8043870 100644 --- a/templates/template-creation-web/src/app/screens/main/MainScreen.ts +++ b/templates/template-creation-web/src/app/screens/main/MainScreen.ts @@ -7,7 +7,7 @@ import { Container } from "pixi.js"; import { engine } from "../../getEngine"; import { PausePopup } from "../../popups/PausePopup"; import { SettingsPopup } from "../../popups/SettingsPopup"; -import { LargeButton } from "../../ui/LargeButton"; +import { Button } from "../../ui/Button"; import { Bouncer } from "./Bouncer"; @@ -65,7 +65,7 @@ export class MainScreen extends Container { ); this.addChild(this.settingsButton); - this.addButton = new LargeButton({ + this.addButton = new Button({ text: "Add", width: 175, height: 110, @@ -73,7 +73,7 @@ export class MainScreen extends Container { this.addButton.onPress.connect(() => this.bouncer.add()); this.addChild(this.addButton); - this.removeButton = new LargeButton({ + this.removeButton = new Button({ text: "Remove", width: 175, height: 110, diff --git a/templates/template-creation-web/src/app/ui/LargeButton.ts b/templates/template-creation-web/src/app/ui/Button.ts similarity index 64% rename from templates/template-creation-web/src/app/ui/LargeButton.ts rename to templates/template-creation-web/src/app/ui/Button.ts index d2bc0db..0ff02d9 100644 --- a/templates/template-creation-web/src/app/ui/LargeButton.ts +++ b/templates/template-creation-web/src/app/ui/Button.ts @@ -1,30 +1,28 @@ import { FancyButton } from "@pixi/ui"; -import { NineSliceSprite, Texture } from "pixi.js"; import { engine } from "../getEngine"; import { Label } from "./Label"; -const defaultLargeButtonOptions = { +const defaultButtonOptions = { text: "", width: 301, height: 112, fontSize: 28, }; -type LargeButtonOptions = typeof defaultLargeButtonOptions; +type ButtonOptions = typeof defaultButtonOptions; /** * The big rectangle button, with a label, idle and pressed states */ -export class LargeButton extends FancyButton { - constructor(options: Partial = {}) { - const opts = { ...defaultLargeButtonOptions, ...options }; +export class Button extends FancyButton { + constructor(options: Partial = {}) { + const opts = { ...defaultButtonOptions, ...options }; super({ - defaultView: "button-large.png", - pressedView: "button-large-press.png", - nineSliceSprite: [38, 42, 38, 50], + defaultView: "button.png", + nineSliceSprite: [38, 50, 38, 50], anchor: 0.5, text: new Label({ text: opts.text, @@ -41,12 +39,14 @@ export class LargeButton extends FancyButton { hover: { props: { scale: { x: 1.03, y: 1.03 }, + y: 0, }, duration: 100, }, pressed: { props: { - scale: { x: 1.0, y: 1.0 }, + scale: { x: 0.97, y: 0.97 }, + y: 10, }, duration: 100, }, @@ -57,7 +57,6 @@ export class LargeButton extends FancyButton { this.height = opts.height; this.onDown.connect(this.handleDown.bind(this)); - this.onUp.connect(this.handleUp.bind(this)); this.onHover.connect(this.handleHover.bind(this)); } @@ -67,10 +66,5 @@ export class LargeButton extends FancyButton { private handleDown() { engine().audio.sfx.play("main/sounds/sfx-press.wav"); - this.textOffset = { x: 0, y: -7 }; - } - - private handleUp() { - this.textOffset = { x: 0, y: -13 }; } } From 2e668a6452f4243ce2ea51a8e3f367b49db9051a Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Wed, 11 Dec 2024 14:24:26 +0200 Subject: [PATCH 3/3] fix linting --- templates/template-creation-web/src/app/popups/PausePopup.ts | 2 +- templates/template-creation-web/src/app/popups/SettingsPopup.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/template-creation-web/src/app/popups/PausePopup.ts b/templates/template-creation-web/src/app/popups/PausePopup.ts index ffb13b8..6f1bfc2 100644 --- a/templates/template-creation-web/src/app/popups/PausePopup.ts +++ b/templates/template-creation-web/src/app/popups/PausePopup.ts @@ -2,8 +2,8 @@ import { animate } from "motion"; import { BlurFilter, Container, Sprite, Texture } from "pixi.js"; import { engine } from "../getEngine"; -import { Label } from "../ui/Label"; import { Button } from "../ui/Button"; +import { Label } from "../ui/Label"; import { RoundedBox } from "../ui/RoundedBox"; /** Popup that shows up when gameplay is paused */ diff --git a/templates/template-creation-web/src/app/popups/SettingsPopup.ts b/templates/template-creation-web/src/app/popups/SettingsPopup.ts index ec815b2..b85136d 100644 --- a/templates/template-creation-web/src/app/popups/SettingsPopup.ts +++ b/templates/template-creation-web/src/app/popups/SettingsPopup.ts @@ -4,8 +4,8 @@ import type { Text } from "pixi.js"; import { BlurFilter, Container, Sprite, Texture } from "pixi.js"; import { engine } from "../getEngine"; -import { Label } from "../ui/Label"; import { Button } from "../ui/Button"; +import { Label } from "../ui/Label"; import { RoundedBox } from "../ui/RoundedBox"; import { VolumeSlider } from "../ui/VolumeSlider"; import { userSettings } from "../utils/userSettings";