JSFiddle - React, Tailwind, and code Playground

by drvy

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<div id='wrap'>
<form class='pure-form'>
    <fieldset>
        <legend>Seleciona el Pokemon!</legend>

        <label for='pokemon'>Pokemon</label>
        <select id='pokemon'>
            <option value='255'>Caterpie</option>
            <option value='225'>Gulpin</option>
            <option value='190'>Pikachu</option>
            <option value='127'>Bibarel</option>
            <option value='90'>Arbok</option>
        </select>

        <label for='vida'>Vida (actual/max)</label>
        <input type='text' id='vida_act' value='20'>
        <input type='text' id='vida_max' value='35'>
    </fieldset>

    <fieldset>
        <legend>Seleciona la pokeball y efectos!</legend>

        <label for='pokeball'>Pokeball a usar</label>
        <select id='pokeball'>
            <option value='255'>PokeBall</option>
            <option value='200'>SuperBall</option>
            <option value='150'>SafariBall</option>
            <option value='150'>UltraBall</option>
            <option value='0'>MasterBall</option>
        </select>

        <label for='efecto'>Efecto</label>
        <select id='efecto'>
            <option value='0'>Ninguno</option>
            <option value='25'>Dormido</option>
            <option value='25'>Congelado</option>
            <option value='12'>Paralizado</option>
            <option value='12'>Quemado</option>
            <option value='12'>Envenenado</option>
        </select>

        <input type='button' class='pure-button pure-button-primary' id='capturar' value='Capturar!'>
    </fieldset>
    <fieldset>
        <legend>Log (<span id='clear'>borrar</span>)</legend>
        <div id='log'></div>
    </fieldset>
</form>
</div>

CSS

body { font-size: 14px;}
input[type='text'] { max-width: 50px; }
label { color: #555; padding: 5px 10px; }
#wrap { max-width: 600px; margin: 0 auto;}
#log > div { padding: 2px; color: #444; text-align: justify;}
#clear {cursor:pointer; text-decoration: underline; color: #888;}

JavaScript

var capturar = function(){

    /* Pokemon y su factor de captura */
    var pokemon = document.getElementById('pokemon');
    var pokemon_nombre = pokemon.options[pokemon.selectedIndex].text;
    var pokemon_factor = pokemon.options[pokemon.selectedIndex].value;

    var vida = document.getElementById('vida_act').value;
    var vida_max = document.getElementById('vida_max').value;

    /* Tipo de pokeball */
    var pball = document.getElementById('pokeball');
    var pball_nombre = pball.options[pball.selectedIndex].text;
    var pball_factor = pball.options[pball.selectedIndex].value;

    /* Tipo de efecto adverso */
    var efecto = document.getElementById('efecto');
    var efecto_nombre = efecto.options[efecto.selectedIndex].text;
    var efecto_factor = efecto.options[efecto.selectedIndex].value;

    /* Por mostrar algo */
    addLog('Pokemon: '+pokemon_nombre+' | Vida: '+vida+'/'+vida_max);
    addLog('Pokeball: '+pball_nombre+' ('+pball_factor+') | Efecto: '+efecto_nombre+' ('+efecto_factor+')');

    /* --------------------------------------------------------------------
        Aquí empieza la magia.
        ------------------------------------------------------------------- */

    /* La MasterBall siempre funciona xD */
    if(pball_factor === '0'){
        addLog('Capturas el pokemon con una '+pball_nombre+'!<hr>');
        return true;
    }

    /* Generamos un numero aleatorio dependiendo del factor de la pokeball */
    var n = Math.floor((Math.random() * pball_factor) + 1);

    /* Comprobamos si el efecto es capaz de capturarlo */
    if(n!=='0' && n < efecto_factor){
        addLog('Capturas el pokemon con una '+pball_nombre+' debido a '+efecto_nombre+'!<hr>');
        return true;
    }

    /* Comprobamos si el pokemon se escapa negando el efecto */
    if(n-efecto_factor > pokemon_factor){
        addLog('El pokemon se escapa!<hr>');
        return false;
    }

    /* Generamos un numero aleatorio entre 0 y 255 */
    var m =...