diff --git a/html/functions.js b/html/functions.js new file mode 100644 index 0000000..f5fb41e --- /dev/null +++ b/html/functions.js @@ -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(); + })); + } +} diff --git a/html/gamepad.js b/html/gamepad.js new file mode 100644 index 0000000..0de0b38 --- /dev/null +++ b/html/gamepad.js @@ -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; + + } + +}()); diff --git a/html/games.js b/html/games.js new file mode 100644 index 0000000..21dc453 --- /dev/null +++ b/html/games.js @@ -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'; + } +} diff --git a/html/index.html b/html/index.html index bafeef0..dd17715 100644 --- a/html/index.html +++ b/html/index.html @@ -1,163 +1,163 @@ - - - - - Console hub (ALPHA) - - - - - - -
-

Welcome

-
Press START to procceed
-
- - - - - - - - - - - -
- - - - - - - - - - - - + + + + + Console hub (ALPHA) + + + + + + +
+

Welcome

+
Press START to procceed
+
+ + + + + + + + + + + +
+ + + + + + + + + + + + diff --git a/html/keyboard.js b/html/keyboard.js new file mode 100644 index 0000000..106b869 --- /dev/null +++ b/html/keyboard.js @@ -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(); + } +}) diff --git a/html/manifest.json b/html/manifest.json new file mode 100644 index 0000000..218883d --- /dev/null +++ b/html/manifest.json @@ -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" +} diff --git a/html/node.js b/html/node.js new file mode 100644 index 0000000..e271a06 --- /dev/null +++ b/html/node.js @@ -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'); diff --git a/html/onlineChecker.js b/html/onlineChecker.js new file mode 100644 index 0000000..6ed8c03 --- /dev/null +++ b/html/onlineChecker.js @@ -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(); diff --git a/html/script.js b/html/script.js new file mode 100644 index 0000000..c6d1234 --- /dev/null +++ b/html/script.js @@ -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 START 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); diff --git a/html/styles.min.css b/html/styles.min.css new file mode 100644 index 0000000..b918781 --- /dev/null +++ b/html/styles.min.css @@ -0,0 +1 @@ +@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}@-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{display:block;position:fixed;bottom:40px;left:10px}.main .button-main-container{display:inline-block;height:120px}.main .button-main-container .button-main{transition:0.5s margin-top;margin-top:20px;color:#b6b6b6}.main .button-main-container .button-main span{padding-left:10px}.main .button-main-container .button-main .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}.main .button-main-container .button-main .button-menu .material-icons{font-size:100px}.button-main-container .button-main.selected{color:white;margin-top:0px}.button-main-container .button-main.selected .button-menu{background:#3D7BFF;box-shadow:0px 0px 5px rgba(61,123,255,0.8)}html{width:100%;height:100%;padding:0;margin:0;font-family:'Open Sans', sans-serif}html body{padding:0;margin:0;width:100%;height:95%}.hidden{display:none !important}.title-font{font-family:'Gilroy-bold', 'Open Sans', sans-serif}#selection{position:absolute;top:50px;left:15px;width:calc(100% - 15px)}#selection .menu-item{color:white}#selection .menu-item h1{font-family:'Gilroy-bold', 'Open Sans', sans-serif;padding:10px;font-size:50px;margin:0}#selection #games-view .previews{height:150px}#selection #games-view .previews .game{height:auto;text-align:justify;height:150px;font-size:20px;display:inline-block;color:#b6b6b6;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}#selection #games-view .previews .game .game-preview{height:130px;border-radius:5px}#selection #games-view .previews .game.selected{height:190px;color:#fff}#selection #games-view .previews .game.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)}nav{z-index:999;display:flex;justify-content:space-between;padding:10px;position:fixed;top:0;left:0;height:30px;width:calc(100% - 20px)}nav .profile{left:0}nav .info{right:0}nav div{display:inline;color:white}#dialog{display:block;position:fixed;z-index:998}#account-view button{color:white;background-color:transparent;border:1px solid white;border-radius:40px;font-size:20px}#settings-view .option{color:#b6b6b6}#settings-view .option.selected{color:#fff}#settings-view .option.switchable .switch .slider{width:52px;height:25px}#settings-view .option.switchable .switch .slider:before{width:18px;height:18px}.welcome-main{color:white;width:500px;margin-left:auto;margin-right:auto;position:relative;top:50%;transform:translateY(-50%);-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}.welcome-main h1{font-size:100px;margin:0}.welcome-main h5{margin-top:0}.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}@-webkit-keyframes glow{from{text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff}to{text-shadow:0 0 2px #fff,0 0 3px #969696,0 0 4px #969696,0 0 5px #969696,0 0 6px #969696,0 0 7px #969696,0 0 8px #969696}}.back-arrow{position:fixed;bottom:20px;left:20px;color:#c4d501;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}.back-arrow .circle{border-radius:50%;border:1px solid #c4d501}#snackbar{visibility:hidden;min-width:250px;margin-left:-125px;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:100;left:50%;bottom:15px}#snackbar.show{visibility:visible;-webkit-animation:snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;animation:snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s}@-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}}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.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)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%} diff --git a/html/styles.scss b/html/styles.scss new file mode 100644 index 0000000..111dcd8 --- /dev/null +++ b/html/styles.scss @@ -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%; +} diff --git a/html/version.txt b/html/version.txt new file mode 100644 index 0000000..85ebd3a --- /dev/null +++ b/html/version.txt @@ -0,0 +1 @@ +01