From ce7e915e269dbbeedb629b577866a6ffd6882345 Mon Sep 17 00:00:00 2001
From: twitchtoolkitexample
 <49097923+twitchtoolkitexample@users.noreply.github.com>
Date: Sat, 8 Jun 2019 10:06:57 -0700
Subject: [PATCH] Update index.html

---
 index.html | 455 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 259 insertions(+), 196 deletions(-)
diff --git a/index.html b/index.html
index 7c3a6329..0615dae0 100644
--- a/index.html
+++ b/index.html
@@ -1,224 +1,287 @@
 <!doctype html>
 <html lang="en">
-  <head>
+
+<head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
     <title>Hodl's Item List</title>
     <script type="text/javascript">
-    	var itemListURL = "https://raw.githubusercontent.com/twitchtoolkit/item-list/master/itemlist.json";
-    	var eventListURL = "https://raw.githubusercontent.com/twitchtoolkit/item-list/master/eventlist.json";
+        const itemListURL = "https://raw.githubusercontent.com/hodldeeznuts/hodl.github.io/master/itemlist.json";
+        const eventListURL = "https://raw.githubusercontent.com/hodldeeznuts/hodl.github.io/master/eventlist.json";
     </script>
-  </head>
-	<body>
+</head>
 
-	<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-      <a class="navbar-brand" href="#">HodlHodl</a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-
-      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-        <ul class="navbar-nav mr-auto">
-          <li class="nav-item active">
-            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="https://www.twitch.tv/">Twitch</a>
-          </li>
-        </ul>
-      </div>
+<body>
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+        <a class="navbar-brand" href="#">HodlHodl</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+            <ul class="navbar-nav mr-auto">
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://www.twitch.tv/hodlhodl">My Stream</a>
+                </li>
+            </ul>
+        </div>
     </nav>
-
     <main role="main">
