From 2d819a0ea4b53001ecb7dc1722af49001123c9a0 Mon Sep 17 00:00:00 2001 From: Flashfyre Date: Wed, 5 Apr 2023 08:35:15 -0400 Subject: [PATCH] Add party menu options and WiP summary UI --- public/images/ui/party_message_options.png | Bin 0 -> 342 bytes public/images/ui/party_options_bottom.png | Bin 0 -> 198 bytes public/images/ui/party_options_center.png | Bin 0 -> 148 bytes public/images/ui/party_options_top.png | Bin 0 -> 200 bytes public/images/ui/summary_bg.png | Bin 0 -> 1136 bytes public/images/ui/summary_overlay_shiny.png | Bin 0 -> 248 bytes public/images/ui/summary_tabs_1.png | Bin 0 -> 309 bytes public/images/ui/summary_tabs_2.png | Bin 0 -> 317 bytes public/images/ui/summary_tabs_3.png | Bin 0 -> 253 bytes src/battle-scene.ts | 6 + src/ui/party-ui-handler.ts | 245 +++++++++++++++------ src/ui/summary-ui-handler.ts | 48 ++++ src/ui/ui.ts | 7 +- 13 files changed, 233 insertions(+), 73 deletions(-) create mode 100644 public/images/ui/party_message_options.png create mode 100644 public/images/ui/party_options_bottom.png create mode 100644 public/images/ui/party_options_center.png create mode 100644 public/images/ui/party_options_top.png create mode 100644 public/images/ui/summary_bg.png create mode 100644 public/images/ui/summary_overlay_shiny.png create mode 100644 public/images/ui/summary_tabs_1.png create mode 100644 public/images/ui/summary_tabs_2.png create mode 100644 public/images/ui/summary_tabs_3.png create mode 100644 src/ui/summary-ui-handler.ts diff --git a/public/images/ui/party_message_options.png b/public/images/ui/party_message_options.png new file mode 100644 index 0000000000000000000000000000000000000000..b0fd8f12294f657ff50a055ae9956db2818d227d GIT binary patch literal 342 zcmeAS@N?(olHy`uVBq!ia0vp^_kdWAgAGVJ_b*^(U|^K>ba4!+xb^m~V$fj+k%ouU z{aA}qQ&Lk>QdKv(Kah}VOfG2gP%#3EJw0{8N}%=Jlr(_}F17Q|xb2-;Z}w_wS4YOJ zZ^{j!JeJ{C%S-y(pRag5cjW;mFUzC1e|x*Qg!taBdvkla2mj)e2M!%8?y}o|>{-yG z1f>n9)|O}HT9@vyH@kRkt>!`dr;`@Hf2Y6gZAi)S!xxVvuF>M_yET8BEqkAf2tNH5Y`pZ>YlaA=T~l7&mVO`d>veOI+lB_Ar99WKt>UoPZ8YVz b44=<2$9JQdr_U5%crkdo`njxgN@xNAHW`su literal 0 HcmV?d00001 diff --git a/public/images/ui/party_options_bottom.png b/public/images/ui/party_options_bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..d30c62ab07f4654dc7c2e123a057956dc22cc77a GIT binary patch literal 198 zcmeAS@N?(olHy`uVBq!ia0vp^aX`$*!3HF~_%*)(sa{VP#}JR>Z!akd9aa!VP-o8@K?^PS6)s8>PfR_rBVfNW`To1ba{Z*ul}ut$h8t!SU1|q9jKR~@&t;ucLK6Vel}y_J literal 0 HcmV?d00001 diff --git a/public/images/ui/party_options_center.png b/public/images/ui/party_options_center.png new file mode 100644 index 0000000000000000000000000000000000000000..b177e64d2e789c642a32433e6a5374dd8184923a GIT binary patch literal 148 zcmeAS@N?(olHy`uVBq!ia0vp^aX>7Z!al|H5&-HUKHnB zBqS**X(`mX=8Vv;9=(O96F5(t@=8(JWF!>n&boY=OWTS{v%vCwj31Pwqqa_y=>54c zzTNtoRjB30DfevR`5Ah|Z&vNR7#lWq<%M4_XFT@U9G?_8F>CexwYTpi%iAQmPUR8_ zPMOztIIs9cB8OI(#&cN%*$=b-_wV}h>8a2DcmXRC3)JY%WECv5KMm%Z;! z{PyLy!0D*E!Re{lElzXx~Y*H_us&p+78UirGs{l2tft-SqNDfMoR9h^oDi_04i|Be^^ zG`GAlzOH_s77OzUfxbJ8cC6(Mg`8&++GO?%G<`hGV07Wfk2a13hTi!fn}cWQY>u~M zx7hF}>%r-BXUrWH{HDK7eXLP)VOQSaT{mkUuHPZ`jsJ;igLlHOSx++~Vs=I{q{lbx z&KIeC)$t|Z>f6%-X_xi&932?{71Y}YoT)j$zzj5+@t8?N_Zzj4@BaDwcnw}L)l^g% zR2_Ix^XorLWQzIi`O{M+yLRtf%-OS^;q)e(h{n`NtEK}x*bB;87#B%9OyA+Kg}LIz zq;Nr|=Wp)LR@l8b{Lb0!`M>|j8~kFdseSo6NTTDDkc7f2CLYC>Mc&Rvx{Is~?k?jB zy;RleaAo>|*j=(MH$-BySQMWz_N@K$E%?L5)htP}2P96vzu(Ugr?P-SRDsr5!hv-K z!$Afu2UZTY07fl`fCerBT4SCCOd$;k45AB|SeRD;{Rno0BhYe%LySE;nHI~}choYh zUc&3T#5q89Z8*n~xP~?ciN)OQ4AAt&B;f#wJ|2YzMiz1e4=@mE#)q1aQfViS#J|to zAK1jo{p$9$f1UPN;Xnl2gn5UFVdQ&MBb@0Q7Q{Bme*a literal 0 HcmV?d00001 diff --git a/public/images/ui/summary_overlay_shiny.png b/public/images/ui/summary_overlay_shiny.png new file mode 100644 index 0000000000000000000000000000000000000000..6aaacc8cb72522b9f1f756b578349e53257b8e95 GIT binary patch literal 248 zcmeAS@N?(olHy`uVBq!ia0vp^4nXY1!3HF`KLzaoQu{q!978H@y}i7V_mF`=+ePCf zhGPj+dLCYkF*?+Hh(mL8W2Tab;)E5&?_Vzp`TpAS+E>HlFO0w0?LU7{RVgWQ+KQ4d z8(*)NfBmb1f6~m0zcZGLPM8@lnv&M5ULdnD>OJE*uRre@_f1@{@TkgW*Y}IZIwGI` z^{&4CZBA%@o@oDdMJ5h~1_mY$0Y)VUmJS9%1tymU{G10mp>heg=WPy^dsw!6yZA@N W&7Tj-s|W+V!rX$ujlxbEUrJLZxumA09$GvaW?$w^3;PP4Z+QH=X?lqNek=xHu{j%vR3T=smZ+J zvo~#%U#o8wxu3DU#2?IP6k~bP=J^~k3R?rQ)rX{(o5!pxT5KU(y5e&SVXjsx8%O*` zgrp!M>3+t1LIHq?qwD}G5@yCCp}4lhs!-rWjf=|Sv6WmB)9#F zOQLkV?xwW73|DVT$M=%_^VnYa3)6YY)MK-tc*m1k_Gg|N@e#@G;qmcQG?+qksrZ;e zm@gxhNg|pcA_*P~|2*a*3IKR4{0omg2jSosMF9XS=<;=s*#yv%H;1?ZUg%yq`JGV@ P00000NkvXXu0mjf3_pr8 literal 0 HcmV?d00001 diff --git a/public/images/ui/summary_tabs_3.png b/public/images/ui/summary_tabs_3.png new file mode 100644 index 0000000000000000000000000000000000000000..cf8829886649723fb066fa8315253c56a7d0a4cd GIT binary patch literal 253 zcmeAS@N?(olHy`uVBq!ia0vp^W%*=eam)Bkb1R_pc+QTepBqb+Ra(%tvg2pF;S5$sH zI>yY#3xsY#-25r-6CYc6eYN&E5K_H>;i?ZOFYBdAN@ng4g_m!udotsY`oBlVnjcO- z-j@5&aoX{Mr>sezIhOvq$jue=NJxrniMU+z-jJ59P7>|jlesLnnJ`(j#mimhcpy>N x%3kC=Bh#X)s}Tqan+|m;&OdHqBw}!cK`hGmV!OK1VxWH*JYD@<);T3K0RR%gTnhjI literal 0 HcmV?d00001 diff --git a/src/battle-scene.ts b/src/battle-scene.ts index 90aafd5d3..fd77bcd05 100644 --- a/src/battle-scene.ts +++ b/src/battle-scene.ts @@ -127,8 +127,14 @@ export default class BattleScene extends Phaser.Scene { this.loadAtlas('party_pb', 'ui'); this.loadImage('party_message', 'ui'); this.loadImage('party_message_large', 'ui'); + this.loadImage('party_message_options', 'ui'); + this.loadImage('party_options_top', 'ui'); + this.loadImage('party_options_center', 'ui'); + this.loadImage('party_options_bottom', 'ui'); this.loadAtlas('party_cancel', 'ui'); + this.loadImage('summary_bg', 'ui'); + // Load arena images Utils.getEnumValues(Biome).map(at => { const atKey = Biome[at].toLowerCase(); diff --git a/src/ui/party-ui-handler.ts b/src/ui/party-ui-handler.ts index 7d361abee..443917030 100644 --- a/src/ui/party-ui-handler.ts +++ b/src/ui/party-ui-handler.ts @@ -15,6 +15,11 @@ export default class PartyUiHandler extends MessageUiHandler { private partyCancelButton: PartyCancelButton; private partyMessageBox: Phaser.GameObjects.Image; + private optionsMode: boolean; + private optionsCursor: integer; + private optionsContainer: Phaser.GameObjects.Container; + private optionsCursorObj: Phaser.GameObjects.Image; + private lastCursor: integer = 0; private isModal: boolean; private selectCallback: Function; @@ -74,6 +79,9 @@ export default class PartyUiHandler extends MessageUiHandler { this.partyCancelButton = partyCancelButton; + this.optionsContainer = this.scene.add.container((this.scene.game.canvas.width / 6) - 1, -1); + partyContainer.add(this.optionsContainer); + this.partySlots = []; } @@ -112,90 +120,100 @@ export default class PartyUiHandler extends MessageUiHandler { return; } - if (keyCode === keyCodes.Z) { - if (this.cursor < 6) { - let filterResult: string = this.selectFilter(this.scene.getParty()[this.cursor]); - if (filterResult === null) { + let success = false; + + if (this.optionsMode) { + if (keyCode === keyCodes.Z) { + if (!this.optionsCursor) { + let filterResult: string = this.selectFilter(this.scene.getParty()[this.cursor]); + if (filterResult === null) { + this.clearOptions(); + if (this.selectCallback) { + const selectCallback = this.selectCallback; + this.selectCallback = null; + selectCallback(this.cursor); + } else if (this.cursor) + (this.scene.getCurrentPhase() as CommandPhase).handleCommand(Command.POKEMON, this.cursor); + return; + } else { + this.clearOptions(); + this.partyMessageBox.setTexture('party_message_large'); + this.message.y -= 15; + this.showText(filterResult as string, null, () => { + this.partyMessageBox.setTexture('party_message'); + this.message.setText(defaultMessage); + this.message.y += 15; + }, null, true); + } + } else if (this.optionsCursor === 1) { + this.clearOptions(); + ui.playSelect(); + ui.setMode(Mode.SUMMARY); + } else + this.processInput(keyCodes.X); + } else if (keyCode === keyCodes.X) { + this.clearOptions(); + ui.playSelect(); + } + else { + switch (keyCode) { + case keyCodes.UP: + success = this.setCursor(this.optionsCursor ? this.optionsCursor - 1 : 2); + break; + case keyCodes.DOWN: + success = this.setCursor(this.optionsCursor < 2 ? this.optionsCursor + 1 : 0); + break; + } + } + } else { + if (keyCode === keyCodes.Z) { + if (this.cursor < 6) { + this.showOptions(); + ui.playSelect(); + } else if (this.isModal) + ui.playError(); + else + this.processInput(keyCodes.X); + return; + } else if (keyCode === keyCodes.X) { + if (!this.isModal) { if (this.selectCallback) { const selectCallback = this.selectCallback; this.selectCallback = null; - selectCallback(this.cursor); - return; - } else if (this.cursor) - (this.scene.getCurrentPhase() as CommandPhase).handleCommand(Command.POKEMON, this.cursor); - else - this.processInput(keyCodes.X); - } else { - this.partyMessageBox.setTexture('party_message_large'); - this.message.y -= 15; - this.showText(filterResult as string, null, () => { - this.partyMessageBox.setTexture('party_message'); - this.message.text = defaultMessage; - this.message.y += 15; - }, null, true); - } - } else if (this.isModal) - ui.playError(); - else - this.processInput(keyCodes.X); - return; - } else if (keyCode === keyCodes.X) { - if (!this.isModal) { - if (this.selectCallback) { - const selectCallback = this.selectCallback; - this.selectCallback = null; - selectCallback(6); - ui.playSelect(); - } else { - ui.setMode(Mode.COMMAND); - ui.playSelect(); + selectCallback(6); + ui.playSelect(); + } else { + ui.setMode(Mode.COMMAND); + ui.playSelect(); + } } + return; } - return; - } - const slotCount = this.partySlots.length; - let success = false; + const slotCount = this.partySlots.length; - switch (keyCode) { - case keyCodes.UP: - success = this.setCursor(this.cursor ? this.cursor < 6 ? this.cursor - 1 : slotCount - 1 : 6); - break; - case keyCodes.DOWN: - success = this.setCursor(this.cursor < 6 ? this.cursor < slotCount - 1 ? this.cursor + 1 : 6 : 0); - break; - case keyCodes.LEFT: - if (this.cursor && this.cursor < 6) - success = this.setCursor(0); - break; - case keyCodes.RIGHT: - if (!this.cursor) - success = this.setCursor(this.lastCursor < 6 ? this.lastCursor || 1 : 1); - break; + switch (keyCode) { + case keyCodes.UP: + success = this.setCursor(this.cursor ? this.cursor < 6 ? this.cursor - 1 : slotCount - 1 : 6); + break; + case keyCodes.DOWN: + success = this.setCursor(this.cursor < 6 ? this.cursor < slotCount - 1 ? this.cursor + 1 : 6 : 0); + break; + case keyCodes.LEFT: + if (this.cursor && this.cursor < 6) + success = this.setCursor(0); + break; + case keyCodes.RIGHT: + if (!this.cursor) + success = this.setCursor(this.lastCursor < 6 ? this.lastCursor || 1 : 1); + break; + } } if (success) ui.playSelect(); } - setCursor(cursor: integer): boolean { - const changed = this.cursor !== cursor; - if (changed) { - this.lastCursor = this.cursor; - this.cursor = cursor; - if (this.lastCursor < 6) - this.partySlots[this.lastCursor].deselect(); - else if (this.lastCursor === 6) - this.partyCancelButton.deselect(); - if (cursor < 6) - this.partySlots[cursor].select(); - else if (cursor === 6) - this.partyCancelButton.select(); - } - - return changed; - } - populatePartySlots() { const party = (this.scene as BattleScene).getParty(); @@ -214,6 +232,91 @@ export default class PartyUiHandler extends MessageUiHandler { partySlot.select(); } } + + setCursor(cursor: integer): boolean { + let changed: boolean; + + if (this.optionsMode) { + changed = this.optionsCursor !== cursor; + this.optionsCursor = cursor; + if (!this.optionsCursorObj) { + this.optionsCursorObj = this.scene.add.image(0, 0, 'cursor'); + this.optionsCursorObj.setOrigin(0, 0); + this.optionsContainer.add(this.optionsCursorObj); + } + console.log(this.optionsCursor) + this.optionsCursorObj.setPosition(-86, -19 - (16 * (2 - this.optionsCursor))); + } else { + changed = this.cursor !== cursor; + if (changed) { + this.lastCursor = this.cursor; + this.cursor = cursor; + if (this.lastCursor < 6) + this.partySlots[this.lastCursor].deselect(); + else if (this.lastCursor === 6) + this.partyCancelButton.deselect(); + if (cursor < 6) + this.partySlots[cursor].select(); + else if (cursor === 6) + this.partyCancelButton.select(); + } + } + + return changed; + } + + showOptions() { + if (this.cursor === 6) + return; + + this.optionsMode = true; + + this.partyMessageBox.setTexture('party_message_options'); + this.message.setText('Do what with this Pokémon?'); + + const optionsBottom = this.scene.add.image(0, 0, 'party_options_bottom'); + optionsBottom.setOrigin(1, 1); + this.optionsContainer.add(optionsBottom); + + const options = [ + this.isModal ? 'SEND OUT' : 'SHIFT', + 'SUMMARY', + 'CANCEL' + ]; + + for (let o = 0; o < options.length; o++) { + const yCoord = -6 - 16 * o; + const optionBg = this.scene.add.image(0, yCoord, 'party_options_center'); + const optionText = addTextObject(this.scene, -79, yCoord - 16, options[options.length - (o + 1)], TextStyle.WINDOW); + + optionBg.setOrigin(1, 1); + optionText.setOrigin(0, 0); + + this.optionsContainer.add(optionBg); + this.optionsContainer.add(optionText); + } + + const optionsTop = this.scene.add.image(0, -6 - 16 * options.length, 'party_options_top'); + optionsTop.setOrigin(1, 1); + this.optionsContainer.add(optionsTop); + + this.setCursor(0); + } + + clearOptions() { + this.optionsMode = false; + this.optionsContainer.removeAll(true); + this.eraseOptionsCursor(); + + this.partyMessageBox.setTexture('party_message'); + this.message.setText(defaultMessage); + } + + eraseOptionsCursor() { + if (this.optionsCursorObj) + this.optionsCursorObj.destroy(); + this.optionsCursorObj = null; + } clear() { super.clear(); diff --git a/src/ui/summary-ui-handler.ts b/src/ui/summary-ui-handler.ts new file mode 100644 index 000000000..d8044dab3 --- /dev/null +++ b/src/ui/summary-ui-handler.ts @@ -0,0 +1,48 @@ +import BattleScene from "../battle-scene"; +import { Mode } from "./ui"; +import UiHandler from "./uiHandler"; + +export default class SummaryUiHandler extends UiHandler { + private summaryContainer: Phaser.GameObjects.Container; + + constructor(scene: BattleScene) { + super(scene, Mode.SUMMARY); + } + + setup() { + const ui = this.getUi(); + + this.summaryContainer = this.scene.add.container(0, 0); + this.summaryContainer.setVisible(false); + ui.add(this.summaryContainer); + + const summaryBg = this.scene.add.image(0, 0, 'summary_bg'); + this.summaryContainer.add(summaryBg); + + summaryBg.setOrigin(0, 1); + } + + show(args: any[]) { + super.show(args); + + this.summaryContainer.setVisible(true); + } + + processInput(keyCode: integer) { + const ui = this.getUi(); + const keyCodes = Phaser.Input.Keyboard.KeyCodes; + } + + setCursor(cursor: integer): boolean { + const changed = this.cursor !== cursor; + if (changed) { + } + + return changed; + } + + clear() { + super.clear(); + this.summaryContainer.setVisible(false); + } +} diff --git a/src/ui/ui.ts b/src/ui/ui.ts index 469eaf211..54f71500a 100644 --- a/src/ui/ui.ts +++ b/src/ui/ui.ts @@ -8,6 +8,7 @@ import MessageUiHandler from './message-ui-handler'; import SwitchCheckUiHandler from './switch-check-ui-handler'; import ModifierSelectUiHandler from './modifier-select-ui-handler'; import BallUiHandler from './ball-ui-handler'; +import SummaryUiHandler from './summary-ui-handler'; export enum Mode { MESSAGE = 0, @@ -16,7 +17,8 @@ export enum Mode { BALL, SWITCH_CHECK, MODIFIER_SELECT, - PARTY + PARTY, + SUMMARY }; export default class UI extends Phaser.GameObjects.Container { @@ -34,7 +36,8 @@ export default class UI extends Phaser.GameObjects.Container { new BallUiHandler(scene), new SwitchCheckUiHandler(scene), new ModifierSelectUiHandler(scene), - new PartyUiHandler(scene) + new PartyUiHandler(scene), + new SummaryUiHandler(scene) ]; }