Add tooltips for modifiers

pull/2/head
Flashfyre 2023-11-02 00:55:20 -04:00
parent 2992efa340
commit 4702ef7737
7 changed files with 107 additions and 35 deletions

View File

@ -352,6 +352,7 @@ export default class BattleScene extends Phaser.Scene {
update() { update() {
this.checkInput(); this.checkInput();
this.ui.update();
} }
launchBattle() { launchBattle() {

View File

@ -5,7 +5,7 @@ import { getLevelTotalExp } from "../data/exp";
import { PokeballType } from "../data/pokeball"; import { PokeballType } from "../data/pokeball";
import Pokemon, { PlayerPokemon } from "../pokemon"; import Pokemon, { PlayerPokemon } from "../pokemon";
import { Stat } from "../data/pokemon-stat"; import { Stat } from "../data/pokemon-stat";
import { addTextObject, TextStyle } from "../ui/text"; import { addTextObject, getModifierTierTextTint, TextStyle } from "../ui/text";
import { Type } from '../data/type'; import { Type } from '../data/type';
import { EvolutionPhase } from '../evolution-phase'; import { EvolutionPhase } from '../evolution-phase';
import { pokemonEvolutions } from '../data/pokemon-evolutions'; import { pokemonEvolutions } from '../data/pokemon-evolutions';
@ -30,19 +30,6 @@ export class ModifierBar extends Phaser.GameObjects.Container {
this.player = !enemy; this.player = !enemy;
this.setScale(0.5); this.setScale(0.5);
this.setInteractive(new Phaser.Geom.Rectangle(enemy ? -320 : 0, 0, 320, 48), Phaser.Geom.Rectangle.Contains);
const thisArg = this;
this.on('pointerover', function () {
if (this.modifierCache && this.modifierCache.length > iconOverflowIndex)
thisArg.updateModifierOverflowVisibility(true);
});
this.on('pointerout', function () {
if (this.modifierCache && this.modifierCache.length > iconOverflowIndex)
thisArg.updateModifierOverflowVisibility(false);
});
} }
updateModifiers(modifiers: PersistentModifier[]) { updateModifiers(modifiers: PersistentModifier[]) {
@ -57,12 +44,25 @@ export class ModifierBar extends Phaser.GameObjects.Container {
return aId < bId ? 1 : aId > bId ? -1 : 0; return aId < bId ? 1 : aId > bId ? -1 : 0;
}); });
const thisArg = this;
visibleIconModifiers.forEach((modifier: PersistentModifier, i: integer) => { visibleIconModifiers.forEach((modifier: PersistentModifier, i: integer) => {
const icon = modifier.getIcon(this.scene as BattleScene); const icon = modifier.getIcon(this.scene as BattleScene);
if (i >= iconOverflowIndex) if (i >= iconOverflowIndex)
icon.setVisible(false); icon.setVisible(false);
this.add(icon); this.add(icon);
this.setModifierIconPosition(icon, visibleIconModifiers.length); this.setModifierIconPosition(icon, visibleIconModifiers.length);
icon.setInteractive(new Phaser.Geom.Rectangle(0, 0, 32, 32), Phaser.Geom.Rectangle.Contains);
icon.on('pointerover', () => {
(this.scene as BattleScene).ui.showTooltip(modifier.type.name, modifier.type.description);
if (this.modifierCache && this.modifierCache.length > iconOverflowIndex)
thisArg.updateModifierOverflowVisibility(true);
});
icon.on('pointerout', () => {
(this.scene as BattleScene).ui.hideTooltip();
if (this.modifierCache && this.modifierCache.length > iconOverflowIndex)
thisArg.updateModifierOverflowVisibility(false);
});
}); });
this.modifierCache = modifiers; this.modifierCache = modifiers;

View File

@ -1,7 +1,7 @@
import BattleScene, { Button } from "../battle-scene"; import BattleScene, { Button } from "../battle-scene";
import { ModifierTier, ModifierTypeOption } from "../modifier/modifier-type"; import { ModifierTier, ModifierTypeOption } from "../modifier/modifier-type";
import { getPokeballAtlasKey, PokeballType } from "../data/pokeball"; import { getPokeballAtlasKey, PokeballType } from "../data/pokeball";
import { addTextObject, TextStyle } from "./text"; import { addTextObject, getModifierTierTextTint, TextStyle } from "./text";
import AwaitableUiHandler from "./awaitable-ui-handler"; import AwaitableUiHandler from "./awaitable-ui-handler";
import { Mode } from "./ui"; import { Mode } from "./ui";
import { PokemonHeldItemModifier } from "../modifier/modifier"; import { PokemonHeldItemModifier } from "../modifier/modifier";
@ -292,7 +292,7 @@ class ModifierOption extends Phaser.GameObjects.Container {
this.itemText = addTextObject(this.scene, 0, 35, this.modifierTypeOption.type.name, TextStyle.PARTY, { align: 'center' }); this.itemText = addTextObject(this.scene, 0, 35, this.modifierTypeOption.type.name, TextStyle.PARTY, { align: 'center' });
this.itemText.setOrigin(0.5, 0); this.itemText.setOrigin(0.5, 0);
this.itemText.setAlpha(0); this.itemText.setAlpha(0);
this.itemText.setTint(this.getTextTint()); this.itemText.setTint(getModifierTierTextTint(this.modifierTypeOption.type.tier));
this.add(this.itemText); this.add(this.itemText);
} }
@ -396,19 +396,4 @@ class ModifierOption extends Phaser.GameObjects.Container {
getPbAtlasKey(beforeUpgrade: boolean) { getPbAtlasKey(beforeUpgrade: boolean) {
return getPokeballAtlasKey((this.modifierTypeOption.type.tier - (beforeUpgrade && this.modifierTypeOption.upgraded ? 1 : 0)) as integer as PokeballType); return getPokeballAtlasKey((this.modifierTypeOption.type.tier - (beforeUpgrade && this.modifierTypeOption.upgraded ? 1 : 0)) as integer as PokeballType);
} }
getTextTint(): integer {
switch (this.modifierTypeOption.type.tier) {
case ModifierTier.COMMON:
return 0xffffff
case ModifierTier.GREAT:
return 0x3890f8;
case ModifierTier.ULTRA:
return 0xf8d038
case ModifierTier.MASTER:
return 0xe020c0;
case ModifierTier.LUXURY:
return 0xe64a18;
}
}
} }