-	    <div class="jumbotron">
-	        <div class="container">
-	          <h1 class="display-3">TwitchToolkit</h1>
-	          <p>TwitchToolkit is a mod written by Twitch.tv/hodlhodl that integrates storytelling decisions into chat votes, awards viewers coins for watching, and those coins can be spent on items/events in game.</p>
-	          	<ul class="list-group">
-					<li class="list-group-item">!bal - check balance and karma rate</li>
-					<li class="list-group-item">!buyevent - Syntax: !buyevent skillincrease - purchase an event</li>
-					<li class="list-group-item">!buyitem - Syntax: !buyitem beer 2 - purchase an item</li>
-					<li class="list-group-item">!whatiskarma - explains what the karma system is</li>
-					<li class="list-group-item">!purchaselist - gives users a link to the public purchase list</li>
-					<li class="list-group-item">!instructions - gives users info on using the mod</li>
-					<li class="list-group-item">!modinfo - gives users info about the mod</li>
-					<li class="list-group-item">!modsettings - gives user info on how many coins are being earned and global settings</li>
-					<li class="list-group-item">!giftcoins - Syntax: !giftcoins @username 100 - give another viewer your coins</li>
-					<li class="list-group-item">!toolkitcmds - shows all available commands to the user, this does not translate by default so it can be universally recognized.</li>
-				</ul>
-	        </div>
-	      </div>
-
-		<div class="container">
-	        <!-- Example row of columns -->
-	        <div class="row">
-	          <div class="col-md-6">
-				<div id="items">
-
-					<div class="input-group input-group-sm mb-3">
-					  <div class="input-group-prepend">
-					    <span class="input-group-text" id="inputGroup-sizing-sm">Search</span>
-					  </div>
-					  <input type="text" class="form-control search" aria-label="Search" aria-describedby="inputGroup-sizing-sm">
-					</div>
-
-					<p>
-						<button type="button" class="btn btn-primary sort" data-sort="abr">
-							Sort
-						</button>
-						<button type="button" class="btn btn-primary sort" data-sort="price">
-							Sort by Price
-						</button>
-					</p>
-
-					<table class="table items">
-
-						<tr>
-							<th scope="col" class="sort" data-sort="abr">Name</th>
-							<th scope="col" class="sort" data-sort="price">Price</th>
-						</tr>
-
-						<tbody class="list">
-						</tbody>
-
-					</table>
-				</div>
-	          </div>
-	          <div class="col-md-6">
-				<div id="events">
-
-					<div class="input-group input-group-sm mb-3">
-					  <div class="input-group-prepend">
-					    <span class="input-group-text" id="inputGroup-sizing-sm">Search</span>
-					  </div>
-					  <input type="text" class="form-control search" aria-label="Search" aria-describedby="inputGroup-sizing-sm">
-					</div>
-
-					<p>
-						<button type="button" class="btn btn-primary sort" data-sort="abr">
-							Sort
-						</button>
-						<button type="button" class="btn btn-primary sort" data-sort="price">
-							Sort by Price
-						</button>
-						<button type="button" class="btn btn-primary sort" data-sort="karmatype">
-							Sort by Karma
-						</button>
-					</p>
-
-					<table class="table events">
-
-						<tr>
-							<th scope="col" class="sort" data-sort="abr">Name</th>
-							<th scope="col" class="sort" data-sort="price">Price</th>
-							<th scope="col" class="sort" data-sort="karmatype">Karma</th>
-						</tr>
-
-						<tbody class="list">
-						</tbody>
-
-					</table>
-				</div>
-	          </div>
-	        </div>
-
-	        <hr>
-
-	      </div>
-	  </main>
-
+        <div class="jumbotron">
+            <div class="container">
+                <h1 class="display-3">TwitchToolkit</h1>
+                <p>TwitchToolkit is a mod written by Twitch.tv/hodlhodl that integrates storytelling decisions into chat votes, awards viewers coins for watching, and those coins can be spent on items/events in game.</p>
+                <ul class="list-group">
+                    <li class="list-group-item">!bal - check balance and karma rate</li>
+                    <li class="list-group-item">!buy - Syntax: !buy beer 6 - purchase an item or event</li>
+                    <li class="list-group-item">!whatiskarma - explains what the karma system is</li>
+                    <li class="list-group-item">!purchaselist - gives users a link to the public purchase list</li>
+                    <li class="list-group-item">!instructions - gives users info on using the mod</li>
+                    <li class="list-group-item">!modinfo - gives users info about the mod</li>
+                    <li class="list-group-item">!modsettings - gives user info on how many coins are being earned and global settings</li>
+                    <li class="list-group-item">!giftcoins - Syntax: !giftcoins @username 100 - give another viewer your coins</li>
+                    <li class="list-group-item">!toolkitcmds - shows all available commands to the user, this does not translate by default so it can be universally recognized.</li>
+                    <li class="list-group-item">!buy ticket - join the viewer name queue</li>
+                    <li class="list-group-item">!mypawnstory - view information about your pawns backstory</li>
+                    <li class="list-group-item">!mypawnskills - view information about your pawns skills</li>
+                </ul>
+            </div>
+        </div>
+        <div ng-app='tabs' ng-controller='tabCtrl'>
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class='tabs'>
+                            <form>
+                                <div class="form-group">
+                                    <button class="btn btn-success" ng-class="{'active': (selected == '1')}" ng-click='selected=1'>
+                                        Items
+                                    </button>
+                                    <button class="btn btn-success" ng-class="{'active': (selected == '2')}" ng-click='selected=2'>
+                                        Events
+                                    </button>
+                                </div>
+                                <div class="form-group row">
+                                    <label class="col-sm-2 col-form-label" for="">Price Between:</label>
+                                    <div class="col-sm-2">
+                                        <input type="number" class="form-control" id="item-price-min" placeholder="0">
+                                    </div>
+                                    <div class="col-sm-2">
+                                        <input type="number" class="form-control" id="item-price-max" placeholder="100000">
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div class="row" ng-show='selected == 1'>
+                    <div class="col-md-12">
+                        <div id="items">
+                            <div class="input-group input-group-sm mb-3">
+                                <div class="input-group-prepend">
+                                    <span class="input-group-text" id="inputGroup-sizing-sm">Search</span>
+                                </div>
+                                <input type="text" class="form-control search" aria-label="Search" aria-describedby="inputGroup-sizing-sm">
+                            </div>
+                            <p>
+                                <button type="button" class="btn btn-primary sort" data-sort="abr">
+                                    Sort
+                                </button>
+                                <button type="button" class="btn btn-primary sort" data-sort="price">
+                                    Sort by Price
+                                </button>
+                            </p>
+                            <table class="table items">
+                                <tr>
+                                    <th scope="col" class="sort" data-sort="abr">Name</th>
+                                    <th scope="col" class="sort" data-sort="price">Price</th>
+                                    <th scope="col" class="sort" data-sort="category">Category</th>
+                                </tr>
+                                <tbody class="list">
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="row" ng-show='selected == 2'>
+                    <div class="col-md-12">
+                        <div id="events">
+                            <div class="input-group input-group-sm mb-3">
+                                <div class="input-group-prepend">
+                                    <span class="input-group-text" id="inputGroup-sizing-sm">Search</span>
+                                </div>
+                                <input type="text" class="form-control search" aria-label="Search" aria-describedby="inputGroup-sizing-sm">
+                            </div>
+                            <p>
+                                <button type="button" class="btn btn-primary sort" data-sort="abr">
+                                    Sort
+                                </button>
+                                <button type="button" class="btn btn-primary sort" data-sort="price">
+                                    Sort by Price
+                                </button>
+                                <button type="button" class="btn btn-primary sort" data-sort="karmatype">
+                                    Sort by Karma
+                                </button>
+                            </p>
+                            <table class="table events">
+                                <tr>
+                                    <th scope="col" class="sort" data-sort="abr">Name</th>
+                                    <th scope="col" class="sort" data-sort="price">Price</th>
+                                    <th scope="col" class="sort" data-sort="karmatype">Karma</th>
+                                </tr>
+                                <tbody class="list">
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container">
+            <!-- Example row of columns -->
+            <div class="row">
+                <div class="col-md-6">
+                </div>
+                <div class="col-md-6">
+                </div>
+            </div>
+            <hr>
+        </div>
+    </main>
     <footer class="text-muted">
