hanafuda/webclient
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add a navigation menu to browse screens once connected and add a new Settings screen where account export will be implemented

Browse source
This commit is contained in:
Tissevert 2020-02-01 22:42:04 +01:00
parent 244215f09b
commit 394a7699d8
8 changed files with 72 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -7,9 +7,10 @@
<link rel="stylesheet" href="skin.css" type="text/css"/> <link rel="stylesheet" href="skin.css" type="text/css"/>
</head> </head>
<body> <body>
<div id="reception" class="on"> <ul id="sidebar" class="unactive"></ul>
<div id="login" class="on">
<h1>KoiKoi</h1> <h1>KoiKoi</h1>
<form id="login"> <form id="loginForm">
<input type="submit" name="submitButton" hidden disabled/> <input type="submit" name="submitButton" hidden disabled/>
<p id="join"> <p id="join">
<label for="you"></label><input type="text" name="you"/> <label for="you"></label><input type="text" name="you"/>
@ -34,6 +35,11 @@
<ul></ul> <ul></ul>
</div> </div>
</div> </div>
<div id="settings">
<p id="export">
<span></span><button></button>
</p>
</div>
<div id="dialog"> <div id="dialog">
</div> </div>
<p id="error"></p> <p id="error"></p>

22
js/GUI/Screen.js
View file

@ -1,6 +1,7 @@
import * as Dom from UnitJS.Dom; import * as Dom from UnitJS.Dom;
import I18n; import I18n;
var sidebar = document.getElementById('sidebar');
var current = document.querySelector("body > div.on"); var current = document.querySelector("body > div.on");
var errorBox = document.getElementById('error'); var errorBox = document.getElementById('error');
errorBox.addEventListener('click', function() { errorBox.addEventListener('click', function() {
@ -10,15 +11,10 @@ errorBox.addEventListener('click', function() {
return { return {
error: error, error: error,
dialog: dialog, dialog: dialog,
register: register,
select: select select: select
}; };
function select(name) {
current.className = "";
current = document.getElementById(name);
current.className = "on";
}
function closeAndRun(dialog, action) { function closeAndRun(dialog, action) {
return function() { return function() {
dialog.className = ''; dialog.className = '';
@ -47,3 +43,17 @@ function error(message) {
errorBox.textContent = message; errorBox.textContent = message;
errorBox.className = "on"; errorBox.className = "on";
} }
function register(name) {
sidebar.appendChild(Dom.make('li', {
onClick: function() {select(name);},
textContent: name
}));
}
function select(name) {
sidebar.className = "";
current.className = "";
current = document.getElementById(name);
current.className = "on";
}

2
js/GUI/Screen/Hall.js
View file

@ -1,6 +1,7 @@
import * as Dom from UnitJS.Dom; import * as Dom from UnitJS.Dom;
import Games; import Games;
import I18n; import I18n;
import register from GUI.Screen;
import * as Players from GUI.Screen.Hall.Players; import * as Players from GUI.Screen.Hall.Players;
import * as GamesGUI from GUI.Screen.Hall.Games; import * as GamesGUI from GUI.Screen.Hall.Games;
import Messaging; import Messaging;
@ -11,6 +12,7 @@ return {
}; };
function init() { function init() {
register('hall');
Players.init(); Players.init();
GamesGUI.init(); GamesGUI.init();
Messaging.addEventListener(["Okaeri"], function(o) { Messaging.addEventListener(["Okaeri"], function(o) {

5
js/GUI/Screen/Login.js
View file

@ -1,6 +1,6 @@
import I18n; import I18n;
import GUI.ConnectedForm; import GUI.ConnectedForm;
import select from GUI.Screen; import {register, select} from GUI.Screen;
import Messaging; import Messaging;
import Session; import Session;
import Save; import Save;
@ -13,7 +13,8 @@ return {
}; };
function init() { function init() {
login = GUI.ConnectedForm.get('login'); register('login');
login = GUI.ConnectedForm.get('loginForm');
form = login.root; form = login.root;
initDOM(); initDOM();
initMessageHandlers(); initMessageHandlers();

21
js/GUI/Screen/Settings.js Normal file
View file

@ -0,0 +1,21 @@
import I18n;
import register from GUI.Screen;
return {
init: init
};
function init() {
register('settings');
var exportRoot = document.getElementById('export');
var label = exportRoot.getElementsByTagName('span')[0];
var button = exportRoot.getElementsByTagName('button')[0];
label.textContent = I18n.get('exportLabel');
button.textContent = I18n.get('doExport');
button.addEventListener('click', doExport);
}
function doExport() {
console.log('export');
}

2
js/Main.js
View file

@ -1,6 +1,7 @@
import * as Login from GUI.Screen.Login; import * as Login from GUI.Screen.Login;
import * as Hall from GUI.Screen.Hall; import * as Hall from GUI.Screen.Hall;
import * as Game from GUI.Screen.Game; import * as Game from GUI.Screen.Game;
import * as Settings from GUI.Screen.Settings;
var gamePath = window.location.pathname.match(/\/game\/([0-9A-Fa-f]+)/); var gamePath = window.location.pathname.match(/\/game\/([0-9A-Fa-f]+)/);
@ -9,4 +10,5 @@ if(gamePath) {
} else { } else {
Login.init(); Login.init();
Hall.init(); Hall.init();
Settings.init();
} }

4
js/Translations.js
View file

@ -16,8 +16,10 @@ return {
alone: "No one to play with yet ! Wait a little", alone: "No one to play with yet ! Wait a little",
backToMain: "Back to main menu", backToMain: "Back to main menu",
decline: "No thanks", decline: "No thanks",
doExport: "Save",
endRound: "End the round", endRound: "End the round",
endGame: "Return to main menu", endGame: "Return to main menu",
exportLabel: "Save your account data to load it somewhere else",
gameNotFound: "You followed a fishy link, this game is no more", gameNotFound: "You followed a fishy link, this game is no more",
join: "Join", join: "Join",
invite: "Invite", invite: "Invite",
@ -77,8 +79,10 @@ return {
alone: "Personne pour jouer pour l'instant ! Attendez un peu", alone: "Personne pour jouer pour l'instant ! Attendez un peu",
backToMain: "Retourner au menu principal", backToMain: "Retourner au menu principal",
decline: "Non merci", decline: "Non merci",
doExport: "Télécharger",
endRound: "Finir la manche", endRound: "Finir la manche",
endGame: "Retourner au menu principal", endGame: "Retourner au menu principal",
exportLabel: "Télécharger les données de votre compte pour les charger ailleurs",
gameNotFound: "Ce lien est louche, la partie n'est plus", gameNotFound: "Ce lien est louche, la partie n'est plus",
join: "Entrer", join: "Entrer",
invite: "Inviter", invite: "Inviter",

17
skin/screen.css
View file

@ -1,4 +1,4 @@
body > div { body > div, ul#sidebar.unactive {
display: none; display: none;
} }
@ -52,3 +52,18 @@ body > div.on {
#error.on { #error.on {
display: block; display: block;
} }
ul#sidebar {
position: fixed;
top: 0;
right: 0;
margin: 0;
padding: 0;
list-style: none;
}
ul#sidebar > li {
cursor: pointer;
float: left;
padding: 0.5em 1em;
}