<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/styles.css">
<script src="./js/functionsOriginal.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="tablero">
        <tr>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(0,0);" onmouseleave="limpiar();" ></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(0,1);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(0,2);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(0,3);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(0,4);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(0,5);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(0,6);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(0,7);" onmouseleave="limpiar();"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(1,0);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(1,1);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(1,2);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(1,3);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(1,4);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(1,5);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(1,6);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(1,7);" onmouseleave="limpiar();"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(2,0);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(2,1);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(2,2);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(2,3);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(2,4);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(2,5);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(2,6);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(2,7);" onmouseleave="limpiar();"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(3,0);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(3,1);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(3,2);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(3,3);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(3,4);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(3,5);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(3,6);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(3,7);" onmouseleave="limpiar();"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(4,0);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(4,1);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(4,2);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(4,3);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(4,4);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(4,5);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(4,6);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(4,7);" onmouseleave="limpiar();"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(5,0);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(5,1);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(5,2);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(5,3);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(5,4);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(5,5);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(5,6);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(5,7);" onmouseleave="limpiar();"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(6,0);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(6,1);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(6,2);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(6,3);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(6,4);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(6,5);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(6,6);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(6,7);" onmouseleave="limpiar();"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(7,0);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(7,1);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(7,2);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(7,3);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(7,4);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(7,5);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(7,6);" onmouseleave="limpiar();"></td>
            <td onclick="mostrarReina(this);" onmouseover="cambiarColor(7,7);" onmouseleave="limpiar();"></td>
        </tr>
    </table>
    <select id="reina" onchange="cambiarReina()"> 
        <option value="0" id="reina0">Reina Original</option>
        <option value="1" id="reina1">Reina Variante 1</option>
        <option value="2" id="reina2">Reina Variante 2</option>
    </select>
    <select id="opciones" onchange="ejecutarOpcion()">
        <option value="" selected>Sin opción</option>
        <option value="1">Solución 1</option>
        <option value="2">Solución 2</option>
        <option value="3">Solución 3</option>
    </select>
    
    <button id="reinicioBtn" onclick="reinicio()">Reinicio</button>


    <div>
        <label for="colorCeldaImparID">Color de celdas impares:</label>
        <input type="color" id="colorCeldaImparID" value="#fece9e" onchange="cambiarColoresTablero()">
    </div>
    <div>
        <label for="colorCeldaParID">Color de celdas pares:</label>
        <input type="color" id="colorCeldaParID" value="#d18b47" onchange="cambiarColoresTablero()">
    </div>
    <div>
        <label for="colorCeldaAtaqueID">Color de celdas en ataque:</label>
        <input type="color" id="colorCeldaAtaqueID" value="#AD2E24" onchange="cambiarColoresTablero()">
    </div>
    <div>
        <label for="colorCeldaBloqueadoID">Elige un color:</label>
        <input type="color" id="colorCeldaBloqueadoID" value="#861F18" onchange="cambiarColoresTablero()">
    </div>
    
 

</body>
</html>