JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="statsController as ctrl">
        <button ng-click="ctrl.levelUp()">Level Up</button>{{ctrl.level}}
        <ul>
            <li ng-repeat="stat in ctrl.statsArr">
                <span ng-class="stat.Class">{{stat.Name}}</span> {{ctrl.getStat(stat)}} - {{stat.Growth}}
            </li>
            <li>
                <span class="stat-r">Damage/Second</span> {{ctrl.getAS()}} - 0
            </li>
        </ul>
    </div>
</div>

CSS

body {
    color:#FFF;
    background:#000;
}
.stat-g {
    color:#5E5;
}

.stat-o {
    color:#EC5;
}

.stat-r {
    color:#E55;
}

JavaScript

var app = angular.module("app", []);

app.controller("statsController", function(){
    var ctrl = this;
    ctrl.level = 1;
    ctrl.statsArr = [
        {
            "Name": "Health",
            "Class": "stat-g",
            "Base": "100",
            "Growth": "5"
        },
        {
            "Name": "Regen",
            "Class": "stat-g",
            "Base": "2",
            "Growth": "0.15"
        },
        {
            "Name": "Brew",
            "Class": "stat-o",
            "Base": "100",
            "Growth": "0"
        },
        {
            "Name": "Attack Speed",
            "Class": "stat-r",
            "Base": "2",
            "Growth": "0"
        },
        {
            "Name": "Attack Damage",
            "Class": "stat-r",
            "Base": "35",
            "Growth": "3"
        }
    ];

    this.getStat = function(stat){
        if(stat.Name == "Attack Speed"){
            ctrl.attackSpeed = stat.Base;
        }
        if(stat.Name == "Attack Damage"){
            ctrl.attackDamage = stat.Base;
            ctrl.attackGrowth = stat.Growth;
        }
        return parseFloat(stat.Base)+(parseFloat(stat.Growth)*(ctrl.level-1));
    }
    this.getAS = function(){
        return (parseFloat(ctrl.attackDamage)+(parseFloat(ctrl.attackGrowth)*(ctrl.level-1)))*parseFloat(ctrl.attackSpeed);
    }
    this.levelUp = function(){
        ctrl.level++;
    }
});