Guildwars 2 dynamic events
HTML
<div>
<button onclick="init('fr')">FR</button>
<button onclick="init('en')">EN</button>
<button onclick="init('de')">DE</button>
<button onclick="init('es')">ES</button>
</div>
<div><span id="labelSvr"></span> : <select id="serveur" onchange="majEvts()"></select></div>
<div><span id="labelCrt"></span> : <select id="carte" onchange="majEvts()"></select></div>
<table id="evts"/>
CSS
.Warmup, .Preparation { background: #CCCCFF; }
.Active { background: #FFFF66; }
.Fail { background: #FFCCCC; }
.Success { background: #CCFFCC; }
JavaScript
var GW2API = 'https://api.guildwars2.com/v1/';
var cartes = [];
var nomsEvenements = [];
var i18n = {
'monde': {'fr': 'Monde', 'en': 'World', 'de': 'Welt', 'es': 'Mundo'},
'carte': {'fr': 'Carte', 'en': 'Map', 'de': 'Karte', 'es': 'Mapa'},
'toutes': {'fr': 'Toutes', 'en': 'All', 'de': 'Alle', 'es': 'Todas'}
};
function majEvts() {
monde = $('#serveur').val();
if ( ! monde ) { return; }
uri = GW2API + 'events.json?world_id=' + monde;
carte = $('#carte').val();
if ( carte ) { uri = uri + '&map_id=' + carte; }
$.getJSON(uri, function(data) {
$('#evts').html('');
$.each(data['events'], function(key, val) {
$('<tr class="'+val['state']+'"><td>'+cartes[val['map_id']]+'</td><td>'+nomsEvenements[val['event_id']]+'</td></tr>').appendTo('#evts');
});
});
}
function init(lang) {
$('#labelSvr').html(i18n['monde'][lang]);
$.getJSON(GW2API + 'world_names.json?lang=' + lang, function(data) {
selSvr = $('#serveur');
selSvr.html('<option value="" selected></option>');
$.each(data, function(key, val) {
$('<option value="'+val['id']+'">'+val['name']+'</option>').appendTo(selSvr);
});
});
$('#labelCrt').html(i18n['carte'][lang]);
cartes = [];
$.getJSON(GW2API + 'map_names.json?lang=' + lang, function(data) {
selCrt = $('#carte');
selCrt.html('<option value="" selected>'+i18n['toutes'][lang]+'</option>');
$.each(data, function(key, val) {
$('<option value="'+val['id']+'">'+val['name']+'</option>').appendTo(selCrt);
cartes[val['id']] = val['name'];
});
});
nomsEvenements = [];
$.getJSON(GW2API + 'event_names.json?lang=' + lang, function(data) {
$.each(data, function(key, val) {
nomsEvenements[val['id']] = val['name'];
});
});
$('#evts').html('');
}
$(function(){
langue = navigator.language || navigator.userLanguage;
if (...