dan/console-hub
1
0
Fork 0
mirror of https://github.com/danbulant/console-hub synced 2026-05-19 04:18:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

User selection, security & welcome page

Browse source
This commit is contained in:
danbulant 2019-12-31 15:34:50 +01:00
parent 39277042a0
commit a19487d016
12 changed files with 172 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/css/styles.min.css vendored
View file

@ -1,2 +1,2 @@
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");@font-face{font-family:'Gilroy-bold';src:url("../../dist/fonts/Gilroy-ExtraBold.otf")}body{margin:0;padding:0;background-color:#0e6cc4;overflow-x:hidden;overflow-y:hidden}.title--main{margin:0;padding:0;position:fixed;left:45px;top:100px;font-size:4rem;color:white;font-family:'Gilroy-bold'}.title--description{margin:0;padding:0;position:fixed;left:80px;top:175px;font-size:1.3rem;color:white;font-family:'Open Sans', sans-serif}.cards-list{z-index:99;width:100%;height:350px;top:400px}.cards-list .card{z-index:99;width:300px}.box{z-index:1;position:fixed;top:0;-webkit-transform:rotate(80deg);transform:rotate(80deg);left:0}.wave{position:fixed;top:0;left:0;opacity:.4;position:absolute;top:3%;left:10%;background:#0af;width:3000px;height:2600px;margin-left:-150px;margin-top:-250px;-webkit-transform-origin:50% 48%;transform-origin:50% 48%;border-radius:43%;-webkit-animation:drift 9000ms infinite linear;animation:drift 9000ms infinite linear}.wave.-three{-webkit-animation:drift 8500ms infinite linear;animation:drift 8500ms infinite linear;position:fixed;background-color:#77daff}.wave.-two{-webkit-animation:drift 8000ms infinite linear;animation:drift 8000ms infinite linear;opacity:.1;background:black;position:fixed}.box:after{content:'';display:block;left:0;top:0;width:100%;height:100%;z-index:11;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}@-webkit-keyframes drift{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes drift{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");@font-face{font-family:'Gilroy-bold';src:url("../../dist/fonts/Gilroy-ExtraBold.otf")}body{margin:0;padding:0;background-color:#0e6cc4;overflow-x:hidden;overflow-y:hidden}.title--main{margin:0;padding:0;position:fixed;left:45px;top:100px;font-size:4rem;color:white;font-family:'Gilroy-bold'}.view{width:100%}.title--description{margin:0;padding:0;position:fixed;left:80px;top:175px;font-size:1.3rem;color:white;font-family:'Open Sans', sans-serif}.title--main.middle,.title--description.middle{left:50%;top:50%}.user-cards-list{z-index:99;width:100%;height:30vh;margin-top:30vh;display:-webkit-box;display:-ms-flexbox;display:flex}.user-cards-list .card{z-index:99;margin:5px;font-family:'Open Sans', sans-serif;width:30vh;height:30vh;background-size:30vh 30vh;font-size:2rem;color:white;border:5px solid transparent}.user-cards-list .card .name{margin-top:-15px;padding-left:5px;font-size:43px}.user-cards-list .card img{height:100%;width:100%}.user-cards-list .card p{margin:0}.user-cards-list .card.selected{border:5px solid white}.user-cards-list .card:first-child{margin-left:auto}.user-cards-list .card:last-child{margin-right:auto}.box{z-index:1;position:fixed;top:0;-webkit-transform:rotate(80deg);transform:rotate(80deg);left:0}.wave{position:fixed;top:0;left:0;opacity:.4;position:absolute;top:3%;left:10%;background:#0af;width:3000px;height:2600px;margin-left:-150px;margin-top:-250px;-webkit-transform-origin:50% 48%;transform-origin:50% 48%;border-radius:43%;-webkit-animation:drift 9000ms infinite linear;animation:drift 9000ms infinite linear}.wave.-three{-webkit-animation:drift 8500ms infinite linear;animation:drift 8500ms infinite linear;position:fixed;background-color:#77daff}.wave.-two{-webkit-animation:drift 8000ms infinite linear;animation:drift 8000ms infinite linear;opacity:.1;background:black;position:fixed}.box:after{content:'';display:block;left:0;top:0;width:100%;height:100%;z-index:11;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}@-webkit-keyframes drift{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes drift{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
/*# sourceMappingURL=styles.min.css.map */

2
dist/css/styles.min.css.map vendored
View file

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AAQA,OAAO,CAAC,qEAAI,CACZ,UAAU,CACR,WAAW,CAAE,aAAa,CAC1B,GAAG,CAAE,4CAA4C,CAGnD,AAAA,IAAI,AAAC,CACH,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CACX,gBAAgB,CAAE,OAAO,CACzB,UAAU,CAAC,MAAM,CACjB,UAAU,CAAC,MAAM,CACjB,AAED,AAAA,YAAY,AAAC,CACX,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CACV,QAAQ,CAAE,KAAK,CACf,IAAI,CAAE,IAAI,CACV,GAAG,CAAE,KAAK,CACV,SAAS,CAAE,IAAI,CACf,KAAK,CAAE,KAAK,CACZ,WAAW,CAAE,aAAa,CAC3B,AAED,AAAA,mBAAmB,AAAC,CAClB,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CACV,QAAQ,CAAE,KAAK,CACf,IAAI,CAAE,IAAI,CACV,GAAG,CAAE,KAAK,CACV,SAAS,CAAE,MAAM,CACjB,KAAK,CAAE,KAAK,CACZ,WAAW,CAAE,uBAAuB,CACrC,AAED,AAAA,WAAW,AAAC,CACV,OAAO,CAAE,EAAE,CACX,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,KAAK,CACb,GAAG,CAAE,KAAK,CAKX,AATD,AAKE,WALS,CAKT,KAAK,AAAC,CACJ,OAAO,CAAE,EAAE,CACX,KAAK,CAAE,KAAK,CACb,AAGH,AAAA,IAAI,AAAC,CACH,OAAO,CAAE,CAAC,CACX,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,SAAS,CAAE,aAAa,CACxB,IAAI,CAAE,CAAC,CACP,AAED,AAAA,KAAK,AAAC,CACL,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACN,OAAO,CAAE,EAAE,CACX,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,EAAE,CACP,IAAI,CAAE,GAAG,CACT,UAAU,CAAE,IAAI,CAChB,KAAK,CAAE,MAAM,CACb,MAAM,CAAE,MAAM,CACd,WAAW,CAAE,MAAM,CACnB,UAAU,CAAE,MAAM,CAClB,gBAAgB,CAAE,OAAO,CACzB,aAAa,CAAE,GAAG,CAClB,SAAS,CAAE,4BAA4B,CACxC,AAED,AAAA,KAAK,AAAA,OAAO,AAAC,CACX,SAAS,CAAE,4BAA4B,CACxC,QAAQ,CAAE,KAAK,CACf,gBAAgB,CAAE,OAAO,CACzB,AAED,AAAA,KAAK,AAAA,KAAK,AAAC,CACT,SAAS,CAAE,4BAA4B,CACvC,OAAO,CAAE,EAAE,CACX,UAAU,CAAE,KAAK,CAClB,QAAQ,CAAE,KAAK,CACf,AAED,AAAA,IAAI,AAAA,MAAM,AAAC,CACT,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,KAAK,CACd,IAAI,CAAE,CAAC,CACP,GAAG,CAAE,CAAC,CACN,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,EAAE,CACX,SAAS,CAAE,oBAAoB,CAChC,AAED,UAAU,CAAV,KAAU,CACR,IAAI,CAAG,SAAS,CAAE,YAAY,CAC9B,IAAI,CAAG,SAAS,CAAE,cAAc",
"mappings": "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",
"sources": [
"../../html/views/styles.scss"
],

BIN
dist/icons/plus.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.3 KiB

12
html/utils.js
View file

@ -7,12 +7,16 @@ function removeChildNodes(node){
}
}
function getUsers(){
function getUsers() {
var user = new User;
user.name = "Test";
user.avatar = "https://api.adorable.io/avatars/285/test";
user.name = "Add";
user.avatar = "../../dist/icons/plus.png";
return [user];
var user2 = new User;
user2.name = "Test";
user2.avatar = "https://api.adorable.io/avatars/285/test";
return [user, user2];
}
function usersToCards(users){

2
html/views/data/user.js
View file

@ -11,7 +11,7 @@ class User {
var card = new Card;
card.name = this.name;
card.image = this.avatar;
card.action = "Select";
card.action = false;
return card;
}

12
html/views/index.html
View file

@ -5,17 +5,21 @@
<title>Console hub</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><!-- include material icons -->
<link rel="stylesheet" href="../../dist/css/styles.min.css"><!-- include custom stylesheet -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com http://dist.danbulant.eu 'unsafe-inline';
font-src *;
img-src *">
</head>
<body>
<div id="view">
</div>
<div class='box'>
<div class='wave -one'></div>
<div class='wave -two'></div>
<div class='wave -three'></div>
</div>
<div id="view">
</div>
<script>
if (typeof module === 'object') {window.module = module; module = undefined;}

3
html/views/main.js
View file

@ -1,6 +1,7 @@
const gamepadConnected = require("./menu/connected");
const welcome = require("./menu/welcome");
console.log("Console-hub alpha");
gamepadConnected();
welcome();

45
html/views/menu/connected.js
View file

@ -1,5 +1,7 @@
const utils = require("../../utils");
const gui = require("./gui");
const Gamepad = require("../../gamepad/gamepad");
const gamepad = new Gamepad;
function gamepadConnected(){
console.log("Gamepad connected");
@ -8,9 +10,48 @@ function gamepadConnected(){
utils.removeChildNodes(view);
gui.showTitle("Your profile");
gui.showDescription("Select or login with your Pushr account to continue");
gui.showDescription("Select or add your Pushr account to continue");
gui.renderCardList(utils.usersToCards(utils.getUsers()));
const users = utils.getUsers();
var max = users.length - 1;
var cards = utils.usersToCards(users);
gui.renderUserCardList(cards);
var selected = 0;
gamepad.on("press", "d_pad_right", () => {
if(selected < max){
selected++;
gui.renderSelectedUserCard(selected, selected - 1);
}
});
gamepad.on("press", "d_pad_left", () => {
if (selected > 0){
selected--;
gui.renderSelectedUserCard(selected, selected + 1);
}
});
gamepad.on("press", "stick_axis_left", e => {
if(e.value[0] < -0.3){
if (selected > 0){
selected--;
gui.renderSelectedUserCard(selected, selected + 1);
}
} else if (e.value[0] > 0.3) {
if (selected < max) {
selected++;
gui.renderSelectedUserCard(selected, selected - 1);
}
}
});
gamepad.on("press", "button_1", () => {
gamepad.off("press", "d_pad_left");
gamepad.off("press", "d_pad_right");
gamepad.off("press", "stick_axis_left");
gamepad.off("press", "stick_axis_right");
console.log("Loged in as ", users[selected]);
});
}
module.exports = gamepadConnected;

58
html/views/menu/gui.js
View file

@ -1,21 +1,45 @@
function showTitle(title){
function showTitle(title) {
var view = document.getElementById("view");
var t = document.createElement("h1");
t.classList.add("title--main")
t.classList.add("title--main");
t.innerText = title;
view.appendChild(t);
}
function showTitleInMiddle(title) {
var view = document.getElementById("view");
var t = document.createElement("h1");
t.classList.add("title--main");
t.classList.add("middle");
t.innerText = title;
view.appendChild(t);
t.style.marginLeft = "-" + (t.offsetWidth / 2) + "px";
}
function showDescription(desc) {
var view = document.getElementById("view");
var t = document.createElement("h2");
t.classList.add("title--description")
t.classList.add("title--description");
t.innerText = desc;
view.appendChild(t);
}
function showDescriptionInMiddle(desc) {
var view = document.getElementById("view");
var t = document.createElement("h2");
t.classList.add("title--description");
t.classList.add("middle");
t.innerText = desc;
view.appendChild(t);
t.style.marginLeft = "-" + (t.offsetWidth / 2) + "px";
t.style.marginTop = (document.querySelector(".title--main").offsetHeight) + "px";
}
global.cards = [];
global.currentCard = -1;
@ -33,32 +57,37 @@ function getCard(card){
return t;
}
function renderCardList(cards){
function renderSelectedUserCard(selected, previous) {
var prev = document.querySelectorAll(".user-cards-list .card")[previous];
prev.classList.remove("selected");
var card = document.querySelectorAll(".user-cards-list .card")[selected];
card.classList.add("selected");
}
function renderUserCardList(cards){
var view = document.getElementById("view");
var list = document.createElement("div");
view.appendChild(list);
list.classList.add("cards-list");
list.classList.add("user-cards-list");
cards.forEach((card, i)=>{
var c = document.createElement("div");
c.classList.add("card");
var img = document.createElement("img");
img.src = card.image;
c.appendChild(img);
var text = document.createElement("span");
var text = document.createElement("p");
text.innerText = card.name;
text.classList.add("name");
c.appendChild(text);
var action = document.createElement("p");
action.innerText = card.action;
c.appendChild(action);
list.appendChild(c);
});
renderSelectedUserCard(0,0);
}
function showAction(action, side){
@ -68,6 +97,9 @@ module.exports = {
showTitle,
showDescription,
getCard,
renderCardList,
showAction
renderUserCardList,
showAction,
renderSelectedUserCard,
showTitleInMiddle,
showDescriptionInMiddle
}

18
html/views/menu/welcome.js Normal file
View file

@ -0,0 +1,18 @@
const utils = require("../../utils");
const gui = require("./gui");
const Gamepad = require("../../gamepad/gamepad");
const gamepad = new Gamepad;
const connected = require("./connected");
function welcome(){
gui.showTitleInMiddle("Welcome to Console-hub");
gui.showDescriptionInMiddle("Press home button to start");
gamepad.on("press", "vendor", ()=>{
gamepad.off('press', 'vendor');
connected();
});
}
module.exports = welcome;

48
html/views/styles.scss
View file

@ -30,7 +30,9 @@ body {
color: white;
font-family: 'Gilroy-bold';
}
.view {
width: 100%;
}
.title--description {
margin: 0;
padding: 0;
@ -42,14 +44,50 @@ body {
font-family: 'Open Sans', sans-serif;
}
.cards-list {
.title--main.middle, .title--description.middle {
left: 50%;
top: 50%;
}
.user-cards-list {
z-index: 99;
width: 100%;
height: 350px;
top: 400px;
height: 30vh;
margin-top: 30vh;
display: flex;
.card {
z-index: 99;
width: 300px;
margin: 5px;
font-family: 'Open Sans', sans-serif;
width: 30vh;
height: 30vh;
background-size: 30vh 30vh;
font-size: 2rem;
color: white;
border: 5px solid transparent;
.name {
margin-top: -15px;
padding-left: 5px;
font-size: 43px;
}
img {
height: 100%;
width: 100%;
}
p {
margin: 0;
}
}
.card.selected {
// margin-top: -5px;
// margin-left: -5px;
border: 5px solid white;
}
.card:first-child {
margin-left: auto;
}
.card:last-child {
margin-right: auto;
}
}

5
main.js
View file

@ -31,8 +31,7 @@ function createWindow () {
fullScreen: true,
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
webSecurity: false
nodeIntegrationInWorker: true
}
})
win.setTitle('Console hub (ALPHA)');
@ -48,7 +47,7 @@ function createWindow () {
buttons: ['ok'],
title: 'About app',
message: 'Console hub (ALPHA) dev version.',
detail: 'Nightly developer version, alpha stage. Accounts disabled.\n(c) Daniel Bulant',
detail: 'Nightly developer version, alpha stage. \n(c) Daniel Bulant',
};
dialog.showMessageBox(null, options, (response) => {