Starting to grow modules
This commit is contained in:
parent
85cf8da5df
commit
ff0070d90d
8 changed files with 175 additions and 1 deletions
12
src/automaton.js
Normal file
12
src/automaton.js
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
function Automaton(messaging, screen, session) {
|
||||||
|
var startMenu = ['New Game', 'Settings'];
|
||||||
|
if(session.hasSavedGame()) {
|
||||||
|
startMenu.unshift('Continue');
|
||||||
|
}
|
||||||
|
screen.menu(startMenu);
|
||||||
|
messaging.addEventListener(['Init'], function(game) {
|
||||||
|
console.log(game);
|
||||||
|
});
|
||||||
|
//messaging.send({tag: 'NewGame'});
|
||||||
|
|
||||||
|
}
|
36
src/dom.js
Normal file
36
src/dom.js
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
function Dom() {
|
||||||
|
return {
|
||||||
|
clear: clear,
|
||||||
|
make: make
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear(elem) {
|
||||||
|
while(elem.firstChild) {
|
||||||
|
elem.removeChild(elem.firstChild);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function make(tag, properties, children) {
|
||||||
|
var e = document.createElement(tag);
|
||||||
|
properties = properties || {};
|
||||||
|
children = children || [];
|
||||||
|
for(key in properties) {
|
||||||
|
var value = properties[key];
|
||||||
|
switch(key) {
|
||||||
|
case "class":
|
||||||
|
e.className = Array.isArray(value) ? value.join(' ') : value;
|
||||||
|
break;;
|
||||||
|
case "onClick":
|
||||||
|
e.addEventListener("click", value);
|
||||||
|
break;;
|
||||||
|
default:
|
||||||
|
e[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for(var i = 0; i < children.length; i++) {
|
||||||
|
e.appendChild(children[i]);
|
||||||
|
}
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -3,9 +3,16 @@
|
||||||
<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="session.js"></script>
|
||||||
|
<script src="dom.js"></script>
|
||||||
|
<script src="screen.js"></script>
|
||||||
|
<script src="messaging.js"></script>
|
||||||
|
<script src="automaton.js"></script>
|
||||||
|
<link rel="stylesheet" href="screen.css" type="text/css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="screen">
|
<div id="screen">
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
9
src/main.js
Normal file
9
src/main.js
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
messaging = Messaging();
|
||||||
|
dom = Dom();
|
||||||
|
screen = Screen(dom);
|
||||||
|
session = Session();
|
||||||
|
automaton = Automaton(messaging, screen, session);
|
||||||
|
|
||||||
|
messaging.start();
|
||||||
|
});
|
62
src/messaging.js
Normal file
62
src/messaging.js
Normal file
|
@ -0,0 +1,62 @@
|
||||||
|
function Messaging() {
|
||||||
|
var ws = new WebSocket('ws://' + window.location.hostname + '/play/');
|
||||||
|
var keepAlivePeriod = 20000;
|
||||||
|
var routes = {callbacks: [], children: {}};
|
||||||
|
|
||||||
|
return {
|
||||||
|
addEventListener: addEventListener,
|
||||||
|
send: send,
|
||||||
|
start: start
|
||||||
|
}
|
||||||
|
|
||||||
|
function get(obj, path, write) {
|
||||||
|
write = write || false;
|
||||||
|
if(path.length < 1) {
|
||||||
|
return obj;
|
||||||
|
} else {
|
||||||
|
if(obj.children[path[0]] == undefined && write) {
|
||||||
|
obj.children[path[0]] = {callbacks: [], children: {}};
|
||||||
|
}
|
||||||
|
if(obj.children[path[0]] != undefined) {
|
||||||
|
return get(obj.children[path[0]], path.slice(1), write);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addEventListener(path, callback) {
|
||||||
|
var route = get(routes, path, true);
|
||||||
|
route.callbacks.push(callback);
|
||||||
|
}
|
||||||
|
|
||||||
|
function messageListener(event) {
|
||||||
|
var o = JSON.parse(event.data);
|
||||||
|
var path = [];
|
||||||
|
var tmp = o;
|
||||||
|
while(tmp != undefined && tmp.tag != undefined) {
|
||||||
|
path.push(tmp.tag);
|
||||||
|
tmp = tmp.message;
|
||||||
|
}
|
||||||
|
var route = get(routes, path);
|
||||||
|
if(route != undefined && route.callbacks != undefined) {
|
||||||
|
route.callbacks.forEach(function(f) {f(o);});
|
||||||
|
} else {
|
||||||
|
debug.textContent = event.data;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function start() {
|
||||||
|
//ping();
|
||||||
|
addEventListener(["Pong"], ping);
|
||||||
|
ws.addEventListener('message', messageListener);
|
||||||
|
}
|
||||||
|
|
||||||
|
function send(o) {
|
||||||
|
ws.send(JSON.stringify(o));
|
||||||
|
}
|
||||||
|
|
||||||
|
function ping() {
|
||||||
|
setTimeout(function() {send({tag: "Ping"});}, keepAlivePeriod);
|
||||||
|
}
|
||||||
|
}
|
9
src/screen.css
Normal file
9
src/screen.css
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
#screen {
|
||||||
|
position: absolute;
|
||||||
|
width: 400px;
|
||||||
|
height: 300px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -150px 0 0 -200px;
|
||||||
|
}
|
19
src/screen.js
Normal file
19
src/screen.js
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
function Screen(dom) {
|
||||||
|
var root = document.getElementById('screen');
|
||||||
|
|
||||||
|
return {
|
||||||
|
menu: menu
|
||||||
|
};
|
||||||
|
|
||||||
|
function menu(entries) {
|
||||||
|
var domEntries = [];
|
||||||
|
for(var i = 0; i < entries.length; i++) {
|
||||||
|
domEntries.push(dom.make('li', {
|
||||||
|
class: i == 0 ? 'selected' : [],
|
||||||
|
textContent: entries[i]
|
||||||
|
}, []));
|
||||||
|
}
|
||||||
|
var ul = dom.make('ul', {}, domEntries);
|
||||||
|
root.appendChild(ul);
|
||||||
|
}
|
||||||
|
}
|
20
src/session.js
Normal file
20
src/session.js
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
function Session() {
|
||||||
|
var game = JSON.parse(localStorage.getItem('game'));
|
||||||
|
|
||||||
|
return {
|
||||||
|
hasSavedGame: hasSavedGame,
|
||||||
|
save : save
|
||||||
|
};
|
||||||
|
|
||||||
|
function hasSavedGame() {
|
||||||
|
return game != undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update(state) {
|
||||||
|
game = state;
|
||||||
|
}
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
localStorage.setItem('game', game);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue