Implement account saving / loading

index.html

@@ -17,6 +17,14 @@
           <input type="submit" name="join" disabled/>
         </p>
       </form>
+      <form id="accountLoader">
+        <input type="submit" name="submitButton" hidden disabled/>
+        <p>or</p>
+        <p id="loadAccount">
+          <label for="pickFile"></label><input type="file" name="pickFile" accept="application/json,.json"/>
+          <input type="submit" name="doLoad" disabled/>
+        </p>
+      </form>
     </div>
     <div id="hall">
       <form id="room">
@@ -37,7 +45,7 @@
     </div>
     <div id="settings">
       <p id="export">
-        <span></span><button></button>
+        <span></span><a download="koikoi.json" href=""></a>
       </p>
     </div>
     <div id="dialog">

js/GUI/Screen/Login.js

@@ -1,12 +1,14 @@
 import I18n;
 import GUI.ConnectedForm;
-import {register, select} from GUI.Screen;
+import {dialog, register, select} from GUI.Screen;
 import Messaging;
 import Session;
 import Save;
 
 var login;
-var form;
+var loginForm;
+var accountLoader;
+var accountLoaderForm;
 
 return {
 	init: init
@@ -14,25 +16,33 @@ return {
 
 function init() {
 	register('login');
-	login = GUI.ConnectedForm.get('loginForm');
+	initLogin();
-	form = login.root;
+	initLoader();
-	initDOM();
 	initMessageHandlers();
-	var name = Save.get('player.name');
+	restoreName();
-	if(name != undefined && name.length > 0) {
-		form.you.value = name;
-		login.enable();
-	}
 }
 
-function initDOM() {
+function initLogin() {
-	form.getElementsByTagName('label')[0].textContent = I18n.get('pickName');
+	login = GUI.ConnectedForm.get('loginForm');
-	form.join.value = I18n.get('join');
+	loginForm = login.root;
-	form.addEventListener('submit', function(e) {
+	loginForm.getElementsByTagName('label')[0].textContent = I18n.get('pickName');
+	loginForm.join.value = I18n.get('join');
+	loginForm.addEventListener('submit', function(e) {
 		e.preventDefault();
-		Session.start(form.you.value);
+		Session.start(loginForm.you.value);
+	});
+	loginForm.you.addEventListener("input", validate);
+}
+
+function initLoader() {
+	accountLoader = GUI.ConnectedForm.get('accountLoader');
+	accountLoaderForm = accountLoader.root;
+	accountLoaderForm.getElementsByTagName('label')[0].textContent = I18n.get('pickFile');
+	accountLoaderForm.doLoad.value = I18n.get('doLoad');
+	accountLoaderForm.addEventListener('submit', loadAccountConfirm);
+	accountLoaderForm.pickFile.addEventListener("input", function() {
+		accountLoader.enable();
 	});
-	form.you.addEventListener("input", validate);
 }
 
 function initMessageHandlers() {
@@ -43,6 +53,42 @@ function initMessageHandlers() {
 	});
 }
 
+function loadAccountConfirm(e) {
+	e.preventDefault();
+	if(Save.get('player') != undefined) {
+		dialog({
+			text: I18n.get('warnExistingAccount'),
+			answers: [
+				{label: 'confirmReplace', action: loadAccount},
+				{label: 'cancel', action: function() {}}
+			]
+		});
+	} else {
+		loadAccount();
+	}
+}
+
+function loadAccount() {
+	var fileReader = new FileReader();
+	fileReader.addEventListener('load', function() {
+		Save.set(null, JSON.parse(fileReader.result));
+		var name = restoreName();
+		if(name != undefined) {
+			Session.start(name);
+		}
+	});
+	fileReader.readAsText(accountLoaderForm.pickFile.files[0]);
+}
+
+function restoreName() {
+	var name = Save.get('player.name');
+	if(name != undefined && name.length > 0) {
+		loginForm.you.value = name;
+		login.enable();
+		return name;
+	}
+}
+
 function validate(e) {
 	login.enable(e.target.value != "");
 }

js/GUI/Screen/Settings.js

@@ -1,5 +1,8 @@
 import I18n;
 import register from GUI.Screen;
+import Save;
+
+var button;
 
 return {
 	init: init
@@ -9,7 +12,7 @@ function init() {
 	register('settings');
 	var exportRoot = document.getElementById('export');
 	var label = exportRoot.getElementsByTagName('span')[0];
-	var button = exportRoot.getElementsByTagName('button')[0];
+	button = exportRoot.getElementsByTagName('a')[0];
 
 	label.textContent = I18n.get('exportLabel');
 	button.textContent = I18n.get('doExport');
@@ -17,5 +20,6 @@ function init() {
 }
 
 function doExport() {
-	console.log('export');
+	var data = encodeURIComponent(JSON.stringify(Save.get()));
+	button.href = 'data:application/json,' + data;
 }

js/Save.js

@@ -27,6 +27,8 @@ function get(key) {
 		} else {
 			return null;
 		}
+	} else {
+		return save;
 	}
 }
 

js/Translations.js

@@ -15,8 +15,11 @@ return {
 		accept: "Let's go !",
 		alone: "No one to play with yet ! Wait a little",
 		backToMain: "Back to main menu",
+		cancel: "Cancel",
+		confirmReplace: "Yes, do replace my existing account",
 		decline: "No thanks",
 		doExport: "Save",
+		doLoad: "Load",
 		endRound: "End the round",
 		endGame: "Return to main menu",
 		exportLabel: "Save your account data to load it somewhere else",
@@ -38,6 +41,7 @@ return {
 			var whose = yourTurn ? 'your' : name + "'s";
 			return 'Game vs. ' + name + ' (' + whose + ' turn)';
 		},
+		pickFile: "Load an existing account",
 		pickName: "Pick a name you like",
 		playing: function(name) {
 			return name + " is playing";
@@ -58,6 +62,7 @@ return {
 		theyScored: function(name) {
 			return name + " scored";
 		},
+		warnExistingAccount: "Your current account will be erased and lost forever",
 		won: "You won !",
 		yourTurn: "Your turn",
 		youScored: "You scored ! Do you want to get your points and end the round or KoiKoi ?"
@@ -78,8 +83,11 @@ return {
 		accept: "C'est parti !",
 		alone: "Personne pour jouer pour l'instant ! Attendez un peu",
 		backToMain: "Retourner au menu principal",
+		cancel: "Annuler",
+		confirmReplace: "Oui, remplacer mon compte",
 		decline: "Non merci",
 		doExport: "Télécharger",
+		doLoad: "Charger",
 		endRound: "Finir la manche",
 		endGame: "Retourner au menu principal",
 		exportLabel: "Télécharger les données de votre compte pour les charger ailleurs",
@@ -101,6 +109,7 @@ return {
 			var whose = yourTurn ? 'vous' : name;
 			return 'Partie en cours contre ' + name + ' (à ' + whose + ')';
 		},
+		pickFile: "Charger un compte existant",
 		pickName: "Choisissez votre nom",
 		playing: function(name) {
 			return "C'est à " + name;
@@ -121,6 +130,7 @@ return {
 		theyScored: function(name) {
 			return name + " a marqué";
 		},
+		warnExistingAccount: "Le compte existant sera remplacé et perdu à tout jamais",
 		won: "Vous avez gagné !",
 		yourTurn: "À vous",
 		youScored: "Vous avez marqué ! Voulez-vous empocher vos gains et terminer la manche ou faire KoiKoi ?"