mirror_php/Counter-Strike
1
0
Fork 0
mirror of https://github.com/solcloud/Counter-Strike.git synced 2025-02-22 02:42:51 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI inventory redesign

Browse Source 
fix #10
This commit is contained in:
Daniel Maixner 2023-09-30 14:24:37 +02:00
parent 6e7d626977
commit a39b35b012
3 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
www/assets/css/hud.css
View File

@ -450,7 +450,13 @@
#hud .inventory { #hud .inventory {
font-family: csIcons; font-family: csIcons;
font-size: 80%; margin-top: auto;
margin-bottom: 1rem;
font-size: 150%;
}
#hud .inventory .grenades span {
padding: 8px;
} }
#hud .inventory .highlight { #hud .inventory .highlight {

2
www/assets/js/Game.js
View File

@ -429,7 +429,7 @@ export class Game {
model.getObjectByName('pov').visible = true model.getObjectByName('pov').visible = true
model.visible = true model.visible = true
this.#hud.equip(slotId, this.playerSpectate.data.slots) this.#hud.equip(slotId, item.id, this.playerSpectate.data.slots)
return true return true
} }

38
www/assets/js/Hud.js
View File

@ -49,6 +49,8 @@ export class HUD {
#flashInterval = null; #flashInterval = null;
#countDownIntervalId = null; #countDownIntervalId = null;
#scoreBoardData = null; #scoreBoardData = null;
#weaponSlots = [Enum.InventorySlot.SLOT_PRIMARY, Enum.InventorySlot.SLOT_SECONDARY, Enum.InventorySlot.SLOT_KNIFE]
#grenadeSlots = [Enum.InventorySlot.SLOT_GRENADE_DECOY, Enum.InventorySlot.SLOT_GRENADE_HE, Enum.InventorySlot.SLOT_GRENADE_MOLOTOV, Enum.InventorySlot.SLOT_GRENADE_SMOKE, Enum.InventorySlot.SLOT_GRENADE_FLASH]
injectDependency(game) { injectDependency(game) {
this.#game = game this.#game = game
@ -177,14 +179,26 @@ export class HUD {
this.#elements.spectateUi.querySelector('span').innerText = Enum.ColorNames[player.getColorIndex()] this.#elements.spectateUi.querySelector('span').innerText = Enum.ColorNames[player.getColorIndex()]
} }
equip(slotId, availableSlots) { equip(slotId, itemId, availableSlots) {
this.#elements.inventory.querySelectorAll('[data-slot]').forEach(function (node) { let html = ''
node.classList.remove('highlight', 'hidden') this.#weaponSlots.forEach((slot) => {
if (availableSlots[node.dataset.slot] === undefined) { const item = availableSlots[slot]
node.classList.add('hidden') if (!item) {
return
} }
html += `<p${slotId === slot ? ' class="highlight"' : ''}>${Enum.ItemIdToIcon[item.id]}</p>`
}) })
this.#elements.inventory.querySelector(`[data-slot="${slotId}"]`).classList.add('highlight') let grenade = ''
this.#grenadeSlots.forEach((slot) => {
const item = availableSlots[slot]
if (!item) {
return
}
grenade += `<span${slotId === slot ? ' class="highlight"' : ''}>${Enum.ItemIdToIcon[item.id]}</span>`
})
this.#elements.inventory.innerHTML = html + `<div class="grenades">${grenade}</div>`
} }
updateHud(player) { updateHud(player) {
@ -304,17 +318,7 @@ export class HUD {
<div class="right"> <div class="right">
<div class="kill-feed"> <div class="kill-feed">
</div> </div>
<div class="inventory"> <div class="inventory"></div>
<p data-slot="${Enum.InventorySlot.SLOT_KNIFE}">Knife</p>
<p class="hidden" data-slot="${Enum.InventorySlot.SLOT_PRIMARY}">Primary</p>
<p class="hidden" data-slot="${Enum.InventorySlot.SLOT_SECONDARY}">Secondary</p>
<p class="hidden" data-slot="${Enum.InventorySlot.SLOT_BOMB}">Bomb</p>
<p class="hidden" data-slot="${Enum.InventorySlot.SLOT_GRENADE_SMOKE}">Smoke</p>
<p class="hidden" data-slot="${Enum.InventorySlot.SLOT_GRENADE_FLASH}">Flash</p>
<p class="hidden" data-slot="${Enum.InventorySlot.SLOT_GRENADE_HE}">Frag</p>
<p class="hidden" data-slot="${Enum.InventorySlot.SLOT_GRENADE_MOLOTOV}">Molotov</p>
<p class="hidden" data-slot="${Enum.InventorySlot.SLOT_GRENADE_DECOY}">Decoy</p>
</div>
<div> <div>
<span data-ammo class="ammo bg"></span> <span data-ammo class="ammo bg"></span>
</div> </div>