Added keyboard support on games list

This commit is contained in:
Jorys_Paulin 2018-06-05 16:49:47 +02:00
parent 84e1cb80e1
commit 7c48586394
2 changed files with 17 additions and 2 deletions

View File

@ -190,7 +190,7 @@ main {
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;
}

View File

@ -489,7 +489,7 @@ function showApps(host) {
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()
@ -518,10 +518,25 @@ function showApps(host) {
gameCard.addEventListener('click', e => {
startGame(host, app.id)
})
gameCard.addEventListener('mouseover', e => {
gameCard.focus();
});
gameCard.addEventListener('keydown', e => {
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