Improve summary UI

This commit is contained in:
Flashfyre 2023-04-07 00:17:55 -04:00
parent b9f21551f4
commit 860c1a5c11
5 changed files with 146 additions and 31 deletions

View File

@ -391,8 +391,7 @@ export class CommandPhase extends BattlePhase {
} }
end() { end() {
super.end(); this.scene.ui.setMode(Mode.MESSAGE).then(() => super.end());
this.scene.ui.setMode(Mode.MESSAGE);
} }
} }
@ -695,8 +694,7 @@ export class SwitchPhase extends BattlePhase {
this.scene.ui.setMode(Mode.PARTY, this.isModal ? PartyUiMode.SWITCH : PartyUiMode.FAINT_SWITCH, (slotIndex: integer) => { this.scene.ui.setMode(Mode.PARTY, this.isModal ? PartyUiMode.SWITCH : PartyUiMode.FAINT_SWITCH, (slotIndex: integer) => {
if (slotIndex && slotIndex < 6) if (slotIndex && slotIndex < 6)
this.scene.unshiftPhase(new SwitchSummonPhase(this.scene, slotIndex, this.doReturn)); this.scene.unshiftPhase(new SwitchSummonPhase(this.scene, slotIndex, this.doReturn));
this.scene.ui.setMode(Mode.MESSAGE); this.scene.ui.setMode(Mode.MESSAGE).then(() => super.end());
super.end();
}, PartyUiHandler.FilterNonFainted); }, PartyUiHandler.FilterNonFainted);
} }
} }
@ -780,6 +778,13 @@ export class LearnMovePhase extends PartyMemberPokemonPhase {
const pokemon = this.getPokemon(); const pokemon = this.getPokemon();
const move = allMoves[this.moveId - 1]; const move = allMoves[this.moveId - 1];
const existingMoveIndex = pokemon.moveset.findIndex(m => m.moveId === move.id);
if (existingMoveIndex > -1) {
this.end();
return;
}
const emptyMoveIndex = pokemon.moveset.length < 4 const emptyMoveIndex = pokemon.moveset.length < 4
? pokemon.moveset.length ? pokemon.moveset.length
: pokemon.moveset.findIndex(m => m === null); : pokemon.moveset.findIndex(m => m === null);

View File

@ -334,9 +334,6 @@ export default class BattleScene extends Phaser.Scene {
} else { } else {
this.pushPhase(new EncounterPhase(this)); this.pushPhase(new EncounterPhase(this));
this.pushPhase(new SummonPhase(this)); this.pushPhase(new SummonPhase(this));
this.pushPhase(new LearnMovePhase(this, 0, Moves.AERIAL_ACE));
this.pushPhase(new LearnMovePhase(this, 0, Moves.AERIAL_ACE));
this.pushPhase(new LearnMovePhase(this, 0, Moves.AERIAL_ACE));
} }
this.currentBattle = new Battle((this.currentBattle?.waveIndex || 0) + 1); this.currentBattle = new Battle((this.currentBattle?.waveIndex || 0) + 1);

View File

