new web index, refactor, data fixes

This commit is contained in:
Bryce Allen
2015-05-20 11:05:32 -05:00
parent 9bad89b0af
commit f6fa342ac4
12 changed files with 341 additions and 151 deletions

View File

@@ -1,65 +1,74 @@
<html>
<head>
<title>Monster Hunter Item Search</title>
<title>Poogie's Toolbox</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>
<style>
.flex {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
<script src="js/common.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setup_item_autocomplete("#item");
setup_weapon_autocomplete("#weapon_type", "#weapon");
});
</script>
<style>
label {
font-weight: bold;
font-family: sans, sans-serif;
}
#output { flex: 99 1 auto; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#search").click(update_search);
$("#item").keypress(function(e) {
if (e.which == 13) { update_search(); }
});
setup_autocomplete();
});
function setup_autocomplete() {
$.getJSON("/mhapi/item_name_list",
function(data) {
$("#item").autocomplete({ source: data });
});
}
function update_search() {
var item_name = $.trim($("#item").val());
$.get("/mhapi/rewards",
{ "item_name": item_name },
function(data) {
$("#output").text(data);
});
}
</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>
<form action="recommends.html" method="GET">
<fieldset>
<legend title="Find the best quests and armor skills for farming an item."
>Poogie Recommends</legend>
<label for="item">Item:</label>
<input id="item" name="item" type="text" size="20" />
<input type="submit" value="Ask Poogie" />
<p></p>
</fieldset>
</form>
<form action="weaponplanner.html" method="GET">
<fieldset>
<legend title="Compare the cost of making a weapon from different starting points in the tree"
>Poogie's Weapon Planner</legend>
<table>
<tr>
<td><label for="type">Type:</label></td>
<td><select id="weapon_type" name="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" weapon="text" size="20" />
<input type="submit" value="Ask Poogie" /></td>
</tr>
</table>
</fieldset>
</form>
<fieldset>
<legend title="Plan armor sets">Poogie Outfitters</legend>
<a href="outfitters.html">Armor set planner</a>
</fieldset>
</body>

109
web/js/common.js Normal file
View File

@@ -0,0 +1,109 @@
WEAPON_NAME_IDX = {};
WEAPON_TYPE_IDX = {};
(function($) {
$.QueryString = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'))
})(jQuery);
function encode_utf8(s) {
return unescape(encodeURIComponent(s));
}
function get_base_path() {
var path = document.location.pathname;
return path.substring(0, path.lastIndexOf('/'));
}
function normalize_name(s) {
var chars = s.split("");
var cap_next = true;
var i;
for (i=0; i<chars.length; i++) {
if (cap_next) {
chars[i] = chars[i].toUpperCase();
cap_next = false;
} else if (chars[i] == "." || chars[i] == " " || chars[i] == "-") {
cap_next = true;
} else {
chars[i] = chars[i].toLowerCase();
}
}
return chars.join("");
}
function setup_item_autocomplete(selector) {
var DATA_PATH = get_base_path() + "/rewards/";
$.getJSON(DATA_PATH + "items.json",
function(data) {
$(selector).autocomplete({ source: data });
});
}
function setup_weapon_autocomplete(type_selector, weapon_selector, ready_fn,
change_fn) {
var DATA_PATH = get_base_path() + "/jsonapi/";
$.getJSON(DATA_PATH + "weapon/_index_name.json",
function(data) {
WEAPON_NAME_IDX = data;
$.getJSON(DATA_PATH + "weapon/_index_wtype.json",
function(data) {
WEAPON_TYPE_IDX = data;
if (ready_fn) {
ready_fn();
}
_setup_weapon_autocomplete(
$(type_selector).val(),
weapon_selector,
change_fn);
$(type_selector).change(function(evt) {
_setup_weapon_autocomplete(
$(type_selector).val(),
weapon_selector, change_fn);
});
});
});
}
function _setup_weapon_autocomplete(type, weapon_selector, change_fn) {
//alert("set weapon type " + type + " (" + weapon_selector + ")");
var source;
if (type == "All") {
source = Object.keys(WEAPON_NAME_IDX);
//alert(source[10]);
} else {
var object_list = WEAPON_TYPE_IDX[type];
source = [];
for (i=0; i<object_list.length; i++) {
source.push(object_list[i]["name"]);
}
}
$(weapon_selector).autocomplete(
{ source: source,
change: function (event, ui) {
if (change_fn) {
change_fn(ui.item["value"]);
}
}
}
);
$(weapon_selector).keypress(function(e) {
if (e.which == 13 && change_fn) {
change_fn($(weapon_selector).val());
}
});
}

