let Fight = { data() { return { loaded: false, action: null, step: 'choose', sounds: { battle: null, victory: null }, player: { name: 'Ash', team: [ { species: 'Pikachu', nickname: 'Pikachu', status: null, hp: 100, hpLeft: 100, level: 5, sprites: { idle: 'https://www.pokewiki.de/images/thumb/0/0a/Pok%C3%A9monsprite_025_SWSH.gif/128px-Pok%C3%A9monsprite_025_SWSH.gif', back: 'https://www.pokewiki.de/images/thumb/7/7c/Pok%C3%A9monsprite_025_R%C3%BCckseite_Schillernd_LGPE.png/100px-Pok%C3%A9monsprite_025_R%C3%BCckseite_Schillernd_LGPE.png' }, moves: [ { name: 'Tackle', strength: 35, types: ['normal'], class: 'physical', ap: 15 } ] } ] }, enemy: { name: 'Gary', team: [ { species: 'Evoli', nickname: 'Evoli', status: null, hp: 100, hpLeft: 100, level: 5, sprites: { idle: 'https://www.pokewiki.de/images/thumb/a/a5/Pok%C3%A9monsprite_133_SWSH.gif/128px-Pok%C3%A9monsprite_133_SWSH.gif', back: '' }, moves: [ { name: 'Tackle', strength: 35, types: ['normal'], class: 'physical', ap: 15 } ] } ] } } }, mounted() { this.start(); this.sounds.battle = new Audio('snd/battle.mp3'); this.sounds.victory = new Audio('snd/victory.mp3'); }, methods: { start() { this.player.currentFighter = this.player.team[0]; this.enemy.currentFighter = this.enemy.team[0]; this.loaded = true; }, playerAttack(move) { if (this.sounds.battle.paused) { this.sounds.battle.play(); } this.attack(move, this.player.currentFighter, this.enemy.currentFighter); this.step = 'playerAttacked'; this.action = 'message'; this.currentMessage = this.player.currentFighter.nickname + ' setzt ' + move.name + ' ein!'; }, enemyAttack() { if (this.enemy.currentFighter.hpLeft <= 0) { this.currentMessage = this.enemy.currentFighter.nickname + ' wurde besiegt!' this.action = 'message'; this.step = 'enemyPokemonDefeated'; } else { let move = this.enemy.currentFighter.moves[Math.floor(Math.random() * this.enemy.currentFighter.moves.length)]; this.attack(move, this.enemy.currentFighter, this.player.currentFighter); this.action = 'message'; this.step = 'enemyAttacked'; this.currentMessage = 'Enemy ' + this.enemy.currentFighter.nickname + ' setzt ' + move.name + ' ein!'; } }, enemyPokemonDefeated() { this.enemy.currentFighter.status = 'defeated'; let nextFighter = this.getNextFighterFromTeam(this.enemy.team); console.log(nextFighter); if (!nextFighter) { this.enemy.currentFighter = null; this.step = 'playerWon'; this.fightWon() } else { this.enemy.currentFighter = this.enemy.team[nextFighter]; } }, // playerPokemonDefeated() { // this.player.currentFighter.status = 'defeated'; // let nextFighter = this.getNextFighterFromTeam(this.player.team); // // if (!nextFighter) { // this.step = 'playerWon'; // this.currentMessage = this.enemy.name + ' wurde besiegt!'; // } else { // alert('lol'); // this.enemy.currentFighter = this.enemy.team[nextFighter]; // } // }, getNextFighterFromTeam(team) { let nextFighterIndex = false; team.forEach((member, teamPosition) => { if (member.status !== 'defeated') { nextFighterIndex = teamPosition; } }) return nextFighterIndex; }, attack(move, attacker, enemy) { let newHpLeft = enemy.hpLeft - this.calculateDamageForAttack(move.strength, attacker.level); enemy.hpLeft = newHpLeft; }, calculateDamageForAttack(strength, level) { return strength / 10 * level; }, getLeftHpPercent(character) { return character.currentFighter.hpLeft * 100 / character.currentFighter.hp; }, getColorForHealthBar(percent) { if (percent > 52) { return 'success'; } if (percent > 17) { return 'warning' } return 'danger'; }, fightWon() { this.sounds.battle.pause(); this.sounds.victory.play(); this.currentMessage = this.enemy.name + ' wurde besiegt!'; }, fightLost() { }, continueRound() { switch (this.step) { case 'playerAttacked': this.enemyAttack(); break; case 'enemyAttacked': this.action = null; break; case 'enemyPokemonDefeated': this.enemyPokemonDefeated(); this.currentMessage = this.enemy.name + ' wurde besiegt!'; break; case 'playerPokemonDefeated': // this.fightWon(); break; case 'playerWon': this.fightWon(); break; case 'enemyWon': this.fightLost(); break; default: break; } this.$forceUpdate(); } }, watch: { step() { console.log(this.step); }, action() { console.log(this.action); } } } Vue.createApp(Fight).mount('#fight');