CaritasSantaCruz/Mapeate
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
KyMAN 2024-04-30 20:19:50 +02:00
parent 0e9b368cdd
commit c0a482756a
8 changed files with 106 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
Public/ecma/Mapeate.Mapas.ecma.js
View File

@ -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));

3
Public/ecma/Mapeate.Mapas/Mapeate.Mapas.Global.ecma.js
View File

@ -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;
};

6
Public/ecma/Mapeate.Vistas.ecma.js
View File

@ -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();

23
Public/scss/Mapeate.base.scss
View File

@ -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;

37
Public/scss/Mapeate.css
View File

@ -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 */

2
Public/scss/Mapeate.css.map
View File

File diff suppressed because one or more lines are too long

20
Public/scss/Mapeate.mapas.global.scss
View File

@ -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%);}}
}
}

2
version
View File

@ -1 +1 @@
0.0.18
0.0.20