3 files changed, 40 insertions, 15 deletions
diff --git a/html/index.html b/html/index.html
index 8346529..2e6b292 100644
--- a/html/index.html
+++ b/html/index.html
@@ -30,16 +30,28 @@
 
       </div>
       <div id="matchhistory" style="display: none">
-        <button v-on:click="historyToStats">Statistics</button>
-        Champion:
-        <select>
-          <option>All</option>
-          <option v-for="c in champions">{{ c.name }}</option>
-        </select>
-
+        <div id="historyfilters">
+          <button id="statsbutton" v-on:click="historyToStats">Statistics</button>
+          <label for="champselect">Champion</label>
+          <select id="champselect">
+            <option>All</option>
+            <option v-for="c in champions">{{ c.name }}</option>
+          </select>
+          <button id="refreshbutton" v-on:click="refreshhistory">Refresh</button>
+        </div>
+        <div id="matchlist">
+          <table>
+            <tr>
+              <th v-for="c in matchprops">{{ c.text }}</th>
+            </tr>
+            <tr v-for="m in matches">
+              <td v-for="c in matchprops">{{ m[c.name] }}</td>
+            </tr>
+          </table>
+        </div>
       </div>
       <div id="stats" style="display: none">
-        <button v-on:click="statsToHistory">Match history</button>
+        <button id="historybutton" v-on:click="statsToHistory">Match history</button>
       </div>
 
     </div>
diff --git a/html/script.js b/html/script.js
index d97fcc4..51c43c0 100644
--- a/html/script.js
+++ b/html/script.js
@@ -4,7 +4,12 @@ function getRegions() {
   return [ "euw", "na", "kr", "br" ];
 }
 function getChampions() {
-  return [ {name: "Aatrox"}, {name: "Annie"}, {name: "Braum"} ];
+  return [ {name: "Aatrox"}, {name: "Annie"}, {name: "Braum"}, {name: "Not"} ];
+}
+function getMatchProps() {
+  return []
+}
+function getMatches() {
 }
 function getInfo() {
   app.summoner = $("#nameinput").val();
@@ -35,6 +40,8 @@ var app = new Vue({
     view: "start",
     regions: getRegions(),
     champions: getChampions(),
+    matchprops: getMatchProps(),
+    matches: getMatches(),
   },
   methods: {
     submit: function() {
diff --git a/html/style.css b/html/style.css
index 3c3cd0a..af80d07 100644
--- a/html/style.css
+++ b/html/style.css
@@ -101,8 +101,18 @@ input, select, button {
   left: 110px;
   top: 5px;
 }
-#gobutton {
-  position: relative;
+#gobutton, #statsbutton, #historybutton {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 1;
+}
+#refreshbutton {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+}
+button {
   vertical-align: baseline;
   margin: 5px;
   width: 110px;
@@ -111,10 +121,6 @@ input, select, button {
   color: white;
   border-radius: 5px;
   outline: none;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 1;
 }
 #gobutton:hover {
   background-color: rgba(180, 30, 30);