PokeDashboard

All the info and widgets you need to battle pokemon competetively.

HTML

<script src="https://rawgit.com/iAmMortos/PokeTypeJsObj/master/pokeTypes.js"></script>
<body ng-app="pokeDash">

  <type-checker></type-checker>

  <script type="text/ng-template" id="type-checker.html">
    <div class="tc_widget">
      <select ng-model="typeChecker.sel1">
        <option ng-repeat="type in typeChecker.types.all.sort()" value="{{type}}" ng-disabled="type === typeChecker.sel2">{{ typeChecker.types.long[type] }}</option>
      </select>
      <select ng-model="typeChecker.sel2">
        <option value="">-- None --</option>
        <option ng-repeat="type in typeChecker.types.all.sort()" value="{{type}}" ng-disabled="type === typeChecker.sel1">{{ typeChecker.types.long[type] }}</option>
      </select>
      <button ng-click="typeChecker.addWeakness();">Get Weaknesses!</button>
      <button ng-click="typeChecker.reset();">Reset</button>
      <div id="damageEntries">
        <type-entry ng-repeat="entry in typeChecker.entries"></type-entry>
      </div>
    </div>
  </script>

  <script type="text/ng-template" id="type-entry.html">
    <table class="tc_entry_table">
      <tr>
        <th class="tc_table_title">Weaknesses&nbsp;for</th>
        <th ng-repeat="type in typeChecker.types.all.sort()" ng-class="['tc_data']">
          <img ng-src="{{typeChecker.types.getImageSrc(type)}}" />
        </th>
      </tr>
      <tr>
        <th class="tc_table_title">
          <img ng-src="{{ typeChecker.types.getImageSrc(entry.t1); }}" />&nbsp;<img ng-src="{{ typeChecker.types.getImageSrc(entry.t2); }}" ng-show="entry.t2 !== ''" />
        </th>
        <td ng-repeat="type in typeChecker.types.all.sort()" ng-class="['tc_data', entry.classes[type]]">
          {{ entry.weaknesses[type] }}
        </td>
      </tr>
    </table>
  </script>

</body>

CSS

body {
  opacity: 1;
}

.tc_widget {
  font-family: Arial, sans-serif
}

.tc_quarter {
  background-color: #00ffff;
  color: black;
}

.tc_half {
  background-color: #00ff00;
  color: black;
}

.tc_double {
  background-color: #ff0000;
  color: white;
}

.tc_quad {
  background-color: #660000;
  color: white;
}

.tc_none {
  background-color: black;
  color: white;
}

.tc_std {
  background-color: white;
  color: black;
}

.tc_data {
  text-align: center;
  border-right: solid 1px #CCC;
}

.tc_entry_table {
  border-collapse: collapse;
  border: 1px solid #CCC;
  /*box-sizing: border-box;*/
}

.tc_table_title {
  border-right: solid 1px black;
  padding: 0 10px;
}

JavaScript

(function() {

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

  app.directive('typeChecker', function() {
    return {
      restrict: 'E',
      templateUrl: 'type-checker.html',
      controller: function() {
        this.types = pokeTypes;
        this.sel1 = this.types.all.sort()[0];
        this.sel2 = "";

        this.entries = [];
        this.sel1 = this.types.all.sort()[0];
        this.sel2 = "";

        var _self = this;

        this.addWeakness = function() {
          entry = {};
          entry.t1 = _self.sel1;
          entry.t2 = _self.sel2;
          entry.weaknesses = {};
          _self.types.all.sort().forEach(function(elem) {
            var val = _self.types.getDamage(elem, entry.t1);
            if (entry.t2 !== "")
              val *= _self.types.getDamage(elem, entry.t2);

            if (val === 0.5)
              val = "½";
            if (val === 0.25)
              val = "¼";
            entry.weaknesses[elem] = val;
          });
          entry.classes = {};
          _self.types.all.sort().forEach(function(elem) {
            var val = entry.weaknesses[elem];
            var cls = "";
            switch (val) {
              case 0.25:
              case "¼":
                cls = "tc_quarter";
                break;
              case 0.5:
              case "½":
                cls = "tc_half";
                break;
              case 2:
                cls = "tc_double";
                break;
              case 4:
                cls = "tc_quad";
                break;
              case 0:
                cls = "tc_none";
                break;
              default:
                cls = "tc_std";
            }
            entry.classes[elem] = cls;
          });
          this.entries.push(entry);
        };

        this.reset = function() {
          this.entries = [];
          this.sel1 = this.types.all.sort()[0];
          this.sel2 = "";
        };
      },
      controllerAs: "typeChecker"
    };
  });

 ...