From 2e1feb54c5f3f49046ce1072bc7fd5788289d07b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebasti=C3=A1n=20Di=20Lauro?= Date: Fri, 9 Aug 2024 11:17:29 -0300 Subject: [PATCH] Migrated UI/combat stats (#32) * add close inventory button in component * add values to Combat stats --- scene/src/controllers/main-hud/index.tsx | 22 +++++++++------- .../main-hud/inventory.controller.tsx | 7 +++++ scene/src/enemies/MonsterMob.ts | 25 +++++++++++++++--- scene/src/enemies/character.ts | 2 +- scene/src/enemies/chicken.ts | 12 ++++----- scene/src/enemies/monster.ts | 20 +++++++++++++- scene/src/enemies/monsterGeneric.ts | 2 +- scene/src/enemies/monsterHealer.ts | 17 ++++++++++++ scene/src/enemies/monsterMage.ts | 17 ++++++++++++ scene/src/enemies/monsterMeat.ts | 17 +++++++++++- scene/src/enemies/monsterMobAuto.ts | 17 +++++++++++- scene/src/enemies/monsterPoison.ts | 17 +++++++++++- scene/src/player/LevelManager.ts | 6 +++++ scene/src/player/player.tsx | 7 +++-- scene/src/ui/inventory/inventoryComponent.tsx | 26 ++++++++++++++++++- scene/tsconfig.json | 1 + 16 files changed, 188 insertions(+), 27 deletions(-) diff --git a/scene/src/controllers/main-hud/index.tsx b/scene/src/controllers/main-hud/index.tsx index 8bcbbac..e51e9e4 100644 --- a/scene/src/controllers/main-hud/index.tsx +++ b/scene/src/controllers/main-hud/index.tsx @@ -8,6 +8,11 @@ export class MainHudController { public isVisible: boolean = true public isPlayerRollOpen: boolean = false public isInfoOpen: boolean = false + public lastPlayerAttack: number | 'MISSED' = 0 + public lastEnemyAttack: number | 'MISSED' = 0 + public lastPlayerRoll: number = 0 + public lastEnemyRoll: number = 0 + public gainedXP: number = 0 private inventoryController: InventoryController | null = null @@ -23,18 +28,18 @@ export class MainHudController { showInfo={this.showInfo.bind(this)} openLink={this.openLink.bind(this)} showInventory={() => { - this.showInventory(this.inventoryController === null) + this.showInventory(true) }} characterRace={player.race} characterClass={player.class} characterAlliance={player.alliance} // TODO: add player roll lastRoll={{ - gainedExperience: 25, - playerRoll: 12, - enemyRoll: 4, - playerAttack: 50, - EnemyAttack: 'MISSED' + gainedExperience: this.gainedXP, + playerRoll: this.lastPlayerRoll, + enemyRoll: this.lastEnemyRoll, + playerAttack: this.lastPlayerAttack, + EnemyAttack: this.lastEnemyAttack }} // TODO: Add player professions playerProfessions={{ @@ -59,11 +64,10 @@ export class MainHudController { } showInventory(visibility: boolean): void { - if (visibility && this.inventoryController === null) { + if (this.inventoryController === null) { this.inventoryController = new InventoryController() - } else if (!visibility && this.inventoryController !== null) { - this.inventoryController = null } + this.inventoryController.showInventory(visibility) } openLink(url: string): void { diff --git a/scene/src/controllers/main-hud/inventory.controller.tsx b/scene/src/controllers/main-hud/inventory.controller.tsx index 1bcd71d..6994eef 100644 --- a/scene/src/controllers/main-hud/inventory.controller.tsx +++ b/scene/src/controllers/main-hud/inventory.controller.tsx @@ -51,6 +51,7 @@ export class InventoryController { public tabIndex: number = 0 public leftSprite: Sprite = inventorySprites.leftArrowButton public rightSprite: Sprite = inventorySprites.rightArrowButton + public inventoryVisibility: boolean = true // Skills Page public selectedSkill: SkillDefinition | undefined @@ -108,10 +109,16 @@ export class InventoryController { leftSprite={this.leftSprite} rightSprite={this.rightSprite} updateTab={this.updateTab.bind(this)} + showInventory={this.showInventory.bind(this)} + visibility={this.inventoryVisibility} /> ) } + showInventory(visibility: boolean): void { + this.inventoryVisibility = visibility + } + hideAllPages(): void { this.inventory = undefined this.skills = undefined diff --git a/scene/src/enemies/MonsterMob.ts b/scene/src/enemies/MonsterMob.ts index 6d33f31..cbc419e 100644 --- a/scene/src/enemies/MonsterMob.ts +++ b/scene/src/enemies/MonsterMob.ts @@ -299,6 +299,12 @@ export class MonsterMob extends GenericMonster { this.reduceHealth(damage) this.updateHealthBar() + const mainHUD = Player.getInstance().gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerAttack = damage + mainHUD.lastEnemyAttack = 'MISSED' + } + if (isCriticalAttack) { // showCriticalIcon() } @@ -372,7 +378,11 @@ export class MonsterMob extends GenericMonster { const roundedPlayerDice = Math.floor(playerDiceResult) const roundedMonsterDice = Math.floor(monsterDiceResult) - + const mainHUD = player?.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerRoll = roundedPlayerDice + mainHUD.lastEnemyRoll = roundedMonsterDice + } if (roundedMonsterDice <= roundedPlayerDice) { // Player attacks let defPercent = this.getDefensePercent() @@ -399,7 +409,12 @@ export class MonsterMob extends GenericMonster { skill(isCriticalAttack, true, reduceHealthBy) ) } else { - Player.getInstance().gameController.uiController.displayAnnouncement( + const player = Player.getInstance() + const mainHUD = player.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerAttack = 'MISSED' + } + player.gameController.uiController.displayAnnouncement( 'Attack missed!\nIncrease your luck!', Color4.Yellow(), 1000 @@ -426,7 +441,11 @@ export class MonsterMob extends GenericMonster { if (player === null) return player.reduceHealth(enemyAttack) - + const mainHUD = player.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastEnemyAttack = enemyAttack + mainHUD.lastPlayerAttack = 'MISSED' + } this.playAttack() player.impactAnimation?.() diff --git a/scene/src/enemies/character.ts b/scene/src/enemies/character.ts index a60d43e..69099ea 100644 --- a/scene/src/enemies/character.ts +++ b/scene/src/enemies/character.ts @@ -2,8 +2,8 @@ import { type Entity } from '@dcl/sdk/ecs' import { Scalar } from '@dcl/sdk/math' -import { getRandomInt } from './../utils/getRandomInt' import { entityController } from '../realms/entityController' +import { getRandomInt } from './../utils/getRandomInt' export class Character { _entity = entityController.addEntity() diff --git a/scene/src/enemies/chicken.ts b/scene/src/enemies/chicken.ts index 29f19d5..7e7d791 100644 --- a/scene/src/enemies/chicken.ts +++ b/scene/src/enemies/chicken.ts @@ -1,12 +1,12 @@ -import { Quaternion, Vector3 } from '@dcl/sdk/math' -import MonsterMeat from './monsterMeat' import { GltfContainer, Transform } from '@dcl/sdk/ecs' -import { getRandomInt, getRandomIntRange } from './../utils/getRandomInt' -import { Player } from '../player/player' -import { LEVEL_TYPES } from '../player/LevelManager' -import { BannerType } from '../ui/banner/bannerConstants' +import { Quaternion, Vector3 } from '@dcl/sdk/math' import { ITEM_TYPES } from '../inventory/playerInventoryMap' +import { LEVEL_TYPES } from '../player/LevelManager' +import { Player } from '../player/player' import { entityController } from '../realms/entityController' +import { BannerType } from '../ui/banner/bannerConstants' +import { getRandomInt, getRandomIntRange } from './../utils/getRandomInt' +import MonsterMeat from './monsterMeat' const DEFAULT_ATTACK = 0 const DEFAULT_XP = 9 diff --git a/scene/src/enemies/monster.ts b/scene/src/enemies/monster.ts index 4dd375d..ebb6c1e 100644 --- a/scene/src/enemies/monster.ts +++ b/scene/src/enemies/monster.ts @@ -292,6 +292,12 @@ export class MonsterOligar extends GenericMonster { this.reduceHealth(damage) this.updateHealthBar() + const mainHUD = Player.getInstance().gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerAttack = damage + mainHUD.lastEnemyAttack = 'MISSED' + } + if (isCriticalAttack) { // UI from ui.ts // showCriticalIcon() @@ -304,7 +310,7 @@ export class MonsterOligar extends GenericMonster { } handleAttack(): void { - const player = Player.getInstanceOrNull() + const player = Player.getInstance() if (player === null) return if (this.health <= 0) { @@ -324,8 +330,15 @@ export class MonsterOligar extends GenericMonster { const roundedPlayerDice = Math.floor(playerDiceResult) const roundedMonsterDice = Math.floor(monsterDiceResult) + const mainHUD = player?.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerRoll = roundedPlayerDice + mainHUD.lastEnemyRoll = roundedMonsterDice + } + if (roundedMonsterDice <= roundedPlayerDice) { // Player attacks + let defPercent = this.getDefensePercent() if (monsterModifiers.getDefBuff() !== 0) { @@ -431,6 +444,11 @@ export class MonsterOligar extends GenericMonster { if (player === null) return player.reduceHealth(enemyAttack) + const mainHUD = player.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastEnemyAttack = enemyAttack + mainHUD.lastPlayerAttack = 'MISSED' + } this.playAttack() diff --git a/scene/src/enemies/monsterGeneric.ts b/scene/src/enemies/monsterGeneric.ts index e928ec6..e1f5463 100644 --- a/scene/src/enemies/monsterGeneric.ts +++ b/scene/src/enemies/monsterGeneric.ts @@ -8,8 +8,8 @@ import { type Entity } from '@dcl/sdk/ecs' import { Color4, Quaternion, Vector3 } from '@dcl/sdk/math' -import { Character } from './character' import { entityController } from '../realms/entityController' +import { Character } from './character' export class GenericMonster extends Character { public attackTrigger!: Entity diff --git a/scene/src/enemies/monsterHealer.ts b/scene/src/enemies/monsterHealer.ts index 7e335a3..cd68718 100644 --- a/scene/src/enemies/monsterHealer.ts +++ b/scene/src/enemies/monsterHealer.ts @@ -251,6 +251,12 @@ export class MonsterHealer extends GenericMonster { this.reduceHealth(damage) this.updateHealthBar() + const mainHUD = Player.getInstance().gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerAttack = damage + mainHUD.lastEnemyAttack = 'MISSED' + } + if (isCriticalAttack) { // UI from ui.ts // showCriticalIcon() @@ -283,6 +289,12 @@ export class MonsterHealer extends GenericMonster { const roundedPlayerDice = Math.floor(playerDiceResult) const roundedMonsterDice = Math.floor(monsterDiceResult) + const mainHUD = player?.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerRoll = roundedPlayerDice + mainHUD.lastEnemyRoll = roundedMonsterDice + } + if (roundedMonsterDice <= roundedPlayerDice) { // Player attacks let defPercent = this.getDefensePercent() @@ -389,6 +401,11 @@ export class MonsterHealer extends GenericMonster { if (player === null) return player.reduceHealth(enemyAttack) + const mainHUD = player.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastEnemyAttack = enemyAttack + mainHUD.lastPlayerAttack = 'MISSED' + } this.playAttack() diff --git a/scene/src/enemies/monsterMage.ts b/scene/src/enemies/monsterMage.ts index 0aa44e9..f290c63 100644 --- a/scene/src/enemies/monsterMage.ts +++ b/scene/src/enemies/monsterMage.ts @@ -240,6 +240,12 @@ export class MonsterMage extends GenericMonster { this.reduceHealth(damage) this.updateHealthBar() + const mainHUD = Player.getInstance().gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerAttack = damage + mainHUD.lastEnemyAttack = 'MISSED' + } + if (isCriticalAttack) { // UI from ui.ts // showCriticalIcon() @@ -272,6 +278,12 @@ export class MonsterMage extends GenericMonster { const roundedPlayerDice = Math.floor(playerDiceResult) const roundedMonsterDice = Math.floor(monsterDiceResult) + const mainHUD = player?.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerRoll = roundedPlayerDice + mainHUD.lastEnemyRoll = roundedMonsterDice + } + if (roundedMonsterDice <= roundedPlayerDice) { // Player attacks let defPercent = this.getDefensePercent() @@ -378,6 +390,11 @@ export class MonsterMage extends GenericMonster { if (player === null) return player.reduceHealth(enemyAttack) + const mainHUD = player.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastEnemyAttack = enemyAttack + mainHUD.lastPlayerAttack = 'MISSED' + } this.playAttack() diff --git a/scene/src/enemies/monsterMeat.ts b/scene/src/enemies/monsterMeat.ts index ec49155..04b4f9b 100644 --- a/scene/src/enemies/monsterMeat.ts +++ b/scene/src/enemies/monsterMeat.ts @@ -272,6 +272,12 @@ export class MonsterMeat extends GenericMonster { this.reduceHealth(damage) this.updateHealthBar() + const mainHUD = Player.getInstance().gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerAttack = damage + mainHUD.lastEnemyAttack = 'MISSED' + } + if (isCriticalAttack) { // UI from ui.ts // showCriticalIcon() @@ -303,7 +309,11 @@ export class MonsterMeat extends GenericMonster { const roundedPlayerDice = Math.floor(playerDiceResult) const roundedMonsterDice = Math.floor(monsterDiceResult) - + const mainHUD = player?.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerRoll = roundedPlayerDice + mainHUD.lastEnemyRoll = roundedMonsterDice + } if (roundedMonsterDice <= roundedPlayerDice) { // Player attacks let defPercent = this.getDefensePercent() @@ -396,6 +406,11 @@ export class MonsterMeat extends GenericMonster { if (player === null) return player.reduceHealth(enemyAttack) + const mainHUD = player.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastEnemyAttack = enemyAttack + mainHUD.lastPlayerAttack = 'MISSED' + } this.playAttack() diff --git a/scene/src/enemies/monsterMobAuto.ts b/scene/src/enemies/monsterMobAuto.ts index 382cfe8..d784d01 100644 --- a/scene/src/enemies/monsterMobAuto.ts +++ b/scene/src/enemies/monsterMobAuto.ts @@ -287,6 +287,12 @@ export class MonsterMobAuto extends GenericMonster { this.reduceHealth(damage) this.updateHealthBar() + const mainHUD = Player.getInstance().gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerAttack = damage + mainHUD.lastEnemyAttack = 'MISSED' + } + if (isCriticalAttack) { // UI from ui.ts // showCriticalIcon() @@ -318,7 +324,11 @@ export class MonsterMobAuto extends GenericMonster { const random = Math.random() * 1000 const roundedPlayerDice = Math.floor(playerDiceResult) const roundedMonsterDice = Math.floor(monsterDiceResult) - + const mainHUD = player?.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerRoll = roundedPlayerDice + mainHUD.lastEnemyRoll = roundedMonsterDice + } if (roundedMonsterDice <= roundedPlayerDice) { // Player attacks let defPercent = this.getDefensePercent() @@ -426,6 +436,11 @@ export class MonsterMobAuto extends GenericMonster { if (player === null) return player.reduceHealth(enemyAttack) + const mainHUD = player.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastEnemyAttack = enemyAttack + mainHUD.lastPlayerAttack = 'MISSED' + } this.playAttack() diff --git a/scene/src/enemies/monsterPoison.ts b/scene/src/enemies/monsterPoison.ts index 84bde4e..6d53218 100644 --- a/scene/src/enemies/monsterPoison.ts +++ b/scene/src/enemies/monsterPoison.ts @@ -236,6 +236,12 @@ export class MonsterPoison extends GenericMonster { this.reduceHealth(damage) this.updateHealthBar() + const mainHUD = Player.getInstance().gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerAttack = damage + mainHUD.lastEnemyAttack = 'MISSED' + } + if (isCriticalAttack) { // UI from ui.ts // showCriticalIcon() @@ -308,7 +314,11 @@ export class MonsterPoison extends GenericMonster { const roundedPlayerDice = Math.floor(playerDiceResult) const roundedMonsterDice = Math.floor(monsterDiceResult) - + const mainHUD = player?.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastPlayerRoll = roundedPlayerDice + mainHUD.lastEnemyRoll = roundedMonsterDice + } if (roundedMonsterDice <= roundedPlayerDice) { // Player attacks let defPercent = this.getDefensePercent() @@ -356,6 +366,11 @@ export class MonsterPoison extends GenericMonster { if (player === null) return player.reduceHealth(enemyAttack) + const mainHUD = player.gameController.uiController.mainHud + if (mainHUD !== null) { + mainHUD.lastEnemyAttack = enemyAttack + mainHUD.lastPlayerAttack = 'MISSED' + } this.playAttack() diff --git a/scene/src/player/LevelManager.ts b/scene/src/player/LevelManager.ts index 75a052a..f16910c 100644 --- a/scene/src/player/LevelManager.ts +++ b/scene/src/player/LevelManager.ts @@ -1,4 +1,5 @@ import { WriteXpToServer } from '../api/api' +import { Player } from './player' export enum LEVEL_TYPES { PLAYER = 'player', @@ -94,6 +95,11 @@ export class LevelManager { const increaseBy = shouldLevelUp ? 1 : 0 const newLevel = currentLevel + increaseBy + const mainHUD = Player.getInstance().gameController.uiController.mainHud + if (mainHUD !== null && type === LEVEL_TYPES.PLAYER) { + mainHUD.gainedXP = xp + } + this.updateItem(type, { level: newLevel, xp: newXp, diff --git a/scene/src/player/player.tsx b/scene/src/player/player.tsx index 9458d29..274b41f 100644 --- a/scene/src/player/player.tsx +++ b/scene/src/player/player.tsx @@ -549,10 +549,13 @@ export class Player extends Character { exp: Array<{ type: LEVEL_TYPES; value: number }>, loot: Array<{ type: ITEM_TYPES; value: number }> ): void { + const mainHUD = Player.getInstance().gameController.uiController.mainHud + for (const i of exp) { this.levels.addXp(i.type, i.value) - // if (exp[i].type == LEVEL_TYPES.PLAYER) - // MainHUD.getInstance().updateXpGained(exp[i].value) + if (i.type === LEVEL_TYPES.PLAYER && mainHUD) { + mainHUD.gainedXP = i.value + } } for (const i of loot) { this.inventory.incrementItem(i.type, i.value) diff --git a/scene/src/ui/inventory/inventoryComponent.tsx b/scene/src/ui/inventory/inventoryComponent.tsx index 79704f1..3457081 100644 --- a/scene/src/ui/inventory/inventoryComponent.tsx +++ b/scene/src/ui/inventory/inventoryComponent.tsx @@ -3,6 +3,7 @@ import ReactEcs, { UiEntity } from '@dcl/sdk/react-ecs' import { getUvs, type Sprite } from '../../utils/ui-utils' import Canvas from '../canvas/Canvas' import { inventorySprites } from './inventoryData' +import { mainHudSprites } from '../main-hud/mainHudData' type InventoryProps = { inventory: (() => ReactEcs.JSX.Element) | undefined @@ -14,6 +15,8 @@ type InventoryProps = { leftSprite: Sprite rightSprite: Sprite updateTab: (arg: number) => void + showInventory: (arg: boolean) => void + visibility: boolean } function Inventory({ @@ -25,10 +28,13 @@ function Inventory({ scrollLeft, leftSprite, rightSprite, - updateTab + updateTab, + showInventory, + visibility }: InventoryProps): ReactEcs.JSX.Element | null { const canvasInfo = UiCanvasInformation.getOrNull(engine.RootEntity) if (canvasInfo === null) return null + if (!visibility) return null return ( @@ -163,6 +169,24 @@ function Inventory({ texture: { src: inventorySprites.topNavBarFrame.atlasSrc } }} /> + { + showInventory(false) + }} + /> {inventory !== undefined && ( diff --git a/scene/tsconfig.json b/scene/tsconfig.json index 90c5877..8fa1edf 100644 --- a/scene/tsconfig.json +++ b/scene/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "jsx": "react", "allowJs": true, "strict": true },