diff --git a/index.html b/index.html index a16d29d..5a53f27 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,10 @@ -
+ +

KoiKoi

-
+

@@ -34,6 +35,11 @@

    +
    +

    + +

    +

    diff --git a/js/GUI/Screen.js b/js/GUI/Screen.js index a1f24c6..997fa60 100644 --- a/js/GUI/Screen.js +++ b/js/GUI/Screen.js @@ -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"; +} diff --git a/js/GUI/Screen/Hall.js b/js/GUI/Screen/Hall.js index 3f63429..eaa6ce7 100644 --- a/js/GUI/Screen/Hall.js +++ b/js/GUI/Screen/Hall.js @@ -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) { diff --git a/js/GUI/Screen/Login.js b/js/GUI/Screen/Login.js index 3a001c2..f49751e 100644 --- a/js/GUI/Screen/Login.js +++ b/js/GUI/Screen/Login.js @@ -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(); diff --git a/js/GUI/Screen/Settings.js b/js/GUI/Screen/Settings.js new file mode 100644 index 0000000..8aee6ac --- /dev/null +++ b/js/GUI/Screen/Settings.js @@ -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'); +} diff --git a/js/Main.js b/js/Main.js index 3c97537..11dda88 100644 --- a/js/Main.js +++ b/js/Main.js @@ -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(); } diff --git a/js/Translations.js b/js/Translations.js index 4791679..6663e9d 100644 --- a/js/Translations.js +++ b/js/Translations.js @@ -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", diff --git a/skin/screen.css b/skin/screen.css index 9f239d8..686afb0 100644 --- a/skin/screen.css +++ b/skin/screen.css @@ -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; +}