webclient/js/GUI/Screen/Hall/Games.js

import * as ListSelector from GUI.ListSelector;
import Games;
import I18n;
import Messaging;
import players from Room;
import dialog from GUI.Screen;
import * as Dom from UnitJS.Dom;

var list = ListSelector.make('games', showGame);

return {
	refresh: refresh
};

function showGame(game) {
	var liContent;
	if(game.key.match(/^Player#/)) { // Game proposals use the ID of the opponent as ID
		liContent = gameProposal(game);
	} else {
		liContent = pendingGame(game);
	}
	return Dom.make('li', {}, liContent);
}

function gameProposal(game) {
	var properties = {
		textContent: I18n.get('proposedGame')(game.value.yourTurn, game.value.vs.name),
	};
	if(game.value.yourTurn) {
		properties.onClick = answerDialog(game.value.vs.id);
		properties.class = 'clickable';
	}
	return [Dom.make('span', properties)];
}

function pendingGame(game) {
	var status = players.get(game.value.vs.id) != undefined ? 'active' : 'inactive'
	return [
		Dom.make('span', { textContent: status}),
		Dom.make('a', {
			textContent: I18n.get('pendingGame')(game.value.yourTurn, game.value.vs.name),
			href: '/game/' + game.key
		})
	];
}

function answer(key, accept) {
	return function() {
		Messaging.send({tag: "Answer", accept: accept, to: key});
		Games.entries.remove(key);
		refresh();
	}
}

function answerDialog(key) {
	return function() {
		dialog({
			text: I18n.get('questionAccept'),
			answers: [
				{label: 'accept', action: answer(key, true)},
				{label: 'decline', action: answer(key, false)},
				{label: 'notYet', action: function() {}}
			]
		});
	};
}

function refresh() {
	var sortedGames = Games.entries.getAll();
	list.refresh(sortedGames);
	if(sortedGames.length < 1) {
		list.message.textContent = I18n.get('noGames');
	}
}