@ -170,9 +170,8 @@ export default class PartyUiHandler extends MessageUiHandler {
}, null, true); }, null, true);
} }
} else if (option === PartyOption.SUMMARY) { } else if (option === PartyOption.SUMMARY) {
this.clearOptions();
ui.playSelect(); ui.playSelect();
ui.setModeWithoutClear(Mode.SUMMARY, this.scene.getParty()[this.cursor]); ui.setModeWithoutClear(Mode.SUMMARY, this.scene.getParty()[this.cursor]).then(() => this.clearOptions());
} else if (option === PartyOption.CANCEL) } else if (option === PartyOption.CANCEL)
this.processInput(keyCodes.X); this.processInput(keyCodes.X);
} else if (keyCode === keyCodes.X) { } else if (keyCode === keyCodes.X) {

View File

@ -23,11 +23,15 @@ export default class SummaryUiHandler extends UiHandler {
private summaryContainer: Phaser.GameObjects.Container; private summaryContainer: Phaser.GameObjects.Container;
private summaryPageContainer: Phaser.GameObjects.Container; private summaryPageContainer: Phaser.GameObjects.Container;
private movesContainer: Phaser.GameObjects.Container; private movesContainer: Phaser.GameObjects.Container;
private moveDescriptionText: Phaser.GameObjects.Text;
private moveCursorObj: Phaser.GameObjects.Sprite; private moveCursorObj: Phaser.GameObjects.Sprite;
private selectedMoveCursorObj: Phaser.GameObjects.Sprite; private selectedMoveCursorObj: Phaser.GameObjects.Sprite;
private moveRowsContainer: Phaser.GameObjects.Container;
private extraMoveRowContainer: Phaser.GameObjects.Container; private extraMoveRowContainer: Phaser.GameObjects.Container;
private summaryPageTransitionContainer: Phaser.GameObjects.Container; private summaryPageTransitionContainer: Phaser.GameObjects.Container;
private moveCursorBlinkTimer: Phaser.Time.TimerEvent;
private pokemon: PlayerPokemon; private pokemon: PlayerPokemon;
private newMove: Move; private newMove: Move;
private moveSelectFunction: Function; private moveSelectFunction: Function;
@ -111,11 +115,37 @@ export default class SummaryUiHandler extends UiHandler {
if (this.moveCursor < this.pokemon.moveset.length) { if (this.moveCursor < this.pokemon.moveset.length) {
if (this.summaryUiMode === SummaryUiMode.LEARN_MOVE) if (this.summaryUiMode === SummaryUiMode.LEARN_MOVE)
this.moveSelectFunction(this.moveCursor); this.moveSelectFunction(this.moveCursor);
else else {
this.selectedMoveIndex = this.moveCursor; if (this.selectedMoveIndex === -1)
this.selectedMoveIndex = this.moveCursor;
else {
if (this.selectedMoveIndex !== this.moveCursor) {
const tempMove = this.pokemon.moveset[this.selectedMoveIndex];
this.pokemon.moveset[this.selectedMoveIndex] = this.pokemon.moveset[this.moveCursor];
this.pokemon.moveset[this.moveCursor] = tempMove;
const selectedMoveRow = this.moveRowsContainer.getAt(this.selectedMoveIndex) as Phaser.GameObjects.Container;
const switchMoveRow = this.moveRowsContainer.getAt(this.moveCursor) as Phaser.GameObjects.Container;
this.moveRowsContainer.moveTo(selectedMoveRow, this.moveCursor);
this.moveRowsContainer.moveTo(switchMoveRow, this.selectedMoveIndex);
selectedMoveRow.setY(this.moveCursor * 16);
switchMoveRow.setY(this.selectedMoveIndex * 16);
}
this.selectedMoveIndex = -1;
if (this.selectedMoveCursorObj) {
this.selectedMoveCursorObj.destroy();
this.selectedMoveCursorObj = null;
}
}
}
success = true; success = true;
} else if (this.moveCursor === 4) } else if (this.moveCursor === 4)
this.processInput(keyCodes.X); this.processInput(keyCodes.X);
else
ui.playError();
} else if (keyCode === keyCodes.X) { } else if (keyCode === keyCodes.X) {
this.hideMoveSelect(); this.hideMoveSelect();
success = true; success = true;
@ -165,13 +195,41 @@ export default class SummaryUiHandler extends UiHandler {
if (changed) { if (changed) {
this.moveCursor = cursor; this.moveCursor = cursor;
if (!this.moveCursorObj) { const selectedMove = this.getSelectedMove();
this.moveCursorObj = this.scene.add.sprite(-2, 0, 'summary_moves_cursor', 'highlight');
this.moveCursorObj.setOrigin(0, 1); this.moveDescriptionText.setText(selectedMove?.effect || '');
this.movesContainer.add(this.moveCursorObj); }
if (!this.moveCursorObj) {
this.moveCursorObj = this.scene.add.sprite(-2, 0, 'summary_moves_cursor', 'highlight');
this.moveCursorObj.setOrigin(0, 1);
this.movesContainer.add(this.moveCursorObj);
}
this.moveCursorObj.setY(16 * this.moveCursor + 1);
if (this.moveCursorBlinkTimer)
this.moveCursorBlinkTimer.destroy();
this.moveCursorBlinkTimer = this.scene.time.addEvent({
loop: true,
delay: 600,
callback: () => {
this.moveCursorObj.setVisible(false);
this.scene.time.delayedCall(100, () => {
this.moveCursorObj.setVisible(true);
});
} }
});
this.moveCursorObj.setY(16 * this.moveCursor + 1);
if (this.selectedMoveIndex > -1) {
if (!this.selectedMoveCursorObj) {
this.selectedMoveCursorObj = this.scene.add.sprite(-2, 0, 'summary_moves_cursor', 'select');
this.selectedMoveCursorObj.setOrigin(0, 1);
this.movesContainer.add(this.selectedMoveCursorObj);
this.movesContainer.moveBelow(this.selectedMoveCursorObj, this.moveCursorObj);
}
this.selectedMoveCursorObj.setY(16 * this.selectedMoveIndex + 1);
} }
} else { } else {
changed = this.cursor !== cursor; changed = this.cursor !== cursor;
@ -228,6 +286,7 @@ export default class SummaryUiHandler extends UiHandler {
pageContainer.add(this.movesContainer); pageContainer.add(this.movesContainer);
this.extraMoveRowContainer = this.scene.add.container(0, 64); this.extraMoveRowContainer = this.scene.add.container(0, 64);
this.extraMoveRowContainer.setVisible(false);
this.movesContainer.add(this.extraMoveRowContainer); this.movesContainer.add(this.extraMoveRowContainer);
const extraRowOverlay = this.scene.add.image(-2, 1, 'summary_moves_overlay_row'); const extraRowOverlay = this.scene.add.image(-2, 1, 'summary_moves_overlay_row');
@ -239,25 +298,57 @@ export default class SummaryUiHandler extends UiHandler {
extraRowText.setOrigin(0, 1); extraRowText.setOrigin(0, 1);
this.extraMoveRowContainer.add(extraRowText); this.extraMoveRowContainer.add(extraRowText);
this.moveRowsContainer = this.scene.add.container(0, 0);
this.movesContainer.add(this.moveRowsContainer);
for (let m = 0; m < 4; m++) { for (let m = 0; m < 4; m++) {
const move = m < this.pokemon.moveset.length ? this.pokemon.moveset[m] : null; const move = m < this.pokemon.moveset.length ? this.pokemon.moveset[m] : null;
const moveRowContainer = this.scene.add.container(0, 16 * m);
this.moveRowsContainer.add(moveRowContainer);
if (move) { if (move) {
const typeIcon = this.scene.add.sprite(0, 16 * m, 'types', Type[move.getMove().type].toLowerCase()); const typeIcon = this.scene.add.sprite(0, 0, 'types', Type[move.getMove().type].toLowerCase());
typeIcon.setOrigin(0, 1); typeIcon.setOrigin(0, 1);
this.movesContainer.add(typeIcon); moveRowContainer.add(typeIcon);
} }
const moveText = addTextObject(this.scene, 35, 16 * m, move ? move.getName() : '-', TextStyle.SUMMARY); const moveText = addTextObject(this.scene, 35, 0, move ? move.getName() : '-', TextStyle.SUMMARY);
moveText.setOrigin(0, 1); moveText.setOrigin(0, 1);
this.movesContainer.add(moveText); moveRowContainer.add(moveText);
} }
this.moveDescriptionText = addTextObject(this.scene, 2, 84, '', TextStyle.WINDOW, { wordWrap: { width: 900 } });
this.movesContainer.add(this.moveDescriptionText);
const maskRect = this.scene.make.graphics({});
maskRect.fillStyle(0xFFFFFF);
maskRect.beginPath();
maskRect.fillRect(2, 83, 149, 46);
const moveDescriptionTextMask = maskRect.createGeometryMask();
this.moveDescriptionText.setMask(moveDescriptionTextMask);
console.log(this.moveDescriptionText.displayHeight);
break; break;
} }
} }
getSelectedMove(): Move {
if (this.cursor !== Page.MOVES)
return null;
if (this.moveCursor < 4 && this.moveCursor < this.pokemon.moveset.length)
return this.pokemon.moveset[this.moveCursor].getMove();
else if (this.summaryUiMode === SummaryUiMode.LEARN_MOVE && this.moveCursor === 4)
return this.newMove;
return null;
}
showMoveSelect() { showMoveSelect() {
this.moveSelect = true; this.moveSelect = true;
this.extraMoveRowContainer.setVisible(true);
this.selectedMoveIndex = -1;
this.setCursor(0); this.setCursor(0);
} }
@ -268,6 +359,19 @@ export default class SummaryUiHandler extends UiHandler {
} }
this.moveSelect = false; this.moveSelect = false;
this.extraMoveRowContainer.setVisible(false);
if (this.moveCursorBlinkTimer) {
this.moveCursorBlinkTimer.destroy();
this.moveCursorBlinkTimer = null;
}
if (this.moveCursorObj) {
this.moveCursorObj.destroy();
this.moveCursorObj = null;
}
if (this.selectedMoveCursorObj) {
this.selectedMoveCursorObj.destroy();
this.selectedMoveCursorObj = null;
}
} }
clear() { clear() {

View File

@ -30,6 +30,8 @@ export default class UI extends Phaser.GameObjects.Container {
private mode: Mode; private mode: Mode;
private handlers: UiHandler[]; private handlers: UiHandler[];
private overlay: Phaser.GameObjects.Rectangle; private overlay: Phaser.GameObjects.Rectangle;
private transitioning: boolean;
constructor(scene: BattleScene) { constructor(scene: BattleScene) {
super(scene, 0, scene.game.canvas.height / 6); super(scene, 0, scene.game.canvas.height / 6);
@ -47,7 +49,7 @@ export default class UI extends Phaser.GameObjects.Container {
]; ];
} }
setup() { setup(): void {
for (let handler of this.handlers) { for (let handler of this.handlers) {
handler.setup(); handler.setup();
} }
@ -57,19 +59,22 @@ export default class UI extends Phaser.GameObjects.Container {
this.overlay.setVisible(false); this.overlay.setVisible(false);
} }
getHandler() { getHandler(): UiHandler {
return this.handlers[this.mode]; return this.handlers[this.mode];
} }
getMessageHandler() { getMessageHandler(): BattleMessageUiHandler {
return this.handlers[Mode.MESSAGE] as BattleMessageUiHandler; return this.handlers[Mode.MESSAGE] as BattleMessageUiHandler;
} }
processInput(keyCode: integer) { processInput(keyCode: integer): void {
if (this.transitioning)
return;
this.getHandler().processInput(keyCode); this.getHandler().processInput(keyCode);
} }
showText(text: string, delay?: integer, callback?: Function, callbackDelay?: integer, prompt?: boolean) { showText(text: string, delay?: integer, callback?: Function, callbackDelay?: integer, prompt?: boolean): void {
const handler = this.getHandler(); const handler = this.getHandler();
if (handler instanceof MessageUiHandler) if (handler instanceof MessageUiHandler)
(handler as MessageUiHandler).showText(text, delay, callback, callbackDelay, prompt); (handler as MessageUiHandler).showText(text, delay, callback, callbackDelay, prompt);
@ -77,7 +82,7 @@ export default class UI extends Phaser.GameObjects.Container {
this.getMessageHandler().showText(text, delay, callback, callbackDelay, prompt); this.getMessageHandler().showText(text, delay, callback, callbackDelay, prompt);
} }
clearText() { clearText(): void {
const handler = this.getHandler(); const handler = this.getHandler();
if (handler instanceof MessageUiHandler) if (handler instanceof MessageUiHandler)
(handler as MessageUiHandler).clearText(); (handler as MessageUiHandler).clearText();
@ -93,11 +98,11 @@ export default class UI extends Phaser.GameObjects.Container {
return changed; return changed;
} }
playSelect() { playSelect(): void {
this.scene.sound.play('select'); this.scene.sound.play('select');
} }
playError() { playError(): void {
this.scene.sound.play('error'); this.scene.sound.play('error');
} }
@ -108,27 +113,32 @@ export default class UI extends Phaser.GameObjects.Container {
return; return;
} }
const doSetMode = () => { const doSetMode = () => {
this.getHandler().clear(); if (clear)
this.getHandler().clear();
this.mode = mode; this.mode = mode;
this.getHandler().show(args); this.getHandler().show(args);
resolve(); resolve();
}; };
if (transitionModes.indexOf(this.mode) > -1 || transitionModes.indexOf(mode) > -1) { if (transitionModes.indexOf(this.mode) > -1 || transitionModes.indexOf(mode) > -1) {
this.transitioning = true;
this.overlay.setAlpha(0); this.overlay.setAlpha(0);
this.overlay.setVisible(true); this.overlay.setVisible(true);
this.scene.tweens.add({ this.scene.tweens.add({
targets: this.overlay, targets: this.overlay,
alpha: 1, alpha: 1,
duration: 250, duration: 250,
ease: 'Sine.easeOut',
onComplete: () => { onComplete: () => {
this.scene.time.delayedCall(250, () => { this.scene.time.delayedCall(100, () => {
doSetMode(); doSetMode();
this.scene.tweens.add({ this.scene.tweens.add({
targets: this.overlay, targets: this.overlay,
alpha: 0, alpha: 0,
duration: 250, duration: 250,
ease: 'Sine.easeIn',
onComplete: () => this.overlay.setVisible(false) onComplete: () => this.overlay.setVisible(false)
}); });
this.transitioning = false;
}); });
} }
}); });