Maintenant que la connexion est établie, et que les maps sont récupérées, je vais pouvoir développer la création de partie.
Je modifie la méthode set_token() pour renvoyer la liste des maps au client pour qu’il puisse choisir une map lors de la création de sa partie. J’ajoute même une méthode get_list_maps_name() pour récupérer uniquement le nom des maps, pour faire plus propre.
get_list_maps_name(params){
let list_maps_name = [];
params.forEach( val => list_maps_name.push(val.nom) );
return list_maps_name;
}Dès la connexion du joueur, dans le cas où il n’est pas en combat (donc statut free) je mets à jour la liste des maps.
update_list_map(list_maps){
//nettoyage de la liste
$("#list_of_maps").html("");
//remplissage de la liste des parties
list_maps.forEach( name => $('#list_of_maps').append(`<li data-name="${name}">${name}</li>`) );
}
Du côté client, dans response_set_token() je vais maintenant ajouter un système d’événements sur les différents menu. Pour chaque événement, j’ai ajouté un espace de nom et j’ai tout un système de bindage et débindage pour éviter au client de lancer trop de requêtes au serveur, ou tout simplement, de lancer des actions qu’il ne devrait pas lancer.
$("#list_of_maps").off("click.create_partie").on("click.create_partie", "li", event => this.event_create_partie(event) );
Maintenant je vais rentrer dans le vif du sujet. Dès qu’un joueur clique sur une map, j’appelle la méthode event_create_partie() qui envoie la requête au serveur avec le nom de la map, et je fais en sorte que l’utilisateur ne puisse plus cliquer sur une autre map.
event_create_partie(event){
let name = $(event.target).attr("data-name");
if( name != "" && this.connected ){
//envois de la demande
this.send_to_server("message",{ action : "request_create_partie" , params : { token : this.token , map_name : name } });
//unbind ce click
$("#list_of_maps").off("click.create_partie");
}
}J’ai rajouté une variable partie, afin de stocker l’ensemble des parties sur le serveur, et j’ai aussi ajouté dans MongoDB une liste de généraux (CO) avec un nom et un sprite_id, qui correspond à la position du CO dans le sprite.
S’en suit de la création de la nouvelle méthode (et non des moindres) request_create_partie() au niveau du serveur. Et là il y a plusieurs choses à faire, générer un id unique pour la partie, enregistrer l’id de la partie pour le joueur courant, changer le statut du joueur en « making », créer la partie au niveau du serveur, ajouter le joueur dans la liste des joueurs de cette partie, et enfin si la partie est créée, renvoyer la validation au client et informer tous les autres joueurs qu’une partie vient d’être créée via send_to_all_other_clients().
request_create_partie(user_socket, params){
e("+++++++++++++++++++++++++++++++++++++++++\n Création d'une partie\n+++++++++++++++++++++++++++++++++++++++++");
if( params.map_name != null ){
if( this.users[ params.token ].state == "free" ){
//recuperation d'un jeton pour la partie
let id = this.get_random_partie_id();
let token = params.token;
//création de la partie
this.parties[ id ] = {
list_players : {
[params.token] : {
name : params.token,
co : this.list_co[ Math.floor( Math.random() * (this.list_co.length-1) + 1 ) ]
}
},
owner : params.token,
state : "waiting",
map : this.get_map_from_name( params.map_name ),
validation_players : {}
};
//modifie le créateur
this.users[ params.token ].state = "making";
this.users[ params.token ].current_partie = id;
e("> Création de la partie : " + id);
//envois au client une création de map réussi
this.send_to_client( user_socket, "message" , {
action : "response_request_create_partie",
params : {
result : true,
id : id,
players_info : this.get_list_players_for_preparation( this.parties[ id ] ),
list_co : this.list_co
}
});
//envois de la liste des maps au autre -> voir peux être pour seulement au free
this.send_to_all_other_clients( user_socket, "message" , { action : "update_list_parties" , params : this.get_client_list_parties() });
}else{
//gestion erreur client pas libre
e("> Making partie error => User not free");
}
}
}Et concernant la génération d’ID pour les parties, c’est exactement comme pour les token, sauf que c’est un nombre entier qui est généré.
get_random_partie_id(){
let id = Math.floor((Math.random() * 1000000) + 1);
if(this.parties[id] == undefined ){
return id;
}else{
return this.get_random_partie_id();
}
}Pour le retour client, je créé la méthode response_request_create_partie(), qui va afficher la step de la préparation de partie, initialiser la liste des joueurs et créer les slots (vignettes du CO) et binder la destruction de partie, dans le cas où le joueur voudrait annuler sa partie, mais cela fera partie d’un autre article, n’y prête pas attention pour le moment.
response_request_create_partie(params){
if( params.result ){
$("#menu .step").hide();
$("#menu .wait").show(300);
this.list_co = params.list_co;
this.current_co = params.players_info.list_players[ this.token ].co;
this.current_partie = params.id;
//afficher nombre de place
$(".wait .content .place").html(`(${params.players_info.nbr_players}/${params.players_info.max_players})`);
//ajouter le bouton annuler
$(".wait .sub-menu").html(`<button class="detroy_partie">Annuler</button>`);
this.display_slot(params.players_info);
//rebindage destruction de partie
$(".sub-menu").off("click.destroy_partie").on("click.destroy_partie", ".detroy_partie", () => this.event_destroy_partie() );
}else{
//la map na pas pu créer, rebinder le bouton
$("#list_of_maps").off("click.create_partie").on("click.create_partie", "li", event => this.event_create_partie(event) );
}
}Et voici ce que le joueur voit lorsqu’il crée une partie.
11/06/2016