diff --git a/src/js/automaton.js b/src/js/automaton.js index 32be9c0..939d485 100644 --- a/src/js/automaton.js +++ b/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) ); } } diff --git a/src/js/screen.js b/src/js/screen.js index c6d9cb5..a640bf5 100644 --- a/src/js/screen.js +++ b/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; diff --git a/src/js/ui.js b/src/js/ui.js index d445210..aabfa15 100644 --- a/src/js/ui.js +++ b/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(); diff --git a/src/screen.css b/src/screen.css index 93a5296..ef78c1a 100644 --- a/src/screen.css +++ b/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; +}