View File

@ -25,6 +25,8 @@ export default class SettingsUiHandler extends UiHandler {
this.settingsContainer = this.scene.add.container(1, -(this.scene.game.canvas.height / 6) + 1); this.settingsContainer = this.scene.add.container(1, -(this.scene.game.canvas.height / 6) + 1);
this.settingsContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6); const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6);
headerBg.setOrigin(0, 0); headerBg.setOrigin(0, 0);
@ -94,6 +96,8 @@ export default class SettingsUiHandler extends UiHandler {
this.setCursor(0); this.setCursor(0);
this.getUi().moveTo(this.settingsContainer, this.getUi().length - 1); this.getUi().moveTo(this.settingsContainer, this.getUi().length - 1);
this.getUi().hideTooltip();
} }
processInput(button: Button) { processInput(button: Button) {

View File

@ -412,6 +412,8 @@ export default class SummaryUiHandler extends UiHandler {
this.tabSprite.setTexture(`summary_tabs_${this.cursor + 1}`); this.tabSprite.setTexture(`summary_tabs_${this.cursor + 1}`);
this.getUi().hideTooltip();
if (this.summaryPageContainer.visible) { if (this.summaryPageContainer.visible) {
this.transitioning = true; this.transitioning = true;
this.populatePageContainer(this.summaryPageTransitionContainer, forward ? cursor : cursor + 1); this.populatePageContainer(this.summaryPageTransitionContainer, forward ? cursor : cursor + 1);
@ -520,6 +522,10 @@ export default class SummaryUiHandler extends UiHandler {
icon.setPosition((i % 17) * 12 + 3, 14 * Math.floor(i / 17) + 15); icon.setPosition((i % 17) * 12 + 3, 14 * Math.floor(i / 17) + 15);
statsContainer.add(icon); statsContainer.add(icon);
icon.setInteractive(new Phaser.Geom.Rectangle(0, 0, 32, 32), Phaser.Geom.Rectangle.Contains);
icon.on('pointerover', () => (this.scene as BattleScene).ui.showTooltip(item.type.name, item.type.description, true));
icon.on('pointerout', () => (this.scene as BattleScene).ui.hideTooltip());
}); });
const totalLvExp = getLevelTotalExp(this.pokemon.level, this.pokemon.species.growthRate); const totalLvExp = getLevelTotalExp(this.pokemon.level, this.pokemon.species.growthRate);

View File

@ -9,7 +9,9 @@ export enum TextStyle {
SUMMARY_GOLD, SUMMARY_GOLD,
MONEY, MONEY,
SETTINGS_LABEL, SETTINGS_LABEL,
SETTINGS_SELECTED SETTINGS_SELECTED,
TOOLTIP_TITLE,
TOOLTIP_CONTENT
}; };
export function addTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle) { export function addTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle) {
@ -37,14 +39,19 @@ export function addTextObject(scene: Phaser.Scene, x: number, y: number, content
break; break;
case TextStyle.BATTLE_INFO: case TextStyle.BATTLE_INFO:
case TextStyle.MONEY: case TextStyle.MONEY:
case TextStyle.TOOLTIP_TITLE:
styleOptions.fontSize = '72px'; styleOptions.fontSize = '72px';
shadowSize = 4; shadowSize = 4.5;
break; break;
case TextStyle.PARTY: case TextStyle.PARTY:
case TextStyle.PARTY_RED: case TextStyle.PARTY_RED:
styleOptions.fontFamily = 'pkmnems'; styleOptions.fontFamily = 'pkmnems';
styleOptions.fontSize = '66px'; styleOptions.fontSize = '66px';
break; break;
case TextStyle.TOOLTIP_CONTENT:
styleOptions.fontSize = '64px';
shadowSize = 4;
break;
} }
shadowColor = getTextColor(style, true); shadowColor = getTextColor(style, true);
@ -70,6 +77,7 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean) {
case TextStyle.MESSAGE: case TextStyle.MESSAGE:
return !shadow ? '#f8f8f8' : '#6b5a73'; return !shadow ? '#f8f8f8' : '#6b5a73';
case TextStyle.WINDOW: case TextStyle.WINDOW:
case TextStyle.TOOLTIP_CONTENT:
return !shadow ? '#484848' : '#d0d0c8'; return !shadow ? '#484848' : '#d0d0c8';
case TextStyle.BATTLE_INFO: case TextStyle.BATTLE_INFO:
return !shadow ? '#404040' : '#ded6b5'; return !shadow ? '#404040' : '#ded6b5';
@ -80,6 +88,7 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean) {
case TextStyle.SUMMARY: case TextStyle.SUMMARY:
return !shadow ? '#ffffff' : '#636363'; return !shadow ? '#ffffff' : '#636363';
case TextStyle.SUMMARY_RED: case TextStyle.SUMMARY_RED:
case TextStyle.TOOLTIP_TITLE:
return !shadow ? '#f89890' : '#984038'; return !shadow ? '#f89890' : '#984038';
case TextStyle.SUMMARY_GOLD: case TextStyle.SUMMARY_GOLD:
case TextStyle.MONEY: case TextStyle.MONEY:
@ -89,4 +98,20 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean) {
case TextStyle.SETTINGS_SELECTED: case TextStyle.SETTINGS_SELECTED:
return !shadow ? '#f88880' : '#f83018'; return !shadow ? '#f88880' : '#f83018';
} }
}
export function getModifierTierTextTint(tier: integer): integer {
console.log(tier);
switch (tier) {
case 0: // ModifierTier.COMMON:
return 0xffffff;
case 1: // ModifierTier.GREAT:
return 0x3890f8;
case 2: // ModifierTier.ULTRA:
return 0xf8d038
case 3: // ModifierTier.MASTER:
return 0xe020c0;
case 4: // ModifierTier.LUXURY:
return 0xe64a18;
}
} }

