J'ai été jouer avec le langage HTML et CSS pour créer un simple 2-joueur de jeu de plateau sans utiliser de JavaScript. J'utilise des étiquettes, des boutons radio et des cases à cocher pour créer différents états et imiter certains la logique de sorte que la pièce se déplacer autour de la carte.
Il fonctionne "bien", même si l'ergonomie n'est pas grande. Par exemple, après avoir cliqué sur le dé, le carreau se déplace, et je l'affichage d'un bouton pour changer le joueur suivant (contrôlé à nouveau avec une étiquette et une case à cocher)... ce qui n'est pas grand, il serait mieux si elle a changé de joueur "automatiquement".
Le problème est que l' <label> ne cible qu'un élément, et je ne sais pas comment déclencher deux "actions" (ou effets secondaires) avec un seul clic.
Le code suivant est un mcve afin de mieux visualiser le problème: il y a deux joueurs (spécifié par tours), une carte avec trois carreaux (représenté par 6 boutons radio: 1 par joueur et carrelage), et deux boutons pour changer de joueur de tour (seul visible). Si vous cliquez sur le bouton modifier, le tour va passer au joueur suivant. (Un exemple plus complexe peut être trouvé ici)
Le problème est que les utilisateurs sont obligés d'appuyer sur le bouton pour changer de tour, sinon le même joueur sera toujours active. Est-il un moyen de faire en sorte que lorsqu'une étiquette est cliqué, pas seulement la tuile est activé, mais aussi le tour est changé? Ou, en son absence, est-il une autre solution pour y parvenir? (sans utiliser de JS)
#p1:checked ~ [for=p1],
#p1:checked ~ [for^=tile-p2],
#p1:checked ~ [name^=tile-p2],
#p2:checked ~ [for=p2],
#p2:checked ~ [for^=tile-p1],
#p2:checked ~ [name^=tile-p1]
{
display: none;
}
/* more rules to hide/show more elements */<h1>Players:</h1>
<input type="radio" id="p1" name="player" checked /> P1
<input type="radio" id="p2" name="player" /> P2
<h1>Board: </h1>
Player 1:
<input type="radio" id="tile-p1-1" name="tile-p1" checked />
<label for="tile-p1-1">P1 to 1</label>
<input type="radio" id="tile-p1-2" name="tile-p1" />
<label for="tile-p1-2">P1 to 2</label>
<input type="radio" id="tile-p1-3" name="tile-p1" />
<label for="tile-p1-3">P1 to 3</label>
<br/>
Player 2:
<input type="radio" id="tile-p2-1" name="tile-p2" checked />
<label for="tile-p2-1">P2 to 1</label>
<input type="radio" id="tile-p2-2" name="tile-p2" />
<label for="tile-p2-2">P2 to 2</label>
<input type="radio" id="tile-p2-3" name="tile-p2" />
<label for="tile-p2-3">P2 to 3</label>
<h1>Change of turn:</h1>
<label for="p2">Change to Player 2</label>
<label for="p1">Change to Player 1</label>Est-il possible de déclencher deux "changements d'état" en cliquant sur un seul <label> ou <a>?
Quelques tentatives de résoudre ce:
J'ai essayé de mettre un <a> à l'intérieur d'un <label> à être en mesure de déclencher deux lisible changements: :target et :checked (avec l' :cible, je le contrôle de la tour du joueur, et avec le :vérifié ce serait la position de l'instrument). Il semble être valide HTML (au moins selon le validateur du W3C), mais ça ne fonctionne pas vraiment. Par exemple, dans le prochain extrait, en cliquant sur le premier lien, mettez en surbrillance le texte, en cliquant sur la deuxième marque de la boîte, et (j'espère) en cliquant sur le troisième serait de faire les deux... mais il n'est pas:
#test:target {
color: red;
}
#cb:checked
a, label {
display: block;
text-decoration: underline;
color: blue;
}<input type="checkbox" id="cb" />
<div id="test">TEST</div>
<a href="#test">Highlight test</a>
<label for="cb">Check the box</label>
<label for="cb">
<a href="#test">Highlight test AND check the box</a>
</label>J'ai aussi essayé de jouer avec les différents pseudo-classes: :checked et :invalid. Il n'a pas fait beaucoup pour une case à cocher, car ils s'appliquerait dans le même temps, et de mes tests, required ne s'applique pas à une seule radio (mais j'ai peut-être fait quelque chose de mal):
div {
color: purple;
}
#radio1:checked ~ div {
color: blue;
}
#radio2:checked ~ div {
color: fuchsia;
}
#radio1:invalid ~ div {
color: red;
}
#radio1:invalid + #radio2:checked ~ div {
color: green;
}<input type="radio" name="radio1" id="radio1" required />
<input type="radio" name="radio1" id="radio2" />
<div>Text to be green if radio2 is checked</div>
