happyDemon

<transition-attack>
  <div v-if="attackEffect" class="battle-effectiveness">
    {{attackEffect}}
  </div>
</transition-attack>

happyDemon

import Vue from 'vue'

window.Vue = Vue;
window.Vuemit = require('vuemit');

// Import Velocity & its base animations
import 'velocity-animate'
import 'velocity-animate/velocity.ui'

// Import our custom transitions

happyDemon

export default {
    animations: [
        {
            // call this transition with <transistion-attack>HTML TO TRANSITION</transition-attack>
            tag: 'transition-attack',
            // We don't want to trigger the transition on initial render
            onAppear: false,
            // Ignore CSS animations that happen to have the same name
            css: false,
            // Define the animation hooks

happyDemon

.box-top-right .battle-effectiveness {
        position: absolute;
        z-index: 1;
        left: 26px;
        width: 200px;
        text-align: center;
        top: -50px;
        font-family: monospace;
        font-size: 1.2em;
        font-weight: bold;

happyDemon

                <div v-if="attackEffect" class="battle-effectiveness">
                    {{attackEffect}}
                </div>

happyDemon

    calculateCritical(otherPokemonType) {
        const random = Math.floor(Math.random() * 255);
        const probability = (this.attack.type == 'normal') ? this.attacking.stats.speed / 512 : this.attacking.stats.speed / 256;

        // Seems like we've got a critical hit
        if (random < probability) {
            Vuemit.fire(otherPokemonType+'.attack.effective', 'Critical hit!');
            // Lower leveled pokemon will have a smaller percentage of bonus
            return ((this.attacking.stats.level * 2) + 5) / (this.attacking.stats.level + 5);
        }

happyDemon

    // Consult the type chart and build a multiplier
    calculateTypeEffect(otherPokemonType) {
        // If we haven't defined the type in the typeChart return normal damage
        if (typeof this.typeChart[this.attack.type] == 'undefined')
            return 1;

        // Here we'll build the multiplier in
        let effectTotal = 1;

        // In case of immune we'll just set this to true

happyDemon

    power(otherPokemonType) {
        return Math.floor(this.calculateStatsPower() * this.calculateStab() * this.calculateTypeEffect(otherPokemonType) * this.calculateCritical(otherPokemonType) * this.calculateOther() * this.getRandomFactor())
    }

happyDemon

            calculateDamage(attackName) {
                const attack = this.local.pokemon.attacks[attackName];

                const damage = new Damage(attack, this.local.pokemon, this.opponent.pokemon);

                return damage.power(this.otherPokemon);
            },

happyDemon

        mounted(){
            Vuemit.listen(this.type+'.attack.effective', (effect) => {
                this.showAttackEffect(effect);
            });
        },