<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/styles.css">
<script src="./js/functions.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="reina0" id="reina0">Reina Original</option>
        <option value="reina1" id="reina1">Reina Variante 1</option>
        <option value="reina2" id="reina2">Reina Variante 2</option>
    </select>
    
    <select onchange="solucionSeleccionada(this)">
        <option value="solucion0">Sin Opción</option>
        <option value="solucion1">Solucion 1</option>
        <option value="solucion2">Solucion 2</option>
        <option value="solucion3">Solucion 3</option>
    </select>
    <button id="reinicio" onclick="reinicio();">Reinicio</button>

    <div id="color-panel">
        <label for="color-cuadro1">Color de Cuadro:</label>
        <input type="color" id="color-cuadro1" value="#fece9e" oninput="limpiar()">

        <label for="color-cuadro2">Color de Cuadro:</label>
        <input type="color" id="color-cuadro2" value="#d18b47" oninput="limpiar()">

        <label for="color-cuadro1">Color de Ataque:</label>
        <input type="color" id="color-ataque" value="#AD2E24" oninput="limpiar()">

        <label for="color-cuadro2">Color de Ataque fijo:</label>
        <input type="color" id="color-ataque2" value="#861F18" oninput="limpiar()">
    </div>
    
   
    
</body>
</html>