mirror of
https://github.com/danbulant/console-hub
synced 2026-06-18 22:11:28 +00:00
Add files via upload
This commit is contained in:
Daniel Bulant
GitHub
parent
058486ede9
commit
be1e13e96d
12 changed files with 1518 additions and 163 deletions
141
html/functions.js
Normal file
141
html/functions.js
Normal 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
528
html/gamepad.js
Normal 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
10
html/games.js
Normal 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
326
html/index.html
|
|
@ -1,163 +1,163 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Console hub (ALPHA)</title>
|
||||
<link rel="stylesheet" href="iconfont/styles.css">
|
||||
<link rel="stylesheet" href="styles.min.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<div class="welcome-main">
|
||||
<h1 class="title-font">Welcome</h1>
|
||||
<h5 class="glow" id="welcome-continue">Press <b>START</b> to procceed</h5>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<div class="profile">
|
||||
Not loged in
|
||||
</div>
|
||||
<div class="info">
|
||||
<i class="material-icons">
|
||||
network_wifi
|
||||
</i>
|
||||
<span class="time" id="time">
|
||||
00:00
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="selection" class="menu hidden">
|
||||
|
||||
<div id="games-view" class="menu-item hidden">
|
||||
<h1 class="title-font">Games</h1>
|
||||
|
||||
<div class="previews">
|
||||
<div class="game" id="game-slimey">
|
||||
<img src="games/slimey.png" class="game-preview">
|
||||
<span>Slimey, JUMP</span>
|
||||
</div>
|
||||
<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×tamp=1544532809" class="game-preview">
|
||||
<span>Brawl stars</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="settings-view" class="menu-item hidden">
|
||||
<h1 class="title-font">Settings</h1>
|
||||
|
||||
<div class="switch-label option switchable" id="option-fullscreen">
|
||||
<span>Fullscreen</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-label option switchable" id="option-auto-update">
|
||||
<span>Auto updates</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="account-view" class="menu-item hidden">
|
||||
<h1 class="title-font">Account</h1>
|
||||
<p>You aren't signed in</p>
|
||||
<button>Login/register</button>
|
||||
</div>
|
||||
|
||||
<div id="store-view" class="menu-item hidden">
|
||||
<h1 class="title-font">Store</h1>
|
||||
<p>Not available in ALHPA stage</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="dialog" class="hidden">
|
||||
<h1 id="dialog-title">TITLE</h1>
|
||||
<p id="dialog-text">TEXT</p>
|
||||
<div id="dialog-buttons">
|
||||
<button id="dialog-button_1">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main-menu" class="main hidden">
|
||||
|
||||
<div class="button-main-container">
|
||||
<div class="button-main selected" id="games">
|
||||
<div class="button-menu" id="games-menu">
|
||||
<i class="material-icons">
|
||||
videogame_asset
|
||||
</i>
|
||||
</div>
|
||||
<span>
|
||||
Games
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-main-container">
|
||||
<div class="button-main " id="settings">
|
||||
<div class="button-menu" id="settings-menu">
|
||||
<i class="material-icons">
|
||||
settings
|
||||
</i>
|
||||
</div>
|
||||
<span>
|
||||
Settings
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-main-container">
|
||||
<div class="button-main " id="account">
|
||||
<div class="button-menu" id="account-menu">
|
||||
<i class="material-icons">
|
||||
account_box
|
||||
</i>
|
||||
</div>
|
||||
<span>
|
||||
Account
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-main-container">
|
||||
<div class="button-main " id="store">
|
||||
<div class="button-menu" id="store-menu">
|
||||
<i class="material-icons">
|
||||
local_grocery_store
|
||||
</i>
|
||||
</div>
|
||||
<span>
|
||||
Store
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="back" class="back-arrow hidden">
|
||||
<i class="material-icons circle">
|
||||
arrow_back
|
||||
</i>
|
||||
<span id="back-text">back</span>
|
||||
</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 src="../jquery.min.js"></script>
|
||||
<script>if (window.module) module = window.module;</script>
|
||||
<script src="gamepad.js"></script>
|
||||
<script src="functions.js"></script>
|
||||
<script src="script.js"></script>
|
||||
<script src="onlineChecker.js"></script>
|
||||
<script src="node.js"></script>
|
||||
<script src="keyboard.js"></script>
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Console hub (ALPHA)</title>
|
||||
<link rel="stylesheet" href="iconfont/styles.css">
|
||||
<link rel="stylesheet" href="styles.min.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<div class="welcome-main">
|
||||
<h1 class="title-font">Welcome</h1>
|
||||
<h5 class="glow" id="welcome-continue">Press <b>START</b> to procceed</h5>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<div class="profile">
|
||||
Not loged in
|
||||
</div>
|
||||
<div class="info">
|
||||
<i class="material-icons">
|
||||
network_wifi
|
||||
</i>
|
||||
<span class="time" id="time">
|
||||
00:00
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="selection" class="menu hidden">
|
||||
|
||||
<div id="games-view" class="menu-item hidden">
|
||||
<h1 class="title-font">Games</h1>
|
||||
|
||||
<div class="previews">
|
||||
<div class="game" id="game-slimey">
|
||||
<img src="games/slimey.png" class="game-preview">
|
||||
<span>Slimey, JUMP</span>
|
||||
</div>
|
||||
<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×tamp=1544532809" class="game-preview">
|
||||
<span>Brawl stars</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="settings-view" class="menu-item hidden">
|
||||
<h1 class="title-font">Settings</h1>
|
||||
|
||||
<div class="switch-label option switchable" id="option-fullscreen">
|
||||
<span>Fullscreen</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-label option switchable" id="option-auto-update">
|
||||
<span>Auto updates</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="account-view" class="menu-item hidden">
|
||||
<h1 class="title-font">Account</h1>
|
||||
<p>You aren't signed in</p>
|
||||
<button>Login/register</button>
|
||||
</div>
|
||||
|
||||
<div id="store-view" class="menu-item hidden">
|
||||
<h1 class="title-font">Store</h1>
|
||||
<p>Not available in ALHPA stage</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="dialog" class="hidden">
|
||||
<h1 id="dialog-title">TITLE</h1>
|
||||
<p id="dialog-text">TEXT</p>
|
||||
<div id="dialog-buttons">
|
||||
<button id="dialog-button_1">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main-menu" class="main hidden">
|
||||
|
||||
<div class="button-main-container">
|
||||
<div class="button-main selected" id="games">
|
||||
<div class="button-menu" id="games-menu">
|
||||
<i class="material-icons">
|
||||
videogame_asset
|
||||
</i>
|
||||
</div>
|
||||
<span>
|
||||
Games
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-main-container">
|
||||
<div class="button-main " id="settings">
|
||||
<div class="button-menu" id="settings-menu">
|
||||
<i class="material-icons">
|
||||
settings
|
||||
</i>
|
||||
</div>
|
||||
<span>
|
||||
Settings
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-main-container">
|
||||
<div class="button-main " id="account">
|
||||
<div class="button-menu" id="account-menu">
|
||||
<i class="material-icons">
|
||||
account_box
|
||||
</i>
|
||||
</div>
|
||||
<span>
|
||||
Account
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-main-container">
|
||||
<div class="button-main " id="store">
|
||||
<div class="button-menu" id="store-menu">
|
||||
<i class="material-icons">
|
||||
local_grocery_store
|
||||
</i>
|
||||
</div>
|
||||
<span>
|
||||
Store
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="back" class="back-arrow hidden">
|
||||
<i class="material-icons circle">
|
||||
arrow_back
|
||||
</i>
|
||||
<span id="back-text">back</span>
|
||||
</div>
|
||||
|
||||
<div id="snackbar"></div>
|
||||
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
|
||||
<script src="../jquery.min.js"></script>
|
||||
<script>if (window.module) module = window.module;</script>
|
||||
<script src="gamepad.js"></script>
|
||||
<script src="functions.js"></script>
|
||||
<script src="script.js"></script>
|
||||
<script src="onlineChecker.js"></script>
|
||||
<script src="node.js"></script>
|
||||
<script src="keyboard.js"></script>
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
25
html/keyboard.js
Normal file
25
html/keyboard.js
Normal 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
16
html/manifest.json
Normal 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
23
html/node.js
Normal 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
25
html/onlineChecker.js
Normal 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
155
html/script.js
Normal 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
1
html/styles.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
430
html/styles.scss
Normal file
430
html/styles.scss
Normal 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
1
html/version.txt
Normal file
|
|
@ -0,0 +1 @@
|
|||
01
|
||||
Loading…
Reference in a new issue