basic work on a grid UI. This contains code for dynamic generation of a host grid, and clicking the icon takes you to the game selection page

index.html

@@ -39,6 +39,9 @@
             </div>
 
             <div id="hostSettings">
+                <div class="mdl-grid" id='host-grid'>
+                </div>
+                
                 <p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
                 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class="mdl-textfield__input" type="text" id="GFEHostIPField">

static/css/style.css

@@ -4,6 +4,14 @@
 .mdl-button {
     color: #fff !important;
 }
+.mdl-grid {
+    width: 100%;
+}
+.mdl-cell {
+    background:#44c763;
+    color:#fff;
+    padding:25px;
+} 
 .mdl-dialog {
   border: none;
   box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);

static/js/index.js

@@ -162,8 +162,16 @@ function pairTo(host) {
     });
 }
 
-function hostChosen() {
+function hostChosen(sourceEvent) {
+
+    if(sourceEvent && sourceEvent.srcElement) {
+        console.log('parsing host from grid element.');
+        host = sourceEvent.srcElement.innerText;
+    } else {
+        console.log('falling back to old host selection');
         updateHost();
+    }
+
 
     if(!api || api.address != host) {
         api = new NvHTTP(host, myUniqueid);
@@ -481,6 +489,17 @@ function onWindowLoad(){
                 opt.value = hosts[i];
                 $('#selectHost').append(opt);
             }
+
+            for(var i = 0; i < hosts.length; i++) { // programmatically add each new host.
+                var opt = document.createElement('div');
+                // opt.appendChild(document.createTextNode(hosts[i]));
+                console.log(opt);
+                opt.className += 'mdl-cell mdl-cell--3-col';
+                opt.id = 'hostgrid-' + hosts[i];
+                opt.innerHTML = hosts[i];
+                $('#host-grid').append(opt);
+                opt.onclick = hostChosen;
+            }
         });
         // load stored bitrate prefs
         chrome.storage.sync.get('bitrate', function(previousValue) {