Move JS code into a separate subdir to make space for the images + start generalizing menu functions a little
This commit is contained in:
parent
59556d8515
commit
99003475c8
10 changed files with 33 additions and 22 deletions
|
@ -3,15 +3,15 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Pokemon Neige</title>
|
<title>Pokemon Neige</title>
|
||||||
<script src="main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
<script src="session.js"></script>
|
<script src="js/session.js"></script>
|
||||||
<script src="async.js"></script>
|
<script src="js/async.js"></script>
|
||||||
<script src="dom.js"></script>
|
<script src="js/dom.js"></script>
|
||||||
<script src="screen.js"></script>
|
<script src="js/screen.js"></script>
|
||||||
<script src="buttons.js"></script>
|
<script src="js/buttons.js"></script>
|
||||||
<script src="messaging.js"></script>
|
<script src="js/messaging.js"></script>
|
||||||
<script src="ui.js"></script>
|
<script src="js/ui.js"></script>
|
||||||
<script src="automaton.js"></script>
|
<script src="js/automaton.js"></script>
|
||||||
<link rel="stylesheet" href="screen.css" type="text/css"/>
|
<link rel="stylesheet" href="screen.css" type="text/css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -80,10 +80,18 @@ function Screen(dom) {
|
||||||
var domEntries = [];
|
var domEntries = [];
|
||||||
var selected = config.selected || 0;
|
var selected = config.selected || 0;
|
||||||
for(var i = 0; i < config.entries.length; i++) {
|
for(var i = 0; i < config.entries.length; i++) {
|
||||||
domEntries.push(dom.make('li', {
|
var classes = i == selected ? 'selected' : [];
|
||||||
class: i == selected ? 'selected' : [],
|
if(config.entries[i].label != undefined) {
|
||||||
textContent: config.entries[i].label
|
domEntry = dom.make('li', {
|
||||||
}, []));
|
class: classes,
|
||||||
|
textContent: config.entries[i].label
|
||||||
|
}, []);
|
||||||
|
} else if(config.entries[i].picto != undefined) {
|
||||||
|
domEntry = dom.make('li', {
|
||||||
|
class: classes,
|
||||||
|
}, [dom.make('img', config.entries[i].picto, [])]);
|
||||||
|
}
|
||||||
|
domEntries.push(domEntry);
|
||||||
}
|
}
|
||||||
var ul = dom.make('ul', {class: ['menu', 'framed'], id: config.name + 'Menu'}, domEntries);
|
var ul = dom.make('ul', {class: ['menu', 'framed'], id: config.name + 'Menu'}, domEntries);
|
||||||
root.appendChild(ul);
|
root.appendChild(ul);
|
|
@ -69,17 +69,18 @@ function UI(async, buttons, dom, screen, session) {
|
||||||
|
|
||||||
function menu(config) {
|
function menu(config) {
|
||||||
var cursor = config.selected || 0;
|
var cursor = config.selected || 0;
|
||||||
|
var direction = config.direction || 'vertical';
|
||||||
var m = screen.menu(config);
|
var m = screen.menu(config);
|
||||||
var sync = function() { screen.select(cursor); };
|
var sync = function() { screen.select(cursor); };
|
||||||
|
var forth = function() {
|
||||||
|
cursor = (config.entries.length + cursor - 1) % config.entries.length;
|
||||||
|
sync();
|
||||||
|
};
|
||||||
|
var back = function() {
|
||||||
|
cursor = (cursor + 1) % config.entries.length;
|
||||||
|
sync();
|
||||||
|
};
|
||||||
var mapping = {
|
var mapping = {
|
||||||
Up: function() {
|
|
||||||
cursor = (config.entries.length + cursor - 1) % config.entries.length;
|
|
||||||
sync();
|
|
||||||
},
|
|
||||||
Down: function() {
|
|
||||||
cursor = (cursor + 1) % config.entries.length;
|
|
||||||
sync();
|
|
||||||
},
|
|
||||||
A: function() {
|
A: function() {
|
||||||
var entry = config.entries[cursor];
|
var entry = config.entries[cursor];
|
||||||
if(entry.close) {
|
if(entry.close) {
|
||||||
|
@ -89,7 +90,9 @@ function UI(async, buttons, dom, screen, session) {
|
||||||
entry.action(m);
|
entry.action(m);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
mapping[direction == 'vertical' ? 'Up' : 'Right'] = forth;
|
||||||
|
mapping[direction == 'vertical' ? 'Down' : 'Left'] = back;
|
||||||
if(config.cancel != undefined) {
|
if(config.cancel != undefined) {
|
||||||
mapping['B'] = function() { close(m); config.cancel(); }
|
mapping['B'] = function() { close(m); config.cancel(); }
|
||||||
}
|
}
|
Loading…
Reference in a new issue