dan/console-hub
1
0
Fork 0
mirror of https://github.com/danbulant/console-hub synced 2026-06-24 17:12:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add files via upload

Browse source
This commit is contained in:
Daniel Bulant 2019-06-22 21:15:38 +02:00 committed by GitHub
parent 058486ede9
commit be1e13e96d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 1518 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
html/functions.js Normal file
View file

@ -0,0 +1,141 @@
mainMenuItems = ['games', 'settings', 'account', 'store'];
gameMenuItems = ['slimey', 'test2'];
settingMenuItems = ['fullscreen', 'auto-update'];
settingMenuItemValues = [0,1];
selected = 1;
var menuType = 'horizontal';
var looper = 1;
function updateSettings(){
looper = 1;
settingMenuItems.forEach(function(name){
$("#option-" + settingMenuItems[looper - 1] + " label input").prop( "checked", settingMenuItemValues[looper - 1]);
looper++;
})
looper = 1;
}
setInterval(updateSettings, 400);
function select(){
if(start == true){
showMainMenu();
return;
}
if(window.menu == 1){
if(selected == 1){
window.menu = 2;
window.selected = 1;
$(".button-main.selected").removeClass("selected");
$(".button-main-container.selected").removeClass("selected");
menuType = 'horizontal';
selectGameMenuItem();
} else if(selected == 2){
window.selected = 1
window.menu = 3;
$(".button-main.selected").removeClass("selected");
$(".button-main-container.selected").removeClass("selected");
menuType = 'vertical';
selectSettingMenuItem();
}
} else if(window.menu == 3) {
$("#option-" + settingMenuItems[selected - 1] + " label input").prop( "checked", !$("#option-" + settingMenuItems[selected - 1] + " label input").prop( "checked") );
settingMenuItemValues[selected - 1] = $("#option-" + settingMenuItems[selected - 1] + " label input").prop( "checked");
if(settingMenuItems[selected - 1] == 'fullscreen'){
sendFullscreen(settingMenuItemValues[selected - 1]);
}
} else if(window.menu == 2){
if(selected == 1){
$("#game-slimey .game-preview").css('transition', '0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity');
$("#game-slimey .game-preview").css('-webkit-transition', '0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity');
$("#game-slimey .game-preview").css('-moz-transition', '0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity');
$("#game-slimey .game-preview").width($(document).width());
$("#game-slimey .game-preview").height("auto");
var gamePosition = $("#game-slimey .game-preview").position();
$("#game-slimey .game-preview").css("left", gamePosition.left);
$("#game-slimey .game-preview").css("top", gamePosition.top);
$("#game-slimey .game-preview").css("position", "fixed");
$("#game-slimey .game-preview").css("z-index", "990");
$("#game-slimey .game-preview").css("left", 0);
$("#game-slimey .game-preview").css("top", 0);
$("#game-slimey .game-preview").css("opacity", 0);
setTimeout(() => {
$("#game-slimey .game-preview").attr("style", '');
$("#game-slimey .game-preview").hide();
startGame(0);
}, 500);
}
}
}
function deselect(){
if(menu == 2 || menu == 3){
$(".selected").removeClass("selected");
switch(menu){
case 2:
window.selected = 1;
break;
case 3:
window.selected = 2;
break;
}
window.menu = 1;
menuType = 'horizontal';
selectMainMenuItem();
} else if(menu == 1){
showStartMenu();
}
}
function callMenuItem(){
switch(menu){
case 1:
selectMainMenuItem();
break;
case 2:
selectGameMenuItem();
break;
case 3:
selectSettingMenuItem();
break;
}
}
function selectSettingMenuItem(){
if(selected > settingMenuItems.length){
selected = 1;
} else if(selected < 1){
selected = settingMenuItems.length;
}
console.log("Selected item no. " + selected);
$(".option.selected").removeClass("selected");
$("#option-" + settingMenuItems[selected - 1]).addClass("selected");
}
function selectGameMenuItem(){
if(selected > gameMenuItems.length){
selected = 1;
} else if(selected < 1){
selected = gameMenuItems.length;
}
console.log("Selected item no. " + selected);
$(".game.selected").removeClass("selected");
$("#game-" + gameMenuItems[selected - 1]).addClass("selected");
$(".game").width((function(offset, width){
return $(".game .game-preview:eq(" + offset + ")").width();
}));
}
function selectMainMenuItem(){
if(selected > mainMenuItems.length){
selected = 1;
} else if(selected < 1){
selected = mainMenuItems.length;
}
$(".menu-item").addClass("hidden");
console.log("Selected item no. " + selected);
$(".button-main.selected").removeClass("selected");
$(".button-main-container.selected").removeClass("selected");
$("#" + mainMenuItems[selected - 1]).addClass("selected");
$("#" + mainMenuItems[selected - 1] + "-view").removeClass("hidden");
$(".button-main-container:has(.selected)").addClass("selected");
if(selected == 1){
$(".game").width((function(offset, width){
return $(".game .game-preview:eq(" + offset + ")").width();
}));
}
}

528
html/gamepad.js Normal file
View file

@ -0,0 +1,528 @@
/*!
* gamepad.js v0.0.5-alpha
* https://github.com/neogeek/gamepad.js
*
* Copyright (c) 2017 Scott Doxey
* Released under the MIT license.
*/
(function () {
'use strict';
var _requestAnimationFrame,
_cancelAnimationFrame,
hasGamepadSupport = window.navigator.getGamepads !== undefined;
if (String(typeof window) !== 'undefined') {
['webkit', 'moz'].forEach(function (key) {
_requestAnimationFrame = _requestAnimationFrame || window.requestAnimationFrame || window[key + 'RequestAnimationFrame'] || null;
_cancelAnimationFrame = _cancelAnimationFrame || window.cancelAnimationFrame || window[key + 'CancelAnimationFrame'] || null;
});
}
function findKeyMapping(index, mapping) {
var results = [];
Object.keys(mapping).forEach(function (key) {
if (mapping[key] === index) {
results.push(key);
} else if (Array.isArray(mapping[key]) && mapping[key].indexOf(index) !== -1) {
results.push(key);
}
});
return results;
}
function Gamepad() {
this._events = {
gamepad: [],
axes: [],
keyboard: {}
};
this._handlers = {
gamepad: {
connect: null,
disconnect: null
}
};
this._keyMapping = {
gamepad: {
'button_1': 0,
'button_2': 1,
'button_3': 2,
'button_4': 3,
'shoulder_top_left': 4,
'shoulder_top_right': 5,
'shoulder_bottom_left': 6,
'shoulder_bottom_right': 7,
'select': 8,
'start': 9,
'stick_button_left': 10,
'stick_button_right': 11,
'd_pad_up': 12,
'd_pad_down': 13,
'd_pad_left': 14,
'd_pad_right': 15,
'vendor': 16
},
axes: {
'stick_axis_left': [0, 2],
'stick_axis_right': [2, 4]
},
keyboard: {
'button_1': 32,
'start': 27,
'd_pad_up': [ 38, 87 ],
'd_pad_down': [ 40, 83 ],
'd_pad_left': [ 37, 65 ],
'd_pad_right': [ 39, 68 ]
}
};
this._threshold = 0.3;
this._listeners = [];
this._handleKeyboardEventListener = this._handleKeyboardEventListener.bind(this);
this.resume();
}
Gamepad.prototype._handleGamepadConnected = function (index) {
if (this._handlers.gamepad.connect) {
this._handlers.gamepad.connect({ index: index });
}
};
Gamepad.prototype._handleGamepadDisconnected = function (index) {
if (this._handlers.gamepad.disconnect) {
this._handlers.gamepad.disconnect({ index: index });
}
};
Gamepad.prototype._handleGamepadEventListener = function (controller) {
var self = this;
if (controller && controller.connected) {
controller.buttons.forEach(function (button, index) {
var keys = findKeyMapping(index, self._keyMapping.gamepad);
if (keys) {
keys.forEach(function (key) {
if (button.pressed) {
if (!self._events.gamepad[controller.index][key]) {
self._events.gamepad[controller.index][key] = {
pressed: true,
hold: false,
released: false,
player: controller.index
};
}
self._events.gamepad[controller.index][key].value = button.value;
} else if (!button.pressed && self._events.gamepad[controller.index][key]) {
self._events.gamepad[controller.index][key].released = true;
self._events.gamepad[controller.index][key].hold = false;
}
});
}
});
}
};
Gamepad.prototype._handleGamepadAxisEventListener = function (controller) {
var self = this;
if (controller && controller.connected) {
Object.keys(self._keyMapping.axes).forEach(function (key) {
var axes = Array.prototype.slice.apply(controller.axes, self._keyMapping.axes[key]);
if (Math.abs(axes[0]) > self._threshold || Math.abs(axes[1]) > self._threshold) {
self._events.axes[controller.index][key] = {
pressed: self._events.axes[controller.index][key] ? false : true,
hold: self._events.axes[controller.index][key] ? true : false,
released: false,
value: axes
};
} else if (self._events.axes[controller.index][key]) {
self._events.axes[controller.index][key] = {
pressed: false,
hold: false,
released: true,
value: axes
};
}
});
}
};
Gamepad.prototype._handleKeyboardEventListener = function (e) {
var self = this,
keys = findKeyMapping(e.keyCode, self._keyMapping.keyboard);
if (keys) {
keys.forEach(function (key) {
if (e.type === 'keydown' && !self._events.keyboard[key]) {
self._events.keyboard[key] = {
pressed: true,
hold: false,
released: false
};
} else if (e.type === 'keyup' && self._events.keyboard[key]) {
self._events.keyboard[key].released = true;
self._events.keyboard[key].hold = false;
}
});
}
};
Gamepad.prototype._handleEvent = function (key, events, player) {
if (events[key].pressed) {
this.trigger('press', key, events[key].value, player);
events[key].pressed = false;
events[key].hold = true;
} else if (events[key].hold) {
this.trigger('hold', key, events[key].value, player);
} else if (events[key].released) {
this.trigger('release', key, events[key].value, player);
delete events[key];
}
};
Gamepad.prototype._loop = function () {
var self = this,
gamepads = hasGamepadSupport ? window.navigator.getGamepads() : false,
length = 4, // length = gamepads.length;
i;
if (gamepads) {
for (i = 0; i < length; i = i + 1) {
if (gamepads[i]) {
if (!self._events.gamepad[i]) {
self._handleGamepadConnected(i);
self._events.gamepad[i] = {};
self._events.axes[i] = {};
}
self._handleGamepadEventListener(gamepads[i]);
self._handleGamepadAxisEventListener(gamepads[i]);
} else if (self._events.gamepad[i]) {
self._handleGamepadDisconnected(i);
self._events.gamepad[i] = null;
self._events.axes[i] = null;
}
}
self._events.gamepad.forEach(function (gamepad, player) {
if (gamepad) {
Object.keys(gamepad).forEach(function (key) {
self._handleEvent(key, gamepad, player);
});
}
});
self._events.axes.forEach(function (gamepad, player) {
if (gamepad) {
Object.keys(gamepad).forEach(function (key) {
self._handleEvent(key, gamepad, player);
});
}
});
}
Object.keys(self._events.keyboard).forEach(function (key) {
self._handleEvent(key, self._events.keyboard, 'keyboard');
});
if (self._requestAnimation) {
self._requestAnimation = _requestAnimationFrame(self._loop.bind(self));
}
};
Gamepad.prototype.on = function (type, button, callback, options) {
var self = this;
if (Object.keys(this._handlers.gamepad).indexOf(type) !== -1 && typeof button === 'function') {
this._handlers.gamepad[type] = button;
this._events.gamepad = [];
} else {
if (typeof type === "string" && type.match(/\s+/)) {
type = type.split(/\s+/g);
}
if (typeof button === "string" && button.match(/\s+/)) {
button = button.split(/\s+/g);
}
if (Array.isArray(type)) {
type.forEach(function (type) {
self.on(type, button, callback, options);
});
} else if (Array.isArray(button)) {
button.forEach(function (button) {
self.on(type, button, callback, options);
});
} else {
this._listeners.push({
type: type,
button: button,
callback: callback,
options: options
});
}
}
};
Gamepad.prototype.off = function (type, button) {
var self = this;
if (typeof type === "string" && type.match(/\s+/)) {
type = type.split(/\s+/g);
}
if (typeof button === "string" && button.match(/\s+/)) {
button = button.split(/\s+/g);
}
if (Array.isArray(type)) {
type.forEach(function (type) {
self.off(type, button);
});
} else if (Array.isArray(button)) {
button.forEach(function (button) {
self.off(type, button);
});
} else {
this._listeners = this._listeners.filter(function (listener) {
return listener.type !== type && listener.button !== button;
});
}
};
Gamepad.prototype.setCustomMapping = function (device, config) {
if (this._keyMapping[device] !== undefined) {
this._keyMapping[device] = config;
} else {
throw new Error('The device "' + device + '" is not supported through gamepad.js');
}
};
Gamepad.prototype.setGlobalThreshold = function (num) {
this._threshold = parseFloat(num);
};
Gamepad.prototype.trigger = function (type, button, value, player) {
if (this._listeners) {
this._listeners.forEach(function (listener) {
if (listener.type === type && listener.button === button) {
listener.callback({
type: listener.type,
button: listener.button,
value: value,
player: player,
event: listener,
timestamp: Date.now()
});
}
});
}
};
Gamepad.prototype.pause = function () {
_cancelAnimationFrame(this._requestAnimation);
this._requestAnimation = null;
document.removeEventListener('keydown', this._handleKeyboardEventListener);
document.removeEventListener('keyup', this._handleKeyboardEventListener);
};
Gamepad.prototype.resume = function () {
this._requestAnimation = _requestAnimationFrame(this._loop.bind(this));
document.addEventListener('keydown', this._handleKeyboardEventListener);
document.addEventListener('keyup', this._handleKeyboardEventListener);
};
Gamepad.prototype.destroy = function () {
this.pause();
delete this._listeners;
};
if (typeof define === 'function' && define.amd !== undefined) {
define([], function () { return Gamepad; });
} else if (typeof module === 'object' && module.exports !== undefined) {
module.exports = Gamepad;
} else {
window.Gamepad = Gamepad;
}
}());

