Implement the rest of character generation

src/js/automaton.js

@@ -30,6 +30,21 @@ function Automaton(async, dom, messaging, screen, session, ui) {
 			name: 'name'
 		},
 		skin: {
+			direction: 'horizontal',
+			entries: [
+				{picto: {src: 'image/characters/Alex/full.png'}, value: 0},
+				{picto: {src: 'image/characters/Lenore/full.png'}, value: 1},
+				{picto: {src: 'image/characters/Thomas/full.png'}, value: 2}
+			],
+			name: 'skin'
+		},
+		gender: {
+			entries: [
+				{label: 'un garçon', value: 'M'},
+				{label: 'une personne non-binaire', value: 'NB'},
+				{label: 'une fille', value: 'F'}
+			],
+			name: 'gender'
 		},
 		textSpeed: {
 			entries: [
@@ -96,7 +111,8 @@ function Automaton(async, dom, messaging, screen, session, ui) {
 				askGender,
 				set('gender')
 			),
-			async.apply(messaging.send, message)
+			async.apply(messaging.send, message),
+			async.apply(screen.clear, 'text'),
 		);
 	}
 
@@ -113,16 +129,15 @@ function Automaton(async, dom, messaging, screen, session, ui) {
 
 	function askSkin(name) {
 		return async.sequence(
-			async.apply(screen.clear, 'text'),
 			ui.text("Ah ? Tu t'appelles " + name + " ? C'est un joli nom, ma foi. Mais je ne te vois pas très bien avec le jour tombant, dis-moi, à quoi ressembles-tu ?"),
-			async.wrap('/images/characters/0.png')
+			ui.ask(choices.skin)
 		);
 	}
 
 	function askGender() {
 		return async.sequence(
-			async.apply(screen.clear, 'text'),
-			async.wrap('NB')
+			ui.text("Wow ! Quel super look pour"),
+			ui.ask(choices.gender)
 		);
 	}
 }

src/js/screen.js

@@ -93,7 +93,11 @@ function Screen(dom) {
       }
 			domEntries.push(domEntry);
 		}
-		var ul = dom.make('ul', {class: ['menu', 'framed'], id: config.name + 'Menu'}, domEntries);
+		var ul = dom.make(
+			'ul',
+			{class: ['menu', 'framed', config.direction], id: config.name + 'Menu'},
+			domEntries
+		);
 		root.appendChild(ul);
 		menus.push(ul);
 		return ul;

src/js/ui.js

@@ -69,14 +69,14 @@ function UI(async, buttons, dom, screen, session) {
 
 	function menu(config) {
 		var cursor = config.selected || 0;
-    var direction = config.direction || 'vertical';
+    config.direction = config.direction || 'vertical';
 		var m = screen.menu(config);
 		var sync = function() { screen.select(cursor); };
-    var forth = function() {
+    var back = function() {
       cursor = (config.entries.length + cursor - 1) % config.entries.length;
       sync();
     };
-    var back = function() {
+    var forth = function() {
       cursor = (cursor + 1) % config.entries.length;
       sync();
     };
@@ -91,8 +91,8 @@ function UI(async, buttons, dom, screen, session) {
 				}
 			}
     };
-    mapping[direction == 'vertical' ? 'Up' : 'Right'] = forth;
-    mapping[direction == 'vertical' ? 'Down' : 'Left'] = back;
+    mapping[config.direction == 'vertical' ? 'Up' : 'Left'] = back;
+    mapping[config.direction == 'vertical' ? 'Down' : 'Right'] = forth;
 		if(config.cancel != undefined) {
 			mapping['B'] = function() { close(m); config.cancel(); }
 		}
@@ -102,6 +102,7 @@ function UI(async, buttons, dom, screen, session) {
 	function ask(config) {
 		var menuConfig = {
 			cancel: config.cancel,
+			direction: config.direction,
 			entries: [],
 			name: config.name,
 			selected: config.selected
@@ -112,6 +113,8 @@ function UI(async, buttons, dom, screen, session) {
 				var entry;
 				if(config.entries[i].label != undefined) {
 					entry = {label: config.entries[i].label, action: apply(f, config.entries[i].value), close: true};
+				} else if(config.entries[i].picto != undefined) {
+					entry = {picto: config.entries[i].picto, action: apply(f, config.entries[i].value), close: true};
 				} else {
 					entry = {label: '___', action: promptValue(config.entries[i].size, f)};
 				}
@@ -153,7 +156,7 @@ function UI(async, buttons, dom, screen, session) {
 			buttons.push({
 				'A': function() {
 					if(ready) {
-						close('text');
+						buttons.pop();
 						f();
 					} else {
 						remote.pause();

src/screen.css

@@ -58,6 +58,16 @@ ul.menu .selected:before {
 	float: left;
 }
 
+ul.menu.horizontal .selected:before {
+	content: "\2bc5";
+	width: 0;
+	margin-left: -0.6em;
+	float: left;
+	position: relative;
+	left: 50%;
+	bottom: -188px;
+}
+
 .center {
 	position: absolute;
 	top: 50%;
@@ -119,3 +129,17 @@ ul#layoutMenu {
 ul#nameMenu {
 	width: 6em;
 }
+
+ul#skinMenu.framed {
+	border: none;
+	padding: 0;
+}
+
+ul#skinMenu li {
+	float: left;
+	margin: 0 46px 0 0;
+}
+
+ul#skinMenu li:last-child {
+	margin: 0;
+}