Skip to content

Commit

Permalink
Fix/equip unequip skills buttons (#40)
Browse files Browse the repository at this point in the history 
* fix: the unequip/equip skill button
* fix: equip skill is able if minimum level required is reached
* Improve all inventory's pages' elements dimensions
* Equipped skills show the assigned key
  • Loading branch information
@sdilauro
sdilauro authored Sep 9, 2024
1 parent 3680315 commit bedad33
Show file tree
Hide file tree
Showing 9 changed files with 379 additions and 189 deletions.
2 changes: 1 addition & 1 deletion scene/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"dependencies": {
"@dcl-sdk/utils": "^1.2.8",
"@dcl/asset-packs": "^1.19.0",
"@dcl/js-runtime": "7.5.7-10236853633.commit-23b945d",
"@dcl/js-runtime": "7.5.7-9891810625.commit-d9f5cf2",
"@dcl/sdk": "7.5.6",
"@dcl/sdk-commands": "7.5.6",
"dcl-npc-toolkit": "^1.2.2",
Expand Down
63 changes: 63 additions & 0 deletions scene/src/controllers/main-hud/inventory.controller.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,8 @@ export class InventoryController {
public leftClassSprite: Sprite = skillsPageSprites.leftArrowReg
public rightClassSprite: Sprite = skillsPageSprites.rightArrowReg
public selectedSkillType: string = ''
public showEquipButton: boolean = false
public showUnequipButton: boolean = false

// Inventory Page
private selectedWearable: WearableType | undefined
Expand Down Expand Up @@ -293,6 +295,9 @@ export class InventoryController {
equipSkill={this.equipSkill.bind(this)}
disableSkill={this.disableSkill.bind(this)}
selectSkillType={this.selectSkillType.bind(this)}
showEquip={this.showEquipButton}
showUnequip={this.showUnequipButton}
getSkillKey={this.getSkillKey.bind(this)}
/>
)
break
Expand Down Expand Up @@ -356,6 +361,27 @@ export class InventoryController {

selectSkill(skill: SkillDefinition): void {
this.selectedSkill = skill
const player = Player.getInstance()
const playerSkills = player.getSkills()
const skillAlreadyEquipped = playerSkills.some(
(skill) => skill?.definition.name === this.selectedSkill?.name
)

if (skillAlreadyEquipped) {
this.showEquipButton = false
this.showUnequipButton = true
} else {
if (skill.minLevel !== undefined) {
if (player.getLevel() >= skill.minLevel) {
this.showEquipButton = true
} else {
this.showEquipButton = false
}
} else {
this.showEquipButton = true
}
this.showUnequipButton = false
}
}

increaseGeneralSkillIndex(): void {
Expand Down Expand Up @@ -467,6 +493,40 @@ export class InventoryController {
}, milisecs)
}

getSkillKey(skill: SkillDefinition): string {
const player = Player.getInstance()
const playerSkills = player.getSkills()
const index: number = playerSkills.findIndex(
(obj) => obj?.definition.name === skill.name
)
let key: string = ''

switch (index) {
case -1:
key = ''
break
case 0:
key = '1'
break
case 1:
key = 'E'
break
case 2:
key = 'F'
break
case 3:
key = '2'
break
case 4:
key = '3'
break
case 5:
key = '4'
break
}
return key
}

equipSkill(): void {
const player = Player.getInstance()
const playerSkills = player.getSkills()
Expand All @@ -480,6 +540,7 @@ export class InventoryController {
}
if (this.selectedSkill !== undefined) {
const firstFreePosition = this.getLowerSkillIndex()

if (firstFreePosition !== -1) {
console.log(this.selectedSkill)
const skill = this.getSelectedSkill(this.selectedSkill.name)
Expand All @@ -491,6 +552,7 @@ export class InventoryController {
} else {
console.error('You already equipped 6 ksill')
}
this.selectSkill(this.selectedSkill)
} else {
console.error('You should choise a skill to equip')
}
Expand Down Expand Up @@ -626,6 +688,7 @@ export class InventoryController {
console.log('Disabled skill')
const player = Player.getInstance()
player.removeSkill(this.selectedSkill.name)
this.selectSkill(this.selectedSkill)
} else {
console.error('You should choise a skill to disable')
}
Expand Down
40 changes: 26 additions & 14 deletions scene/src/ui/inventory/companionsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,13 @@ function CompanionsPage({
onClickButton
}: CompanionsPageProps): ReactEcs.JSX.Element {
const canvasInfo = UiCanvasInformation.get(engine.RootEntity)
let pageWidth = canvasInfo.width * 0.8 < 1132 ? canvasInfo.width * 0.8 : 1132
let pageHeight = pageWidth * 0.5

if (pageHeight > canvasInfo.height * 0.7) {
pageHeight = canvasInfo.height * 0.7
pageWidth = 2 * pageHeight
}

return (
<UiEntity
Expand Down Expand Up @@ -107,17 +114,17 @@ function CompanionsPage({
}}
>
<UiEntity
uiTransform={{ margin: { top: '10%', bottom: '10%' } }}
uiTransform={{ height: pageHeight * 0.275 }}
uiText={{
value: selectedCompanion.name,
fontSize: canvasInfo.height * 0.03,
fontSize: pageHeight * 0.04,
textAlign: 'middle-center'
}}
/>
<UiEntity
uiTransform={{
width: canvasInfo.height * 0.5,
height: canvasInfo.height * 0.5
width: pageHeight * 0.5,
height: pageHeight * 0.5
}}
uiBackground={{
textureMode: 'stretch',
Expand All @@ -139,26 +146,31 @@ function CompanionsPage({
<UiEntity
uiTransform={{
width: '15%',
height: '100%',
height: pageHeight,
position: { left: '52%' },
positionType: 'absolute',
alignItems: 'center',
flexDirection: 'column'
}}
>
<UiEntity
uiTransform={{ margin: { top: '35%', bottom: '10%' } }}
uiTransform={{
margin: { top: pageHeight * 0.1 },
height: pageHeight * 0.6,
width: '90%'
}}
uiText={{
value: selectedCompanion.lore,
fontSize: canvasInfo.height * 0.02,
textAlign: 'middle-left'
fontSize: pageHeight * 0.025,
textAlign: 'top-left'
}}
/>
<UiEntity
uiTransform={{ height: pageHeight * 0.2, width: '90%' }}
uiText={{
value: selectedCompanion.stats,
fontSize: canvasInfo.height * 0.02,
textAlign: 'middle-left'
fontSize: pageHeight * 0.025,
textAlign: 'bottom-left'
}}
/>
</UiEntity>
Expand All @@ -167,18 +179,18 @@ function CompanionsPage({
{/* Companions */}
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.23,
width: pageWidth * 0.3,
height: '100%',
position: { right: '2%' },
position: { right: '1%' },
positionType: 'absolute',
alignItems: 'center',
flexDirection: 'column'
}}
>
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.3 * 0.7,
height: canvasInfo.width * 0.3 * 0.7,
width: pageWidth * 0.33 * 0.8,
height: pageWidth * 0.33 * 0.8,
margin: { bottom: '15%', top: '35%' },
flexWrap: 'wrap'
}}
Expand Down
63 changes: 36 additions & 27 deletions scene/src/ui/inventory/inventoryComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ function Inventory({
if (canvasInfo === null) return null
if (!visibility) return null

let pageWidth = canvasInfo.width * 0.8 < 1132 ? canvasInfo.width * 0.8 : 1132
let pageHeight = pageWidth * 0.5

if (pageHeight > canvasInfo.height * 0.7) {
pageHeight = canvasInfo.height * 0.7
pageWidth = 2 * pageHeight
}

return (
<Canvas>
<UiEntity
Expand All @@ -44,20 +52,21 @@ function Inventory({
height: '100%',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
flexDirection: 'column',
margin: { top: -pageHeight * 0.1 }
}}
>
<UiEntity
uiTransform={{
flexDirection: 'row',
height: canvasInfo.width * 0.035,
height: pageWidth * 0.045,
alignItems: 'center'
}}
>
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.03,
height: canvasInfo.width * 0.03
width: pageWidth * 0.04,
height: pageWidth * 0.04
}}
uiBackground={{
textureMode: 'stretch',
Expand All @@ -69,8 +78,8 @@ function Inventory({
/>
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.03 * 4.71,
height: canvasInfo.width * 0.03
width: pageWidth * 0.04 * 4.71,
height: pageWidth * 0.04
}}
uiBackground={{
textureMode: 'stretch',
Expand All @@ -88,8 +97,8 @@ function Inventory({
/>
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.03 * 4.71,
height: canvasInfo.width * 0.03
width: pageWidth * 0.04 * 4.71,
height: pageWidth * 0.04
}}
uiBackground={{
textureMode: 'stretch',
Expand All @@ -107,8 +116,8 @@ function Inventory({
/>
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.03 * 4.71,
height: canvasInfo.width * 0.03
width: pageWidth * 0.04 * 4.71,
height: pageWidth * 0.04
}}
uiBackground={{
textureMode: 'stretch',
Expand All @@ -126,8 +135,8 @@ function Inventory({
/>
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.03 * 4.71,
height: canvasInfo.width * 0.03
width: pageWidth * 0.04 * 4.71,
height: pageWidth * 0.04
}}
uiBackground={{
textureMode: 'stretch',
Expand All @@ -146,8 +155,8 @@ function Inventory({

<UiEntity
uiTransform={{
width: canvasInfo.width * 0.03,
height: canvasInfo.width * 0.03
width: pageWidth * 0.04,
height: pageWidth * 0.04
}}
uiBackground={{
textureMode: 'stretch',
Expand All @@ -158,8 +167,8 @@ function Inventory({
/>
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.035 * 17,
height: canvasInfo.width * 0.035,
width: pageWidth * 0.79,
height: pageWidth * 0.045,
positionType: 'absolute',
position: { left: '2.4%' }
}}
Expand All @@ -171,10 +180,10 @@ function Inventory({
/>
<UiEntity
uiTransform={{
width: canvasInfo.height * 0.05,
height: canvasInfo.height * 0.05,
width: pageWidth * 0.04,
height: pageWidth * 0.04,
positionType: 'absolute',
position: { top: '40%', right: '-13%' }
position: { top: '0%', right: '-15%' }
}}
uiBackground={{
textureMode: 'stretch',
Expand All @@ -192,8 +201,8 @@ function Inventory({
{inventory !== undefined && (
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.8,
height: canvasInfo.width * 0.8 * 0.51
width: pageWidth,
height: pageHeight
}}
>
{inventory()}
Expand All @@ -202,8 +211,8 @@ function Inventory({
{companions !== undefined && (
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.8,
height: canvasInfo.width * 0.8 * 0.51
width: pageWidth,
height: pageHeight
}}
>
{companions()}
Expand All @@ -212,8 +221,8 @@ function Inventory({
{skills !== undefined && (
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.8,
height: canvasInfo.width * 0.8 * 0.51
width: pageWidth,
height: pageHeight
}}
>
{skills()}
Expand All @@ -222,8 +231,8 @@ function Inventory({
{professions !== undefined && (
<UiEntity
uiTransform={{
width: canvasInfo.width * 0.8,
height: canvasInfo.width * 0.8 * 0.51
width: pageWidth,
height: pageHeight
}}
>
{professions()}
Expand Down
Loading

0 comments on commit bedad33

Please sign in to comment.