pokemon-fight-in-vue/fight.js

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');