loaded image grid, need to finish including google material icons and to add functionality to the grid

index.html

@@ -4,7 +4,6 @@
         <meta http-equiv="Pragma" content="no-cache">
         <meta http-equiv="Expires" content="-1">
         <title>Moonlight</title>
-    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> -->
         <link rel="stylesheet" href="static/css/material.min.css">
         <link rel="stylesheet" href="static/css/style.css">
     </head>
@@ -60,11 +59,7 @@
                 </div>
             </div>
 
-            <div id="gameSelection" class="mdl-select">
-                <p>Select a game to run</p>
-                <select id="selectGame"> </select>
-                <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="startGameButton">Run Game</button>
-                <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="quitGameButton">Quit Current Game</button>
+            <div id="game-grid" class="mdl-grid">
             </div>
 
             <div id="listener"></div> <!-- NaCl module placeholder.  NaCl gets thrown into here -->

opus

@@ -1 +1 @@
-Subproject commit 81bb160d17c9542ad9cfba05067371b618d1719f
+Subproject commit f6f8487b76f234437e7d4c2831e630d9d06cb074

static/css/style.css

@@ -1,3 +1,36 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url('../fonts/MaterialIcons-Regular.woff') format('woff'),
+}
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
 .mdl-layout__header-row {
     color: #fff;
 }
@@ -126,3 +159,15 @@ main {
     width 100%;
     border: none !important;
 }
+.box-art {
+    background-color: transparent;;
+}
+.box-art > img {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+.current-game {
+    border: 1px solid red;
+}

static/js/index.js

@@ -256,22 +256,29 @@ function showApps() {
     }
 
     api.getAppList().then(function (appList) {
-        if ($('#selectGame').has('option').length > 0 ) { 
-            // there was already things in the dropdown. Clear it, then add the new ones.
-            // Most likely, the user just hit the 'retrieve app list' button again
-            $('#selectGame').empty();
+
+        // if game grid is populated, empty it
+        if($("#game-grid").children().length > 0) {
+            $("game-grid").empty();
         }
         
+
         appList.forEach(function (app) {
-            $('#selectGame').append($('<option>', {value: app.id, text: app.title}));
+            api.getBoxArt(app.id).then(function (resolvedPromise) {
+                var imageBlob =  new Blob([resolvedPromise], {type: "image/png"});
+                $("#game-grid").append($("<div>", {html:$("<img \>", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id }), class: 'box-art mdl-cell mdl-cell--3-col'}));
+            }, function (failedPromise) {
+                console.log(failedPromise)
             });
             
-        $("#selectGame").html($("#selectGame option").sort(function (a, b) {  // thanks, http://stackoverflow.com/a/7466196/3006365
-            return a.text.toUpperCase() == b.text.toUpperCase() ? 0 : a.text.toUpperCase() < b.text.toUpperCase() ? -1 : 1
-        }));
+        });
 
         if (api.currentGame != 0)
-            $('#selectGame').val(api.currentGame);
+            $('#game-'+ api.currentGame).addClass(".current-game");
+
+        $("#streamSettings").hide();
+        $("#hostSettings").hide();
+        $(".mdl-layout__header-row").append("<button class='mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab'><i class='material-icons'>arrow_back</i></button>") 
 
         gameSelectUpdated();  // default the button to 'Resume Game' if one is running.
     }, function (failedAppList) {