diff options
| -rw-r--r-- | index.html | 11 | ||||
| -rw-r--r-- | script.js | 61 | ||||
| -rw-r--r-- | style.css | 27 |
3 files changed, 90 insertions, 9 deletions
@@ -15,6 +15,17 @@ <div id="battle__player"></div> </div> + <div id="techniques"></div> + <template id="tpl___technique"> + <div class="techniques__technique"> + <div class="techniques__technique__name"></div> + <div class="techniques__technique__types"></div> + <div class="techniques__technique__power"></div> + <div class="techniques__technique__accuracy"></div> + <div class="techniques__technique__range"></div> + </div> + </template> + <div id="status"> <div>Money: <span id="money"></span></div> </div> @@ -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; @@ -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; |