<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--<link rel="stylesheet" href="/css/styles.css">-->
    <script src="./css/stylesOfuscado.js"></script>
    <!--<script src="/js/functions.js"></script>-->
    <script src="./js/functionsOfuscado.js"></script>
</head>

<body>
    <p id="titulo">Problema de las ocho reinas</p>
    <div id="div-flex">

        <div id="div-tabla">
            <!--Tabla ajedrez-->
            <table id="tablero">
                <tr> <!--row-->

                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,0)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,1)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,2)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,3)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,4)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,5)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,6)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,7)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                </tr>
                <tr>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,0)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,1)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,2)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,3)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,4)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,5)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,6)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,7)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                </tr>
                <tr>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,0)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,1)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,2)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,3)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,4)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,5)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,6)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,7)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                </tr>
                <tr>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,0)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,1)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,2)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,3)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,4)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,5)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,6)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,7)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                </tr>
                <tr>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,0)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,1)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,2)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,3)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,4)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,5)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,6)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,7)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                </tr>
                <tr>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,0)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,1)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,2)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,3)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,4)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,5)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,6)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,7)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                </tr>
                <tr>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,0)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,1)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,2)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,3)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,4)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,5)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,6)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,7)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                </tr>
                <tr>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,0)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,1)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,2)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,3)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,4)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,5)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,6)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                    <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,7)" onmouseleave="limpiar()"
                        class="celda">
                    </td>
                </tr>
            </table>


            <div id="flex-contador">
                <div id="div-contador">
                    <p id="contador">Contador: </p>
                    <p id="puestos"> 0</p>
                </div>
                <button onclick="limpiarTodo()">Reiniciar</button> <!--Reiniciar-->
            </div>
        </div>


        <div id="div-colores">
            <div id="div-imagenes">
                <div id="fotos-img">
                    <img id="foto-reina" src="/img/reina.png" alt="reina">
                    <img id="foto-foxy" src="/img/foxy.png" alt="foxy">
                    <img id="foto-jiggly" src="/img/jiggly.png" alt="jiggly">
                </div>
                <!--Selector de imagenes-->
                <select name="" id="imagenes" onchange="cambiarPersonaje()">
                    <option value="reina">Reina ajedrez</option>
                    <option value="foxy">Foxy</option>
                    <option value="jiggly">Jigglypuff</option>
                </select>
            </div>

            <div id="div-tableroAtaque">
                <p id="texto-colores">Colores</p>
                <div id="div-colorTablero">
                    <!--Color tablero-->
                    <p class="texto-color">Color1</p>
                    <input type="color" name="color-par" id="color-par" oninput="colorPar()">
                    <p id="texto-color2" class="texto-color">Color2</p>
                    <input type="color" name="color-impar" id="color-impar" oninput="colorImpar()">
                </div>

                <div id="div-lineaAtaque">
                    <!--Color linea de ataque-->
                    <p class="texto-color">Color linea ataque</p>
                    <input type="color" name="color-ataque" id="color-ataque" oninput="cambiarColorAtaque()">
                </div>

            </div>


            <!--Selector de soluciones-->


            <div id="div-soluciones">
                <p id="titulo-soluciones">Soluciones</p>
                <select name="" id="soluciones" onchange="soluciones()">
                    <option value="--">--</option>
                    <option value="solucion1">Solución 1</option>
                    <option value="solucion2">Solución 2</option>
                    <option value="solucion3">Solución 3</option>
                </select>
            </div>


        </div>
    </div>
</body>

</html>