diff --git a/public/images/ui/party_message_options.png b/public/images/ui/party_message_options.png new file mode 100644 index 000000000..b0fd8f122 Binary files /dev/null and b/public/images/ui/party_message_options.png differ diff --git a/public/images/ui/party_options_bottom.png b/public/images/ui/party_options_bottom.png new file mode 100644 index 000000000..d30c62ab0 Binary files /dev/null and b/public/images/ui/party_options_bottom.png differ diff --git a/public/images/ui/party_options_center.png b/public/images/ui/party_options_center.png new file mode 100644 index 000000000..b177e64d2 Binary files /dev/null and b/public/images/ui/party_options_center.png differ diff --git a/public/images/ui/party_options_top.png b/public/images/ui/party_options_top.png new file mode 100644 index 000000000..108b9dae4 Binary files /dev/null and b/public/images/ui/party_options_top.png differ diff --git a/public/images/ui/summary_bg.png b/public/images/ui/summary_bg.png new file mode 100644 index 000000000..fc73304b8 Binary files /dev/null and b/public/images/ui/summary_bg.png differ diff --git a/public/images/ui/summary_overlay_shiny.png b/public/images/ui/summary_overlay_shiny.png new file mode 100644 index 000000000..6aaacc8cb Binary files /dev/null and b/public/images/ui/summary_overlay_shiny.png differ diff --git a/public/images/ui/summary_tabs_1.png b/public/images/ui/summary_tabs_1.png new file mode 100644 index 000000000..ff38096fc Binary files /dev/null and b/public/images/ui/summary_tabs_1.png differ diff --git a/public/images/ui/summary_tabs_2.png b/public/images/ui/summary_tabs_2.png new file mode 100644 index 000000000..f147d1b83 Binary files /dev/null and b/public/images/ui/summary_tabs_2.png differ diff --git a/public/images/ui/summary_tabs_3.png b/public/images/ui/summary_tabs_3.png new file mode 100644 index 000000000..cf8829886 Binary files /dev/null and b/public/images/ui/summary_tabs_3.png differ 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) ]; }