Cambiar el diseño del foro dependiendo de la estación

Flerex

No sé para que demonios puede servir este código, pero por las risas aquí os lo dejo. Con este JS podréis cambiar el diseño del foro dependiendo de la estación del año. Está preparado para seguir una lógica única para todos los usuarios (las estaciones del hemisferio norte o del sur).

Detalles a tener en cuenta

  • Funciona en todas las versiones de Foroactivo e incluso en Jcink (yay ?)
  • Por motivos de sencillez, se considera que todos los años las estaciones cambian el día 21.
  • Por motivos de usabilidad para los administradores de foros de RPG, todos los usuarios comparten la misma estación.

Instalación

Coloca el siguiente código JS en la zona correspondiente para que sea aplicado en todas las páginas de tu foro.

$(function() {

    var hemisphere = true, // True for north, false for south;

    seasonToStr = function(season) {
        switch(season) {
            case 1:
                return 'winter';
            case 2:
                return 'spring';
            case 3:
                return 'summer';
            case 4:
                return 'fall';
        }
    },
    getNorthSeason = function() {

        var today = new Date(),
            day = today.getDate();
            month = today.getMonth();

        switch(month) {
            case 0:
            case 1:
                return 1;
            case 3:
            case 4:
                return 2;
            case 6:
            case 7:
                return 3;
            case 9:
            case 10:
                return 4;
            // March
            case 2:
                return day < 21 ? 1 : 2;
            // June
            case 5:
                return day < 21 ? 2 : 3;
            // September
            case 8:
                return day < 21 ? 3 : 4;
            // December
            case 11:
                return day < 21 ? 4 : 1;
        };


    },
    getCurrentSeason = function(hemisphere) {
        return hemisphere ? getNorthSeason() : (getNorthSeason() + 2) % 4;
    };

    $('body').addClass(`season-${ seasonToStr(getCurrentSeason(hemisphere)) }`)

});

Asegúrate de cambiar el valor de la variable hemisphere (línea 3), donde pone true por false si lo que deseas es que se siga las estaciones del hemisferio sur.

Modo de uso

Coloca la siguientes clases antes de los códigos CSS que se tengan que aplicar en dichas estaciones:

  • body.season-spring para Primavera
  • body.season-summer para Verano
  • body.season-winter para Invierno
  • body.season-fall para Otoño

Por ejemplo:

body.season-spring #wrap {
    border: 10px solid blue;
}

El anterior código añadirá un borde al #wrap del foro solo en Primavera.

¡Y ale!

por Flerex

Estudiante de Ingienería del Software con experiencia en el desarrollo web y la plataforma Foroactivo desde hace más de 8 años. Me encanta todo lo relacionado con el diseño de UI/UX.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *