Add a navigation menu to browse screens once connected and add a new Settings screen where account export will be implemented
This commit is contained in:
parent
244215f09b
commit
394a7699d8
8 changed files with 72 additions and 11 deletions
10
index.html
10
index.html
|
|
@ -7,9 +7,10 @@
|
|||
<link rel="stylesheet" href="skin.css" type="text/css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="reception" class="on">
|
||||
<ul id="sidebar" class="unactive"></ul>
|
||||
<div id="login" class="on">
|
||||
<h1>KoiKoi</h1>
|
||||
<form id="login">
|
||||
<form id="loginForm">
|
||||
<input type="submit" name="submitButton" hidden disabled/>
|
||||
<p id="join">
|
||||
<label for="you"></label><input type="text" name="you"/>
|
||||
|
|
@ -34,6 +35,11 @@
|
|||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<p id="export">
|
||||
<span></span><button></button>
|
||||
</p>
|
||||
</div>
|
||||
<div id="dialog">
|
||||
</div>
|
||||
<p id="error"></p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import * as Dom from UnitJS.Dom;
|
||||
import I18n;
|
||||
|
||||
var sidebar = document.getElementById('sidebar');
|
||||
var current = document.querySelector("body > div.on");
|
||||
var errorBox = document.getElementById('error');
|
||||
errorBox.addEventListener('click', function() {
|
||||
|
|
@ -10,15 +11,10 @@ errorBox.addEventListener('click', function() {
|
|||
return {
|
||||
error: error,
|
||||
dialog: dialog,
|
||||
register: register,
|
||||
select: select
|
||||
};
|
||||
|
||||
function select(name) {
|
||||
current.className = "";
|
||||
current = document.getElementById(name);
|
||||
current.className = "on";
|
||||
}
|
||||
|
||||
function closeAndRun(dialog, action) {
|
||||
return function() {
|
||||
dialog.className = '';
|
||||
|
|
@ -47,3 +43,17 @@ function error(message) {
|
|||
errorBox.textContent = message;
|
||||
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";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import * as Dom from UnitJS.Dom;
|
||||
import Games;
|
||||
import I18n;
|
||||
import register from GUI.Screen;
|
||||
import * as Players from GUI.Screen.Hall.Players;
|
||||
import * as GamesGUI from GUI.Screen.Hall.Games;
|
||||
import Messaging;
|
||||
|
|
@ -11,6 +12,7 @@ return {
|
|||
};
|
||||
|
||||
function init() {
|
||||
register('hall');
|
||||
Players.init();
|
||||
GamesGUI.init();
|
||||
Messaging.addEventListener(["Okaeri"], function(o) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import I18n;
|
||||
import GUI.ConnectedForm;
|
||||
import select from GUI.Screen;
|
||||
import {register, select} from GUI.Screen;
|
||||
import Messaging;
|
||||
import Session;
|
||||
import Save;
|
||||
|
|
@ -13,7 +13,8 @@ return {
|
|||
};
|
||||
|
||||
function init() {
|
||||
login = GUI.ConnectedForm.get('login');
|
||||
register('login');
|
||||
login = GUI.ConnectedForm.get('loginForm');
|
||||
form = login.root;
|
||||
initDOM();
|
||||
initMessageHandlers();
|
||||
|
|
|
|||
21
js/GUI/Screen/Settings.js
Normal file
21
js/GUI/Screen/Settings.js
Normal 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');
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import * as Login from GUI.Screen.Login;
|
||||
import * as Hall from GUI.Screen.Hall;
|
||||
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]+)/);
|
||||
|
||||
|
|
@ -9,4 +10,5 @@ if(gamePath) {
|
|||
} else {
|
||||
Login.init();
|
||||
Hall.init();
|
||||
Settings.init();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,10 @@ return {
|
|||
alone: "No one to play with yet ! Wait a little",
|
||||
backToMain: "Back to main menu",
|
||||
decline: "No thanks",
|
||||
doExport: "Save",
|
||||
endRound: "End the round",
|
||||
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",
|
||||
join: "Join",
|
||||
invite: "Invite",
|
||||
|
|
@ -77,8 +79,10 @@ return {
|
|||
alone: "Personne pour jouer pour l'instant ! Attendez un peu",
|
||||
backToMain: "Retourner au menu principal",
|
||||
decline: "Non merci",
|
||||
doExport: "Télécharger",
|
||||
endRound: "Finir la manche",
|
||||
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",
|
||||
join: "Entrer",
|
||||
invite: "Inviter",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
body > div {
|
||||
body > div, ul#sidebar.unactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -52,3 +52,18 @@ body > div.on {
|
|||
#error.on {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue