From 717fde1c48c7221da986ac02d2b806b2fee6f2d5 Mon Sep 17 00:00:00 2001 From: Daniel Weipert Date: Wed, 16 Aug 2023 18:23:46 +0200 Subject: active techniques multiple --- index.html | 11 +++++++++++ script.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++--------- style.css | 27 +++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 94f298c..e569d47 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,17 @@
+
+ +
Money:
diff --git a/script.js b/script.js index 4e5727d..2fab2fc 100644 --- a/script.js +++ b/script.js @@ -162,6 +162,8 @@ class Monster { experienceModifier = 1; moneyModifier = 1; + activeTechniques = []; + constructor (slug) { this.slug = slug; @@ -227,6 +229,10 @@ class Monster { return slugToName(this.slug); } + getLearnableTechniques () { + return this.moveset.filter((move) => this.level >= move.learned_at); + } + canLevelUp () { return this.exp >= this.getExperienceRequired(); } @@ -352,6 +358,10 @@ class Technique { this.resetToBase(); } + get name () { + return slugToName(this.slug); + } + get types () { return DB.techniques[this.slug].types; } @@ -616,6 +626,7 @@ function slugToName (slug) { const templatePopup = document.querySelector('#tpl___popup').innerHTML; const templateMovesetList = document.querySelector('#tpl___moveset__list').innerHTML; const templateMovesetItem = document.querySelector('#tpl___moveset__item').innerHTML; + const templateTechnique = document.querySelector('#tpl___technique').innerHTML; const party = document.querySelector('#party'); const money = document.querySelector('#money'); @@ -746,6 +757,8 @@ function slugToName (slug) { battlePlayer.appendChild(battleMonster); UI.setActiveTechnique(); + + UI.setActiveTechniques(); } else { battleMonster.classList.add('battle__monster--enemy'); @@ -777,6 +790,17 @@ function slugToName (slug) { + state.activeTechnique.types.map((type) => UI.createElementTypeIcon(type)).join(''); }, + setActiveTechniques () { + const techniquesNode = document.querySelector('#techniques'); + techniquesNode.replaceChildren(); + + for (const technique of state.activeMonster.activeTechniques) { + const techniqueNode = UI.getTemplate(templateTechnique); + techniqueNode.querySelector('.techniques__technique__name').innerHTML = technique.name; + techniquesNode.appendChild(techniqueNode); + } + }, + async chooseActiveTechnique () { let activeMoveIndex = 0; while ((await fetchTechnique(state.activeMonster.moveset[activeMoveIndex].technique)).power === 0) { @@ -800,6 +824,10 @@ function slugToName (slug) { movesetItem.querySelector('.moveset__item__power').innerHTML = technique.power; movesetItem.querySelector('.moveset__item__level').innerHTML = move.level_learned; + if (state.activeMonster.activeTechniques.find((item) => item.slug === technique.slug)) { + movesetItem.setAttribute('selected', true); + } + movesetItem.addEventListener('click', () => { if (movesetItem.getAttribute('disabled')) { return false; @@ -808,7 +836,14 @@ function slugToName (slug) { state.activeTechnique = technique; UI.setActiveTechnique(); - popup.remove(); + if (movesetItem.getAttribute('selected')) { + movesetItem.removeAttribute('selected'); + state.activeMonster.activeTechniques.splice(state.activeMonster.activeTechniques.findIndex((item) => item.slug === technique.slug), 1); + } else { + movesetItem.setAttribute('selected', true); + state.activeMonster.activeTechniques.push(technique); + } + UI.setActiveTechniques(); }); if (state.activeMonster.level < move.level_learned) { @@ -1005,7 +1040,9 @@ function slugToName (slug) { applyTechniqueEffect (technique, user, target) { for (const effect of technique.combatEffects) { if (effect === 'money') { - state.money += Math.floor(Math.random() * target.level); + if (!techniqueHit) { + state.money += Math.floor(Math.random() * target.level); + } } } @@ -1033,33 +1070,39 @@ function slugToName (slug) { } } }, + + damage () { + const damage = simpleDamageCalculation(state.activeTechnique, state.activeMonster, state.enemy.monster); + UI.createDamage(clickEvent, damage); + + state.enemy.monster.hp -= damage; + }, }; UI.setActiveMonster(); UI.setEnemyMonster(); + let techniqueHit; let clickEvent; let turnEndPhaseEvents = []; document.querySelector('#battle__enemy').addEventListener('click', async (event) => { clickEvent = event; const accuracy = Math.random(); - const hit = state.activeTechnique.accuracy >= accuracy; + techniqueHit = state.activeTechnique.accuracy >= accuracy; - if (hit) { + if (techniqueHit) { await Game.useTechnique(state.activeTechnique, state.activeMonster, state.enemy.monster); } await Game.applyStatusEffect(state.activeMonster, state.enemy.monster); await Game.applyStatusEffect(state.enemy.monster, state.activeMonster); - if (hit) { - Game.applyTechniqueEffect(state.activeTechnique, state.activeMonster, state.enemy.monster); + Game.applyTechniqueEffect(state.activeTechnique, state.activeMonster, state.enemy.monster); - const damage = simpleDamageCalculation(state.activeTechnique, state.activeMonster, state.enemy.monster); - UI.createDamage(event, damage); + if (techniqueHit) { + Game.damage(); - state.enemy.monster.hp -= damage; if (state.enemy.monster.hp <= 0) { const faintedMonster = state.enemy.monster; diff --git a/style.css b/style.css index 5c4b2f6..b344c8a 100644 --- a/style.css +++ b/style.css @@ -37,6 +37,10 @@ img { .popup { background-color: #fff; padding: 0.25rem 0.5rem; + + background-image: url('/modules/tuxemon/mods/tuxemon/gfx/ui/background/spyder_empty.png'); + background-size: cover; + background-position: center; } #battle { @@ -176,6 +180,7 @@ img { transition: background-color; } + .moveset__item { font-size: 1.5rem; border: 1px solid #000; @@ -183,20 +188,40 @@ img { margin: 0.5em 0; line-height: 1em; cursor: pointer; + background-color: rgba(255, 255, 255, 0.75); } + .moveset__item:hover { background-color: rgba(0, 0, 0, 0.1); } + .moveset__item[disabled] { filter: grayscale(100%); opacity: 0.5; } + +.moveset__item[selected] { + border-color: green; + color: green; +} + .moveset__item img { height: 1em; width: 1em; } + +#techniques { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; +} + +.techniques__technique {} + + + #status { color: #fff; background-color: #000; @@ -204,6 +229,7 @@ img { } + #menu { display: grid; grid-template-columns: 1fr 1fr 1fr; @@ -218,6 +244,7 @@ img { } + #party { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; -- cgit v1.2.3