-      <div class="container">
-        <p class="float-right">
-          <a href="#">Back to top</a>
-        </p>
-        <p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
-        <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
-      </div>
+        <div class="container">
+            <p class="float-right">
+                <a href="#">Back to top</a>
+            </p>
+            <p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
+            <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
+        </div>
     </footer>
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <script src="https://embed.twitch.tv/embed/v1.js"></script>
-	<style>
-	.sort:after {
-	  display:inline-block;
-	  width: 0;
-	  height: 0;
-	  border-left: 5px solid transparent;
-	  border-right: 5px solid transparent;
-	  border-bottom: 5px solid transparent;
-	  content:"";
-	  position: relative;
-	  top:-10px;
-	  right:-5px;
-	}
-	.sort.asc:after {
-	  width: 0;
-	  height: 0;
-	  border-left: 5px solid transparent;
-	  border-right: 5px solid transparent;
-	  border-top: 5px solid #fff;
-	  content:"";
-	  position: relative;
-	  top:4px;
-	  right:-5px;
-	}
-	.sort.desc:after {
-	  width: 0;
-	  height: 0;
-	  border-left: 5px solid transparent;
-	  border-right: 5px solid transparent;
-	  border-bottom: 5px solid #fff;
-	  content:"";
-	  position: relative;
-	  top:-4px;
-	  right:-5px;
-	}
-	</style>
-	<script type="text/javascript">
-		$.getJSON( itemListURL, function( data ) {
-		  var options = {
-		      valueNames: ['abr', 'price'],
-		      item: '<tr><td class="abr" scope="row"></td><td class="price"></td></tr>'
-		    };
+    <style>
+        .sort:after {
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+            content: "";
+            position: relative;
+            top: -10px;
+            right: -5px;
+        }
+        
+        .sort.asc:after {
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid #fff;
+            content: "";
+            position: relative;
+            top: 4px;
+            right: -5px;
+        }
+        
+        .sort.desc:after {
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 5px solid #fff;
+            content: "";
+            position: relative;
+            top: -4px;
+            right: -5px;
+        }
+    </style>
+    <script type="text/javascript">
+        let itemList = null;
+        $.getJSON(itemListURL, function(data) {
+            var options = {
+                valueNames: ['abr', 'price', 'category'],
+                item: '<tr><td class="abr" scope="row"></td><td class="price"></td><td class="category"></td></tr>'
+            };
 
-		    var itemData = [];
-		    $.each(data.items, function(index, value)
-		    {
-		    	if (value["price"] > 0)
-		    	{
-		    		itemData.push(value);
-		    	}
-		    });
+            var itemData = [];
+            $.each(data.items, function(index, value) {
+                if (value["price"] > 0) {
+                    itemData.push(value);
+                }
+            });
 
-		  var itemList = new List('items', options, itemData);
-		});
+            itemList = new List('items', options, itemData);
+        });
 
-		$.getJSON( eventListURL, function( data ) {
-		  var options = {
-		      valueNames: ['abr', 'price', 'karmatype'],
-		      item: '<tr><td class="abr" scope="row"></td><td class="price"></td><td class="karmatype"></td></tr>'
-		    };
+        let eventList = null;
+        $.getJSON(eventListURL, function(data) {
+            var options = {
+                valueNames: ['abr', 'price', 'karmatype'],
+                item: '<tr><td class="abr" scope="row"></td><td class="price"></td><td class="karmatype"></td></tr>'
+            };
 
-	      var eventData = [];
-	      $.each(data.incitems, function(index, value)
-	      {
-      		if (value["price"] > 0)
-      		{
-      			eventData.push(value);
-      		}
-	      });
+            var eventData = [];
+            $.each(data.incitems, function(index, value) {
+                if (value["price"] > 0) {
+                    eventData.push(value);
+                }
+            });
+
+            eventList = new List('events', options, eventData);
+        });
+
+        $("#item-price-min").keyup(function() {
+            updateItemFilter();
+        });
+
+        $("#item-price-max").keyup(function() {
+            updateItemFilter();
+        });
+
+        function updateItemFilter() {
+            var minPrice = $("#item-price-min").val();
+            var maxPrice = $("#item-price-max").val();
+            itemList.filter(function(item) {
+                var allow = true;
+                if (minPrice != "" && parseInt(item.values().price) < minPrice) {
+                    allow = false;
+                }
+                if (maxPrice != "" && parseInt(item.values().price) > maxPrice) {
+                    allow = false;
+                }
+                return allow;
+            });
+	    eventList.filter(function(item) {
+                var allow = true;
+                if (minPrice != "" && parseInt(item.values().price) < minPrice) {
+                    allow = false;
+                }
+                if (maxPrice != "" && parseInt(item.values().price) > maxPrice) {
+                    allow = false;
+                }
+                return allow;
+            });
+        }
+    </script>
+    <script type="text/javascript">
+        var tabs = angular.module('tabs', [])
+            .controller('tabCtrl', function($scope) {
+                $scope.selected = "1";
+            });
+    </script>
+</body>
 
-		  var itemList = new List('events', options, eventData);
-		});
-	</script>
-  </body>
 </html>
