Skip to content

Commit

Permalink
ft: confirm loot UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@agustincarriso
agustincarriso committed Dec 10, 2024
1 parent 16f0ef8 commit b9c582f
Show file tree
Hide file tree
Showing 3 changed files with 232 additions and 1 deletion.
2 changes: 1 addition & 1 deletion scene/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,4 @@
"fp-future": "^1.0.1",
"typescript": "5.5.4"
}
}
}
6 changes: 6 additions & 0 deletions scene/src/controllers/ui.controller.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ import { CreationPlayerController } from './creation-player.controller'
import { type GameController } from './game.controller'
import { MainHudController } from './main-hud'
import { type RealmType } from '../realms/types'
import { ConfirmLoot } from '../ui/confirmloot/confirmloot'

export class UIController {
loadingUI: LoadingUI
playDungeonUI: PlayDungeonUI
confirmLoot: ConfirmLoot
// Banner
gameController: GameController

Expand All @@ -46,6 +48,7 @@ export class UIController {
constructor(gameController: GameController) {
this.gameController = gameController
this.loadingUI = new LoadingUI(this)
this.confirmLoot = new ConfirmLoot(this)
this.playDungeonUI = new PlayDungeonUI(this)
ReactEcsRenderer.setUiRenderer(this.ui.bind(this))
}
Expand Down Expand Up @@ -152,6 +155,9 @@ export class UIController {

{/* Loadin screen */}
{this.loadingUI.visible() && this.loadingUI.mainUi()}

{/* Confirm Loot */}
{this.confirmLoot.isVisible && this.confirmLoot.mainUi()}
</UiEntity>
)
}
Expand Down
225 changes: 225 additions & 0 deletions scene/src/ui/confirmloot/confirmloot.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
import ReactEcs, { Label, UiEntity } from '@dcl/react-ecs'
import { type UIController } from '../../controllers/ui.controller'
import Canvas from '../canvas/Canvas'
import { UiCanvasInformation, engine } from '@dcl/sdk/ecs'
import { Player } from '../../player/player'
import { ITEM_TYPES } from '../../inventory/playerInventoryMap'

type ConfirmLootType = {
item: string
amount: number
currency: 'dungeonToken' | 'mana'
}
export class ConfirmLoot {
uiController: UIController
public isVisible: boolean = false
public payClaim_visible: boolean = true
public payClaimUnavail_visible: boolean = false
public declineLoot_visible: boolean = true
public declineLootUnavail_visible: boolean = false
private lootItem = ''
private payAmount = 0
private currencyType: 'dungeonToken' | 'mana' = 'dungeonToken'
public confirmLootText_value: string = `Are you sure you want to claim the\n${this.lootItem} for ${this.payAmount} ${this.currencyType}?`
public confirmLootText_visible = true
constructor(uiController: UIController) {
this.uiController = uiController
}

mainUi(): ReactEcs.JSX.Element {
const canvasInfo = UiCanvasInformation.get(engine.RootEntity)
return (
<Canvas>
<UiEntity
uiTransform={{
flexDirection: 'row',
width: canvasInfo.width,
height: canvasInfo.height,
justifyContent: 'center',
positionType: 'absolute',
position: { top: '33%', right: '0%' },
display: this.isVisible ? 'flex' : 'none'
}}
>
<UiEntity
uiTransform={{
width: (canvasInfo.height * 0.8) / 1.49,
height: canvasInfo.height * 0.3,
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'column'
}}
uiBackground={{
textureMode: 'stretch',
texture: { src: 'assets/images/confirmLoot/confirmLoot.png' }
}}
>
<Label
uiTransform={{
positionType: 'absolute',
position: { top: '49%', left: '0%' },
width: '100%',
height: '11.3%'
}}
value={this.confirmLootText_value}
textAlign="bottom-center"
fontSize={20}
/>
{/* Play & Claim Button */}
<UiEntity
uiTransform={{
positionType: 'absolute',
position: { bottom: '16%', left: '8%' },
width: (canvasInfo.height * 0.6) / 2.75,
height: canvasInfo.height * 0.052,
display: this.payClaim_visible ? 'flex' : 'none'
}}
uiBackground={{
textureMode: 'stretch',
texture: { src: 'assets/images/confirmLoot/payClaim.png' }
}}
onMouseDown={() => {
this.confirmLoot({
item: this.lootItem,
amount: this.payAmount,
currency: this.currencyType
})
}}
/>
{/* Play & Claim Unavail Button */}
<UiEntity
uiTransform={{
positionType: 'absolute',
position: { bottom: '16%', left: '8%' },
width: (canvasInfo.height * 0.6) / 2.75,
height: canvasInfo.height * 0.052,
display: this.payClaimUnavail_visible ? 'flex' : 'none'
}}
uiBackground={{
textureMode: 'stretch',
texture: {
src: 'assets/images/confirmLoot/payClaimUnavail.png'
}
}}
onMouseDown={() => {}}
/>
{/* Decline Button */}
<UiEntity
uiTransform={{
positionType: 'absolute',
position: { bottom: '16%', right: '8%' },
width: (canvasInfo.height * 0.6) / 2.75,
height: canvasInfo.height * 0.052,
display: this.declineLoot_visible ? 'flex' : 'none'
}}
uiBackground={{
textureMode: 'stretch',
texture: { src: 'assets/images/confirmLoot/declineLoot.png' }
}}
onMouseDown={() => {}}
/>
{/* Decline Button Unavail */}
<UiEntity
uiTransform={{
positionType: 'absolute',
position: { bottom: '16%', right: '8%' },
width: (canvasInfo.height * 0.6) / 2.75,
height: canvasInfo.height * 0.052,
display: this.declineLootUnavail_visible ? 'flex' : 'none'
}}
uiBackground={{
textureMode: 'stretch',
texture: {
src: 'assets/images/confirmLoot/declineLootUnavail.png'
}
}}
onMouseDown={() => {}}
/>
</UiEntity>
</UiEntity>
</Canvas>
)
}

visible(): boolean {
return this.isVisible
}

openConfirmLoot(confirmLoot: ConfirmLootType): void {
this.lootItem = confirmLoot.item
this.payAmount = confirmLoot.amount
this.currencyType = confirmLoot.currency

this.isVisible = true
this.confirmLootText_value = `Are you sure you want to claim the\n${this.lootItem} for ${this.payAmount} ${this.currencyType}?`
this.confirmLootText_visible = true

this.payClaim_visible = true
this.declineLoot_visible = true

// Save the callback for later use
// confirmCallback = onConfirmCallback
}

confirmLoot(confirmLoot: ConfirmLootType): void {
const player = Player.getInstance()
// Hide UI elements
this.hideConfirmLootUI()

if (confirmLoot.currency === 'dungeonToken') {
this.useItemsForTokens(player, confirmLoot.amount)
}

if (confirmLoot.currency === 'mana') {
// Take MANA
}

// Call the callback function if it exists
// if (confirmCallback) {
// confirmCallback({ item, amount, currency })
// }
}

hideConfirmLootUI(): void {
this.isVisible = false
this.payClaim_visible = false
this.payClaimUnavail_visible = false
this.declineLoot_visible = false
this.declineLootUnavail_visible = false
this.confirmLootText_visible = false
}

useItemsForTokens(player: Player, totalTokensNeeded: number): void {
const iceShardCount = player.inventory.getItemCount(ITEM_TYPES.ICESHARD)
const iceHeartCount = player.inventory.getItemCount(ITEM_TYPES.ICEHEART)

let tokensFormed = 0
let shardsUsed = 0
let heartsUsed = 0

while (
tokensFormed < totalTokensNeeded &&
(shardsUsed < iceShardCount || heartsUsed < iceHeartCount)
) {
if (shardsUsed < iceShardCount) {
shardsUsed++
tokensFormed++
} else if (heartsUsed < iceHeartCount) {
heartsUsed++
tokensFormed++
}
}

if (tokensFormed === totalTokensNeeded) {
if (shardsUsed > 0)
player.inventory.reduceItem(ITEM_TYPES.ICESHARD, shardsUsed)
if (heartsUsed > 0)
player.inventory.reduceItem(ITEM_TYPES.ICEHEART, heartsUsed)
console.log(
`Used ${shardsUsed} Ice Shards and ${heartsUsed} Ice Hearts to form ${tokensFormed} tokens.`
)
} else {
console.log('Not enough items to form the required number of tokens.')
}
}
}

0 comments on commit b9c582f

Please sign in to comment.