JSFiddle - React, Tailwind, and code Playground

by ryanhagz

HTML

<div id='container'>
<div id='player'>
<div id='pcont'>
<label for="name">Name:</label>
<p id='name'></p><br/>
<label for="hp">Health:</label>
<p id='hp'></p><br/>
<label for="ep">Energy:</label>
<p id='ep'></p><br/>
<label for="lvl">Level:</label>
<p id='lvl'></p><br/><br/>
<button id='explore'>Explore</button>
<button id='rest'>Rest</button>
<button id='run'>Run</button>
<button id='attack'>Attack</button>
<button id='quit'>Quit</button>
</div>
</div>
<div id='enemy'>
<div id="econt">
	<label for="ename">Name:</label>
	<p id='ename'></p><br/>
	<label for="ehp">Health:</label>
	<p id='ehp'></p><br/>
</div>
</div>
</div>

CSS

#html,body
{
	margin:0%;
	padding:0%;
	width: 100%;
	height: Window.innerHeight;
	min-height:100%;
	min-width:600px;
	max-width:2000px;
	font-family: 'Roboto', sans-serif;
}
p
{
	display: inline-block;
}
#player, #enemy
{
    width: 49.5%;
    height: 50%;
    border: 1px solid black;
    position: relative;
	float:left;
}
#pcont, #econt
{
	position: absolute;
    top: 0.5%; 
	left: 0.5%;
    width: 100%; 
	height: 100%;
	line-height: 0.5em;
}
#container
{
	border: solid black;
	height: 50%;
}
#state
{
	top: 1%;
	left: 1%;
}

JavaScript

$(document).ready(function () {
    var m = Math;
    //Character constructor where the player and enemies will receive their //attributes from.
    function Character() {
        this.name = "";
        this.health = 1;
        this.max_health = 10;
        this.do_dmg = do_dmg;

        function do_dmg(enemy) {
            //calculates amount of damage done by by finding the lower number between a (rand int from 0 to personal health - a rand int from 0 to enemy health) and
            var dmg = m.min(m.max(
            m.round(m.random() * this.health) - m.round(m.random() * enemy.health), 0),
            enemy.health);
            $('#hp').text(this.health);
            $('#ehp').text(enemy.health -= dmg);
            if (dmg === 0) {
                console.log(this.name + " evades " + enemy.name + "'s attack!");
            } else {
                console.log(this.name + " hurts " + enemy.name + " for " + dmg);
                return enemy.health <= 0;
            }
        }
    }
    //Create Enemies HERE
    var Goblin = new Character();
    Goblin.name = "Goblin";
    Goblin.health = m.floor(m.round(m.random() * 10)) + 1;
    Goblin.XP = 25;
    var Demon = new Character();
    Demon.name = "Demon";
    Demon.health = m.floor(m.round(m.random() * 10 + m.random() * 1)) + 1;
    Demon.XP = 50;
    var Dragon = new Character();
    Dragon.name = "Dragon";
    Dragon.health = m.floor(m.round(m.random() * 10 + m.random() * 2)) + 1;
    Dragon.XP = 100;
    //Load created enemies into an Array	
    var Enemies = [Goblin, Dragon, Demon];

    //Create the Player.
    var Player = new Character();
    var p = Player;
    p.state = "normal";
    p.awoken = m.round(m.random());
    p.name = "Ryan";
    p.health = 10;
    p.max_health = 10;
    p.energy = 10;
    p.max_energy = 10;
    p.XP = 0;
    p.level = 1;
    p.nextLevel = p.level + 1;
    p.quit = function () {
        console.log(this.name + " has quit.");
    },
    p.tired = function () {
       ...