Start separating the login stage from selecting an opponent (still a *lot* of work to do, barely started)
This commit is contained in:
parent
019909ba61
commit
d018c7e62c
6 changed files with 50 additions and 37 deletions
|
@ -24,13 +24,17 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="reception" class="on">
|
||||
<h1>Hanafuda</h1>
|
||||
<h1>Hanafuda - KoiKoi</h1>
|
||||
<form id="login">
|
||||
<input type="submit" name="submitButton" hidden disabled/>
|
||||
<p id="join" class="on">
|
||||
<p id="join">
|
||||
<label for="you"></label><input type="text" name="you"/>
|
||||
<input type="submit" name="join" disabled/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div id="main">
|
||||
<form id="room">
|
||||
<p id="invite">
|
||||
<label for="them"></label><input type="text" name="them"/>
|
||||
<input type="submit" name="invite" disabled/>
|
||||
|
@ -39,9 +43,9 @@
|
|||
<span class="message"></span>
|
||||
<ul class="list"></ul>
|
||||
</div>
|
||||
<p id="leave">
|
||||
<!--p id="leave">
|
||||
<input type="button" name="leave"/>
|
||||
</p>
|
||||
</p-->
|
||||
</form>
|
||||
</div>
|
||||
<div id="game">
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
/*
|
||||
#join, #invite {
|
||||
display: none;
|
||||
}
|
||||
|
@ -17,6 +18,7 @@
|
|||
#login.on #leave {
|
||||
display: inline;
|
||||
}
|
||||
*/
|
||||
|
||||
#players {
|
||||
min-height: 4em;
|
||||
|
|
17
www/login.js
17
www/login.js
|
@ -1,7 +1,7 @@
|
|||
function Login(modules) {
|
||||
var root = document.getElementById('login');
|
||||
var playersMessage = root.getElementsByClassName('message')[0];
|
||||
var players = root.getElementsByClassName('list')[0];
|
||||
var players = document.getElementById('players').getElementsByClassName('list')[0];
|
||||
var join = document.getElementById("join");
|
||||
var invite = document.getElementById("invite");
|
||||
var submit = root.submitButton;
|
||||
|
@ -43,16 +43,22 @@ function Login(modules) {
|
|||
}
|
||||
});
|
||||
|
||||
/*
|
||||
root.leave.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
lib.send({tag: "LogOut"})
|
||||
});
|
||||
*/
|
||||
|
||||
root.you.addEventListener("input", function() {refreshPlayers();});
|
||||
root.them.addEventListener("input", function() {refreshPlayers();});
|
||||
//root.them.addEventListener("input", function() {refreshPlayers();});
|
||||
}
|
||||
|
||||
function initMessageHandlers() {
|
||||
modules.messaging.addEventListener(["Okaeri"], function() {
|
||||
refreshPlayers();
|
||||
});
|
||||
|
||||
modules.messaging.addEventListener(["Welcome"], function() {
|
||||
refreshPlayers();
|
||||
});
|
||||
|
@ -61,8 +67,11 @@ function Login(modules) {
|
|||
refreshPlayers();
|
||||
});
|
||||
|
||||
modules.messaging.addEventListener(["Relay", "LogIn"], function() {
|
||||
playersChanged();
|
||||
modules.messaging.addEventListener(["LogIn"], function(o) {
|
||||
//playersChanged();
|
||||
if(modules.session.is(o.from)) {
|
||||
modules.screen.select('main');
|
||||
}
|
||||
});
|
||||
|
||||
modules.messaging.addEventListener(["Relay", "LogOut"], function() {
|
||||
|
|
|
@ -16,8 +16,8 @@ window.addEventListener('load', function() {
|
|||
|
||||
var domElems = {
|
||||
join: document.getElementById('login').join,
|
||||
invite: document.getElementById('login').invite,
|
||||
leave: document.getElementById('login').leave,
|
||||
invite: document.getElementById('room').invite,
|
||||
//leave: document.getElementById('login').leave,
|
||||
pickName: document.getElementById('join').getElementsByTagName('label')[0],
|
||||
startGameWith: document.getElementById('invite').getElementsByTagName('label')[0]
|
||||
};
|
||||
|
|
36
www/room.js
36
www/room.js
|
@ -1,9 +1,8 @@
|
|||
function Room(modules) {
|
||||
|
||||
function Player(key, name, alone) {
|
||||
function Player(key, name) {
|
||||
this.key = key;
|
||||
this.name = name;
|
||||
this.alone = alone;
|
||||
this.dom = modules.dom.make('li', {textContent: name});
|
||||
this.position = null;
|
||||
}
|
||||
|
@ -16,19 +15,11 @@ function Room(modules) {
|
|||
selected: null
|
||||
};
|
||||
|
||||
modules.messaging.addEventListener(["Welcome"], function(o) {
|
||||
for(var key in o.room) {
|
||||
enter(parseInt(key), o.room[key]);
|
||||
}
|
||||
});
|
||||
modules.messaging.addEventListener(["Welcome"], populate);
|
||||
modules.messaging.addEventListener(["Okaeri"], populate);
|
||||
|
||||
modules.messaging.addEventListener(["Update"], function(o) {
|
||||
o.alone.forEach(function(key) {players[key].alone = true;});
|
||||
o.paired.forEach(function(key) {players[key].alone = false;});
|
||||
});
|
||||
|
||||
modules.messaging.addEventListener(["Relay", "LogIn"], function(o) {
|
||||
enter(o.from, o.message);
|
||||
modules.messaging.addEventListener(["LogIn"], function(o) {
|
||||
enter(o.from, o.as);
|
||||
});
|
||||
|
||||
modules.messaging.addEventListener(["Relay", "LogOut"], function(o) {
|
||||
|
@ -39,7 +30,7 @@ function Room(modules) {
|
|||
|
||||
return {
|
||||
filter: filter,
|
||||
enter: enter,
|
||||
/*enter: enter,*/
|
||||
leave: leave,
|
||||
name: name
|
||||
};
|
||||
|
@ -47,7 +38,7 @@ function Room(modules) {
|
|||
function filter(name) {
|
||||
if(modules.session.isLoggedIn()) {
|
||||
var keep = function(player) {
|
||||
return player.name.match(name) && !modules.session.is(player.key) && player.alone;
|
||||
return player.name.match(name) && !modules.session.is(player.key);
|
||||
};
|
||||
} else {
|
||||
var keep = function(player) {return player.name.match(name);};
|
||||
|
@ -55,15 +46,20 @@ function Room(modules) {
|
|||
return modules.fun.mapFilter(modules.fun.of(players), keep)(sortedKeys);
|
||||
}
|
||||
|
||||
function enter(key, obj) {
|
||||
var name = obj.name || "anon";
|
||||
var alone = obj.alone != undefined ? obj.alone : true;
|
||||
var player = new Player(key, name, alone);
|
||||
function enter(key, name) {
|
||||
name = name || "anon";
|
||||
var player = new Player(key, name);
|
||||
players[key] = player;
|
||||
player.position = modules.fun.insert(key, sortedKeys, compareKeysByLogin);
|
||||
sortedKeys.splice(player.position, 0, key);
|
||||
}
|
||||
|
||||
function populate(o) {
|
||||
for(var key in o.room) {
|
||||
enter(key, o.room[key]);
|
||||
}
|
||||
}
|
||||
|
||||
function leave(key) {
|
||||
var player = players[key];
|
||||
if(player != undefined) {
|
||||
|
|
|
@ -1,28 +1,29 @@
|
|||
function Session(modules) {
|
||||
var key = null;
|
||||
var playerKey = null;
|
||||
var name = null;
|
||||
var loggedIn = false;
|
||||
|
||||
modules.messaging.addEventListener(["Welcome"], function(o) {
|
||||
key = o.key;
|
||||
modules.save.set('player.id', key);
|
||||
playerKey = o.key;
|
||||
modules.save.set('player.id', o.key);
|
||||
});
|
||||
|
||||
modules.messaging.addEventListener(["Relay", "LogIn"], function(o) {
|
||||
modules.messaging.addEventListener(["LogIn"], function(o) {
|
||||
if(is(o.from)) {
|
||||
name = o.message.name;
|
||||
name = o.as;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
is: is,
|
||||
getKey: getKey,
|
||||
loggedIn: loggedIn,
|
||||
isLoggedIn: isLoggedIn,
|
||||
start: start
|
||||
};
|
||||
|
||||
function is(sessionKey) {
|
||||
return key == sessionKey;
|
||||
function is(somePlayerKey) {
|
||||
return playerKey == somePlayerKey;
|
||||
}
|
||||
|
||||
function getKey() {
|
||||
|
@ -37,6 +38,7 @@ function Session(modules) {
|
|||
var myID = modules.save.get('player.id');
|
||||
if(myID != undefined) {
|
||||
modules.messaging.send({tag: 'Tadaima', myID: myID, name: name});
|
||||
playerKey = myID;
|
||||
} else {
|
||||
modules.messaging.send({tag: 'Hello', name: name});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue