hanafuda/server
1
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
www/index.html
View file

@ -24,13 +24,17 @@
</head> </head>
<body> <body>
<div id="reception" class="on"> <div id="reception" class="on">
<h1>Hanafuda</h1> <h1>Hanafuda - KoiKoi</h1>
<form id="login"> <form id="login">
<input type="submit" name="submitButton" hidden disabled/> <input type="submit" name="submitButton" hidden disabled/>
<p id="join" class="on"> <p id="join">
<label for="you"></label><input type="text" name="you"/> <label for="you"></label><input type="text" name="you"/>
<input type="submit" name="join" disabled/> <input type="submit" name="join" disabled/>
</p> </p>
</form>
</div>
<div id="main">
<form id="room">
<p id="invite"> <p id="invite">
<label for="them"></label><input type="text" name="them"/> <label for="them"></label><input type="text" name="them"/>
<input type="submit" name="invite" disabled/> <input type="submit" name="invite" disabled/>
@ -39,9 +43,9 @@
<span class="message"></span> <span class="message"></span>
<ul class="list"></ul> <ul class="list"></ul>
</div> </div>
<p id="leave"> <!--p id="leave">
<input type="button" name="leave"/> <input type="button" name="leave"/>
</p> </p-->
</form> </form>
</div> </div>
<div id="game"> <div id="game">

2
www/login.css
View file

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

17
www/login.js
View file

