function Login(modules) { var root = document.getElementById('login'); var playersMessage = root.getElementsByClassName('message')[0]; var players = root.getElementsByClassName('list')[0]; var join = document.getElementById("join"); var invite = document.getElementById("invite"); var submit = root.submitButton; var them = null; var invitationAnswers = [{ label: 'accept', action: function() { modules.messaging.send({tag: "Answer", accept: true}); modules.screen.select("game"); } }, { label: 'decline', action: function() { modules.messaging.send({tag: "Answer", accept: false}); } }]; init(); return {}; function init() { initDOMEvents(); initMessageHandlers(); var name = modules.save.get('player.name'); if(name != undefined && name.length > 0) { root.you.value = name; formDisable('join', false); } } function initDOMEvents() { root.addEventListener('submit', function(e) { e.preventDefault(); if(modules.session.isLoggedIn()) { modules.messaging.send({tag: "Invitation", to: them}); } else { modules.session.start(root.you.value); } }); root.leave.addEventListener('click', function(e) { e.preventDefault(); lib.send({tag: "LogOut"}) }); root.you.addEventListener("input", function() {refreshPlayers();}); root.them.addEventListener("input", function() {refreshPlayers();}); } function initMessageHandlers() { modules.messaging.addEventListener(["Welcome"], function() { refreshPlayers(); }); modules.messaging.addEventListener(["Update"], function(o) { refreshPlayers(); }); modules.messaging.addEventListener(["Relay", "LogIn"], function() { playersChanged(); }); modules.messaging.addEventListener(["Relay", "LogOut"], function() { playersChanged(); }); modules.messaging.addEventListener(["Relay", "Invitation"], function(o) { var name = modules.room.name(o.from); // invitations should come only from known players, in doubt say «no» if(name) { modules.statusHandler.set("🎴"); modules.screen.dialog({ text: modules.i18n.get('invited')(name), answers: invitationAnswers }); } else { modules.messaging.send({tag: "Answer", accept: false}); } }); modules.messaging.addEventListener(["Relay", "Answer"], function(o) { if(o.message.accept) { modules.screen.select("game"); } }); modules.messaging.addEventListener('open', refreshPlayers); modules.messaging.addEventListener('close', refreshPlayers); } function playersChanged() { setMode(); refreshPlayers(); } function refreshPlayers() { modules.dom.clear(players); if(modules.session.isLoggedIn()) { refreshThem(); } else { refreshYou(); } } function refreshYou() { var nameTaken = false; var name = root.you.value; modules.room.filter(name).forEach(function(player) { players.appendChild(player.dom); nameTaken = nameTaken || name == player.name; }); formDisable("join", name.length < 1 || nameTaken); } function refreshThem() { them = null; var name = root.them.value; var filtered = modules.room.filter(name); filtered.forEach(function(player) { players.appendChild(player.dom); }); var exact = filtered.find(exactMatch(name)); playersMessage.textContent = ''; if(exact != undefined) { them = exact.key; } else if(filtered.length == 1) { them = filtered[0].key; } else if(filtered.length == 0) { playersMessage.textContent = modules.i18n.get( name.length > 0 ? "notFound" : "alone" ); } formDisable("invite", them == undefined); } function formDisable(name, disabled) { [submit, root[name]].forEach(function(button) { button.disabled = disabled || !modules.messaging.isOn(); }); } function exactMatch(name) { return function(player) { return player.name === name; }; } function setMode() { var loggedIn = modules.session.isLoggedIn() root.join.disabled = loggedIn; root.invite.disabled = !loggedIn; if(loggedIn) { join.className = ""; invite.className = "on"; root.them.focus(); } else { join.className = "on"; invite.className = ""; root.you.focus(); } } }