server/www/screen/hall.js

Screen.Hall = function(modules) {
  var root = document.getElementById('room');
  var players = listSelector('players');
  var games = listSelector('games');
  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 listSelector(id) {
    var root = document.getElementById(id);
    return {
      root: root,
      message: root.getElementsByClassName('message')[0],
      list: root.getElementsByClassName('list')[0]
    }
  }

  function init() {
    initDOMEvents();
    initMessageHandlers();
  }

  function initDOMEvents() {
    root.addEventListener('submit', function(e) {
      e.preventDefault();
      modules.messaging.send({tag: "Invitation", to: them});
    });

    root.them.addEventListener("input", function() {refreshPlayers();});
  }

  function initMessageHandlers() {
    modules.messaging.addEventListener(["Okaeri"], function() {
      refreshPlayers();
      refreshGames();
    });

    modules.messaging.addEventListener(["Welcome"], function() {
      refreshPlayers();
      refreshGames();
    });

    modules.messaging.addEventListener(["LogIn"], function(o) {
      console.log("Someone joined in, they should be added to the lists");
      console.log(o);
    });

    modules.messaging.addEventListener(["Relay", "Invitation"], function(o) {
      console.log("Received an invitation, should be added to games list");
      console.log(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 refreshPlayers() {
    modules.dom.clear(players.list);
    refreshThem();
  }

  function refreshGames() {
    modules.dom.clear(games.list);
  }

  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));
    players.message.textContent = '';
    if(exact != undefined) {
      them = exact.key;
    } else if(filtered.length == 1) {
      them = filtered[0].key;
    } else if(filtered.length == 0) {
      players.message.textContent = modules.i18n.get(
        name.length > 0 ? "notFound" : "alone"
      );
    }
    formDisable(them == undefined);
  }

  function formDisable(disabled) {
    [submit, root.invite].forEach(function(button) {
      button.disabled = disabled || !modules.messaging.isOn();
    });
  }

  function exactMatch(name) {
    return function(player) {
      return player.name === name;
    };
  }

}