JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="mainController as main">
        <ul>
            <li ng-repeat="stat in main.stats">{{stat.Name}}: {{main.getStat(stat)}}</li>
        </ul>
    </div>
</div>

JavaScript

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

var main = myApp.controller('mainController', function(){
    var ctrl = this;
    ctrl.level = 1;
    ctrl.stats = {
        "Health": {
            "Name": "Health",
            "Base": 100,
            "Growth": 25
        },
        "Mana": {
            "Name": "Mana",
            "Base": 75,
            "Growth": 15
        }
    };
    
    ctrl.mods = {
        "Health": [0.25, 0.1]
    };
    
    ctrl.getStat = function(stat){
        return stat.Base+(stat.Growth*ctrl.level)*(1+modSum(ctrl.mods[stat.Name]));
    };
});
        
        var modSum = function(mods){
            console.log(mods);
            var sum = 0;
            if(typeof(mods) != "undefined"){
                for(var i = 0; i < mods.length; i++){
                    sum += mods[i];
                }
            }
            return sum;
        }