Cet article fait suite à l’article précédent (si si je te jure). Plus sérieusement, je vais parler du multijoueur mais toujours dans la continuité du temps réel.
Je vais réaliser la partie menu qui va permettre de créer et de rejoindre une partie, c’est un peu comme dans Battelfield, tu choisis ta map, tu peux rejoindre telle ou telle partie. Et dès que c’est complet, le combat se lance, même principe.
Tout d’abord, je donne un p’tit coup de brosse sur la page apps.php et sur le fichier de style histoire que je puisse distinguer les différentes steps. Sur la page d’accueil j’ajoute une liste avec deux options, créer et rejoindre une partie.
<div id="wrapper_menu">
<h1>WARS.IO</h1>
<div id="menu">
<div class="step option_step_home">
<ul class="option">
<li id="option_create_partie">Créer une partie</li>
<li id="option_join_partie">Rejoindre une partie</li>
</ul>
</div>
<div class="step option_step_create_partie">
<button class="go_home">< Home</button>
<ul id="list_of_maps"></ul>
</div>
<div class="step option_step_join_partie">
<button class="go_home">< Home</button>
<ul id="list_of_parties"></ul>
</div>
<div class="step wait">
<div class="mask"></div>
<div class="content">
<div><span class="text">En attente des autres joueurs...</span> <span class="place"></span></div>
<div class="prepare">
<ul id="list-players" class="list-co"></ul>
</div>
<div class="sub-menu"></div>
<ul id="list_of_players"></ul>
</div>
</div>
</div>
<div id="wrapper_map"></div>
<div id="serveur_info">
<div class="mask"></div>
<div class="message">Le serveur n'est actuellement pas connecté.</div>
</div>
</div>
Au niveau du css, rien de transcendant, j’ai simplement codé des boîtes fixes et dans un premier temps j’ai masqué toutes les boîtes sauf la home.
.option_step_home, .option_step_create_partie, .option_step_join_partie, .wait{
display: none;
}J’ai mis un background histoire que ce soit un peu plus sexy !
Je m’occupe d’afficher les boîtes correspondantes lorsqu’on clique sur le bouton « Créer une partie » et « Rejoindre une partie », et je gère aussi les boutons pour revenir sur la home, à l’aide de jQuery.
//bind click step creation et joindre partie
$(".option #option_create_partie").bind("click.menu", () => {
$("#menu .step").hide();
$("#menu .option_step_create_partie").show(300);
//click return home
$(".option_step_create_partie .go_home").click( () => {
$("#menu .step").hide();
$("#menu .option_step_home").show(300);
});
return false;
});
$(".option #option_join_partie").bind("click.menu", () => {
$("#menu .step").hide();
$("#menu .option_step_join_partie").show(300);
//click return home
$(".option_step_join_partie .go_home").click( () => {
$("#menu .step").hide();
$("#menu .option_step_home").show(300);
});
return false;
});21/05/2016