Autor Tema: Conversión de Dynmap en bloque-web  (Leído 4303 veces)

C4BR3R4

  • SuperAdmin.
  • *
    • Ver Perfil
Conversión de Dynmap en bloque-web
« en: 16 de Enero de 2018 a las 20:37 »
Conversión del plugin Dynmap en un bloque-web para mostrar los jugadores conectados.
Mapa dinámico de los mundos al estilo 'Google Maps'



Cita de: Cambios y Actualizaciones
28 de julio del 2016
++ Creación del archivo 'jugadores.html'.

NOTA: Información copiada de http://c4br3r4.es/index.php?topic=171.msg428#msg428

C4BR3R4

  • SuperAdmin.
  • *
    • Ver Perfil
Conversión de Dynmap en bloque-web
« Respuesta #1 en: 16 de Enero de 2018 a las 22:14 »
Crear una copia de los siguientes archivos
Duplicar el archivo 'dynmap/web/index.html' y llamarlo 'dynmap/web/jugadores.html'
Duplicar el archivo 'dynmap/web/js/map.js' y llamarlo 'dynmap/web/js/jugadores.js'
Duplicar el archivo 'dynmap/web/css/dynmap_style.css' y llamarlo 'dynmap/web/css/dynmap_style-jugadores.css'



Modificar lo siguiente en 'dynmap/web/jugadores.html'

Código: (Cambiar) [Seleccionar]
<script type="text/javascript" src="js/web.js?_=2.4-SNAPSHOT-2076"></script>
Código: (Por) [Seleccionar]
<script type="text/javascript" src="js/jugadores.js?_=2.4-SNAPSHOT-2076"></script>


Modificar el 'dynmap/web/js/jugadores.js'

Código: (Cambiar a 'true' para que no se vea la brújula) [Seleccionar]
nocompass: false,
Código: (Elimina el mapa) [Seleccionar]
.addClass('map')
Código: (Borrar para que la lista de jugadores permanezca siempre activa) [Seleccionar]
if(sidebaropen == 'false' || sidebaropen == 'true' || sidebaropen == 'pinned')
Código: (Elimina el botón de pausa) [Seleccionar]
.addClass('pin')
Código: (Cambiar a 'false' para que no aparezca la lista de mundos) [Seleccionar]
worldsadded[wname] = true;
Código: (Buscar) [Seleccionar]
.append($('<legend/>').text(me.options['msg-maptypes']))
Código: (Reemplazar por) [Seleccionar]
.append($('').text(me.options['msg-maptypes']))

Realizar las siguientes acciones en el archivo 'dynmap/web/css/dynmap_style-jugadores.css'

Código: (Buscar) [Seleccionar]
.timeofday.sun {
    background-image: url(../images/sun.png);
}

.timeofday.moon {
    background-image: url(../images/moon.png);
}

Código: (Reemplazar para eliminar el sol y la luna) [Seleccionar]
.timeofday.sun {
    background-image: #000;
}

.timeofday.moon {
    background-image: #000;
}


Código: (Buscar) [Seleccionar]
.weather.sunny_day {
    background-image: url(../images/weather_sunny_day.png);
}

.weather.stormy_day {
    background-image: url(../images/weather_stormy_day.png);
}
.weather.thunder_day {
    background-image: url(../images/weather_thunder_day.png);
}

.weather.sunny_night {
    background-image: url(../images/weather_sunny_night.png);
}

.weather.stormy_night {
    background-image: url(../images/weather_stormy_night.png);
}
.weather.thunder_night {
    background-image: url(../images/weather_thunder_night.png);
}

Código: (Reemplazar para eliminar el tiempo climático) [Seleccionar]
.weather.sunny_day {
    background-image: #000;
}

.weather.stormy_day {
    background-image: #000;
}
.weather.thunder_day {
    background-image: #000;
}

.weather.sunny_night {
    background-image: #000;
}

.weather.stormy_night {
    background-image: #000;
}
.weather.thunder_night {
    background-image: #000;
}

Código: (Buscar) [Seleccionar]
.digitalclock.night {
    /* background-image: url(../images/clock_night.png); */
    color: #dff;
}

.digitalclock.day {
    /* background-image: url(../images/clock_day.png); */
    color: #fd3;
}

.digitalclock.night, .digitalclock.day {
    -moz-transition: color 8s 8s linear;
    -webkit-transition: color 8s 8s linear;
    -o-transition: color 8s 8s linear;
    transition: color 8s 8s linear;
}

Código: (Reemplazar para eliminar la hora) [Seleccionar]
.digitalclock.night {
    /* background-image: url(../images/clock_night.png); */
    color: #000;
}

.digitalclock.day {
    /* background-image: url(../images/clock_day.png); */
    color: #000;
}



Realizar las siguientes acciones en el archivo 'dynmap/web/css/'standalone-jugadores.css'

Código: (Buscar) [Seleccionar]
200px;
Código: (Reemplazar para cambiar el ancho de la lista) [Seleccionar]
300px;