10
html/games.js Normal file
View file

@ -0,0 +1,10 @@
function startGame(int){
if(int == 0){//SLIMEY JUMP
var game = document.createElement('iframe');
game.id = 'frame';
game.src = "https://v6p9d9t4.ssl.hwcdn.net/html/1493204/index.html";
game.style.position = 'fixed';
game.style.width = '100%';
game.style.zIndex = '990';
}
}

326
html/index.html
View file

@ -1,163 +1,163 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Console hub (ALPHA)</title> <title>Console hub (ALPHA)</title>
<link rel="stylesheet" href="iconfont/styles.css"> <link rel="stylesheet" href="iconfont/styles.css">
<link rel="stylesheet" href="styles.min.css"> <link rel="stylesheet" href="styles.min.css">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
</head> </head>
<body> <body>
<div class="welcome-main"> <div class="welcome-main">
<h1 class="title-font">Welcome</h1> <h1 class="title-font">Welcome</h1>
<h5 class="glow" id="welcome-continue">Press <b>START</b> to procceed</h5> <h5 class="glow" id="welcome-continue">Press <b>START</b> to procceed</h5>
</div> </div>
<nav> <nav>
<div class="profile"> <div class="profile">
Not loged in Not loged in
</div> </div>
<div class="info"> <div class="info">
<i class="material-icons"> <i class="material-icons">
network_wifi network_wifi
</i> </i>
<span class="time" id="time"> <span class="time" id="time">
00:00 00:00
</span> </span>
</div> </div>
</nav> </nav>
<div id="selection" class="menu hidden"> <div id="selection" class="menu hidden">
<div id="games-view" class="menu-item hidden"> <div id="games-view" class="menu-item hidden">
<h1 class="title-font">Games</h1> <h1 class="title-font">Games</h1>
<div class="previews"> <div class="previews">
<div class="game" id="game-slimey"> <div class="game" id="game-slimey">
<img src="games/slimey.png" class="game-preview"> <img src="games/slimey.png" class="game-preview">
<span>Slimey, JUMP</span> <span>Slimey, JUMP</span>
</div> </div>
<div class="game" id="game-test2"> <div class="game" id="game-test2">
<img src="https://cdn.supercell.com/supercell.com/190617073222/supercell.com/files/styles/hero_image_narrow/public/hero_bg_brawlstars_.jpg?itok=yifeFssz&timestamp=1544532809" class="game-preview"> <img src="https://cdn.supercell.com/supercell.com/190617073222/supercell.com/files/styles/hero_image_narrow/public/hero_bg_brawlstars_.jpg?itok=yifeFssz&timestamp=1544532809" class="game-preview">
<span>Brawl stars</span> <span>Brawl stars</span>
</div> </div>
</div> </div>
</div> </div>
<div id="settings-view" class="menu-item hidden"> <div id="settings-view" class="menu-item hidden">
<h1 class="title-font">Settings</h1> <h1 class="title-font">Settings</h1>
<div class="switch-label option switchable" id="option-fullscreen"> <div class="switch-label option switchable" id="option-fullscreen">
<span>Fullscreen</span> <span>Fullscreen</span>
<label class="switch"> <label class="switch">
<input type="checkbox"> <input type="checkbox">
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </div>
<div class="switch-label option switchable" id="option-auto-update"> <div class="switch-label option switchable" id="option-auto-update">
<span>Auto updates</span> <span>Auto updates</span>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </div>
</div> </div>
<div id="account-view" class="menu-item hidden"> <div id="account-view" class="menu-item hidden">
<h1 class="title-font">Account</h1> <h1 class="title-font">Account</h1>
<p>You aren't signed in</p> <p>You aren't signed in</p>
<button>Login/register</button> <button>Login/register</button>
</div> </div>
<div id="store-view" class="menu-item hidden"> <div id="store-view" class="menu-item hidden">
<h1 class="title-font">Store</h1> <h1 class="title-font">Store</h1>
<p>Not available in ALHPA stage</p> <p>Not available in ALHPA stage</p>
</div> </div>
</div> </div>
<div id="dialog" class="hidden"> <div id="dialog" class="hidden">
<h1 id="dialog-title">TITLE</h1> <h1 id="dialog-title">TITLE</h1>
<p id="dialog-text">TEXT</p> <p id="dialog-text">TEXT</p>
<div id="dialog-buttons"> <div id="dialog-buttons">
<button id="dialog-button_1">OK</button> <button id="dialog-button_1">OK</button>
</div> </div>
</div> </div>
<div id="main-menu" class="main hidden"> <div id="main-menu" class="main hidden">
<div class="button-main-container"> <div class="button-main-container">
<div class="button-main selected" id="games"> <div class="button-main selected" id="games">
<div class="button-menu" id="games-menu"> <div class="button-menu" id="games-menu">
<i class="material-icons"> <i class="material-icons">
videogame_asset videogame_asset
</i> </i>
</div> </div>
<span> <span>
Games Games
</span> </span>
</div> </div>
</div> </div>
<div class="button-main-container"> <div class="button-main-container">
<div class="button-main " id="settings"> <div class="button-main " id="settings">
<div class="button-menu" id="settings-menu"> <div class="button-menu" id="settings-menu">
<i class="material-icons"> <i class="material-icons">
settings settings
</i> </i>
</div> </div>
<span> <span>
Settings Settings
</span> </span>
</div> </div>
</div> </div>
<div class="button-main-container"> <div class="button-main-container">
<div class="button-main " id="account"> <div class="button-main " id="account">
<div class="button-menu" id="account-menu"> <div class="button-menu" id="account-menu">
<i class="material-icons"> <i class="material-icons">
account_box account_box
</i> </i>
</div> </div>
<span> <span>
Account Account
</span> </span>
</div> </div>
</div> </div>
<div class="button-main-container"> <div class="button-main-container">
<div class="button-main " id="store"> <div class="button-main " id="store">
<div class="button-menu" id="store-menu"> <div class="button-menu" id="store-menu">
<i class="material-icons"> <i class="material-icons">
local_grocery_store local_grocery_store
</i> </i>
</div> </div>
<span> <span>
Store Store
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div id="back" class="back-arrow hidden"> <div id="back" class="back-arrow hidden">
<i class="material-icons circle"> <i class="material-icons circle">
arrow_back arrow_back
</i> </i>
<span id="back-text">back</span> <span id="back-text">back</span>
</div> </div>
<div id="snackbar"></div> <div id="snackbar"></div>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script><!-- This is done to eliminate $ is not define on electron --> <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="../jquery.min.js"></script> <script src="../jquery.min.js"></script>
<script>if (window.module) module = window.module;</script> <script>if (window.module) module = window.module;</script>
<script src="gamepad.js"></script> <script src="gamepad.js"></script>
<script src="functions.js"></script> <script src="functions.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
<script src="onlineChecker.js"></script> <script src="onlineChecker.js"></script>
<script src="node.js"></script> <script src="node.js"></script>
<script src="keyboard.js"></script> <script src="keyboard.js"></script>
<script> <script>
</script> </script>
</body> </body>
</html> </html>

