Thread:BlazingTwist/@comment-45222098-20200518222226

try running this the code is bueatfied

function UserNameReplace { if (typeof(disableUsernameReplace) != 'undefined' && disableUsernameReplace || wgUserName === null) return; $("span.insertusername").html(wgUserName); } addOnloadHook(UserNameReplace);

/* End of the replacement */ /*Testing: Cursor changing while clicking*/ function change { document.body.style.cursor = "url('https://vignette.wikia.nocookie.net/dreamworks-school-of-dragons/images/c/c1/Wiki_cursor_2.png/revision/latest?cb=20190707175219'), auto"; } /*end of testing*/ /*Back-to-Top*/ window.BackToTopModern = true;

/*Portal*/ mw.loader.using(['jquery.ui.tabs'], function {  $(function { var $tabs = $("#portal_slider").tabs({          fx: {              opacity: 'toggle',              duration: 100          }      }); $("[class^=portal_sliderlink]").click(function { // bind click event to link          $tabs.tabs('select', this.className.replace("portal_sliderlink_", ""));          setTimeout(function { $(window).scroll; }, 1000);          return false;      }); }); });

mw.hook('wikipage.content').add(function($content) {  logToConsole("contentHook triggered.");  if (pageContainsColorGuide) {      colorGuide_initialize;  } });

function logToConsole(message) { if (window.console && window.console.log) { console.log(message); } }

/*Color Guide*/ //-

/** function pageContainsColorGuide { var requiredElementStructure = { 'colorPreviewCanvasHolder': ['detailImgSrc', 'colorImgSrc', 'canvasWidth', 'canvasHeight', 'style'], 'primaryColorPickerHolder': ['style'], 'secondaryColorPickerHolder': ['style'], 'tertiaryColorPickerHolder': ['style'], 'backgroundColorPickerHolder': ['style'], 'colorGuideApplyColorButtonHolder': ['style'], };
 * Utility function for checking whether all required colorGuide elements are present
 * @returns boolean value

var foundElement, requiredId, requiredAttributes, i;  for (requiredId in requiredElementStructure) { foundElement = document.getElementById(requiredId); if (!foundElement) { logToConsole("page is missing element: " + requiredId); return false; }      requiredAttributes = requiredElementStructure[requiredId]; if (!requiredAttributes) { continue; }

for (i = 0; i < requiredAttributes.length; i++) { if (!(requiredAttributes[i] in foundElement.dataset)) { logToConsole("page is missing attribute: " + requiredAttributes[i] + " in element: " + requiredId); return false; }      }  }  return true; }

function addColorPicker(divID, targetID, value) { var div = document.getElementById(divID); if (!div) { //div does not exist! return; }

if (document.getElementById(targetID)) { //exists already return; }

// var picker = document.createElement("input"); picker.id = targetID; picker.type = "color"; picker.value = value; picker.style = div.dataset.style; div.appendChild(picker); }

function addImageHolder(divID, targetID, srcAttr, onloadCallback) { var div = document.getElementById(divID); if (!div || !(srcAttr in div.dataset)) { //div does not exist or does not have srcAttr! return; }

if (document.getElementById(targetID)) { //exists already return; }

var image = new Image; image.onload = onloadCallback; image.crossOrigin = "anonymous"; image.style = "display:none"; image.id = targetID; image.src = div.dataset[srcAttr]; div.appendChild(image); }

function colorGuide_initialize { if (!pageContainsColorGuide || document.getElementById("colorPreviewCanvas")) { return; }

var canvasHolder = document.getElementById("colorPreviewCanvasHolder"); var colorPreviewCanvas = document.createElement("CANVAS"); colorPreviewCanvas.id = "colorPreviewCanvas"; colorPreviewCanvas.style = canvasHolder.dataset.style; colorPreviewCanvas.width = canvasHolder.dataset.canvasWidth; colorPreviewCanvas.height = canvasHolder.dataset.canvasHeight; document.getElementById("colorPreviewCanvasHolder").appendChild(colorPreviewCanvas);

var applyColorsButtonHolder = document.getElementById("colorGuideApplyColorButtonHolder"); var applyColorsButton = document.createElement("input"); applyColorsButton.id = "colorGuideApplyColorButton"; applyColorsButton.type = "button"; applyColorsButton.value = "Apply Colors"; applyColorsButton.style = applyColorsButtonHolder.dataset.style; applyColorsButton.onclick = function { colorGuide_updateCanvas; };  applyColorsButtonHolder.appendChild(applyColorsButton);

var imagesToLoad = 2; var onloadCallback = function { imagesToLoad--; if (imagesToLoad <= 0) { colorGuide_updateCanvas; }  };

addImageHolder("colorPreviewCanvasHolder", "detailRenderImage", "detailImgSrc", onloadCallback); addImageHolder("colorPreviewCanvasHolder", "colorRenderImage", "colorImgSrc", onloadCallback);

addColorPicker("primaryColorPickerHolder", "primaryColorPicker", "#ff0000"); addColorPicker("secondaryColorPickerHolder", "secondaryColorPicker", "#00ff00"); addColorPicker("tertiaryColorPickerHolder", "tertiaryColorPicker", "#0000ff"); addColorPicker("backgroundColorPickerHolder", "backgroundColorPicker", "#000000"); }

function colorGuide_updateCanvas { var canvas = document.getElementById("colorPreviewCanvas"); if (!canvas) { return; }

var detailCanvas = document.createElement("CANVAS"); var colorCanvas = document.createElement("CANVAS");

var detailImage = document.getElementById("detailRenderImage"); var colorImage = document.getElementById("colorRenderImage");

if (detailImage.width != colorImage.width || detailImage.height != colorImage.height) { //unworkable textures return; }

var targetDimensions = fitImageToCanvas(detailImage, canvas); canvas.width = targetDimensions.width; canvas.height = targetDimensions.height; loadImageToCanvas(detailImage, detailCanvas, targetDimensions); loadImageToCanvas(colorImage, colorCanvas, targetDimensions);

if (allDimensionsMatching(targetDimensions, detailCanvas, colorCanvas, canvas)) { var color1 = hexToRgb(document.getElementById("primaryColorPicker").value); var color2 = hexToRgb(document.getElementById("secondaryColorPicker").value); var color3 = hexToRgb(document.getElementById("tertiaryColorPicker").value);

canvas.style.backgroundColor = document.getElementById("backgroundColorPicker").value; colorGuide_buildResultCanvasData(detailCanvas, colorCanvas, canvas, color1, color2, color3); } }

/** function colorGuide_buildResultCanvasData(detailCanvas, colorCanvas, displayCanvas, primaryColor, secondaryColor, tertiaryColor) { var detailData = detailCanvas.getContext("2d").getImageData(0, 0, displayCanvas.width, displayCanvas.height); var colorData = colorCanvas.getContext("2d").getImageData(0, 0, displayCanvas.width, displayCanvas.height); var displayData = new ImageData(displayCanvas.width, displayCanvas.height);
 * builds the displayCanvas given a loaded detail- and color-canvas, along with the target primary, secondary and tertiary colors
 * @param {*} detailCanvas a canvas with a loaded detail-texture-render image
 * @param {*} colorCanvas a canvas with a loaded color-mask-render image
 * @param {*} displayCanvas the canvas that is to be rendered to (must be same size as detailCanvas AND colorCanvas)
 * @param {*} primaryColor
 * @param {*} secondaryColor
 * @param {*} tertiaryColor

var redFactor, greenFactor, blueFactor, blackFactor, targetRed, targetGreen, targetBlue, detailRed, detailGreen, detailBlue; for (var i = 0; i < detailData.data.length; i += 4) { redFactor = colorData.data[i] * 1.0 / 255; greenFactor = colorData.data[i + 1] * 1.0 / 255; blueFactor = colorData.data[i + 2] * 1.0 / 255; blackFactor = 1.0 - Math.min(redFactor + greenFactor + blueFactor, 1.0);

targetRed = blackFactor * primaryColor.r + blueFactor * secondaryColor.r + greenFactor * tertiaryColor.r;      targetGreen = blackFactor * primaryColor.g + blueFactor * secondaryColor.g + greenFactor * tertiaryColor.g;      targetBlue = blackFactor * primaryColor.b + blueFactor * secondaryColor.b + greenFactor * tertiaryColor.b;

detailRed = detailData.data[i]; detailGreen = detailData.data[i + 1]; detailBlue = detailData.data[i + 2];

displayData.data[i] = detailRed * lerp(targetRed, detailRed, redFactor) / 255; displayData.data[i + 1] = detailGreen * lerp(targetGreen, detailGreen, redFactor) / 255; displayData.data[i + 2] = detailBlue * lerp(targetBlue, detailBlue, redFactor) / 255; displayData.data[i + 3] = detailData.data[i + 3]; }

displayCanvas.getContext("2d").putImageData(displayData, 0, 0); }

/*Utility functions (mostly just for the color guide)*/ //-

/** function allDimensionsMatching(targetDimensions) { for (var i = 1; i < arguments.length; i++) { if (arguments[i].width != targetDimensions.width) { return false; }      if (arguments[i].height != targetDimensions.height) { return false; }  }  return true; }
 * validates that all passed canvases have the same dimensions as targetDimensions
 * @param {*} targetDimensions
 * @param {*} arguments variable amount of canvases to be checked
 * @returns boolean value, true when all Dimensions match, false when they don't

/** 