View File

@ -15,6 +15,8 @@ import BiomeSelectUiHandler from './biome-select-ui-handler';
import TargetSelectUiHandler from './target-select-ui-handler'; import TargetSelectUiHandler from './target-select-ui-handler';
import GameModeSelectUiHandler from './game-mode-select-ui-handler'; import GameModeSelectUiHandler from './game-mode-select-ui-handler';
import SettingsUiHandler from './settings-ui-handler'; import SettingsUiHandler from './settings-ui-handler';
import { TextStyle, addTextObject, getTextColor } from './text';
import { getPokeballTintColor } from '../data/pokeball';
export enum Mode { export enum Mode {
MESSAGE, MESSAGE,
@ -51,6 +53,11 @@ export default class UI extends Phaser.GameObjects.Container {
private lastMode: Mode; private lastMode: Mode;
private handlers: UiHandler[]; private handlers: UiHandler[];
private overlay: Phaser.GameObjects.Rectangle; private overlay: Phaser.GameObjects.Rectangle;
private tooltipContainer: Phaser.GameObjects.Container;
private tooltipBg: Phaser.GameObjects.NineSlice;
private tooltipTitle: Phaser.GameObjects.Text;
private tooltipContent: Phaser.GameObjects.Text;
private overlayActive: boolean; private overlayActive: boolean;
@ -77,13 +84,33 @@ export default class UI extends Phaser.GameObjects.Container {
} }
setup(): void { setup(): void {
for (let handler of this.handlers) { for (let handler of this.handlers)
handler.setup(); handler.setup();
}
this.overlay = this.scene.add.rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6, 0); this.overlay = this.scene.add.rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6, 0);
this.overlay.setOrigin(0, 0); this.overlay.setOrigin(0, 0);
(this.scene as BattleScene).uiContainer.add(this.overlay); (this.scene as BattleScene).uiContainer.add(this.overlay);
this.overlay.setVisible(false); this.overlay.setVisible(false);
this.setupTooltip();
}
private setupTooltip() {
this.tooltipContainer = this.scene.add.container(0, 0);
this.tooltipContainer.setVisible(false);
this.tooltipBg = this.scene.add.nineslice(0, 0, 'window', null, 128, 31, 6, 6, 6, 6);
this.tooltipBg.setOrigin(0, 0);
this.tooltipTitle = addTextObject(this.scene, 64, 4, '', TextStyle.TOOLTIP_TITLE);
this.tooltipTitle.setOrigin(0.5, 0);
this.tooltipContent = addTextObject(this.scene, 6, 16, '', TextStyle.TOOLTIP_CONTENT);
this.tooltipContent.setWordWrapWidth(696)
this.tooltipContainer.add(this.tooltipBg);
this.tooltipContainer.add(this.tooltipTitle);
this.tooltipContainer.add(this.tooltipContent);
(this.scene as BattleScene).uiContainer.add(this.tooltipContainer);
} }
getHandler(): UiHandler { getHandler(): UiHandler {
@ -117,6 +144,30 @@ export default class UI extends Phaser.GameObjects.Container {
this.getMessageHandler().showDialogue(text, name, delay, callback, callbackDelay, prompt, promptDelay); this.getMessageHandler().showDialogue(text, name, delay, callback, callbackDelay, prompt, promptDelay);
} }
showTooltip(title: string, content: string, overlap?: boolean): void {
this.tooltipContainer.setVisible(true);
this.tooltipTitle.setText(title);
const wrappedContent = this.tooltipContent.runWordWrap(content);
this.tooltipContent.setText(wrappedContent);
this.tooltipBg.height = 31 + 10.5 * (wrappedContent.split('\n').length - 1);
if (overlap)
(this.scene as BattleScene).uiContainer.moveAbove(this.tooltipContainer, this);
else
(this.scene as BattleScene).uiContainer.moveBelow(this.tooltipContainer, this);
}
hideTooltip(): void {
this.tooltipContainer.setVisible(false);
this.tooltipTitle.clearTint();
}
update(): void {
if (this.tooltipContainer.visible) {
const reverse = this.scene.game.input.mousePointer.x >= this.scene.game.canvas.width - this.tooltipBg.width * 6 - 12;
this.tooltipContainer.setPosition(!reverse ? this.scene.game.input.mousePointer.x / 6 + 2 : this.scene.game.input.mousePointer.x / 6 - this.tooltipBg.width - 2, this.scene.game.input.mousePointer.y / 6 + 2);
}
}
clearText(): void { clearText(): void {
const handler = this.getHandler(); const handler = this.getHandler();
if (handler instanceof MessageUiHandler) if (handler instanceof MessageUiHandler)