moonlight-stream/moonlight-chrome
1
0
Fork 0
mirror of https://github.com/moonlight-stream/moonlight-chrome.git synced 2025-08-17 16:46:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Abdallah Soliman 2016-07-04 17:45:29 -05:00
parent 7392ea4ad7
commit 582403410c
5 changed files with 131 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -1,14 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1"> <meta http-equiv="Expires" content="-1">
<title>Moonlight</title> <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/material.min.css">
<link rel="stylesheet" href="static/css/style.css"> <link rel="stylesheet" href="static/css/style.css">
</head> </head>
<body data-name="moonlight-chrome" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}"> <body data-name="moonlight-chrome" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"> <header class="mdl-layout__header">
<div class="mdl-layout__header-row"> <div class="mdl-layout__header-row">
@ -60,11 +59,7 @@
</div> </div>
</div> </div>
<div id="gameSelection" class="mdl-select"> <div id="game-grid" class="mdl-grid">
<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> </div>
<div id="listener"></div> <!-- NaCl module placeholder. NaCl gets thrown into here --> <div id="listener"></div> <!-- NaCl module placeholder. NaCl gets thrown into here -->
@ -132,5 +127,5 @@
<div class="mdl-snackbar__text"></div> <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> </div>
</body> </body>
</html> </html>

2
opus

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

45
static/css/style.css
View File

@ -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 { .mdl-layout__header-row {
color: #fff; color: #fff;
} }
@ -126,3 +159,15 @@ main {
width 100%; width 100%;
border: none !important; 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;
}

BIN
static/fonts/MaterialIcons-Regular.woff Normal file
View File

Binary file not shown.

25
static/js/index.js
View File

@ -256,22 +256,29 @@ function showApps() {
} }
api.getAppList().then(function (appList) { 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. // if game grid is populated, empty it
// Most likely, the user just hit the 'retrieve app list' button again if($("#game-grid").children().length > 0) {
$('#selectGame').empty(); $("game-grid").empty();
} }
appList.forEach(function (app) { 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) 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. gameSelectUpdated(); // default the button to 'Resume Game' if one is running.
}, function (failedAppList) { }, function (failedAppList) {