happyDemon

/**
 * ValidateSpanishID. Returns the type of document and checks its validity.
 * 
 * Usage:
 *     ValidateSpanishID( str );
 * 
 *     > ValidateSpanishID( '12345678Z' );
 *     // { type: 'dni', valid: true }
 *     
 *     > ValidateSpanishID( 'B83375575' );

happyDemon

npm install -g vue-cli
vue init webpack-simple pokemon-vue
cd pokemon-vue
npm install
npm run dev

happyDemon

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
    @import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');

    html, body {
        height: 100%;
        background: #3C7ACD;
    }

    body {

happyDemon

<script>
    export default {
        data(){
            return {
                pokemon: {
                    opponent: {
                        image: "https://img.pokemondb.net/sprites/black-white/anim/normal/onix.gif",
                        name: 'Onyx',
                        hp: 100,
                        level: 50,

happyDemon

<template>
    <div class="battle-scene">
        <div class="bottom-menu">
            <div class="battle-text text-box-left">
                {{battleText}}
            </div>
            <div class="text-box-right">
                <!-- Show the main 4 options -->
                <div v-if="menu == 'options'" id="battleOptions">
                    <h4 @click="processOption(1)" class="battle-text-top-left">{{battleOptions[0]}}</h4>

happyDemon

methods: {
            processOption: function (option) {
                switch (option) {
                    case 1:
                        //handle fight
                    
                        // Show the attack menu
                        this.menu = 'attack';
                        break;
                    case 2:

happyDemon

computed: {
            fightOptions(){
                return Object.keys(this.pokemon.player.attacks);
            }
        },

happyDemon

resetBattle: function () {
                //reset data to start new game
                this.menu = 'options';
                // Use a string literal to nicely render variables in your strings
                // https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Template_literals
                this.battleText = `What will ${this.pokemon.player.name} do?`;
                this.pokemon.opponent.hp = 100;
                this.pokemon.player.hp = 100;
            }

happyDemon

        props: ['pokemon', 'position', 'type'],

happyDemon

<template>
    <div>
        <div :class="hpBoxClass">
            <img :id="pokemonImageId" v-if="alive" :src="pokemon.image" class="pokemon-bottom"/>
        </div>
        <div :class="boxClass">
            <h2 class="pokemon">{{pokemon.name}}</h2>
            <div :class="hpBarClass">
                <div :style="hpBarStyle" class="hp-bar-fill"></div>
            </div>