#wip: Arreglados errores gráficos y recursivos de selección.

Public/ecma/Mapeate.Mapas.ecma.js

@@ -136,6 +136,7 @@ Mapeate.Mapas = function(mapeate, entradas){
                     tipos[clave] = {
                         url : nuevos_tipos[clave].url, 
                         clase : nuevos_tipos[clave].clase, 
+                        niveles_ocultables : nuevos_tipos[clave].niveles_ocultables, 
                         datos : null, 
                         ok : false
                     };
@@ -225,21 +226,25 @@ Mapeate.Mapas = function(mapeate, entradas){
                 cache[mapas[clave].url] = datos;
                 mapa.datos = datos;
 
-                construir(mapa, seleccion);
+                construir(mapa, niveles, seleccion);
 
             });
         else 
-            construir(mapa, seleccion);
+            construir(mapa, niveles, seleccion);
 
     };
 
-    const construir = (datos, seleccion) => {
+    const construir = (datos, niveles, seleccion) => {
 
         const juego = mapeate.si_mismo.querySelector(".juego"), 
-              mapa = juego.querySelector(".mapa section");
+              mapa = juego.querySelector(".mapa section"), 
+              menu = mapeate.si_mismo.querySelector(".juego .objetivos ul");
 
         mapa.innerHTML = (`
-            <div class="` + datos.nombre + `" data-clase="` + datos.clase + `">` + datos.datos + `</div>
+            <div class="` + datos.nombre + `" data-clase="` + datos.clase + `"` + [0, 1, 2, 3].map(i => (
+                ` data-nivel-` + i + `-ocultable="` + datos.niveles_ocultables.includes(i) + `"` + 
+                ` data-nivel-` + i + `="` + niveles.includes(i) + `"`
+            )).join("") + `>` + datos.datos + `</div>
         `);
 
         mapeate.si_mismo.querySelector(".menu-mapas").setAttribute("data-visible", false);
@@ -256,7 +261,31 @@ Mapeate.Mapas = function(mapeate, entradas){
             tamano_cache.x = 0;
             tamano_cache.y = 0;
 
-            svg.querySelectorAll("[data-habilitado").forEach(elemento => elemento.setAttribute("data-habilitado", seleccion.includes(elemento.getAttribute("data-objetivo"))));
+            svg.querySelectorAll("[data-habilitado]").forEach(elemento => {
+
+                let clon = elemento;
+                const clave = elemento.getAttribute("data-objetivo");
+
+                while(clon && clon.hasAttribute){
+                    if(clon.tagName.toLowerCase() == "svg")
+                        break;
+
+                    const objetivo = clon.getAttribute("data-objetivo");
+
+                    if(objetivo != clave && seleccion.includes(objetivo)){
+
+                        const opcion = menu.querySelector("[data-clave=" + clave + "]");
+
+                        opcion && opcion.remove();
+
+                        return;
+                    };
+                    clon = clon.parentNode;
+                };
+
+                elemento.setAttribute("data-habilitado", seleccion.includes(elemento.getAttribute("data-objetivo")))
+
+            });
             mapeate.si_mismo.querySelectorAll(".juego fieldset:not(.mapa)").forEach(campo => campo.innerHTML += mapeate.vistas.coger("posicionador"));
 
         });
@@ -279,6 +308,8 @@ Mapeate.Mapas = function(mapeate, entradas){
     this.ocultar_seleccion = (elemento, evento) => mapeate.si_mismo.querySelector(".juego .elemento section").innerText = "";
 
     this.elegir = (elemento, evento) => {
+        if(elemento.getAttribute("data-habilitado") == "false")
+            return;
 
         const clave = elemento.getAttribute("data-objetivo"), 
               seleccionado = mapeate.si_mismo.querySelector(".juego .objetivos [data-seleccionado=true][data-ok=false]");
@@ -287,7 +318,19 @@ Mapeate.Mapas = function(mapeate, entradas){
             mapeate.alerta("Seleccionad objetivo.");
         else if(seleccionado.getAttribute("data-clave") == clave){
 
-            const siguiente = seleccionado.parentNode.querySelector("[data-seleccionado=false][data-ok=false");
+            const opciones = [...seleccionado.parentNode.querySelectorAll("li")];
+            let siguiente = null, 
+                preparado = false;
+
+            [0, 1].some(() => opciones.some(nuevo => {
+                if(preparado){
+                    if(nuevo.getAttribute("data-seleccionado") == "false" && nuevo.getAttribute("data-ok") == "false"){
+                        siguiente = nuevo;
+                        return true;
+                    };
+                }else if(nuevo.getAttribute("data-clave") == clave)
+                    preparado = true;
+            }));
 
             seleccionado.setAttribute("data-seleccionado", false);
             seleccionado.setAttribute("data-ok", true);
@@ -296,7 +339,7 @@ Mapeate.Mapas = function(mapeate, entradas){
 
             if(siguiente){
                 siguiente.setAttribute("data-seleccionado", true);
-                seleccionado.parentNode.parentNode.scrollTop = seleccionado.offsetTop - (seleccionado.parentNode.parentNode.offsetHeight / 2);
+                seleccionado.parentNode.parentNode.scrollTop = siguiente.offsetTop - (siguiente.offsetHeight / 2) - (siguiente.parentNode.parentNode.offsetHeight / 2);
             }else 
                 mapeate.alerta("¡Has ganado!", () => self.volver_al_menu(elemento, evento));
 

Public/ecma/Mapeate.Mapas/Mapeate.Mapas.Global.ecma.js

@@ -23,7 +23,7 @@ Mapeate.Mapas.Global = function(mapeate, entradas){
     this.preparar = svg => {
 
         svg = svg.replace(/<title>World Map<\/title>/, "");
-        svg = svg.replace(/(<(g|path|circle) id="([^"]+)")([^>]+>)[\r\n]+\s+<title>[^<]+<\/title>/g, (...argumentos) => {
+        svg = svg.replace(/(<(g|path|circle) id="([^"]+)")([^>]+>)([\r\n]+\s+<title>[^<]+<\/title>)?/g, (...argumentos) => {
 
             let html = argumentos[1];
 
@@ -43,6 +43,7 @@ Mapeate.Mapas.Global = function(mapeate, entradas){
             return html;
         });
         svg = svg.replace(/<style[^>]*>((?!<\/style)(.|[\r\n]))+<\/style>/, "");
+        [/(circlexx)/g, /(subxx)/g].forEach((patron, i) => svg = svg.replace(patron, "$1 nivel-" + (i + 2)));
 
         return svg;
     };

Public/ecma/Mapeate.Vistas.ecma.js

@@ -181,6 +181,7 @@ Mapeate.Vistas = function(mapeate, entradas){
     };
 
     this.arrastrar = (elemento, evento) => {
+        evento.preventDefault();
 
         const [x, y] = mapeate.base.coger_posicion_del_cursor(evento), 
               caja = elemento.parentNode.parentNode.getBoundingClientRect(), 
@@ -207,7 +208,10 @@ Mapeate.Vistas = function(mapeate, entradas){
 
     };
 
-    this.soltar = (elemento, evento) => elemento_de_arrastre = null;
+    this.soltar = (elemento, evento) => {
+        evento.preventDefault();
+        elemento_de_arrastre = null;
+    };
  
     constructor();
 

Public/scss/Mapeate.base.scss

@@ -39,6 +39,7 @@
     [type=text],[type=number],[type=date],[type=datetime],[type=time],textarea{color : $color-delante;}
     button,[type=button],[type=reset],[type=submit],[rol=button]{
         color : $color-primario;
+        background-color : $color-detras;
         cursor : pointer;
         &:hover{color : $color-secundario;}
     }
@@ -301,6 +302,28 @@
             -ms-user-select : none;
             user-select : none;
             legend{&,&+p{display : none;}}
+            [data-habilitado=false],[data-acertado=false]{
+                cursor : default;
+                title{display : none;}
+            }
+            [data-habilitado=true]{
+                &[data-acertado=false]{
+                    &,path,circle{
+                        cursor : pointer;
+                        fill : mix($color-primario, $color-detras, 50%);
+                        transition-property : fill;
+                        transition-duration : $transicion-salida;
+                    }
+                    &:hover{&,path,circle{
+                        fill : mix($color-secundario, $color-detras, 50%);
+                        transition-duration : $transicion-entrada;
+                    }}
+                }
+                &[data-acertado=true]{&,path,circle{fill : mix($color-acertado, $color-detras, 50%);}}
+            }
+            @for $i from 1 through 4{
+                [data-nivel-#{$i}=false][data-nivel-#{$i}-ocultable=true] .nivel-#{$i}{display : none;}
+            }
         }
         svg{
             position : absolute;

Public/scss/Mapeate.css

@@ -37,6 +37,7 @@
     color: #222; }
   .mapeate button, .mapeate [type=button], .mapeate [type=reset], .mapeate [type=submit], .mapeate [rol=button] {
     color: #D50F0A;
+    background-color: #EFEFEF;
     cursor: pointer; }
     .mapeate button:hover, .mapeate [type=button]:hover, .mapeate [type=reset]:hover, .mapeate [type=submit]:hover, .mapeate [rol=button]:hover {
       color: #0A0FD5; }
@@ -256,6 +257,28 @@
       user-select: none; }
       .mapeate .juego .mapa legend, .mapeate .juego .mapa legend + p {
         display: none; }
+      .mapeate .juego .mapa [data-habilitado=false], .mapeate .juego .mapa [data-acertado=false] {
+        cursor: default; }
+        .mapeate .juego .mapa [data-habilitado=false] title, .mapeate .juego .mapa [data-acertado=false] title {
+          display: none; }
+      .mapeate .juego .mapa [data-habilitado=true][data-acertado=false], .mapeate .juego .mapa [data-habilitado=true][data-acertado=false] path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false] circle {
+        cursor: pointer;
+        fill: #e27f7d;
+        transition-property: fill;
+        transition-duration: 1s; }
+      .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover circle {
+        fill: #7d7fe2;
+        transition-duration: 0.2s; }
+      .mapeate .juego .mapa [data-habilitado=true][data-acertado=true], .mapeate .juego .mapa [data-habilitado=true][data-acertado=true] path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=true] circle {
+        fill: #78b378; }
+      .mapeate .juego .mapa [data-nivel-1=false][data-nivel-1-ocultable=true] .nivel-1 {
+        display: none; }
+      .mapeate .juego .mapa [data-nivel-2=false][data-nivel-2-ocultable=true] .nivel-2 {
+        display: none; }
+      .mapeate .juego .mapa [data-nivel-3=false][data-nivel-3-ocultable=true] .nivel-3 {
+        display: none; }
+      .mapeate .juego .mapa [data-nivel-4=false][data-nivel-4-ocultable=true] .nivel-4 {
+        display: none; }
     .mapeate .juego svg {
       position: absolute;
       top: 50%;
@@ -478,19 +501,5 @@
     fill: #ffffff;
     stroke: #000000;
     stroke-width: 0.5; }
-  [data-clase=global] [data-habilitado=false], [data-clase=global] [data-acertado=false] {
-    cursor: default; }
-    [data-clase=global] [data-habilitado=false] title, [data-clase=global] [data-acertado=false] title {
-      display: none; }
-  [data-clase=global] [data-habilitado=true][data-acertado=false], [data-clase=global] [data-habilitado=true][data-acertado=false] path, [data-clase=global] [data-habilitado=true][data-acertado=false] circle {
-    cursor: pointer;
-    fill: rgba(213, 15, 10, 0.5);
-    transition-property: fill;
-    transition-duration: 1s; }
-  [data-clase=global] [data-habilitado=true][data-acertado=false]:hover, [data-clase=global] [data-habilitado=true][data-acertado=false]:hover path, [data-clase=global] [data-habilitado=true][data-acertado=false]:hover circle {
-    fill: rgba(10, 15, 213, 0.5);
-    transition-duration: 0.2s; }
-  [data-clase=global] [data-habilitado=true][data-acertado=true], [data-clase=global] [data-habilitado=true][data-acertado=true] path, [data-clase=global] [data-habilitado=true][data-acertado=true] circle {
-    fill: rgba(0, 119, 0, 0.5); }
 
 /*# sourceMappingURL=Mapeate.css.map */

Public/scss/Mapeate.mapas.global.scss

@@ -152,24 +152,4 @@
     *
     */
 
-    [data-habilitado=false],[data-acertado=false]{
-        cursor : default;
-        title{display : none;}
-    }
-    [data-habilitado=true]{
-        &[data-acertado=false]{
-            &,path,circle{
-                cursor : pointer;
-                fill : mix($color-primario, rgba(0, 0, 0, 0), 50%);
-                transition-property : fill;
-                transition-duration : $transicion-salida;
-            }
-            &:hover{&,path,circle{
-                fill : mix($color-secundario, rgba(0, 0, 0, 0), 50%);
-                transition-duration : $transicion-entrada;
-            }}
-        }
-        &[data-acertado=true]{&,path,circle{fill : mix($color-acertado, rgba(0, 0, 0, 0), 50%);}}
-    }
-
 }

version

@@ -1 +1 @@
-0.0.18
+0.0.20