View File

@@ -9,6 +9,8 @@
<script type="text/javascript" src="js/ejs_production.js"></script>
<script src="js/common.js"></script>
<style>
label {
font-weight: bold;
@@ -309,11 +311,6 @@
localStorage.setItem("decoration_name_lists", svalue);
}
function get_base_path() {
var path = document.location.pathname;
return path.substring(0, path.lastIndexOf('/'));
}
function setup_autocomplete() {
$.getJSON(DATA_PATH + "armor/_index_slot.json",
function(data) {

View File

@@ -7,6 +7,8 @@
<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%;
@@ -31,41 +33,13 @@
$("#item").keypress(function(e) {
if (e.which == 13) { update_search(); }
});
setup_autocomplete();
});
function encode_utf8(s) {
return unescape(encodeURIComponent(s));
}
function get_base_path() {
var path = document.location.pathname;
return path.substring(0, path.lastIndexOf('/'));
}
function normalize_name(s) {
var chars = s.split("");
var cap_next = true;
var i;
for (i=0; i<chars.length; i++) {
if (cap_next) {
chars[i] = chars[i].toUpperCase();
cap_next = false;
} else if (chars[i] == "." || chars[i] == " " || chars[i] == "-") {
cap_next = true;
} else {
chars[i] = chars[i].toLowerCase();
}
setup_item_autocomplete("#item");
var item_name = $.QueryString["item"];
if (item_name) {
$("#item").val(item_name);
update_search();
}
return chars.join("");
}
function setup_autocomplete() {
$.getJSON(DATA_PATH + "items.json",
function(data) {
$("#item").autocomplete({ source: data });
});
}
});
function update_search() {
var item_name = $.trim($("#item").val());

View File

@@ -1,6 +1,6 @@
<html>
<head>
<title>Poogie's Weapon Tree</title>
<title>Poogie's Weapon Planner</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@@ -9,6 +9,8 @@
<script type="text/javascript" src="js/ejs_production.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<style>
label {
font-weight: bold;
@@ -42,36 +44,23 @@
<script type="text/javascript">
var DATA_PATH = get_base_path() + "/jsonapi/";
var WEAPON_NAME_IDX = {};
var template_path = new EJS({ url: "templates/weaponpath.ejs" });
$(document).ready(function(){
$.getJSON(DATA_PATH + "weapon/_index_name.json",
function(data) {
WEAPON_NAME_IDX = data;
setup_autocomplete();
});
setup_weapon_autocomplete("#weapon_type", "#weapon",
load_qs, show_trees);
});
function get_base_path() {
var path = document.location.pathname;
return path.substring(0, path.lastIndexOf('/'));
}
function setup_autocomplete() {
$("#weapon").autocomplete(
{ source: Object.keys(WEAPON_NAME_IDX),
change: function (event, ui) {
show_trees(ui.item["value"]);
}
}
);
$("#weapon").keypress(function(e) {
if (e.which == 13) {
show_trees($("#weapon").val());
}
});
function load_qs() {
var wtype = $.QueryString["weapon_type"];
var weapon = $.QueryString["weapon"];
if (wtype) {
$("#weapon_type").val(wtype);
}
if (weapon) {
$("#weapon").val(weapon);
show_trees(weapon);
}
}
function show_trees(weapon_name) {
@@ -115,9 +104,33 @@
</head>
<body>
<div>
<label for="weapon">Weapon:</label>
<input id="weapon" type="text" size="20" />
<button id="search">Ask Poogie</button>
<table>
<tr>
<td><label for="type">Type:</label></td>
<td><select id="weapon_type" name="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" weapon="text" size="20" />
<input type="submit" value="Ask Poogie" /></td>
</tr>
</table>
</div>
<div id="results" class="flexbox"></div>
</body>