Start separating the login stage from selecting an opponent (still a *lot* of work to do, barely started)

This commit is contained in:
Tissevert 2019-12-08 23:01:24 +01:00
parent 019909ba61
commit d018c7e62c
6 changed files with 50 additions and 37 deletions

View file

@ -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">

View file

@ -1,3 +1,4 @@
/*
#join, #invite {
display: none;
}
@ -17,6 +18,7 @@
#login.on #leave {
display: inline;
}
*/
#players {
min-height: 4em;

View file

@ -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() {

View file

@ -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]
};

View file

@ -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) {

View file

@ -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});
}