summaryrefslogtreecommitdiff
path: root/resources/js/ui.js
diff options
context:
space:
mode:
authorDaniel Weipert <code@drogueronin.de>2023-08-19 13:18:54 +0200
committerDaniel Weipert <code@drogueronin.de>2023-08-19 13:18:54 +0200
commit218da95a4b387ee5ac25f168d1529419039f2e54 (patch)
tree21375d6aae287da413cbfc1002c2c8eeb7bba1ed /resources/js/ui.js
parent91d048ef0f994446aaee91e3afcbd99788e439d7 (diff)
refactor: enemy -> opponent, State.monsters~ -> State.Trainer.monsters
Diffstat (limited to 'resources/js/ui.js')
-rw-r--r--resources/js/ui.js70
1 files changed, 35 insertions, 35 deletions
diff --git a/resources/js/ui.js b/resources/js/ui.js
index 08e09e2..6c077b7 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -32,9 +32,9 @@ const Template = {
const UI = {
elements: {
- battleEnemy: document.querySelector('#battle__enemy'),
- battleEnemySprite: null,
- battleEnemyAnimation: document.querySelector('.battle__monster-sprite__animation'),
+ battleOpponent: document.querySelector('#battle__opponent'),
+ battleOpponentSprite: null,
+ battleOpponentAnimation: document.querySelector('.battle__monster-sprite__animation'),
battlePlayer: document.querySelector('#battle__player'),
techniques: document.querySelector('#techniques'),
@@ -286,10 +286,10 @@ const UI = {
/**
* @returns {HTMLElement}
*/
- createEnemyMonster () {
- const battleMonsterNode = UI.createBattleMonster(state.enemy.monster);
+ createOpponentMonster () {
+ const battleMonsterNode = UI.createBattleMonster(Memory.state.opponent.activeMonster);
- battleMonsterNode.classList.add('battle__monster--enemy');
+ battleMonsterNode.classList.add('battle__monster--opponent');
return battleMonsterNode;
},
@@ -298,17 +298,17 @@ const UI = {
* @returns {HTMLElement}
*/
createActiveMonster () {
- const battleMonsterNode = UI.createBattleMonster(state.activeMonster);
+ const battleMonsterNode = UI.createBattleMonster(Memory.state.player.activeMonster);
UI.replaceTemplateSlot(
battleMonsterNode.querySelector('[data-template-slot="expBar"]'),
- UI.createExpBar(state.activeMonster)
+ UI.createExpBar(Memory.state.player.activeMonster)
);
battleMonsterNode.classList.add('battle__monster--player');
battleMonsterNode.querySelector('[data-template-slot="sprite"]').addEventListener('click', () => {
- UI.openStatsMenu(state.activeMonster);
+ UI.openStatsMenu(Memory.state.player.activeMonster);
});
return battleMonsterNode;
@@ -345,19 +345,19 @@ const UI = {
/**
* @param {HTMLElement} battleMonsterNode
*/
- drawEnemyMonster () {
- const battleMonsterNode = UI.createEnemyMonster();
+ drawOpponentMonster () {
+ const battleMonsterNode = UI.createOpponentMonster();
- UI.elements.battleEnemySprite = battleMonsterNode.querySelector('[data-template-slot="sprite"]');
- UI.elements.battleEnemySprite.style.transitionDuration = `${UI.damageHighlightClickDuration}s`;
+ UI.elements.battleOpponentSprite = battleMonsterNode.querySelector('[data-template-slot="sprite"]');
+ UI.elements.battleOpponentSprite.style.transitionDuration = `${UI.damageHighlightClickDuration}s`;
- const previousBattleMonsterNode = UI.elements.battleEnemy.querySelector('.battle__monster');
+ const previousBattleMonsterNode = UI.elements.battleOpponent.querySelector('.battle__monster');
if (previousBattleMonsterNode) {
- UI.elements.battleEnemySprite.classList = previousBattleMonsterNode.querySelector('[data-template-slot="sprite"]').classList;
+ UI.elements.battleOpponentSprite.classList = previousBattleMonsterNode.querySelector('[data-template-slot="sprite"]').classList;
- UI.elements.battleEnemy.removeChild(previousBattleMonsterNode);
+ UI.elements.battleOpponent.removeChild(previousBattleMonsterNode);
}
- UI.elements.battleEnemy.appendChild(battleMonsterNode);
+ UI.elements.battleOpponent.appendChild(battleMonsterNode);
},
/**
@@ -377,7 +377,7 @@ const UI = {
* @returns {void}
*/
drawActiveTechniques () {
- const activeTechniques = UI.createActiveTechniques(state.activeMonster);
+ const activeTechniques = UI.createActiveTechniques(Memory.state.player.activeMonster);
activeTechniques.id = 'techniques';
document.querySelector('#techniques').innerHTML = activeTechniques.innerHTML;
@@ -404,17 +404,17 @@ const UI = {
const y = UI.battleClickEvent.clientY;
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);
+ UI.elements.battleOpponentAnimation.src = `/modules/tuxemon/mods/tuxemon/animations/technique/${animation}_${("00" + UI.techniqueAnimationNumber).slice(-2)}.png`;
+ UI.elements.battleOpponentAnimation.style.top = y - (UI.elements.battleOpponentAnimation.clientHeight / 2) + 'px';
+ UI.elements.battleOpponentAnimation.style.left = x - (UI.elements.battleOpponentAnimation.clientWidth / 2) + 'px';
+ // console.log(UI.elements.battleOpponentAnimation.src);
UI.techniqueAnimationNumber++;
if (UI.techniqueAnimationNumber >= DB.allAnimations[animation].length) {
UI.techniqueAnimationIsRunning = false;
UI.techniqueAnimationNumber = 0;
- UI.elements.battleEnemyAnimation.src = '';
+ UI.elements.battleOpponentAnimation.src = '';
return;
}
@@ -445,8 +445,8 @@ const UI = {
const feedbackNode = UI.createTemplate(Template.battleDamage);
feedbackNode.innerHTML = feedback;
- feedbackNode.style.top = UI.battleClickEvent.pageY - UI.elements.battleEnemy.offsetTop + (Math.random() * 40 - 20) + 'px';
- feedbackNode.style.left = UI.battleClickEvent.pageX - UI.elements.battleEnemy.offsetLeft + (Math.random() * 40 - 20) + 'px';
+ feedbackNode.style.top = UI.battleClickEvent.pageY - UI.elements.battleOpponent.offsetTop + (Math.random() * 40 - 20) + 'px';
+ feedbackNode.style.left = UI.battleClickEvent.pageX - UI.elements.battleOpponent.offsetLeft + (Math.random() * 40 - 20) + 'px';
feedbackNode.dataset.duration = 2;
feedbackNode.style.animationDuration = `${feedbackNode.dataset.duration}s`;
@@ -512,7 +512,7 @@ const UI = {
* @param {HTMLElement} damageNode
*/
drawActionFeedback (node) {
- UI.elements.battleEnemy.appendChild(node);
+ UI.elements.battleOpponent.appendChild(node);
setTimeout(() => node.remove(), (node.dataset.duration * 1000) - 500);
},
@@ -522,9 +522,9 @@ const UI = {
drawDamage (damageNode) {
UI.drawActionFeedback(damageNode);
- UI.elements.battleEnemySprite.classList.add('damaged');
+ UI.elements.battleOpponentSprite.classList.add('damaged');
clearTimeout(UI.damageHighlightClickTimeout);
- UI.damageHighlightClickTimeout = setTimeout(() => UI.elements.battleEnemySprite.classList.remove('damaged'), UI.damageHighlightClickDuration * 1000);
+ UI.damageHighlightClickTimeout = setTimeout(() => UI.elements.battleOpponentSprite.classList.remove('damaged'), UI.damageHighlightClickDuration * 1000);
},
/**
@@ -546,8 +546,8 @@ const UI = {
const party = UI.createTemplate(Template.party);
party.id = 'party';
- for (const monsterIdx in state.partyMonsters) {
- const monster = state.partyMonsters[monsterIdx];
+ for (const monsterIdx in Memory.state.player.monsters) {
+ const monster = Memory.state.player.monsters[monsterIdx];
const partyMonster = UI.createTemplate(Template.partyMonster);
partyMonster.querySelector('[data-template-slot="sprite"]').src = `/modules/tuxemon/mods/tuxemon/gfx/sprites/battle/${monster.slug}-front.png`;
@@ -564,8 +564,8 @@ const UI = {
}
if (UI.partySelectionMode === 'select') {
- state.activeMonster = monster;
- state.activeTechnique = state.activeMonster.activeTechniques[0];
+ Memory.state.player.activeMonster = monster;
+ Memory.state.activeTechnique = Memory.state.player.activeMonster.activeTechniques[0];
UI.drawActiveMonster();
UI.drawActiveTechniques();
@@ -641,7 +641,7 @@ const UI = {
},
};
- for (const item of state.inventory) {
+ for (const item of Memory.state.player.inventory) {
const inventoryItemNode = UI.createTemplate(Template.inventoryItem);
inventoryItemNode.querySelector('[data-template-slot="sprite"]').src = `/modules/tuxemon/mods/tuxemon/${item.sprite}`;
@@ -714,7 +714,7 @@ const UI = {
const popup = UI.createPopup();
const dialog = UI.createTemplate(Template.dialogSave);
- const saveData = Game.save();
+ const saveData = Memory.save();
dialog.querySelector('[data-template-slot="saveData"]').value = saveData;
dialog.querySelector('[data-template-slot="saveClipboard"]').addEventListener('click', async () => {
@@ -735,7 +735,7 @@ const UI = {
const dialog = UI.createTemplate(Template.dialogLoad);
dialog.querySelector('[data-template-slot="load"]').addEventListener('click', () => {
- Game.load(
+ Memory.load(
dialog.querySelector('[data-template-slot="saveData"]').value.trim()
);