25
html/keyboard.js Normal file
View file

@ -0,0 +1,25 @@
$(document).keypress((event) => {
if(event.which == 39){//RIGHT
if(menuType == 'horizontal'){
goRight();
}
} else if(event.which == 40){//DOWN
if(menuType != 'horizontal'){
goRight();
}
} else if(event.which == 37){//LEFT
if(menuType == 'horizontal'){
goLeft();
}
} else if(event.which == 38){//UP
if(menuType != 'horizontal'){
goLeft();
}
} else if(event.which == 13){
select();
event.preventDefault();
} else if(event.which == 27){
deselect();
event.preventDefault();
}
})

16
html/manifest.json Normal file
View file

@ -0,0 +1,16 @@
{
"short_name": "Console hub",
"name": "Console hub beta",
"icons": [
{
"src": "/favicon.ico",
"type": "image/ico"
}
],
"start_url": "/",
"background_color": "#5d75ad",
"display": "standalone",
"orientation": "landscape",
"scope": "/",
"theme_color": "#5d75ad"
}

23
html/node.js Normal file
View file

@ -0,0 +1,23 @@
var wifi, wifiQuality;
// In renderer process (web page).
const { ipcRenderer } = require('electron')
ipcRenderer.on('wifi', (event, arg) => {
wifi = arg;
wifi = wifi;
})
ipcRenderer.on('wifiQuality', (event, arg) => {
wifiQuality = arg;
wifiQuality = wifiQuality;
})
ipcRenderer.on('fullscreen', (event, arg) => {
console.log("Fullscreen now " + arg);
settingMenuItemValues[0] = arg;
})
function sendFullscreen(bool){
console.log("Sending fullscreen " + bool);
ipcRenderer.send('fullscreen', bool);
}
ipcRenderer.send('get-data', 'wifi');
ipcRenderer.send('get-data', 'wifiQuality');

