MediaWiki:Script/Colorblind.js

Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac)
• Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac)
• Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5
• Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d’exploration → Images et fichiers en cache.

const SPAWN_LAYER_COLOR = "spawnLayerColor";
const OPTION_MAPPING = {
  0: "🟥 Rouge",
  50: "🟫 Marron",
  140: "🟩 Vert",
  230: "🟦 Bleu",
  290: "🟪 Violet",
  black: "⬛ Noir",
  white: "⬜ Blanc"
}
const STYLE_MAPPING = {
  position: "absolute",
  left: "0",
  margin: "0",
  background: "#434242b3",
  color: "white",
  borderRadius: "5px",
  cursor: "pointer"
}

const spawnLayerContainers = document.querySelectorAll(".spawn-layer");

if (spawnLayerContainers.length) {
  initializeSpawnLayers(spawnLayerContainers);
}

function initializeSpawnLayers(spawnLayerContainers) {
    const selects = [];
    const spawnLayers = [];
    const spawnLayerColor = localStorage.getItem(SPAWN_LAYER_COLOR);

    spawnLayerContainers.forEach((spawnLayerContainer) => {
        const spawnLayer = spawnLayerContainer.querySelector("img");
        
        if (spawnLayer) {
            const selectColor = createSelectColor();
            spawnLayerContainer.appendChild(selectColor);
            selects.push(selectColor);
            spawnLayers.push(spawnLayer);
        }
    });

    function handleChange(event) {
        changeSpawnLayerColor(event.target.value, selects, spawnLayers);
    };

    selects.forEach(select => {
        select.addEventListener("change", handleChange);
    });

    if (spawnLayerColor) {
        changeSpawnLayerColor(spawnLayerColor, selects, spawnLayers);
    }
}

function createSelectColor() {
    const select = document.createElement("select");
    Object.entries(OPTION_MAPPING).forEach(([key, value]) => {
        const option = document.createElement("option");
        option.value = key;
        option.textContent = value;
        select.appendChild(option);
    });
    Object.entries(STYLE_MAPPING).forEach(([property, value]) => {
        select.style[property] = value;
    });

    return select;
}

function changeSpawnLayerColor(value, selects, spawnLayers) {
    if (!OPTION_MAPPING.hasOwnProperty(value)) {
        return;
    }

    let filter;

    if (value === "black") {
        filter = "invert(1) brightness(0) contrast(100%)";
    } else if (value === "white") {
        filter = "invert(1) sepia(1) saturate(100%) brightness(3)";
    } else {
        filter = `hue-rotate(${value}deg)`;
    }

    selects.forEach(select => select.value = value);
    spawnLayers.forEach(spawnLayer => spawnLayer.style.filter = filter);

    localStorage.setItem(SPAWN_LAYER_COLOR, value);
}