JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<div ng-controller="MyCtrl">
  <div>
    <span>Your damage%:</span>
    <input type="text" ng-model="damage">
  </div>
  <div>
    <span>Your boss%:</span>
    <input type="text" ng-model="boss">
  </div>
  <div>
    <span>Your att%:</span>
    <input type="text" ng-model="att">
  </div>
  <br/>
  <p>Your boss + damage multiplier: {{getBMulti()}}</p>
  <p>Your att% multiplier: {{getAMulti()}}</p>
  <br/>
  <p>{{computeA(3)}}</p>
  <p>{{computeA(9)}}</p>
  <p>{{computeA(10)}}</p>
  <p>{{computeA(12)}}</p>
  <p>{{computeA(13)}}</p>
  <br/>
  <p>{{computeB(7)}}</p>
  <p>{{computeB(20)}}</p>
  <p>{{computeB(30)}}</p>
  <p>{{computeB(35)}}</p>
  <p>{{computeB(40)}}</p>
</div>

CSS

span {
  width: 120px;
  display: inline-block;
}

p {
  -webkit-margin-before: 0.25em;
  -webkit-margin-after: 0.25em;
}

JavaScript

const myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', MyCtrl]);

function MyCtrl($scope) {
  $scope.boss = 300;
  $scope.damage = 100;
  $scope.att = 100;

	// https://stackoverflow.com/q/2576571/5857393
  $scope.getValue = v => isNaN(a = parseInt(v)) ? 0 : a;

  $scope.getBMulti = () => (($scope.getValue($scope.boss) + $scope.getValue($scope.damage) + 100) / 100).toFixed(2);
  $scope.getAMulti = () => (($scope.getValue($scope.att) + 100) / 100).toFixed(2);

  $scope.computeA = extra => $scope.computeAdd($scope.getValue($scope.att), extra, 'att');
  $scope.computeB = extra => $scope.computeAdd($scope.getValue($scope.boss) + $scope.getValue($scope.damage), extra, 'boss');
  $scope.computeAdd = (stat, extra, txt) => {
    let before = (stat + 100) / 100;
    let after = (stat + extra + 100) / 100;
    return 'Adding ' + extra + '% ' + txt + ' would increase your DPM by ' + ((after / before - 1) * 100).toFixed(2) + '% (' + after.toFixed(2) + '/' + before.toFixed(2) + ')';
  };
}