From a579d0d299d30b474ce3f76143370518c9c2d718 Mon Sep 17 00:00:00 2001
From: Bryce Allen <bdallen@uchicago.edu>
Date: Thu, 4 Mar 2021 16:33:13 -0500
Subject: [PATCH] mhgu: add html files

---
 web/mhgu/recommends.html    | 106 +++++++++
 web/mhgu/weaponlist.html    | 445 ++++++++++++++++++++++++++++++++++++
 web/mhgu/weaponplanner.html | 275 ++++++++++++++++++++++
 3 files changed, 826 insertions(+)
 create mode 100644 web/mhgu/recommends.html
 create mode 100644 web/mhgu/weaponlist.html
 create mode 100644 web/mhgu/weaponplanner.html
diff --git a/web/mhgu/recommends.html b/web/mhgu/recommends.html
new file mode 100644
index 0000000..69c65ca
--- /dev/null
+++ b/web/mhgu/recommends.html
@@ -0,0 +1,106 @@
+<html>
+<head>
+  <title>Poogie Recommends</title>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
+
+  <script src="/js/common.js"></script>
+
+  <style>
+      .flex {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+      }
+
+      label {
+          font-weight: bold;
+          font-family: sans, sans-serif;
+      }
+
+      #output { flex: 99 1 auto; }
+  </style>
+
+  <script type="text/javascript">
+      var DATA_PATH = get_base_path() + "/rewards/";
+
+      $(document).ready(function(){
+          $("#search").click(update_search);
+          $("#item").keypress(function(e) {
+              if (e.which == 13) { update_search(); }
+          });
+          setup_item_autocomplete("#item");
+          var item_name = $.QueryString["item"];
+          if (item_name) {
+              console.log("qs item: " + item_name);
+              if (history.state && history.state["item_name"]) {
+                  item_name = history.state["item_name"];
+                  console.log("override qs with state item: " + item_name);
+              }
+              var normalized_name = normalize_name(item_name);
+              var encoded_name = encodeURIComponent(normalized_name);
+              display_item(normalized_name);
+              console.log("replaceState: " + normalized_name);
+              window.history.replaceState({ "item_name": normalized_name }, "",
+                                          "/recommends.html?item="
+                                          + encoded_name );
+          }
+          $(window).on("popstate", function(e) {
+              var oe = e.originalEvent;
+              if (oe.state !== null) {
+                  console.log("popState:" + JSON.stringify(oe.state));
+                  display_item(oe.state["item_name"]);
+              }
+          });
+      });
+
+      function update_search() {
+          // update the item search based on the text field, and also push
+          // the state to history
+          var item_name = $.trim($("#item").val());
+          var normalized_name = normalize_name(item_name);
+          if (window.history.state
+          &&  window.history.state["item_name"] == normalized_name) {
+              console.log("item not changed, skipping update");
+              return;
+          }
+          var encoded_name = encodeURIComponent(normalized_name);
+          display_item(normalized_name);
+          console.log("pushState: " + normalized_name);
+          window.history.pushState({ "item_name": normalized_name }, "",
+                                   "/recommends.html?item=" + encoded_name );
+      }
+
+      function display_item(normalized_name) {
+          // display the exact item name if available; does not push state
+          $("#item").val(normalized_name);
+          var encoded_name = encodeURIComponent(normalized_name);
+
+          $.get(DATA_PATH + encoded_name + ".txt",
+                function(data) {
+                    $("#output").text(data);
+                }).fail(
+                function() {
+                    $("#output").text("Error: item '"
+                                      + normalized_name + "' not found");
+                });
+      }
+  </script>
+</head>
+<body>
+<div class="flex">
+  <div>
+    <label for="item">Item:</label>
+    <input id="item" type="text" size="20" />
+    <button id="search">Ask Poogie</button>
+    <a href="https://github.com/bd4/monster-hunter-scripts/blob/master/RECOMMENDATIONS.adoc">Understanding Results</a> 
+    (<a href="https://github.com/bd4/monster-hunter-scripts">source</a>)
+  </div>
+  <br />
+  <textarea readonly="true" rows="10" cols="80" id="output"></textarea>
+</div>
+</body>
diff --git a/web/mhgu/weaponlist.html b/web/mhgu/weaponlist.html
new file mode 100644
index 0000000..a21cd37
--- /dev/null
+++ b/web/mhgu/weaponlist.html
@@ -0,0 +1,445 @@
+<html>
+<head>
+  <title>Poogie's Weapon List (MHGen)</title>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
+  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
+
+  <script type="text/javascript" src="/js/ejs_production.js"></script>
+
+  <script type="text/javascript" src="/js/common.js"></script>
+
+  <style>
+      label {
+          font-weight: bold;
+      }
+
+      body {
+          font-family: sans, sans-serif;
+      }
+
+      td.plus {
+          background-color: LightCyan;
+      }
+
+      td.minus {
+          background-color: LightPink;
+      }
+
+      td.num {
+          text-align: right;
+      }
+
+      /*@media (max-width: 600) {*/
+      .flexbox {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+      }
+
+      .sharpness-bar {
+          border: 1px #a9a9a9 solid;
+          min-width: 90px;
+          height: 7px;
+          background-color: #a9a9a9;
+          float: left;
+          clear: both;
+      }
+
+      .sharpness-bar span {
+          display: inline-block;
+          height: 100%;
+          float: left;
+      }
+
+      .sharpness-bar .red {
+          background-color: #C00C38 !important;
+      }
+
+      .sharpness-bar .orange {
+          background-color: #E85018 !important;
+      }
+
+      .sharpness-bar .yellow {
+          background-color: #F0C830 !important;
+      }
+
+      .sharpness-bar .green {
+          background-color: #58D000 !important;
+      }
+
+      .sharpness-bar .blue {
+          background-color: #3068E8 !important;
+      }
+
+      .sharpness-bar .white {
+          background-color: #F0F0F0 !important;
+      }
+
+      .sharpness-bar .purple {
+          background-color: #c3c !important;
+      }
+
+      #sharpness_popup {
+          position: absolute;
+          display: none;
+          border: 1px solid;
+          background: rgba(204, 204, 204, 0.9);
+          z-index: 10;
+      }
+
+      #cp_div {
+          display: none;
+      }
+
+  </style>
+
+  <script type="text/javascript">
+    var WEAPON_LIST = null;
+    var HORN_MELODY_MAP = null;
+
+    $.ajax({
+        url: "/jsonapi/mhgu/weapon/_all.json",
+        async: false,
+        dataType: "json",
+        success: function (data) {
+            WEAPON_LIST = data;
+            console.log("weapon count " + WEAPON_LIST.length);
+        }
+    });
+
+    $.ajax({
+        url: "/jsonapi/mhgu/horn_melody/_index_notes.json",
+        async: false,
+        dataType: "json",
+        success: function (data) {
+            HORN_MELODY_MAP = data;
+        }
+    });
+
+
+    var template_row = new EJS({ url: "/templates/weaponrow.ejs" });
+
+    $(document).ready(function(){
+        init_page();
+
+        $("#sharpness_popup").on("click", function(evt) {
+            $(this).html("").offset({top:0, left:0}).hide();
+        });
+
+        $("#weapon_table").on("click", "#sharpness_td", function(evt) {
+            var td_obj = $(evt.currentTarget);
+            var offset = td_obj.offset();
+            var sharpness = td_obj.data("sharpness");
+            $("#sharpness_popup").html(sharpness).offset(offset).show();
+        });
+    });
+
+    function init_page() {
+        var qs = load_qs();
+        $(window).on("popstate", function(e) {
+            var oe = e.originalEvent;
+            if (oe.state !== null) {
+                console.log("popState:" + JSON.stringify(oe.state));
+                update_weapon_list(oe.state);
+            }
+        });
+        $("#search").click(function(evt) {
+            var state = get_ui_state();
+            save_state(state);
+            update_weapon_list(state);
+        });
+
+        if (qs) {
+            update_weapon_list(qs);
+        }
+    }
+
+    function load_qs() {
+        if ($.QueryString["weapon_type"]) {
+            load_state($.QueryString);
+            return $.QueryString;
+        }
+        return null;
+    }
+
+    function get_ui_state() {
+        return { "weapon_type": $("#weapon_type").val(),
+                 "weapon_element": $("#weapon_element").val(),
+                 "weapon_final": $("#weapon_final").is(":checked"),
+                 "weapon_name_text": $("#weapon_name_text").val(),
+                 "village_stars": $("#village_stars").val(),
+                 "guild_stars": $("#guild_stars").val(),
+                 "permit_stars": $("#permit_stars").val(),
+                 "arena_stars": $("#arena_stars").val() };
+    }
+
+    function load_state(state) {
+        $("#weapon_type").val(state["weapon_type"]);
+        $("#weapon_element").val(state["weapon_element"]);
+        final = state["weapon_final"];
+        if (typeof final == "string") {
+            final = final.toLowerCase();
+            state["weapon_final"] = (final == "true" || final == "1");
+        }
+        $("#weapon_final").prop("checked", state["weapon_final"]);
+        $("#weapon_name_text").val(state["weapon_name_text"]);
+        $("#village_stars").val(state["village_stars"] || "Any");
+        $("#guild_stars").val(state["guild_stars"] || "Any");
+        $("#permit_stars").val(state["permit_stars"] || "Any");
+        $("#arena_stars").val(state["arena_stars"] || "Any");
+    }
+
+    function save_state(state, replace) {
+        var url = "weaponlist.html?" + encode_qs(state);
+        if (replace) {
+            window.history.replaceState(state, "", url);
+        } else {
+            window.history.pushState(state, "", url);
+        }
+    }
+
+    function match_stars(match_value, weapon_value) {
+        // NOTE: a null weapon_value can be not available, or no data
+        // available (should probably fix this)
+        if (match_value == "Any" || match_value == ""
+                || match_value == undefined || match_value == null) {
+            return true;
+        }
+        if (match_value == "None") {
+            // for None, allow null values, because null can be no requirements
+            // or no data available
+            if (weapon_value != null) {
+                return false;
+            }
+            return true;
+        }
+        // if matching a specific value, require a non-null weapon value
+        if (weapon_value == null) {
+            return false;
+        }
+        match_value = parseInt(match_value);
+        if (weapon_value > match_value) {
+            return false;
+        }
+        return true;
+    }
+
+    function weapon_predicate(state, weapon_data) {
+        var weapon_type = state["weapon_type"];
+        var weapon_element = state["weapon_element"];
+        var final_only = state["weapon_final"];
+        var weapon_names = state["weapon_name_text"].split("|");
+        var village_stars = state["village_stars"];
+        var guild_stars = state["guild_stars"];
+        var permit_stars = state["permit_stars"];
+        var arena_stars = state["arena_stars"];
+
+        // do this first to simplify debugging specific weapons that aren't
+        // matching when they should via breakpoints
+        if (weapon_names && !list_match(weapon_names, [weapon_data["name"]])) {
+            return false;
+        }
+
+        // allow satisfying quest filter with village or guild, since they
+        // involve essentially the same quests, rewards, and mosnters,
+        // but if permit or arena filters are set, they must be satisfied
+        // independently
+        if (! match_stars(village_stars, weapon_data["village_stars"])
+                && ! match_stars(guild_stars, weapon_data["guild_stars"])) {
+            return false;
+        }
+        if (! match_stars(permit_stars, weapon_data["permit_stars"])) {
+            return false;
+        }
+        if (! match_stars(arena_stars, weapon_data["arena_stars"])) {
+            return false;
+        }
+
+        if (final_only && weapon_data["final"] != 1) {
+            return false;
+        }
+
+        if (weapon_type != "All" && weapon_type != weapon_data["wtype"]) {
+            return false;
+        }
+
+        if (weapon_element != "All"
+        &&  weapon_element != weapon_data["element"]
+        &&  weapon_element != weapon_data["element_2"]
+        &&  weapon_element != weapon_data["awaken"]
+        &&  weapon_element != weapon_data["phial"]) {
+            if (weapon_element != "None"
+            || (weapon_data["element"] != null && weapon_data["element"] != "")
+            || (weapon_data["awaken"] != null && weapon_data["awaken"] != "")) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    function list_match(needles, string_list) {
+        var found = false;
+        for (var i=0; i<string_list.length; i++) {
+            for (var j=0; j<needles.length; j++) {
+                if (string_list[i].search(needles[j]) >= 0) {
+                    found = true;
+                    break;
+                }
+                if (found) {
+                    break;
+                }
+            }
+        }
+        return found;
+    }
+
+    function update_weapon_list(state) {
+        var match_count = 0;
+        console.log("updating weapon list: " + JSON.stringify(state));
+        var results = [];
+        $.each(WEAPON_LIST, function(i, weapon_data) {
+            if (weapon_predicate(state, weapon_data)) {
+                weapon_data["id"] = i;
+                weapon_data["sharpness_width"] = 2;
+                weapon_data["url"] = "weaponplanner.html?weapon="
+                                     + encodeURIComponent(weapon_data["name"]);
+                weapon_data["bug_type"] = null;
+                weapon_data["arc_type"] = null;
+                match_count += 1;
+                set_sharpness_titles(weapon_data);
+                set_bow_values(weapon_data);
+                set_horn_melodies_title(weapon_data, HORN_MELODY_MAP);
+                weapon_data["wtype_short"] =
+                          WEAPON_TYPE_ABBR[weapon_data["wtype"]];
+                weapon_data["ELEMENT_ABBR"] = ELEMENT_ABBR;
+                var html = template_row.render(weapon_data);
+                results.push([weapon_data, html]);
+            }
+        });
+        results.sort(function (a, b) {
+            avals = get_weapon_sort_values(a[0]);
+            bvals = get_weapon_sort_values(b[0]);
+            return cmp_arrays(bvals, avals);
+        });
+        $("#weapon_table").empty();
+        $.each(results, function(i, pair) {
+            $("#weapon_table").append(pair[1]);
+        });
+        console.log("match count: " + match_count);
+
+    }
+  </script>
+</head>
+<body>
+<div>
+  <table>
+  <tr>
+    <td><label for="weapon_type"
+               title="Only show weapons of this type"
+        >Type:</label></td>
+    <td><select id="weapon_type">
+        <option value="All">All</option>
+        <option value="Great Sword">Great Sword</option>
+        <option value="Long Sword">Long Sword</option>
+        <option value="Sword and Shield">Sword and Shield</option>
+        <option value="Dual Blades">Dual Blades</option>
+        <option value="Hammer">Hammer</option>
+        <option value="Hunting Horn">Hunting Horn</option>
+        <option value="Lance">Lance</option>
+        <option value="Gunlance">Gunlance</option>
+        <option value="Switch Axe">Switch Axe</option>
+        <option value="Charge Blade">Charge Blade</option>
+        <option value="Insect Glaive">Insect Glaive</option>
+        <!--option value="Light Bowgun">Light Bowgun</option-->
+        <!--option value="Heavy Bowgun">Heavy Bowgun</option-->
+        <option value="Bow">Bow</option>
+    </select></td>
+    <td><label for="weapon_element"
+               title="Only show weapons with this element (native or requiring awaken)"
+        >Element:</label></td>
+    <td><select id="weapon_element">
+        <option value="All">All</option>
+        <option value="None">None</option>
+        <option value="Fire">Fire</option>
+        <option value="Water">Water</option>
+        <option value="Thunder">Thunder</option>
+        <option value="Ice">Ice</option>
+        <option value="Dragon">Dragon</option>
+        <option value="Poison">Poison</option>
+        <option value="Paralysis">Paralysis</option>
+        <option value="Sleep">Sleep</option>
+        <option value="Blastblight">Blast</option>
+    </select></td>
+    <td><label for="weapon_final"
+               title="Only show weapons with no furthur upgrades"
+        >Final?</label></td>
+    <td><input id="weapon_final" type="checkbox" /></td>
+    <td><button id="search">Search</button></td>
+  </tr>
+  <tr>
+    <td colspan="7">
+      <label>Quest Level:</label>
+      <select id="village_stars">
+       <option value="Any">Village Any</option>
+       <option value="1">Village 1*</option>
+       <option value="2">Village 2*</option>
+       <option value="3">Village 3*</option>
+       <option value="4">Village 4*</option>
+       <option value="5">Village 5*</option>
+       <option value="6">Village 6*</option>
+      </select>
+      <select id="guild_stars">
+       <option value="Any">Guild Any</option>
+       <option value="1">Guild 1*</option>
+       <option value="2">Guild 2*</option>
+       <option value="3">Guild 3*</option>
+       <option value="4">Guild 4*</option>
+       <option value="5">Guild 5*</option>
+       <option value="6">Guild 6*</option>
+       <option value="7">Guild 7*</option>
+      </select>
+      <select id="permit_stars">
+       <option value="Any">Permit Any</option>
+       <option value="None">Permit None</option>
+       <option value="1">Permit 1*</option>
+       <option value="2">Permit 2*</option>
+       <option value="3">Permit 3*</option>
+       <option value="4">Permit 4*</option>
+       <option value="5">Permit 5*</option>
+       <option value="6">Permit 6*</option>
+       <option value="7">Permit 7*</option>
+       <option value="8">Permit 8*</option>
+       <option value="9">Permit 9*</option>
+       <option value="10">Permit 10*</option>
+      </select>
+      <select id="arena_stars">
+       <option value="Any">Arena Any</option>
+       <option value="None">Arena None</option>
+       <option value="1">Arena 1*</option>
+       <option value="2">Arena 2*</option>
+       <option value="3">Arena 3*</option>
+       <option value="4">Arena 4*</option>
+       <option value="5">Arena 5*</option>
+       <option value="6">Arena 6*</option>
+       <option value="7">Arena 7*</option>
+      </select>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="7">
+      <label for="weapon_name_text"
+             title="Show only weapons with a match in the name. List of strings separated by '|' (vertical bar)."
+             >Name:</label>
+      <input id="weapon_name_text" size="15" />
+    </td>
+  </tr>
+  </table>
+</div>
+<table id="weapon_table">
+</table>
+<div id="sharpness_popup"></div>
+</body>
diff --git a/web/mhgu/weaponplanner.html b/web/mhgu/weaponplanner.html
new file mode 100644
index 0000000..fe283e3
--- /dev/null
+++ b/web/mhgu/weaponplanner.html
@@ -0,0 +1,275 @@
+<html>
+<head>
+  <title>Poogie's Weapon Planner</title>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
+  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
+
+  <script type="text/javascript" src="/js/ejs_production.js"></script>
+
+  <script type="text/javascript" src="/js/common.js"></script>
+
+  <style>
+      label {
+          font-weight: bold;
+      }
+
+      body {
+          font-family: sans, sans-serif;
+      }
+
+      td.plus {
+          background-color: LightCyan;
+      }
+
+      td.minus {
+          background-color: LightPink;
+      }
+
+      td.num {
+          text-align: right;
+      }
+
+      /*@media (max-width: 600) {*/
+      .flexbox {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+      }
+
+      .sharpness-bar {
+          border: 1px #d3d3d3 solid;
+          min-width: 92px;
+          height: 10px;
+          background-color: #d3d3d3;
+          float: left;
+          clear: both;
+      }
+
+      .sharpness-bar span {
+          display: inline-block;
+          height: 100%;
+          float: left;
+      }
+
+      .sharpness-bar .red {
+          background-color: #C00C38 !important;
+      }
+
+      .sharpness-bar .orange {
+          background-color: #E85018 !important;
+      }
+
+      .sharpness-bar .yellow {
+          background-color: #F0C830 !important;
+      }
+
+      .sharpness-bar .green {
+          background-color: #58D000 !important;
+      }
+
+      .sharpness-bar .blue {
+          background-color: #3068E8 !important;
+      }
+
+      .sharpness-bar .white {
+          background-color: #F0F0F0 !important;
+      }
+
+      .sharpness-bar .purple {
+          background-color: #c3c !important;
+      }
+
+  </style>
+
+  <script type="text/javascript">
+    var DATA_PATH = "/jsonapi/mhgu/";
+
+    var template_path = new EJS({ url: "/templates/weaponpath.ejs" });
+    var template_stats = new EJS({ url: "/templates/weaponstats.ejs" });
+
+    $(document).ready(function(){
+        setup_weapon_autocomplete("#weapon", autocomplete_predicate,
+                                  init_page, update_search);
+    });
+
+    function init_page() {
+        load_qs();
+        $("#search").click(update_search);
+        $(window).on("popstate", function(e) {
+            var oe = e.originalEvent;
+            if (oe.state !== null) {
+                console.log("popState:" + JSON.stringify(oe.state));
+                $("#weapon_type").val(oe.state["weapon_type"]);
+                $("#weapon_type").change();
+                show_trees(oe.state["weapon"]);
+            }
+        });
+        $("#weapon_type").change(function(evt) {
+            update_weapon_autocomplete("#weapon", autocomplete_predicate,
+                                       update_search);
+            $("#weapon").val("");
+        });
+    }
+
+    function load_qs() {
+        var wtype = $.QueryString["weapon_type"];
+        var weapon = $.QueryString["weapon"];
+        if (!wtype) {
+            wtype = "All";
+        }
+        $("#weapon_type").val(wtype);
+        $("#weapon_type").change();
+        if (weapon) {
+            show_trees(weapon);
+            console.log("replaceState: " + weapon);
+            save_state(get_state(), true);
+        }
+    }
+
+    function get_state() {
+        return { "weapon": $("#weapon").val(),
+                 "weapon_type": $("#weapon_type").val() };
+    }
+
+    function save_state(state, replace) {
+        var url = "/mhgu/weaponplanner.html?" + encode_qs(state);
+        if (replace) {
+            window.history.replaceState(state, "", url);
+        } else {
+            window.history.pushState(state, "", url);
+        }
+    }
+
+    function autocomplete_predicate(weapon_data) {
+        var weapon_type = $("#weapon_type").val();
+
+        if (weapon_type != "All" && weapon_type != weapon_data["wtype"]) {
+            return false;
+        }
+
+        return true;
+    }
+
+    function update_search() {
+        var weapon_name = $("#weapon").val();
+
+        if (!weapon_name) return;
+
+        if (window.history.state
+            && window.history.state["weapon"] == weapon_name) {
+            console.log("weapon not changed, skipping update");
+            return;
+        }
+
+        show_trees(weapon_name);
+        console.log("pushState: " + weapon_name);
+        save_state(get_state(), false);
+    }
+
+    function show_trees(weapon_name) {
+        console.log("show_trees '" + weapon_name + "'");
+        if (!weapon_name) return;
+        weapon_id = WEAPON_NAME_IDX[weapon_name][0];
+        console.log("show_trees(" + weapon_name + "): " + weapon_id);
+        $("#weapon").val(weapon_name);
+        $("#results").html("");
+        $("#weapon_stats").html("");
+        $.getJSON(DATA_PATH + "weapon/" + weapon_id + ".json",
+                  function(data) {
+                      set_sharpness_titles(data);
+                      set_horn_melodies_title(data);
+                      if (data["parent_id"]) {
+                          var parent_obj = WEAPON_ID_IDX[data["parent_id"]][0];
+                          data["parent_name"] = parent_obj["name"];
+                      } else {
+                          data["parent_name"] = null;
+                      }
+                      data["sharpness_width"] = 2;
+                      var html = template_stats.render(data);
+                      $("#weapon_stats").html(html);
+                  });
+
+        $.getJSON(DATA_PATH + "weapon/" + weapon_id + "_tree.json",
+                  function(data) {
+                      // first pass: collect all components and sort them
+                      var all_dict = {};
+                      for (i=0; i<data.length; i++) {
+                          var components = Object.keys(data[i]["components"]);
+                          for (j=0; j<components.length; j++) {
+                              all_dict[components[j]] = 0;
+                          }
+                      }
+                      var all_components = Object.keys(all_dict);
+                      all_components.sort();
+                      // second pass: generate the fieldset for each weapon
+                      //  path. Note that the template uses all components
+                      //  to order the components and make them line up
+                      for (i=0; i<data.length; i++) {
+                          delta = {};
+                          path = data[i];
+                          components = path["components"]
+                          path_string = "";
+                          for (j=0; j<path["path"].length; j++) {
+                              if (j != 0) {
+                                  path_string += " -&gt; ";
+                              }
+                              path_string += path["path"][j]["name"];
+                          }
+                          path["path_string"] = path_string.replace(/"/g,
+                                                                    '&quot;');
+                          path["all_components"] = all_components;
+                          path["component_list"] = Object.keys(components);
+                          if (i > 0) {
+                              prev_comps = data[i-1]["components"];
+                              $.each(components, function(name, quantity) {
+                                   if (name in prev_comps) {
+                                       delta[name] = components[name]
+                                                     - prev_comps[name];
+                                   }
+                              });
+                          }
+                          path["delta"] = delta;
+                          path["component_list"].sort();
+                          var html = template_path.render(path);
+                          $("#results").append(html);
+                      }
+                  });
+    }
+  </script>
+</head>
+<body>
+<div>
+  <table>
+  <tr>
+    <td><label for="weapon_type">Type:</label></td>
+    <td><select id="weapon_type">
+        <option value="All">All</option>
+        <option value="Great Sword">Great Sword</option>
+        <option value="Long Sword">Long Sword</option>
+        <option value="Sword and Shield">Sword and Shield</option>
+        <option value="Dual Blades">Dual Blades</option>
+        <option value="Hammer">Hammer</option>
+        <option value="Hunting Horn">Hunting Horn</option>
+        <option value="Lance">Lance</option>
+        <option value="Gunlance">Gunlance</option>
+        <option value="Switch Axe">Switch Axe</option>
+        <option value="Charge Blade">Charge Blade</option>
+        <option value="Insect Glaive">Insect Glaive</option>
+        <option value="Light Bowgun">Light Bowgun</option>
+        <option value="Heavy Bowgun">Heavy Bowgun</option>
+        <option value="Bow">Bow</option>
+    </select></td>
+  </tr>
+  <tr>
+    <td><label for="weapon">Weapon:</label></td>
+    <td><input id="weapon" name="weapon" size="20" />
+    <button id="search">Ask Poogie</button></td>
+  </tr>
+  </table>
+</div>
+<div id="weapon_stats"></div>
+<div id="results" class="flexbox"></div>
+</body>
