diff options
Diffstat (limited to 'resources/js/ui.js')
-rw-r--r-- | resources/js/ui.js | 57 |
1 files changed, 36 insertions, 21 deletions
diff --git a/resources/js/ui.js b/resources/js/ui.js index b80ff6f..08e09e2 100644 --- a/resources/js/ui.js +++ b/resources/js/ui.js @@ -332,7 +332,7 @@ const UI = { techniqueNode.querySelector('[data-template-slot="power"]').textContent = technique.power; techniqueNode.querySelector('[data-template-slot="accuracy"]').textContent = technique.accuracy; - if (!technique.isUsable()) { + if (technique.isRecharging()) { techniqueNode.setAttribute('disabled', true); } @@ -384,35 +384,44 @@ const UI = { }, /** + * @param {Technique} technique + * * @returns {void} */ - drawTechniqueAnimation () { + drawTechniqueAnimation (technique) { + const animation = technique.animation; + + if (!(animation && DB.allAnimations[animation])) { + return; + } + + if (UI.techniqueAnimationIsRunning) { + return; + } + UI.techniqueAnimationIsRunning = true; + const x = UI.battleClickEvent.clientX; const y = UI.battleClickEvent.clientY; - if (!UI.techniqueAnimationIsRunning && state.activeTechnique.animation && DB.allAnimations[state.activeTechnique.animation]) { - UI.techniqueAnimationIsRunning = true; + const techniqueAnimationLoop = () => { + UI.elements.battleEnemyAnimation.src = `/modules/tuxemon/mods/tuxemon/animations/technique/${animation}_${("00" + UI.techniqueAnimationNumber).slice(-2)}.png`; + UI.elements.battleEnemyAnimation.style.top = y - (UI.elements.battleEnemyAnimation.clientHeight / 2) + 'px'; + UI.elements.battleEnemyAnimation.style.left = x - (UI.elements.battleEnemyAnimation.clientWidth / 2) + 'px'; + // console.log(UI.elements.battleEnemyAnimation.src); - const techniqueAnimationLoop = () => { - UI.elements.battleEnemyAnimation.src = `/modules/tuxemon/mods/tuxemon/animations/technique/${state.activeTechnique.animation}_${("00" + UI.techniqueAnimationNumber).slice(-2)}.png`; - UI.elements.battleEnemyAnimation.style.top = y - (UI.elements.battleEnemyAnimation.clientHeight / 2) + 'px'; - UI.elements.battleEnemyAnimation.style.left = x - (UI.elements.battleEnemyAnimation.clientWidth / 2) + 'px'; - // console.log(UI.elements.battleEnemyAnimation.src); + UI.techniqueAnimationNumber++; - UI.techniqueAnimationNumber++; - - if (UI.techniqueAnimationNumber >= DB.allAnimations[state.activeTechnique.animation].length) { - UI.techniqueAnimationIsRunning = false; - UI.techniqueAnimationNumber = 0; - UI.elements.battleEnemyAnimation.src = ''; - return; - } + if (UI.techniqueAnimationNumber >= DB.allAnimations[animation].length) { + UI.techniqueAnimationIsRunning = false; + UI.techniqueAnimationNumber = 0; + UI.elements.battleEnemyAnimation.src = ''; + return; + } - setTimeout(() => requestAnimationFrame(techniqueAnimationLoop), 1000 / UI.techniqueAnimationFps); - }; + setTimeout(() => requestAnimationFrame(techniqueAnimationLoop), 1000 / UI.techniqueAnimationFps); + }; - requestAnimationFrame(techniqueAnimationLoop); - } + requestAnimationFrame(techniqueAnimationLoop); }, @@ -426,6 +435,7 @@ const UI = { damageHighlightClickDuration: 0.1, damageHighlightClickTimeout: null, + /** * @param {any} feedback * @@ -638,6 +648,10 @@ const UI = { inventoryItemNode.querySelector('[data-template-slot="name"]').textContent = item.name; inventoryItemNode.querySelector('[data-template-slot="quantity"]').textContent = item.quantity; + inventoryItemNode.addEventListener('click', () => { + alert(item.conditions + item.effects); + }); + if (['potion', 'revive'].includes(item.category)) { tabs['heal'].items.push(inventoryItemNode); } @@ -660,6 +674,7 @@ const UI = { const tabsNode = UI.createTabs(Object.values(tabs).map((tab) => { const content = document.createElement('div'); + content.classList.add('inventory__tab'); for (const item of tab.items) { content.appendChild(item); } |