Conversión de Dynmap en bloque-web

[C4BR3R4]

Conversión del plugin Dynmap en un bloque-web para mostrar los jugadores conectados.
Mapa dinámico de los mundos al estilo 'Google Maps'

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]

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;