@ -1,7 +1,7 @@
function Login(modules) { function Login(modules) {
var root = document.getElementById('login'); var root = document.getElementById('login');
var playersMessage = root.getElementsByClassName('message')[0]; 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 join = document.getElementById("join");
var invite = document.getElementById("invite"); var invite = document.getElementById("invite");
var submit = root.submitButton; var submit = root.submitButton;
@ -43,16 +43,22 @@ function Login(modules) {
} }
}); });
/*
root.leave.addEventListener('click', function(e) { root.leave.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
lib.send({tag: "LogOut"}) lib.send({tag: "LogOut"})
}); });
*/
root.you.addEventListener("input", function() {refreshPlayers();}); root.you.addEventListener("input", function() {refreshPlayers();});
root.them.addEventListener("input", function() {refreshPlayers();}); //root.them.addEventListener("input", function() {refreshPlayers();});
} }
function initMessageHandlers() { function initMessageHandlers() {
modules.messaging.addEventListener(["Okaeri"], function() {
refreshPlayers();
});
modules.messaging.addEventListener(["Welcome"], function() { modules.messaging.addEventListener(["Welcome"], function() {
refreshPlayers(); refreshPlayers();
}); });
@ -61,8 +67,11 @@ function Login(modules) {
refreshPlayers(); refreshPlayers();
}); });
modules.messaging.addEventListener(["Relay", "LogIn"], function() { modules.messaging.addEventListener(["LogIn"], function(o) {
playersChanged(); //playersChanged();
if(modules.session.is(o.from)) {
modules.screen.select('main');
}
}); });
modules.messaging.addEventListener(["Relay", "LogOut"], function() { modules.messaging.addEventListener(["Relay", "LogOut"], function() {

4
www/main.js
View file

@ -16,8 +16,8 @@ window.addEventListener('load', function() {
var domElems = { var domElems = {
join: document.getElementById('login').join, join: document.getElementById('login').join,
invite: document.getElementById('login').invite, invite: document.getElementById('room').invite,
leave: document.getElementById('login').leave, //leave: document.getElementById('login').leave,
pickName: document.getElementById('join').getElementsByTagName('label')[0], pickName: document.getElementById('join').getElementsByTagName('label')[0],
startGameWith: document.getElementById('invite').getElementsByTagName('label')[0] startGameWith: document.getElementById('invite').getElementsByTagName('label')[0]
}; };

36
www/room.js
View file

@ -1,9 +1,8 @@
function Room(modules) { function Room(modules) {
function Player(key, name, alone) { function Player(key, name) {
this.key = key; this.key = key;
this.name = name; this.name = name;
this.alone = alone;
this.dom = modules.dom.make('li', {textContent: name}); this.dom = modules.dom.make('li', {textContent: name});
this.position = null; this.position = null;
} }
@ -16,19 +15,11 @@ function Room(modules) {
selected: null selected: null
}; };
modules.messaging.addEventListener(["Welcome"], function(o) { modules.messaging.addEventListener(["Welcome"], populate);
for(var key in o.room) { modules.messaging.addEventListener(["Okaeri"], populate);
enter(parseInt(key), o.room[key]);
}
});
modules.messaging.addEventListener(["Update"], function(o) { modules.messaging.addEventListener(["LogIn"], function(o) {
o.alone.forEach(function(key) {players[key].alone = true;}); enter(o.from, o.as);
o.paired.forEach(function(key) {players[key].alone = false;});
});
modules.messaging.addEventListener(["Relay", "LogIn"], function(o) {
enter(o.from, o.message);
}); });
modules.messaging.addEventListener(["Relay", "LogOut"], function(o) { modules.messaging.addEventListener(["Relay", "LogOut"], function(o) {
@ -39,7 +30,7 @@ function Room(modules) {
return { return {
filter: filter, filter: filter,
enter: enter, /*enter: enter,*/
leave: leave, leave: leave,
name: name name: name
}; };
@ -47,7 +38,7 @@ function Room(modules) {
function filter(name) { function filter(name) {
if(modules.session.isLoggedIn()) { if(modules.session.isLoggedIn()) {
var keep = function(player) { 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 { } else {
var keep = function(player) {return player.name.match(name);}; 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); return modules.fun.mapFilter(modules.fun.of(players), keep)(sortedKeys);
} }
function enter(key, obj) { function enter(key, name) {
var name = obj.name || "anon"; name = name || "anon";
var alone = obj.alone != undefined ? obj.alone : true; var player = new Player(key, name);
var player = new Player(key, name, alone);
players[key] = player; players[key] = player;
player.position = modules.fun.insert(key, sortedKeys, compareKeysByLogin); player.position = modules.fun.insert(key, sortedKeys, compareKeysByLogin);
sortedKeys.splice(player.position, 0, key); sortedKeys.splice(player.position, 0, key);
} }
function populate(o) {
for(var key in o.room) {
enter(key, o.room[key]);
}
}
function leave(key) { function leave(key) {
var player = players[key]; var player = players[key];
if(player != undefined) { if(player != undefined) {

16
www/session.js
View file

@ -1,28 +1,29 @@
function Session(modules) { function Session(modules) {
var key = null; var key = null;
var playerKey = null;
var name = null; var name = null;
var loggedIn = false; var loggedIn = false;
modules.messaging.addEventListener(["Welcome"], function(o) { modules.messaging.addEventListener(["Welcome"], function(o) {
key = o.key; playerKey = o.key;
modules.save.set('player.id', 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)) { if(is(o.from)) {
name = o.message.name; name = o.as;
} }
}); });
return { return {
is: is, is: is,
getKey: getKey, getKey: getKey,
loggedIn: loggedIn, isLoggedIn: isLoggedIn,
start: start start: start
}; };
function is(sessionKey) { function is(somePlayerKey) {
return key == sessionKey; return playerKey == somePlayerKey;
} }
function getKey() { function getKey() {
@ -37,6 +38,7 @@ function Session(modules) {
var myID = modules.save.get('player.id'); var myID = modules.save.get('player.id');
if(myID != undefined) { if(myID != undefined) {
modules.messaging.send({tag: 'Tadaima', myID: myID, name: name}); modules.messaging.send({tag: 'Tadaima', myID: myID, name: name});
playerKey = myID;
} else { } else {
modules.messaging.send({tag: 'Hello', name: name}); modules.messaging.send({tag: 'Hello', name: name});
} }