Merge pull request #454 from Jorys-Paulin/develop

Changes and improvements

index.html

@@ -28,8 +28,7 @@
                             </button>
             </div>
 
-                        <ul class="resolutionMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+            <ul class="resolutionMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="selectResolution">
-                            for="selectResolution">
               <li class="mdl-menu__item" data-value="1280:720">720p</li>
               <li class="mdl-menu__item" data-value="1920:1080">1080p</li>
               <li class="mdl-menu__item" data-value="3840:2160">4K</li>
@@ -46,8 +45,7 @@
                             </button>
             </div>
 
-                        <ul class="framerateMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+            <ul class="framerateMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="selectFramerate">
-                            for="selectFramerate">
               <li class="mdl-menu__item" data-value="30">30 FPS</li>
               <li class="mdl-menu__item" data-value="60">60 FPS</li>
             </ul>
@@ -77,7 +75,7 @@
                             <i class="mdl-icon-toggle__label material-icons">volume_up</i>
                         </label>
             <div id="externalAudioTooltip" class="mdl-tooltip" for="externalAudioBtn">
-                            Play audio on the host PC speakers
+              Play audio on the host
             </div>
           </div>
 
@@ -87,7 +85,7 @@
                             <i class="mdl-icon-toggle__label material-icons">timeline</i>
                         </label>
             <div id="optimizeGamesTooltip" class="mdl-tooltip" for="optimizeGamesBtn">
-                            Allow GeForce Experience to optimize game settings for streaming
+              Allow game optimisations
             </div>
           </div>
 
@@ -100,16 +98,13 @@
     </header>
     <main id="main-content" class="mdl-layout__content">
       <div id="host-grid">
-                <div class="page-title">Your PCs</div>
         <div class="add-host-card mdl-card mdl-shadow--4dp" id="addHostCell">
           <div class="mdl-card__title mdl-card--expand" id="addHostIcon" role="link" tabindex="0" aria-label="Add Host">
             <h2 class="mdl-card__title-text">Add Host</h2>
           </div>
         </div>
       </div>
-            <div id="game-grid">
+      <div id="game-grid"></div>
-                <div class="page-title">Your Games</div>
-            </div>
       <div id="listener"></div>
       <!-- NaCl module placeholder.  NaCl gets thrown into here -->
       <div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
@@ -178,7 +173,8 @@
   </dialog>
   <div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
     <div class="mdl-snackbar__text"></div>
-    <button id="snackButton" class="mdl-snackbar__action" type="button"></button> <!-- this button exists to suppress the snackbar warning. we're really using a toast. -->
+    <button id="snackButton" class="mdl-snackbar__action" type="button"></button>
+    <!-- this button exists to suppress the snackbar warning. we're really using a toast. -->
   </div>
 </body>
 </html>

static/css/style.css

@@ -72,6 +72,7 @@ main {
 
 .nav-menu-parent {
     position: relative;
+    margin: 0 4px;
 }
 .mdl-menu__outline {
     background-color: #333846;
@@ -177,7 +178,7 @@ main {
 }
 #game-grid .mdl-card {
     position: relative;
-    background: transparent;
+    background: url('../res/placeholder_game.svg') rgba(29, 29, 29, 1) center/cover no-repeat;
 }
 #host-grid .mdl-card, #game-grid .mdl-card {
     text-align: center;
@@ -187,9 +188,11 @@ main {
     margin: 15px;
     cursor: pointer;
     transition: all .2s ease-in-out;
+    will-change: transform;
 }
-#host-grid .mdl-card:hover, #host-grid .mdl-card:focus, #host-grid .mdl-card:active, #game-grid .mdl-card:hover, #game-grid .mdl-card:focus, #game-grid .mdl-card:active {
+#host-grid .mdl-card:hover, #host-grid .mdl-card:focus, #host-grid .mdl-card:active, #game-grid .mdl-card:focus, #game-grid .mdl-card:active {
     transform: scale(1.1);
+    outline-color: #00A3C6;
 }
 #host-grid .mdl-card__title {
     padding: 0;
@@ -203,6 +206,12 @@ main {
 #game-grid .mdl-card img {
     height: 100%;
     width: 100%;
+    opacity: 0;
+    transition: opacity .3s;
+    z-index: -1;
+}
+#game-grid .mdl-card img.fade-in {
+    opacity: 1;
 }
 #game-grid .game-title {
     position: absolute;
@@ -290,10 +299,10 @@ main {
     border: none !important;
 }
 .current-game {
-    border: 2px solid #00A3C6;
+    outline: auto #8BC34A;
 }
 .host-cell-inactive {
-    border: 3px solid #8e0000;
+    outline: auto #F44336;
 }
 .host-cell:hover {
     cursor: pointer;

static/js/background.js

@@ -10,7 +10,9 @@ function createWindow(state) {
     // state = 'normal' in some cases not work (e.g. starting app from 'chrome://extensions' always open window in fullscreen mode)
     // it requires manually restoring window state to 'normal'
     if (state == 'normal') {
-            setTimeout(function() { window.restore(); }, 1000);
+      setTimeout(function() {
+        window.restore();
+      }, 1000);
     }
   });
 }
@@ -22,9 +24,9 @@ chrome.app.runtime.onLaunched.addListener(function() {
   if (chrome.storage) {
     // load stored window state
     chrome.storage.sync.get('windowState', function(item) {
-            windowState = (item && item.windowState)
+      windowState = (item && item.windowState) ?
-                ? item.windowState
+        item.windowState :
-                : windowState;
+        windowState;
       createWindow(windowState);
     });
   } else {

static/js/index.js

@@ -35,13 +35,15 @@ function fullscreenChromeWindow() {
 }
 
 function loadWindowState() {
-    if (!chrome.storage) { return; }
+  if (!chrome.storage) {
+    return;
+  }
 
   chrome.storage.sync.get('windowState', function(item) {
     // load stored window state
-        windowState = (item && item.windowState)
+    windowState = (item && item.windowState) ?
-            ? item.windowState
+      item.windowState :
-            : windowState;
+      windowState;
 
     // subscribe to chrome's windowState events
     chrome.app.window.current().onFullscreened.addListener(onFullscreened);
@@ -117,27 +119,28 @@ function restoreUiAfterNaClLoad() {
 }
 
 function beginBackgroundPollingOfHost(host) {
+  var el = document.querySelector('#hostgrid-' + host.serverUid)
   if (host.online) {
-        $("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive');
+    el.classList.remove('host-cell-inactive')
     // The host was already online. Just start polling in the background now.
     activePolls[host.serverUid] = window.setInterval(function() {
       // every 5 seconds, poll at the address we know it was live at
       host.pollServer(function() {
         if (host.online) {
-                    $("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive');
+          el.classList.remove('host-cell-inactive')
         } else {
-                    $("#hostgrid-" + host.serverUid).addClass('host-cell-inactive');
+          el.classList.add('host-cell-inactive')
         }
       });
     }, 5000);
   } else {
-        $("#hostgrid-" + host.serverUid).addClass('host-cell-inactive');
+    el.classList.add('host-cell-inactive')
     // The host was offline, so poll immediately.
     host.pollServer(function() {
       if (host.online) {
-                $("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive');
+        el.classList.remove('host-cell-inactive')
       } else {
-                $("#hostgrid-" + host.serverUid).addClass('host-cell-inactive');
+        el.classList.add('host-cell-inactive')
       }
 
       // Now start background polling
@@ -145,9 +148,9 @@ function beginBackgroundPollingOfHost(host) {
         // every 5 seconds, poll at the address we know it was live at
         host.pollServer(function() {
           if (host.online) {
-                        $("#hostgrid-" + host.serverUid).removeClass('host-cell-inactive');
+            el.classList.remove('host-cell-inactive')
           } else {
-                        $("#hostgrid-" + host.serverUid).addClass('host-cell-inactive');
+            el.classList.add('host-cell-inactive')
           }
         });
       }, 5000);
@@ -214,8 +217,7 @@ function moduleDidLoad() {
             console.error('%c[index.js, moduleDidLoad]', 'color: green;', 'Failed httpInit! Returned error was: ', failedInit);
           });
         });
-            }
+      } else {
-            else {
         sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function(ret) {
           restoreUiAfterNaClLoad();
         }, function(failedInit) {
@@ -345,8 +347,7 @@ function addHost() {
         // Just update the addresses
         hosts[_nvhttpHost.serverUid].address = _nvhttpHost.address;
         hosts[_nvhttpHost.serverUid].userEnteredAddress = _nvhttpHost.userEnteredAddress;
-            }
+      } else {
-            else {
         beginBackgroundPollingOfHost(_nvhttpHost);
         addHostToGrid(_nvhttpHost);
       }
@@ -362,10 +363,28 @@ function addHost() {
 // host is an NvHTTP object
 function addHostToGrid(host, ismDNSDiscovered) {
 
-    var outerDiv = $("<div>", {class: 'host-container mdl-card mdl-shadow--4dp', id: 'host-container-' + host.serverUid, role: 'link', tabindex: 0, 'aria-label': host.hostname });
+  var outerDiv = $("<div>", {
-    var cell = $("<div>", {class: 'mdl-card__title mdl-card--expand', id: 'hostgrid-' + host.serverUid });
+    class: 'host-container mdl-card mdl-shadow--4dp',
-    $(cell).prepend($("<h2>", {class: "mdl-card__title-text", html: host.hostname}));
+    id: 'host-container-' + host.serverUid,
-    var removalButton = $("<div>", {class: "remove-host", id: "removeHostButton-" + host.serverUid, role: 'button', tabindex: 0, 'aria-label': 'Remove host ' + host.hostname});
+    role: 'link',
+    tabindex: 0,
+    'aria-label': host.hostname
+  });
+  var cell = $("<div>", {
+    class: 'mdl-card__title mdl-card--expand',
+    id: 'hostgrid-' + host.serverUid
+  });
+  $(cell).prepend($("<h2>", {
+    class: "mdl-card__title-text",
+    html: host.hostname
+  }));
+  var removalButton = $("<div>", {
+    class: "remove-host",
+    id: "removeHostButton-" + host.serverUid,
+    role: 'button',
+    tabindex: 0,
+    'aria-label': 'Remove host ' + host.hostname
+  });
   removalButton.off('click');
   removalButton.click(function() {
     removeClicked(host);
@@ -418,16 +437,14 @@ function removeClicked(host) {
 // the function was made like this so that we can remove duplicated code, but
 // not do N*N stylizations of the box art, or make the code not flow very well
 function stylizeBoxArt(freshApi, appIdToStylize) {
-    if (freshApi.currentGame === appIdToStylize){ // stylize the currently running game
+  // If the running game is the good one then style it
-        // destylize it, if it has the not-current-game style
+  var el = document.querySelector("#game-" + appIdToStylize);
-        if ($('#game-'+ appIdToStylize).hasClass("not-current-game")) $('#game-'+ appIdToStylize).removeClass("not-current-game");
+  if(freshApi.currentGame === appIdToStylize) {
-        // add the current-game style
+    el.classList.add('current-game')
-        $('#game-'+ appIdToStylize).addClass("current-game");
+    el.title += ' (Running)'
   } else {
-        // destylize it, if it has the current-game style
+    el.classList.remove('current-game')
-        if ($('#game-'+ appIdToStylize).hasClass("current-game")) $('#game-'+ appIdToStylize).removeClass("current-game");
+    el.title.replace(' (Running)', '') // TODO: Replace with localized string so make it e.title = game_title
-        // add the not-current-game style
-        $('#game-'+ appIdToStylize).addClass('not-current-game');
   }
 }
 
@@ -438,16 +455,25 @@ function sortTitles(list, sortOrder) {
 
     // A - Z
     if (sortOrder === 'ASC') {
-      if (titleA < titleB) { return -1; }
+      if (titleA < titleB) {
-      if (titleA > titleB) { return 1; }
+        return -1;
+      }
+      if (titleA > titleB) {
+        return 1;
+      }
       return 0;
     }
 
     // Z - A
     if (sortOrder === 'DESC') {
-      if (titleA < titleB) { return 1; }
+      if (titleA < titleB) {
-      if (titleA > titleB) { return -1; }
+        return 1;
-      return 0;    }
+      }
+      if (titleA > titleB) {
+        return -1;
+      }
+      return 0;
+    }
   });
 }
 
@@ -465,65 +491,81 @@ function showApps(host) {
   $('#naclSpinnerMessage').text('Loading apps...');
   $('#naclSpinner').css('display', 'inline-block');
 
-    host.getAppList().then(function (appList) {
-        // if game grid is populated, empty it
   $("div.game-container").remove();
 
+  host.getAppList().then(function(appList) {
     $('#naclSpinner').hide();
     $("#game-grid").show();
 
+    if(appList.length == 0) {
+      console.error('%c[index.js, showApps]', 'User\'s applist is empty')
+      var img = new Image()
+      img.src = 'static/res/applist_empty.svg'
+      $('#game-grid').html(img)
+      snackbarLog('Your game list is empty')
+      return; // We stop the function right here
+    }
+    // if game grid is populated, empty it
     const sortedAppList = sortTitles(appList, 'ASC');
 
     sortedAppList.forEach(function(app) {
-            host.getBoxArt(app.id).then(function (resolvedPromise) {
-                // put the box art into the image holder
       if ($('#game-' + app.id).length === 0) {
         // double clicking the button will cause multiple box arts to appear.
         // to mitigate this we ensure we don't add a duplicate.
         // This isn't perfect: there's lots of RTTs before the logic prevents anything
-                    var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: resolvedPromise, role: 'link', tabindex: 0, title: app.title, 'aria-label': app.title });
+        var gameCard = document.createElement('div')
-                    $(outerDiv).append($("<img \>", {src: resolvedPromise, id: 'game-'+app.id, name: app.title }));
+        gameCard.id = 'game-' + app.id
-                    $(outerDiv).append($("<div>", {class: "game-title", html: $("<span>", {html: app.title} )}));
+        gameCard.className = 'game-container mdl-card mdl-shadow--4dp'
-                    $("#game-grid").append(outerDiv);
+        gameCard.setAttribute('role', 'link')
+        gameCard.tabIndex = 0
+        gameCard.title = app.title
 
-                    $('#game-'+app.id).on('click', function () {
+        gameCard.innerHTML = `<div class="game-title">${app.title}</div>`
-                        startGame(host, app.id);
+
+        gameCard.addEventListener('click', e => {
+          startGame(host, app.id)
+        })
+        gameCard.addEventListener('mouseover', e => {
+          gameCard.focus();
         });
-                    $('#game-'+app.id).keypress(function(e){
+        gameCard.addEventListener('keydown', e => {
-                      if(e.keyCode == 13) {
+          if(e.key == "Enter") {
             startGame(host, app.id);
           }
-                    });
+          if(e.key == "ArrowLeft") {
-
+            let prev = gameCard.previousSibling
+            if(prev !== null)
+              gameCard.previousSibling.focus()
+            // TODO: Add a sound when limit reached
+          }
+          if(e.key == "ArrowRight") {
+            let next = gameCard.nextSibling
+            if(next !== null)
+              gameCard.nextSibling.focus()
+            // TODO: Add a sound when limit reached
+          }
+        })
+        document.querySelector('#game-grid').appendChild(gameCard);
         // apply CSS stylization to indicate whether the app is active
         stylizeBoxArt(host, app.id);
       }
-
+      var img = new Image();
+      host.getBoxArt(app.id).then(function(resolvedPromise) {
+        img.src = resolvedPromise;
       }, function(failedPromise) {
         console.log('%c[index.js, showApps]', 'color: green;', 'Error! Failed to retrieve box art for app ID: ' + app.id + '. Returned value was: ' + failedPromise, '\n Host object:', host, host.toString());
-
+        img.src = 'static/res/placeholder_error.svg'
-                if ($('#game-' + app.id).length === 0) {
-                    // double clicking the button will cause multiple box arts to appear.
-                    // to mitigate this we ensure we don't add a duplicate.
-                    // This isn't perfect: there's lots of RTTs before the logic prevents anything
-                    var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: "static/res/no_app_image.png" });
-                    $(outerDiv).append($("<img \>", {src: "static/res/no_app_image.png", id: 'game-'+app.id, name: app.title }));
-                    $(outerDiv).append($("<div>", {class: "game-title", html: $("<span>", {html: app.title} )}));
-                    $("#game-grid").append(outerDiv);
-
-                    $('#game-'+app.id).on('click', function () {
-                        startGame(host, app.id);
-                    });
-
-                    // apply CSS stylization to indicate whether the app is active
-                    stylizeBoxArt(host, app.id);
-                }
       });
+      img.onload = e => img.classList.add('fade-in');
+      $(gameCard).append(img);
     });
   }, function(failedAppList) {
     $('#naclSpinner').hide();
-
+    var img = new Image();
-        console.log('%c[index.js, showApps]', 'color: green;', 'Failed to get applist from host: ' + host.hostname, '\n Host object:', host, host.toString());
+    img.src = 'static/res/applist_error.svg'
+    $("#game-grid").html(img)
+    snackbarLog('Unable to get your games')
+    console.error('%c[index.js, showApps]', 'Failed to get applist from host: ' + host.hostname, '\n Host object:', host, host.toString());
   });
 
   showAppsMode();
@@ -627,7 +669,8 @@ function startGame(host, appID) {
           rikey, rikeyid, 0x030002 // Surround channel mask << 16 | Surround channel count
         ).then(function(ret) {
           sendMessage('startRequest', [host.address, streamWidth, streamHeight, frameRate,
-                            bitrate.toString(), rikey, rikeyid.toString(), host.appVersion]);
+            bitrate.toString(), rikey, rikeyid.toString(), host.appVersion
+          ]);
         }, function(failedResumeApp) {
           console.eror('%c[index.js, startGame]', 'color:green;', 'Failed to resume the app! Returned error was' + failedResumeApp);
           return;
@@ -645,7 +688,8 @@ function startGame(host, appID) {
         gamepadMask
       ).then(function(ret) {
         sendMessage('startRequest', [host.address, streamWidth, streamHeight, frameRate,
-                        bitrate.toString(), rikey, rikeyid.toString(), host.appVersion]);
+          bitrate.toString(), rikey, rikeyid.toString(), host.appVersion
+        ]);
       }, function(failedLaunchApp) {
         console.error('%c[index.js, launchApp]', 'color: green;', 'Failed to launch app width id: ' + appID + '\nReturned error was: ' + failedLaunchApp);
         return;

static/js/messages.js

@@ -11,7 +11,10 @@ var callbacks_ids = 1;
 var sendMessage = function(method, params) {
   return new Promise(function(resolve, reject) {
     var id = callbacks_ids++;
-        callbacks[id] = {'resolve': resolve, 'reject': reject};
+    callbacks[id] = {
+      'resolve': resolve,
+      'reject': reject
+    };
 
     common.naclModule.postMessage({
       'callbackId': id,

static/js/utils.js

@@ -1,6 +1,7 @@
 function guuid() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-	    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+    var r = Math.random() * 16 | 0,
+      v = c == 'x' ? r : (r & 0x3 | 0x8);
     return v.toString(16);
   });
 }
@@ -379,7 +380,9 @@ NvHTTP.prototype = {
               console.log('%c[utils.js, utils.js,  getBoxArt]', 'color: gray;', 'Returning network-fetched box art');
               resolve(this.result);
             }
-                        reader.readAsDataURL(new Blob([boxArtBuffer], {type: "image/png"}));                         
+            reader.readAsDataURL(new Blob([boxArtBuffer], {
+              type: "image/png"
+            }));
           }.bind(this), function(error) {
             console.error('%c[utils.js, utils.js,  getBoxArt]', 'color: gray;', 'Box-art request failed!', error);
             reject(error);

static/res/applist_empty.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 512 256" width="512" height="256"><defs><clipPath id="_clipPath_yIRtlut3od2o3W0V0tyVSEn4O7rQwUEb"><rect width="512" height="256"/></clipPath></defs><g clip-path="url(#_clipPath_yIRtlut3od2o3W0V0tyVSEn4O7rQwUEb)"><g id="Group"><defs><filter id="WcPFsRr92txvAquqtQLJDA42eOuH20Tm" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#WcPFsRr92txvAquqtQLJDA42eOuH20Tm)"><path d="M 184 28 L 328 28 C 329.656 28 331 29.344 331 31 L 331 225 C 331 226.656 329.656 228 328 228 L 184 228 C 182.344 228 181 226.656 181 225 L 181 31 C 181 29.344 182.344 28 184 28 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_add_circle_48px"><path d=" M 232 104 L 280 104 L 280 152 L 232 152 L 232 104 Z " fill="none"/><path d=" M 256 108 C 244.95 108 236 116.95 236 128 C 236 139.05 244.95 148 256 148 C 267.05 148 276 139.05 276 128 C 276 116.95 267.05 108 256 108 Z  M 266 130 L 258 130 L 258 138 L 254 138 L 254 130 L 246 130 L 246 126 L 254 126 L 254 118 L 258 118 L 258 126 L 266 126 L 266 130 Z " fill="rgb(0,163,198)"/></g></g><g id="Group"><defs><filter id="6XR36XqPb13ScFas2P9OjS9OpNZIfllA" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#6XR36XqPb13ScFas2P9OjS9OpNZIfllA)"><path d="M 54.75 53 L 162.75 53 C 163.992 53 165 54.008 165 55.25 L 165 200.75 C 165 201.992 163.992 203 162.75 203 L 54.75 203 C 53.508 203 52.5 201.992 52.5 200.75 L 52.5 55.25 C 52.5 54.008 53.508 53 54.75 53 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_gamepad_48px"><path d=" M 96.75 116 L 120.75 116 L 120.75 140 L 96.75 140 L 96.75 116 Z " fill="none"/><path d=" M 111.75 123.5 L 111.75 118 L 105.75 118 L 105.75 123.5 L 108.75 126.5 L 111.75 123.5 Z  M 104.25 125 L 98.75 125 L 98.75 131 L 104.25 131 L 107.25 128 L 104.25 125 Z  M 105.75 132.5 L 105.75 138 L 111.75 138 L 111.75 132.5 L 108.75 129.5 L 105.75 132.5 Z  M 113.25 125 L 110.25 128 L 113.25 131 L 118.75 131 L 118.75 125 L 113.25 125 Z " fill="rgb(39,39,39)"/></g></g><g id="Group"><defs><filter id="UdSh6fub9y3Hcxceeait0RXX4mwjJMX0" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#UdSh6fub9y3Hcxceeait0RXX4mwjJMX0)"><path d="M 349.25 53 L 457.25 53 C 458.492 53 459.5 54.008 459.5 55.25 L 459.5 200.75 C 459.5 201.992 458.492 203 457.25 203 L 349.25 203 C 348.008 203 347 201.992 347 200.75 L 347 55.25 C 347 54.008 348.008 53 349.25 53 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_gamepad_48px"><path d=" M 391.25 116 L 415.25 116 L 415.25 140 L 391.25 140 L 391.25 116 Z " fill="none"/><path d=" M 406.25 123.5 L 406.25 118 L 400.25 118 L 400.25 123.5 L 403.25 126.5 L 406.25 123.5 Z  M 398.75 125 L 393.25 125 L 393.25 131 L 398.75 131 L 401.75 128 L 398.75 125 Z  M 400.25 132.5 L 400.25 138 L 406.25 138 L 406.25 132.5 L 403.25 129.5 L 400.25 132.5 Z  M 407.75 125 L 404.75 128 L 407.75 131 L 413.25 131 L 413.25 125 L 407.75 125 Z " fill="rgb(39,39,39)"/></g></g></g></svg>

static/res/applist_error.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 512 256" width="512" height="256"><defs><clipPath id="_clipPath_q3Ua5WPG9X3dA70MRZ1ug2ARElMiysSJ"><rect width="512" height="256"/></clipPath></defs><g clip-path="url(#_clipPath_q3Ua5WPG9X3dA70MRZ1ug2ARElMiysSJ)"><g id="Group"><defs><filter id="cHVudzbrBQ2CJG0jNPFm7Epib205WyaO" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#cHVudzbrBQ2CJG0jNPFm7Epib205WyaO)"><path d="M 184 28 L 328 28 C 329.656 28 331 29.344 331 31 L 331 225 C 331 226.656 329.656 228 328 228 L 184 228 C 182.344 228 181 226.656 181 225 L 181 31 C 181 29.344 182.344 28 184 28 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_warning_48px"><path d=" M 232 104 L 280 104 L 280 152 L 232 152 L 232 104 Z " fill="none"/><path d=" M 234 146 L 278 146 L 256 108 L 234 146 Z  M 258 140 L 254 140 L 254 136 L 258 136 L 258 140 Z  M 258 132 L 254 132 L 254 124 L 258 124 L 258 132 Z " fill="rgb(244,67,54)"/></g></g><g id="Group"><defs><filter id="mus5hysAZhLwu6bXMOLrMCeg8QRvpyK5" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#mus5hysAZhLwu6bXMOLrMCeg8QRvpyK5)"><path d="M 54.75 53 L 162.75 53 C 163.992 53 165 54.008 165 55.25 L 165 200.75 C 165 201.992 163.992 203 162.75 203 L 54.75 203 C 53.508 203 52.5 201.992 52.5 200.75 L 52.5 55.25 C 52.5 54.008 53.508 53 54.75 53 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_gamepad_48px"><path d=" M 96.75 116 L 120.75 116 L 120.75 140 L 96.75 140 L 96.75 116 Z " fill="none"/><path d=" M 111.75 123.5 L 111.75 118 L 105.75 118 L 105.75 123.5 L 108.75 126.5 L 111.75 123.5 Z  M 104.25 125 L 98.75 125 L 98.75 131 L 104.25 131 L 107.25 128 L 104.25 125 Z  M 105.75 132.5 L 105.75 138 L 111.75 138 L 111.75 132.5 L 108.75 129.5 L 105.75 132.5 Z  M 113.25 125 L 110.25 128 L 113.25 131 L 118.75 131 L 118.75 125 L 113.25 125 Z " fill="rgb(39,39,39)"/></g></g><g id="Group"><defs><filter id="secyACecQxmUzvUd03msvhsmzkojlvlZ" x="-200%" y="-200%" width="400%" height="400%"><feOffset xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" result="offOut" dx="0" dy="0"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="offOut" result="blurOut" stdDeviation="2.5"/><feComponentTransfer xmlns="http://www.w3.org/2000/svg" in="blurOut" result="opacOut"><feFuncA xmlns="http://www.w3.org/2000/svg" type="table" tableValues="0 0.5"/></feComponentTransfer><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="opacOut" mode="normal"/></filter></defs><g filter="url(#secyACecQxmUzvUd03msvhsmzkojlvlZ)"><path d="M 349.25 53 L 457.25 53 C 458.492 53 459.5 54.008 459.5 55.25 L 459.5 200.75 C 459.5 201.992 458.492 203 457.25 203 L 349.25 203 C 348.008 203 347 201.992 347 200.75 L 347 55.25 C 347 54.008 348.008 53 349.25 53 Z" style="stroke:none;fill:#1D1D1D;stroke-miterlimit:10;"/></g><g id="ic_gamepad_48px"><path d=" M 391.25 116 L 415.25 116 L 415.25 140 L 391.25 140 L 391.25 116 Z " fill="none"/><path d=" M 406.25 123.5 L 406.25 118 L 400.25 118 L 400.25 123.5 L 403.25 126.5 L 406.25 123.5 Z  M 398.75 125 L 393.25 125 L 393.25 131 L 398.75 131 L 401.75 128 L 398.75 125 Z  M 400.25 132.5 L 400.25 138 L 406.25 138 L 406.25 132.5 L 403.25 129.5 L 400.25 132.5 Z  M 407.75 125 L 404.75 128 L 407.75 131 L 413.25 131 L 413.25 125 L 407.75 125 Z " fill="rgb(39,39,39)"/></g></g></g></svg>

static/res/placeholder_error.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 300 400" width="300" height="400"><defs><clipPath id="_clipPath_7VrBmLEdSmb7vTXt6k0koa8xYu1zCaFz"><rect width="300" height="400"/></clipPath></defs><g clip-path="url(#_clipPath_7VrBmLEdSmb7vTXt6k0koa8xYu1zCaFz)"><rect width="300" height="400" style="fill:rgb(29,29,29)"/><g id="ic_warning_black_48px"><path d=" M 102 152 L 198 152 L 198 248 L 102 248 L 102 152 Z " fill="none"/><path d=" M 106 236 L 194 236 L 150 160 L 106 236 Z  M 154 224 L 146 224 L 146 216 L 154 216 L 154 224 Z  M 154 208 L 146 208 L 146 192 L 154 192 L 154 208 Z " fill="rgb(39,39,39)"/></g></g></svg>

static/res/placeholder_game.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 300 400" width="300" height="400"><defs><clipPath id="_clipPath_BVjMtbR4dEXaBuo9qBU4zJA4ZPJHGfxW"><rect width="300" height="400"/></clipPath></defs><g clip-path="url(#_clipPath_BVjMtbR4dEXaBuo9qBU4zJA4ZPJHGfxW)"><clipPath id="_clipPath_UBQAdzuop4HX8nHiyTz6R71FUYdEnoXn"><rect x="0" y="0" width="300" height="400" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,255,255)"/></clipPath><g clip-path="url(#_clipPath_UBQAdzuop4HX8nHiyTz6R71FUYdEnoXn)"><g id="Group"><rect x="0" y="0" width="300" height="400" transform="matrix(1,0,0,1,0,0)" fill="rgb(29,29,29)"/><g id="ic_gamepad_48px"><path d=" M 101 151 L 199 151 L 199 249 L 101 249 L 101 151 Z " fill="none"/><path d=" M 162.25 181.625 L 162.25 159.167 L 137.75 159.167 L 137.75 181.625 L 150 193.875 L 162.25 181.625 Z  M 131.625 187.75 L 109.167 187.75 L 109.167 212.25 L 131.625 212.25 L 143.875 200 L 131.625 187.75 Z  M 137.75 218.375 L 137.75 240.833 L 162.25 240.833 L 162.25 218.375 L 150 206.125 L 137.75 218.375 Z  M 168.375 187.75 L 156.125 200 L 168.375 212.25 L 190.833 212.25 L 190.833 187.75 L 168.375 187.75 Z " fill="rgb(39,39,39)"/></g></g></g></g></svg>