Filter by city

app.js

@@ -36,6 +36,7 @@ $(document).ready(function() {
         // Build an array of objects from the JSON data holding all cities.
         var cities = [];
         rawCities = hgJson.data.CITYLIST.CITY;
+        console.log(rawCities);
         // CITY.ACTION is an array of objects for gold, crystal, recruit etc.
         // ACTION.attributes each has .location, .type, and .value.
         // CITY.TYPE is an array of objects with a .#text of, e.g., "Human" and "Magic".
@@ -45,17 +46,29 @@ $(document).ready(function() {
         for (var i = 1 ; i < rawCities.length ; i++) {
             var rawCity = rawCities[i];
             var attributes = rawCity.attributes;
-            var actions = [];
             var types = [];
+            var gold = 0;
+            var crystal = 0;
+            var wood = 0;
+            var recrui = 0;
 
-            // Populate actions array.
+            // Plug in resource production and recruit.
             for (var j = 0 ; j < rawCity.ACTION.length ; j ++) {
                 var action = rawCity.ACTION[j];
-                actions.push({
-                    "location": action.attributes.location,
-                    "type": action.attributes.type,
-                    "value": action.attributes.value
-                });
+                switch (action.attributes.type) {
+                    case "gold":
+                        gold = action.attributes.value;
+                        break;
+                    case "crystal":
+                        crystal = action.attributes.value;
+                        break;
+                    case "wood":
+                        wood = action.attributes.value;
+                        break;
+                    case "recruit":
+                        recruit = action.attributes.value;
+                        break;
+                }
             }
 
             // Populate types array. Raw types can be an array or an object.
@@ -75,9 +88,11 @@ $(document).ready(function() {
                 "rarity": attributes.rarity,
                 "groundType": attributes.groundType,
                 "edition": attributes.edition,
-                "actions": actions,
-                "types": types
-
+                "types": types,
+                "gold": gold,
+                "crystal": crystal,
+                "wood": wood,
+                "recruit": recruit
             });
         }
 
@@ -154,24 +169,29 @@ $(document).ready(function() {
 
     function getActiveCities() {
         activeButtons = $('.button-primary');
-        activeCities = [];
-        for (var i = 0 ; i < activeButtons.length ; i++) {
-            activeCities.push($(activeButtons[i]).data("cityTypes"));
-        }
-        console.log("activeCities", activeCities);
-        return activeCities;
+        return cityLibrary.filter(function(city) {
+            for (var i = 0 ; i < activeButtons.length ; i++) {
+                if ($(activeButtons[i]).data("cityId") === city.id) {
+                    return true;
+                }
+            }
+        });
     }
 
     function filterUnits(unitLibrary, activeCities) {
         return unitLibrary.filter(function(unit) {
-            for (var i = 0 ; i < activeCities.length ; i ++) {
-
-                // Logic to filter unitlibrary and return a new array.
-                // unit.cost[resourcename]  should match city.action
-
 
+            // Always include free units.
+            if (unit.cost.gold === 0 && unit.cost.crystal === 0 && unit.cost.wood === 0 ) {
+                return true;
+            }
 
-                if (unit.cost[activeResources[i]] > 0) {
+            // Check whether the unit's cost matches each active city.
+            for (var i = 0 ; i < activeCities.length ; i ++) {
+                var city = activeCities[i];
+                if ((unit.cost.gold > 0) === (city.gold > 0) &&
+                         (unit.cost.crystal > 0) === (city.crystal > 0) &&
+                         (unit.cost.wood > 0) === (city.wood > 0)) {
                     return true;
                 }
             }

index.html

@@ -35,7 +35,7 @@ <h2 style="margin-top: 10%">Highgrounds Units</h2>
     <!-- City template -->
     <script id="city-button" type="text/x-handlebars-template">
       <button class="button-primary city"
-              data-resource-type="{{#each types}}{{ this }} {{/each}}">
+              data-city-id="{{id}}">
               {{ name }}
       </button>
     </script>