25
html/onlineChecker.js Normal file
View file

@ -0,0 +1,25 @@
var wifi = true;
var wifiQuality = 100;
function updateIndicator() {
if(navigator.onLine){
if(wifiQuality > 75){
$('.info i').html('signal_wifi_4_bar');
} else if(wifiQuality > 50){
$('.info i').html('signal_wifi_3_bar');
} else if(wifiQuality > 25){
$('.info i').html('signal_wifi_2_bar');
} else if(wifiQuality > 10){
$('.info i').html('signal_wifi_1_bar');
} else {
$('.info i').html('signal_wifi_0_bar');
}
console.log('Wifi quality is ' + wifiQuality + '%')
} else {
$('.info i').html('signal_wifi_off');
console.log('offline');
}
}
window.addEventListener('online', updateIndicator);
window.addEventListener('offline', updateIndicator);
updateIndicator();

155
html/script.js Normal file
View file

@ -0,0 +1,155 @@
var start = true;
var screen = 0;
var menu = 0;
var gamepads = 0;
const gamepad = new Gamepad();
var toastCancel;
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes();
function pad(num, size){ return ('00000000000000' + num).substr(-size); }
setInterval((function(){
today = new Date();
time = pad(today.getHours(), 2) + ":" + pad(today.getMinutes(), 2);
$("#time").html(time);
}), 1000);
function toast(string) {
clearTimeout(toastCancel);
var x = document.getElementById("snackbar");
x.className = "show";
x.innerHTML = string;
toastCancel = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
function showWelcomeText(){
var x = document.getElementById("welcome-continue");
if(gamepads > 0){
x.innerHTML = "Press <b>START</b> to procceed";
} else {
x.innerHTML = "Connect your gamepad!";
}
}
function showMainMenu(){
window.start = false;
window.screen = 1;
window.menu = 1;
goRight();
goLeft();
$(".game").width((function(offset, width){
return $(".game .game-preview:eq(" + offset + ")").width();
}));
$("#main-menu").removeClass('hidden');
$("#selection").removeClass("hidden");
$(".welcome-main").addClass("hide");
setTimeout(1000, (function(){$(".welcome-main").hide();}));
}
function showStartMenu(){
window.start = true;
window.screen = 0;
window.menu = 0;
$("#main-menu").addClass('hidden');
$("#selection").addClass("hidden");
$(".welcome-main").removeClass("hide");
$(".welcome-main").show();
}
gamepad.on('connect', e => {
gamepads++;
showWelcomeText();
toast(`Player ${e.index + 1} has connected`);
console.log(`controller ${e.index} connected!`);
});
gamepad.on('disconnect', e => {
toast(`Player ${e.index + 1} has disconnected`);
gamepads --;
console.log(`controller ${e.index} disconnected!`);
});
gamepad.on('press', 'start', () => {
showMainMenu();
});
gamepad.on('press', 'd_pad_left', () => {
goLeft();
});
gamepad.on('press', 'd_pad_right', () => {
goRight();
});
gamepad.on('press', 'button_1', () => {
select();
});
gamepad.on('press', 'button_2', () => {
deselect();
});
function goLeft(){
if(menu == 1 || menu == 2 || menu == 3){
selected--;
callMenuItem();
}
console.log("Going left");
}
function goRight(){
if(menu == 1 || menu == 2 || menu == 3){
selected++;
callMenuItem();
}
console.log("Going right");
}
var leftCounter = 0;
var rightCounter = 0;
var remover;
function onAxis(){
if(navigator.webkitGetGamepads) {
if(navigator.webkitGetGamepads().length > 0){
var gp = navigator.webkitGetGamepads()[0];
} else {
return;
}
} else if(navigator.getGamepads().length > 0) {
var gp = navigator.getGamepads()[0];
} else {
return;
}
if(gp == null){
return;
}
if(menuType == 'horizontal'){
if(gp.axes[0] == 1){
rightCounter++;
console.log("Right axis (" + gp.axes[0] + ')');
} else if(gp.axes[0] == -1){
leftCounter++;
console.log('Left axis (' + gp.axes[0] + ')');
} else {
leftCounter = 0;
rightCounter = 0;
}
} else {
if(gp.axes[1] == 1){
rightCounter++;
console.log("Top axis (" + gp.axes[1] + ')');
} else if(gp.axes[1] == -1){
leftCounter++;
console.log('Bottom axis (' + gp.axes[1] + ')');
} else {
leftCounter = 0;
rightCounter = 0;
}
}
if(leftCounter == 1){
goLeft();
leftCounter = 2;
remover = setTimeout((function(){rightCounter = 0; leftCounter = 0;}), 500);
}
if(rightCounter == 1){
goRight();
rightCounter = 2;
remover = setTimeout((function(){rightCounter = 0; leftCounter = 0;}), 500);
}
}
setInterval(onAxis, 100);

1
html/styles.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

430
html/styles.scss Normal file
View file

@ -0,0 +1,430 @@
/*
* VARS
*/
$unselected: rgb(182,182,182);
$selected: white;
/*
* FONTS
*/
@font-face {
font-family: 'Open sans';
src: url('open-sans/OpenSans-Regular.ttf');
}
@font-face {
font-family: 'Gilroy-bold';
src: url('Gilroy-ExtraBold.otf');
}
body {
background: #5d75ad;
background: linear-gradient(216deg, #6b89cf, #3a3766);
background-size: 400% 400%;
-webkit-animation: BackgroundGradient 33s ease infinite;
-moz-animation: BackgroundGradient 33s ease infinite;
-o-animation: BackgroundGradient 33s ease infinite;
animation: BackgroundGradient 33s ease infinite;
}
/*
* Background
*/
@-webkit-keyframes BackgroundGradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
}
@-moz-keyframes BackgroundGradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
}
@-o-keyframes BackgroundGradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
}
@keyframes BackgroundGradient {
0%{background-position:0% 22%}
50%{background-position:100% 79%}
100%{background-position:0% 22%}
}
/*
* Main menu
*/
.main {
display: block;
position: fixed;
bottom: 40px;
left: 10px;
.button-main-container {
display: inline-block;
height: 120px;
.button-main {
transition: 0.5s margin-top;
margin-top: 20px;
color: $unselected;
span {
padding-left: 10px;
}
.button-menu {
margin-left: 5px;
margin-right: 5px;
padding-left: 45px;
padding-right: 45px;
border-radius: 5px;
height: 100px;
width: 100px;
color: white;
background: #414E92;
.material-icons {
font-size: 100px;
}
}
}
}
}
.button-main-container .button-main.selected{
color: white;
margin-top: 0px;
.button-menu{
background: #3D7BFF;
box-shadow: 0px 0px 5px rgba(61, 123, 255, 0.8);
}
}
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
body {
padding: 0;
margin: 0;
width: 100%;
height: 95%;
}
font-family: 'Open Sans', sans-serif;
}
.hidden {
display: none !important;
}
.title-font {
font-family: 'Gilroy-bold', 'Open Sans', sans-serif;
}
/*
* Tab views
*/
#selection {
position: absolute;
top: 50px;
left: 15px;
width: calc(100% - 15px);
.menu-item {
color: white;
h1 {
font-family: 'Gilroy-bold', 'Open Sans', sans-serif;
padding: 10px;
font-size: 50px;
margin: 0;
}
}
#games-view {
.previews {
height: 150px;
.game {
height: auto;
text-align: justify;
height: 150px;
.game-preview {
height: 130px;
border-radius: 5px;
// Now in JS
// -webkit-transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
// -moz-transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
// transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
}
font-size: 20px;
display: inline-block;
color: $unselected;
opacity: 1;
-webkit-transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
-moz-transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
}
.game.selected {
height: 190px;
color: $selected;
.game-preview {
height: 170px;
-webkit-box-shadow: 0px 27px 72px -32px rgba(0,0,0,0.51);
-moz-box-shadow: 0px 27px 72px -32px rgba(0,0,0,0.51);
box-shadow: 0px 27px 72px -32px rgba(0,0,0,0.51);
}
}
}
}
}
/*
* Information panel, marked as 'nav'
*/
nav {
z-index:999;
display: flex;
justify-content: space-between;
padding: 10px;
position: fixed;
top: 0;
left: 0;
height: 30px;
width: calc(100% - 20px);
.profile {
left: 0;
}
.info {
right: 0;
}
div {
display: inline;
color: white;
}
}
/*
* Dialog
*/
#dialog {
display: block;
position: fixed;
z-index: 998;
}
/*
* Account
*/
#account-view {
button {
color: white;
background-color: transparent;
border: 1px solid white;
border-radius: 40px;
font-size: 20px;
}
}
/*
* Settings page
*/
#settings-view {
.option {
color: $unselected;
}
.option.selected {
color: $selected;
}
.option.switchable {
.switch .slider{
width: 52px;
height: 25px;
}
.switch .slider:before {
width: 18px;
height: 18px;
}
}
}
/*
* Startup
*/
.welcome-main {
color: white;
width: 500px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
//fade out transition
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
h1 {
font-size: 100px;
margin: 0;
}
h5 {
margin-top: 0;
b {
}
}
}
.welcome-main.hide {
opacity: 0;
}
.glow {
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
$innerGlowColor: #fff;
$outerGlowColorLight: #fff;//#e60073
$outerGlowColorDark: #969696;//#ff4da6
$GlowSize: 1px;
@-webkit-keyframes glow {
from {
text-shadow: 0 0 $GlowSize*1 $innerGlowColor, 0 0 $GlowSize*2 $innerGlowColor, 0 0 $GlowSize*3 $outerGlowColorLight, 0 0 $GlowSize*4 $outerGlowColorLight, 0 0 $GlowSize*5 $outerGlowColorLight, 0 0 $GlowSize*6 $outerGlowColorLight, 0 0 $GlowSize*7 $outerGlowColorLight;
}
to {
text-shadow: 0 0 $GlowSize*2 $innerGlowColor, 0 0 $GlowSize*3 $outerGlowColorDark, 0 0 $GlowSize*4 $outerGlowColorDark, 0 0 $GlowSize*5 $outerGlowColorDark, 0 0 $GlowSize*6 $outerGlowColorDark, 0 0 $GlowSize*7 $outerGlowColorDark, 0 0 $GlowSize*8 $outerGlowColorDark;
}
}
/*
* UI
*/
$MainColor: #fff;
$SecondaryColor: #fff;
$OutlineColor: rgb(196, 213, 1);
.back-arrow {
position: fixed;
bottom: 20px;
left: 20px;
color: $OutlineColor;
.circle {
border-radius: 50%;
border: 1px solid $OutlineColor;
}
vertical-align: middle;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/*
* Snackbar / toast messages
*/
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
//background-color: #333; /* Black background color */
color: #fff; /* White text color */
text-align: center; /* Centered text */
border-radius: 2px; /* Rounded borders */
padding: 16px; /* Padding */
position: fixed; /* Sit on top of the screen */
z-index: 100; /* Add a z-index if needed */
left: 50%; /* Center the snackbar */
bottom: 15px; /* 30px from the bottom */
}
/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
-webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes snackbarFadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes snackbarFadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes snackbarFadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes snackbarFadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
/*
* Switches / sliders
*/
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

1
html/version.txt Normal file
View file

@ -0,0 +1 @@
01