He estado haciendo pruebas con HTML y CSS para crear un juego de mesa simple sin utilizar JavaScript. Uso labels y radio buttons para crear los diferentes estados y simular la lógica para que cada ficha se mueva por el tablero.
Funciona "bien", aunque la usabilidad no es genial. Por ejemplo, después de tirar el dado, la ficha se mueve y muestro un botón para cambiar al siguiente usuario (controlado de nuevo con un label y un checkbox)... pero eso no es ideal, sería mejor si el cambio de jugador se realizara "automáticamente."
El problema es que <label>
sólo puede cambiar un elemento y no sé cómo hacer que se generen dos "acciones" (o efectos colaterales) con cada click.
¿Hay alguna manera de lanzar dos "cambios de estado" pulsando en un único <label>
o <a>
?
Esto es un ejemplo mínimo del problema: Hay dos jugadores (especificado por turnos), un tablero con 3 casillas (que serán 6 radio buttons: 1 por casilla y jugador), y dos botones para cambiar turno (aunque sólo habrá uno visible). Si se pulsa en cambiar turno, cambiará el turno, y se mostrarán los radio buttons y labels para el otro jugador. (Un ejemplo más completo puede encontrarse aquí).
¿El problema es que hay que forzar que el usuario pulse en el botón de cambiar de turno, o el jugador activo siempre será el mismo. Hay alguna manera de hacer que cuando se pulse en una casilla no sólo cambie la casilla sino también el turno?
#j1:checked ~ [for=j1],
#j1:checked ~ [for^=casilla-j2],
#j1:checked ~ [name^=casilla-j2],
#j2:checked ~ [for=j2],
#j2:checked ~ [for^=casilla-j1],
#j2:checked ~ [name^=casilla-j1]
{
display: none;
}
/* aquí habría más reglas para ocultar elementos */
<h1>Turno:</h1>
<input type="radio" id="j1" name="jugador" checked /> J1
<input type="radio" id="j2" name="jugador" /> J2
<h1>Tablero: </h1>
Jugador 1:
<input type="radio" id="casilla-j1-1" name="casilla-j1" checked />
<label for="casilla-j1-1">J1 a 1</label>
<input type="radio" id="casilla-j1-2" name="casilla-j1" />
<label for="casilla-j1-2">J1 a 2</label>
<input type="radio" id="casilla-j1-3" name="casilla-j1" />
<label for="casilla-j1-3">J1 a 3</label>
<br/>
Jugador 2:
<input type="radio" id="casilla-j2-1" name="casilla-j2" checked />
<label for="casilla-j2-1">J2 a 1</label>
<input type="radio" id="casilla-j2-2" name="casilla-j2" />
<label for="casilla-j2-2">J2 a 2</label>
<input type="radio" id="casilla-j2-3" name="casilla-j2" />
<label for="casilla-j2-3">J2 a 3</label>
<h1>Cambio de turno:</h1>
<label for="j2">Cambiar turno a jugador 2</label>
<label for="j1">Cambiar turno a jugador 1</label>
Algunos intentos:
Probé a a poner un <a>
dentro de un <label>
para poder lanzar dos cambios legibles: :target
con el <a>
y :checked
con el <label>
(con el :target controlaría el turno, y con el :checked controlaría la casilla a la que va la pieza). Parece que esa estructura es HTML válido (al menos según el validador de HTML del W3C), pero no funciona. Por ejemplo, en el siguiente snippet, si se pulsa en el primer enlace se activa el texto, si se pulsa en el segundo enlace se marca la casilla, pero si se pulsa en el tercer enlace no ocurren ambas cosas (que es lo que yo querría):
#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">Resaltar texto</a>
<label for="cb">Marcar casilla</label>
<label for="cb">
<a href="#test">Resaltar texto Y marcar casilla</a>
</label>
También probé jugando con combinaciones de diferentes pseudo-clases: :checked
e :invalid
en particular. Aunque no fue de mucha ayuda porque en el caso de un checkbox tienen el mismo valor al mismo tiempo, y en las pruebas que hice required
no aplica a un solo radio button:
div {
color: purple;
}
#radio1:checked ~ div {
color: blue;
}
#radio1:invalid ~ div {
color: red;
}
#radio2:checked ~ div {
color: fuchsia;
}
#radio1:invalid + #radio2:checked ~ div {
color: green;
}
<input type="radio" name="radio1" id="radio1" required />
<input type="radio" name="radio1" id="radio2" />
<div>Texto que debería ser verde cuando radio2 esté pulsado</div>