Allows for some guild customization. Colours, icons and profile pages. Help create more of a guild identity!
// ==UserScript==
// @name MWI Guild Customization
// @namespace https://www.mwilinks.site
// @icon https://www.mwilinks.site/icon.png
// @match https://www.milkywayidle.com/*
// @match https://www.milkywayidlecn.com/*
// @grant none
// @version 1.12
// @author Lurpa
// @license MIT
// @description Allows for some guild customization. Colours, icons and profile pages. Help create more of a guild identity!
// ==/UserScript==
/*
With this scripts, users can see some level of guild customization. This includes custom guild colours and icons as well as guildprofiles.
To make this work, the leader of the guild has to send Joethelurpa a message so they can upload what you want.
The data then gets stored on another site and accessed through this script so that anyone with it installed can see anyone else's customizations.
Created by Lurpa, with the help of SentientMilk.
Joethelurpa takes care of the communication.
Feedback is always very welcome.
*/
(function (){
//===========================================================================================================================================================
// Injecting all the CSS styles
//===========================================================================================================================================================
if (localStorage.getItem("mwigcIconBg") == "on") { document.head.insertAdjacentHTML('beforeend', `
<style>.Skill_skill__3MrMc, .SharableProfile_houseRoom__2FW_d, .SharableProfile_playerModel__o34sV .Item_item__2De2O,
.SharableProfile_equippedAbilities__1NNpC .Ability_ability__1njrh, .SharableProfile_equipmentSlot__kOrug
{ background-color: transparent !important; border: none !important; } </style>` ); }
if (localStorage.getItem("mwigcSkillGrid") != "") { document.head.insertAdjacentHTML('beforeend', `<style> .SharableProfile_skillGrid__3vIqO { grid-template-columns: repeat(` + localStorage.getItem("mwigcSkillGrid") + `,var(--item-size-normal)) !important; } </style>`); }
if (localStorage.getItem("mwigcGuildIcon") != ""){ document.head.insertAdjacentHTML('beforeend', `<style> .` + localStorage.getItem("guildRegistration") + `-border {background-image: url("` + localStorage.getItem("mwigcGuildIcon") + `") !important }</style>`); }
// Doesn't use other functions if css got imported.
if (localStorage.getItem("mwigcImportCss") == ""){
if (localStorage.getItem("mwigcTextShadow") != "") { document.head.insertAdjacentHTML('beforeend', `<style> .` + localStorage.getItem("guildRegistration") + `:before {text-shadow: ` + localStorage.getItem("mwigcTextShadow") + `!important }</style>`); }
if (localStorage.getItem("mwigcTextGradient") != ""){ document.head.insertAdjacentHTML('beforeend', `<style> .` + localStorage.getItem("guildRegistration") + ` span {background-image: ` + localStorage.getItem("mwigcTextGradient") + `!important }</style>`); }
if (localStorage.getItem("mwigcBorderGradient") != ""){ document.head.insertAdjacentHTML('beforeend', `<style> .` + localStorage.getItem("guildRegistration") + `-border {border-image: ` + localStorage.getItem("mwigcBorderGradient") + ` 1 !important }</style>`); }
if (localStorage.getItem("mwigcTextSaturation") != "") { document.head.insertAdjacentHTML('beforeend', `<style> .` + localStorage.getItem("guildRegistration") + ` span {filter:saturate(` + localStorage.getItem("mwigcTextSaturation") + `) !important }</style>`); }
if (localStorage.getItem("mwigcBorderShadow") != "") { document.head.insertAdjacentHTML('beforeend', `<style> .` + localStorage.getItem("guildRegistration") + `-border { box-shadow: ` + localStorage.getItem("mwigcBorderShadow") + `!important }</style>`); }
if (localStorage.getItem("mwigcBorderWidth") != "") { document.head.insertAdjacentHTML('beforeend', `<style> .` + localStorage.getItem("guildRegistration") + `-border {border-width: ` + localStorage.getItem("mwigcBorderWidth") + `px !important }</style>`); }
}
else
{ document.head.insertAdjacentHTML('beforeend', `<style>` + localStorage.getItem("mwigcImportCss") + `</style>`); }
// Loads the hosted stylesheets.
var mwigcReload = localStorage.getItem("mwigcReload") ?? 1; //Reload resources.
document.head.insertAdjacentHTML('beforeend', `<link type="text/css" rel="stylesheet" href="https://www.mwilinks.site/mwigc/stylesheets/customcoloursv1.css?v=`+mwigcReload +`">`);
document.head.insertAdjacentHTML('beforeend', `<link type="text/css" rel="stylesheet" href="https://www.mwilinks.site/mwigc/stylesheets/thebasicsv1.css?v=`+mwigcReload +`">`);
// Inserts the settings modal background.
document.getElementById("root").insertAdjacentHTML('afterbegin', `<div id="mwigc-settings-modal-base" class="mwigc-settings-modal-base"></div>`);
document.getElementById("root").insertAdjacentHTML('afterbegin',`
<div class="mwigc-profilecontainer" id="mwigc-profilecontainer">
<div class="mwigc-profilebackground"></div>
<div class="mwigc-profilemodal">
<div class="mwigc-closebutton">
<svg role="img" aria-label="Close" class="Icon_icon__2LtL_" width="100%" height="100%">
<use href="/static/media/misc_sprite.354aafcf.svg#close_menu"></use>
</svg>
</div>
<div class="mwigc-backbutton">
<img class="Icon_icon__2LtL_" src="https://www.mwilinks.site/mwigc/files/back.png" width="100%" height="100%">
</div>
</div>
</div>`);
//===========================================================================================================================================================
//
//===========================================================================================================================================================
//
//
//
//
//===========================================================================================================================================================
// The main function to ensure the script reads the classes for code injection
//===========================================================================================================================================================
async function waitRepeatedFor(selector, callback)
{
let notified = false;
return new Promise((resolve) => {
let lastEl = null
function check () {
const el = document.querySelector(selector);
if (el && el != lastEl) {
lastEl = el;
notified = false;
}
setTimeout(check, 1000/10); // Schedule first to allow the callback to throw
if (el && !notified) {
notified = true;
resolve(el);
if (callback) {
callback(el);
}
}
else if (el && notified) {
// Skip, wait for cond to be false again
} else { notified = false; }
}
check();
});
}
//===========================================================================================================================================================
//
//===========================================================================================================================================================
//
//
//
//
//===========================================================================================================================================================
// Adds the mwilinks url to the sidebar.
//===========================================================================================================================================================
waitRepeatedFor('.NavigationBar_navigationLinks__1XSSb', (tableEl) => {
tableEl.querySelector(".NavigationBar_minorNavigationLinks__dbxh7").insertAdjacentHTML('afterbegin',`
<a href="https://www.mwilinks.site" class="mwilinks-link">
<div class="NavigationBar_minorNavigationLink__31K7Y">
<div class="NavigationBar_contentContainer__1x6WS">
<img class="Icon_icon__2LtL_ Icon_tiny__nLKFY" src="https://www.mwilinks.site/icon.png"> Mwi Links
</div>
</div>
</a>`);
});
//===========================================================================================================================================================
//
//===========================================================================================================================================================
//
//
//
//
//===========================================================================================================================================================
// The script's functions on the guild leaderboards.
//===========================================================================================================================================================
//Fetches data to insert into an array for the purpose of checking to see if an icon should get loaded.
//Wrap entire leaderboard function in it.
const iconfetchrefreshed = "https://www.mwilinks.site/mwigc/files/iconsv1.txt?v=" + mwigcReload;
fetch(iconfetchrefreshed)
.then((response) =>
{
return response.text();
})
.then((iconArrayRetrieval) =>
{
const customIconCheck = iconArrayRetrieval.split("\r\n");
waitRepeatedFor(".TabPanel_tabPanel__tXMJF:nth-child(4):not(.TabPanel_hidden__26UM3) .LeaderboardPanel_leaderboardTableContainer__33seh", (tableEl) =>
{
tableEl.querySelectorAll(".LeaderboardPanel_guildName__2RYcC").forEach((nameEl) =>
{
const guildName = nameEl.innerText;
const guildNameClass = guildName.toLowerCase().replace(/ /g, "-");
const guildNameFileName = guildName.toLowerCase().replace(/ /g, "_");
const imageOrNoImage = customIconCheck.includes(guildName.toLowerCase()) == true ? `<div class="CharacterName_chatIcon__22lxV"><img class="Icon_icon__2LtL_" src="https://www.mwilinks.site/mwigc/icons/icons/` + guildNameFileName + `.png" width="100%" height="100%"></div>` : ``;
//Sets the name colours and icons.
nameEl.innerHTML = `
<div class="CharacterName_characterName__2FqyZ" translate="no">` + imageOrNoImage + `
<div class="` + guildNameClass + `" data-name="` + guildName + `">
<span class="mwigc-span mwigc-profilebutton">` + guildName + `</span>
</div>
</div>`; // Ends guild profile modals.
// On name click, draws the modal for that guild.
nameEl.querySelector(".mwigc-profilebutton").addEventListener("click", function()
{
// Creates the content.
nameEl.closest("#root").querySelector(".mwigc-profilemodal").insertAdjacentHTML('afterbegin', `
<div class="mwigc-profilemodal-content ` + guildNameClass + `-border">
<div class="mwigc-profileheader">
<div class="CharacterName_characterName__2FqyZ CharacterName_xlarge__1K-fn" translate="no">
<div class="CharacterName_chatIcon__22lxV">
<img class="Icon_icon__2LtL_" src="https://www.mwilinks.site/mwigc/icons/icons/` +guildNameFileName +`.png" width="100%" height="100%" onerror="this.parentElement.classList.add('mwigc-brokenimage')">
</div>
<div class="` +guildNameClass +`" data-name="` +guildName +`">
<span class="mwigc-span mwigc-spanb">` +guildName + `</span>
</div>
</div>
<div class="mwigc-guildprofiletabs" role="tablist">
<button class="mwigc-guildprofiletab active" type="button" role="tab">Profile</button>
<button class="mwigc-guildprofiletab" type="button" role="tab">Members</button>
</div>
</div>
<div class="mwigc-separator"></div>
<div class="mwigc-profiletabs active">
<iframe class="mwigc-profile-iframe" loading="lazy" src="https://www.mwilinks.site/mwigc/profiles/` +guildNameFileName +`.html?v=` + localStorage.getItem("mwigcReload") + `"></iframe>
</div>
<div class="mwigc-profiletabs">
This content currently isn't available yet.<br>
This tab is just a little teaser.<br><br>
In the near future(tm) this will show a page of all of a guild's members. As well as custom chosen roles. Rather than general, a user could be "Torturer" or "Fool" or "Knight".
</div>
</div>
</div>`);
nameEl.closest("#root").querySelector(".mwigc-guildprofiletab:nth-child(1)").addEventListener("click", function()
{
nameEl.closest("#root").querySelector(".mwigc-guildprofiletab:nth-child(2)").classList.remove("active");
nameEl.closest("#root").querySelector(".mwigc-guildprofiletab:nth-child(1)").classList.add("active");
nameEl.closest("#root").querySelector(".mwigc-profiletabs:nth-child(4)").classList.remove("active");
nameEl.closest("#root").querySelector(".mwigc-profiletabs:nth-child(3)").classList.add("active");
});
nameEl.closest("#root").querySelector(".mwigc-guildprofiletab:nth-child(2)").addEventListener("click", function()
{
nameEl.closest("#root").querySelector(".mwigc-guildprofiletab:nth-child(1)").classList.remove("active");
nameEl.closest("#root").querySelector(".mwigc-guildprofiletab:nth-child(2)").classList.add("active");
nameEl.closest("#root").querySelector(".mwigc-profiletabs:nth-child(3)").classList.remove("active");
nameEl.closest("#root").querySelector(".mwigc-profiletabs:nth-child(4)").classList.add("active");
});
// Unhides the modal container.
nameEl.closest("#root").querySelector(".mwigc-profilecontainer").style.display = "flex";
nameEl.closest("#root").querySelector(".mwigc-closebutton").style.display = "flex"; // Hides the close button
nameEl.closest("#root").querySelector(".mwigc-backbutton").style.display = "none"; // Hides the close button
});
// On click outside of the modal, hides the container and undraws the content.
nameEl.closest("#root").querySelector(".mwigc-profilebackground").addEventListener("click", function()
{
nameEl.closest("#root").querySelector(".mwigc-profilecontainer").style.display = "none";
if (nameEl.closest("#root").querySelector(".mwigc-profilemodal-content") != null) {
nameEl.closest("#root").querySelector(".mwigc-profilemodal-content").outerHTML = `` }
});
// On close button click, hides the container and undraws the content.
nameEl.closest("#root").querySelector(".mwigc-closebutton").addEventListener("click", function()
{
nameEl.closest("#root").querySelector(".mwigc-profilecontainer").style.display = "none";
if (nameEl.closest("#root").querySelector(".mwigc-profilemodal-content") != null) {
nameEl.closest("#root").querySelector(".mwigc-profilemodal-content").outerHTML = `` }
});
}); // Ends the foreach loop.
}); // Ends the wait function.
}); // Ends the guild icon check wrap.
//===========================================================================================================================================================
//===========================================================================================================================================================
//===========================================================================================================================================================
//
//
//
//
//===========================================================================================================================================================
// The script's functions within the profile.
//===========================================================================================================================================================
// Waits for a selection to be found.
waitRepeatedFor('.SharableProfile_guildInfo__3YQCk', (el) =>
{
// Calls upon the function to trigger if condition is met. Probably not needed.
if (document.querySelector(".SharableProfile_guildInfo__3YQCk").innerText != null) { changeClass(); }
function changeClass()
{
// Creates variables to be called up
const splitted = document.querySelector(".SharableProfile_guildInfo__3YQCk").innerText.split(" ");
const guildName = splitted.slice(2).join(" ");
const role = splitted[0];
const guildNameClass = guildName.toLowerCase().replace(/ /g, "-");
const roleClass = role.toLowerCase();
const guildNameFileName = guildName.toLowerCase().replace(/ /g, "_");
// Adds guild colours, role colours and icons.
el.innerHTML = `
<div class="CharacterName_characterName__2FqyZ mwigc-profilebuttonp" style="vertical-align:text-bottom;">
<div class="CharacterName_chatIcon__22lxV">
<img src="https://www.mwilinks.site/mwigc/icons/icons/` + guildNameFileName + `.png" width="100%" height="100%" onerror="this.parentElement.classList.add('mwigc-brokenimage')">
</div>
<div class="` + roleClass + `" data-name="` + role + `">
<span class="mwigc-span">` + role + `</span>
</div> 
<div style="color:#e8e8e8;">of</div> 
<div class="` + guildNameClass + `" data-name="` + guildName + `">
<span class="mwigc-span">` + guildName + `</span>
</div> 
<img src="https://www.mwilinks.site/mwigc/files/info.png" style="width: 0.8rem; height: 0.8rem; opacity: 0.6; margin-top:3px;">
</div>`;
//Listens for a click on the guildname to create the modal contents and show them.
el.querySelector(".mwigc-profilebuttonp").addEventListener("click", function()
{
// Creates the guild profile modal. `
document.querySelector(".mwigc-profilemodal").insertAdjacentHTML('afterbegin', `
<div class="mwigc-profilemodal-content ` + guildNameClass + `-border">
<div class="mwigc-profileheader">
<div class="CharacterName_characterName__2FqyZ CharacterName_xlarge__1K-fn" translate="no">
<div class="CharacterName_chatIcon__22lxV">
<img class="Icon_icon__2LtL_" src="https://www.mwilinks.site/mwigc/icons/icons/` + guildNameFileName + `.png" width="100%" height="100%" onerror="this.parentElement.classList.add('mwigc-brokenimage')">
</div>
<div class="` + guildNameClass + `" data-name="` + guildName + `">
<span class="mwigc-span mwigc-spanb">` + guildName + `</span>
</div>
</div>
<div class="mwigc-guildprofiletabs" role="tablist">
<button class="mwigc-guildprofiletab active" type="button" role="tab">Profile</button>
<button class="mwigc-guildprofiletab" type="button" role="tab">Members</button>
</div>
</div>
<div class="mwigc-separator"></div>
<div class="mwigc-profiletabs active">
<iframe class="mwigc-profile-iframe" loading="lazy" src="https://www.mwilinks.site/mwigc/profiles/` + guildNameFileName + `.html?v=` + localStorage.getItem("mwigcReload") + `"></iframe>
</div>
<div class="mwigc-profiletabs">
This content currently isn't available yet.<br>
This tab is just a little teaser.<br><br>
In the near future(tm) this will show a page of all of a guild's members. As well as custom chosen roles. Rather than general, a user could be "Torturer" or "Fool" or "Knight".
</div>
</div> `); //Ends guild profile modal.
document.querySelector(".mwigc-profilecontainer").style.display = "flex"; // Displays modal
document.querySelector(".SharableProfile_modalContainer__6Q2JL").style.display = "none"; // Hides personal profile
document.querySelector(".mwigc-closebutton").style.display = "none"; // Hides the close button
document.querySelector(".mwigc-backbutton").style.display = "flex"; // Hides the close button
// If clicked on tab, hide other tab. x2
document.querySelector(".mwigc-guildprofiletab:nth-child(2)").addEventListener("click", function()
{
document.querySelector(".mwigc-guildprofiletab:nth-child(1)").classList.remove("active");
document.querySelector(".mwigc-guildprofiletab:nth-child(2)").classList.add("active");
document.querySelector(".mwigc-profiletabs:nth-child(3)").classList.remove("active");
document.querySelector(".mwigc-profiletabs:nth-child(4)").classList.add("active");
});
document.querySelector(".mwigc-guildprofiletab:nth-child(1)").addEventListener("click", function()
{
document.querySelector(".mwigc-guildprofiletab:nth-child(2)").classList.remove("active");
document.querySelector(".mwigc-guildprofiletab:nth-child(1)").classList.add("active");
document.querySelector(".mwigc-profiletabs:nth-child(4)").classList.remove("active");
document.querySelector(".mwigc-profiletabs:nth-child(3)").classList.add("active");
});
});
//Classify background image and style it to the profile
document.querySelector(".SharableProfile_modalContent__284HM").style.backgroundImage = "url('https://www.mwilinks.site/mwigc/icons/backgrounds/" + guildNameFileName + ".png')";
document.querySelector(".SharableProfile_modalContent__284HM").style.backgroundPosition = "bottom 25px center";
document.querySelector(".SharableProfile_modalContent__284HM").classList.add(guildNameClass + "-border");
// Awaits for a click on the background to close the modal.
document.querySelector(".mwigc-profilebackground").addEventListener("click", function()
{
document.querySelector(".mwigc-profilecontainer").style.display = "none";
if ( document.querySelector(".SharableProfile_modalContainer__6Q2JL") != null) { document.querySelector(".SharableProfile_modalContainer__6Q2JL").style.display = "flex"; }
if (document.querySelector(".mwigc-profilemodal-content") != null) { document.querySelector(".mwigc-profilemodal-content").outerHTML = `` }
});
// Awaits for a click on the backbutton to return to user profile.
document.querySelector(".mwigc-backbutton").addEventListener("click", function()
{
document.querySelector(".mwigc-profilecontainer").style.display = "none";
if ( document.querySelector(".SharableProfile_modalContainer__6Q2JL") != null) { document.querySelector(".SharableProfile_modalContainer__6Q2JL").style.display = "flex"; }
if (document.querySelector(".mwigc-profilemodal-content") != null) { document.querySelector(".mwigc-profilemodal-content").outerHTML = ``}
});
//Adds a new class to change the moopass border to full profile.
if (document.querySelector(".SharableProfile_overviewTab__W4dCV .SharableProfile_avatar__1hHtL").classList.contains("SharableProfile_mooPass__2Ladc")) { document.querySelector(".SharableProfile_modal__2OmCQ").classList.add("mwigc-moopassborder");}
} // Ends the class change function
}); // End of wait loop.
//=========================================================//==================================================================================================
//
//===========================================================================================================================================================
//
//
//
//
//===========================================================================================================================================================
// The script's functions on the guild tab.
//===========================================================================================================================================================
waitRepeatedFor('.GuildPanel_guildName__E5D_h', (el) => {
if (document.querySelector(".GuildPanel_guildName__E5D_h").innerText != null) { changeClass(); } // Triggers the function to change stuff in the guild.
function changeClass (){
const guildName = document.querySelector(".GuildPanel_guildName__E5D_h").innerText;
const guildNameClass = guildName.toLowerCase().replace(/ /g,"-");
const guildNameFileName = guildName.toLowerCase().replace(/ /g,"_");
localStorage.setItem("guildRegistration", guildNameClass); // Registers the guild name for the settings menu functions.
// Sets the guild name colours and icons.
document.querySelector(".GuildPanel_guildName__E5D_h").innerHTML = `
<div class="CharacterName_characterName__2FqyZ" style="height:40px; font-size: var(--font-size-xl); vertical-align: top !important;">
<div class="CharacterName_chatIcon__22lxV">
<img src="https://www.mwilinks.site/mwigc/icons/icons/` +guildNameFileName +`.png" width="100%" height="100%" onerror="this.parentElement.classList.add('mwigc-brokenimage')">
</div>
<div class="` +guildNameClass +`" data-name="` +guildName +`">
<span class="mwigc-span mwigc-spanb">` +guildName + `</span>
</div>
</div>`;
} // Ends the changeClass function
}); // Ends the wait function.
//===========================================================================================================================================================
//
//===========================================================================================================================================================
//
//
//
//
//===========================================================================================================================================================
// Adding a settings menu.
//===========================================================================================================================================================
waitRepeatedFor('.SettingsPanel_tabsComponentContainer__Xb_5H .MuiTabs-flexContainer', (tableEl) =>
{
function gcSettingsTabContent ()
{
// Creates the settings tab
document.querySelector(".SettingsPanel_tabsComponentContainer__Xb_5H .MuiTabs-flexContainer").insertAdjacentHTML('beforeend', `
<button id="mwigc-settingstab" class="mwigcb MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1q2h7u5" tabindex="-1" type="button" role="tab" aria-selected="false">
<span class="MuiBadge-root TabsComponent_badge__1Du26 css-1rzb3uu">GC
<span class="MuiBadge-badge MuiBadge-standard MuiBadge-invisible MuiBadge-anchorOriginTopRight MuiBadge-anchorOriginTopRightRectangular MuiBadge-overlapRectangular css-vwo4eg"></span>
</span>
<span class="MuiTouchRipple-root css-w0pj6f"></span>
</button>
`);
//Sets the settings menu local storage options.
localStorage.setItem("mwigcIconBg",localStorage.getItem("mwigcIconBg") ?? "off");
localStorage.setItem("mwigcSkillGrid",localStorage.getItem("mwigcSkillGrid") ?? "");
localStorage.setItem("mwigcBorderGradient",localStorage.getItem ("mwigcBorderGradient") ?? "");
localStorage.setItem("mwigcBorderShadow", localStorage.getItem ("mwigcBorderShadow") ?? "");
localStorage.setItem("mwigcBorderWidth",localStorage.getItem ("mwigcBorderWidth") ?? "");
localStorage.setItem("mwigcTextSaturation", localStorage.getItem("mwigcTextSaturation") ?? "");
localStorage.setItem("mwigcTextGradient", localStorage.getItem("mwigcTextGradient") ?? "");
localStorage.setItem("mwigcTextShadow",localStorage.getItem("mwigcTextShadow") ?? "");
localStorage.setItem("mwigcGuildIcon",localStorage.getItem("mwigcGuildIcon") ?? "");
localStorage.setItem("mwigcImportCss",localStorage.getItem("mwigcImportCss") ?? "");
const mwigcIconBgCheck = localStorage.getItem("mwigcIconBg") == "off" ? "" : "checked"; // Selects checkbox
// Creates the settings page.
document.querySelector(".SettingsPanel_tabsComponentContainer__Xb_5H .TabsComponent_tabPanelsContainer__26mzo").insertAdjacentHTML('beforeend', `
<div id="mwigc-settingscontent" class="TabPanel_tabPanel__tXMJF TabPanel_hidden__26UM3">
<div class="SettingsPanel_profileTab__214Bj mwigc-settingscontainer">
<div id="mwigc-settings-psmodal" class="mwigc-settings-modal">
<div class="mwigc-settingsmodal-header">Personal Settings</div>
<div class="mwigc-separator"></div><br>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Profile icon backgrounds:</span> To help guild backgrounds pop a bit more you can turn off icon backgrounds on profiles.</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Skill grid:</span> Instead of 3 skills wide you can set it to higher. I'd recommend 5.</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Resource reloading:</span> This will forcefully reload the resources in case the cache is giving you trouble.</div>
</div>
<div id="mwigc-settings-gapmodal" class="mwigc-settings-modal">
<div class="mwigc-settingsmodal-header">Guildname Appearance Settings</div>
<div class="mwigc-separator"></div><br>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Gradient example: </span>linear-gradient(45deg, #8e43ad, #f39c19 50%, #ffffff 100%)</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Shadow/glow example: </span>#FFF 0px 0px 2px, #FFF 0px -1px 4px, #FFF 0px -2px 6px, #FF2D95 0px -3px 8px</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Saturation: </span>Saturation helps the gradient pop a little. It might or might not be desired</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Extra info: </span>Don't add the property name. Don't end with a semicolon. For the gradient, don't add numbers outside of the parenthesis. So, just "gradient( information )"</div>
<div class="mwigc-marginator">
<a href="https://colorffy.com/text-gradient-generator">Gradient generator 1</a><br>
<a href="https://unused-css.com/tools/text-gradient-generator">Gradient generator 2</a><br>
<a href="https://www.cssgradienttext.com/">Gradient generator 3</a><br>
<a href="https://html-css-js.com/css/generator/text-shadow/">Shadow generator 1</a><br>
<a href="https://www.cssportal.com/css-text-shadow-generator/">Shadow generator 2</a><br>
<a href="https://webcode.tools/css-generator/text-shadow/">Shadow generator 3</a>
</div>
</div>
<div id="mwigc-settings-pbsmodal" class="mwigc-settings-modal">
<div class="mwigc-settingsmodal-header">Profile Border Settings</div>
<div class="mwigc-separator"></div><br>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Gradient example: </span>linear-gradient(45deg, #8e43ad, #f39c19 50%, #ffffff 100%)</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Shadow/glow example: </span>#FFF 0px 0px 2px, #FFF 0px -1px 4px, #FFF 0px -2px 6px, #FF2D95 0px -3px 8px</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Thickness: </span>In case you want the border a bit thicker. Please don't go too crazy.</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Extra info: </span>Don't add the property name. Don't end with a semicolon. For the gradient, don't add numbers outside of the parenthesis. So, just "gradient( information )"</div>
<div class="mwigc-marginator">
<a href="https://colorffy.com/text-gradient-generator">Gradient generator 1</a><br>
<a href="https://unused-css.com/tools/text-gradient-generator">Gradient generator 2</a><br>
<a href="https://www.cssgradienttext.com/">Gradient generator 3</a><br>
<a href="https://html-css-js.com/css/generator/text-shadow/">Shadow generator 1</a><br>
<a href="https://www.cssportal.com/css-text-shadow-generator/">Shadow generator 2</a><br>
<a href="https://webcode.tools/css-generator/text-shadow/">Shadow generator 3</a>
</div>
</div>
<div id="mwigc-settings-bgmodal" class="mwigc-settings-modal">
<div class="mwigc-settingsmodal-header">Icon / Background</div>
<div class="mwigc-separator"></div><br>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Icon/background: </span>Here you can choose an icon/profile background to test out. For script upload it will have to be a png. 64x64 max for the icon and 256x256 max for the background. </div>
</div>
<div id="mwigc-settings-iemodal" class="mwigc-settings-modal">
<div class="mwigc-settingsmodal-header">Import / Export</div>
<div class="mwigc-separator"></div><br>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Export: </span>If you're satisfied with your settings you can download them as a file. Export for others will create a file others can test out. Export for script will create a file ready for script usage, to be send to Joe.</div>
<div class="mwigc-marginator"><span class="mwigc-settings-title">Import: </span>Here you can import someone's hard work to test out. Just copy/paste it in.</div>
</div>
<div class="mwigc-settingssections">
<div class="mwigc-settings-header" id="mwigc-settingsinfo-personal"> Personal Settings <img src="https://www.mwilinks.site/mwigc/files/info.png" style="width: 0.8rem; opacity:0.6"></div>
<div class="SettingsPanel_infoGrid__2nh1u mwigc-settingsgrid">
<div class="mwigc-settingslabel">Profile icon backgrounds: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD mwigc-settingsbw">
<input class="mwigc-settingscb" type="checkbox" id="mwigciconbg"` + mwigcIconBgCheck + ` value="` + localStorage.getItem("mwigcIconBg") + `">
</div>
<div class="mwigc-settingsinfo"> (turn off icon backgrounds/borders)</div>
</div>
<div class="mwigc-settingslabel">Skill grid: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD">
<input type="text" class="mwigc-settingsnumber" name="skill grid" id="mwigcskillgrid" placeholder="#" value="` + localStorage.getItem("mwigcSkillGrid") + `">
</div>
</div>
<div class="mwigc-settingslabel">Resource reloading: </div>
<div class="SettingsPanel_value__2nsKD">
<button class="Button_button__1Fe9z" id="reloadStylesheet" title="If you are having trouble with the guild colours CSS cache, click button to reload it">Refresh resources!</button>
</div>
</div>
</div>
<div class="mwigc-settingssections">
<div class="mwigc-settings-header" id="mwigc-settingsinfo-gap"> Guildname Appearance Settings <img src="https://www.mwilinks.site/mwigc/files/info.png" style="width: 0.8rem; opacity: 0.6;"></div>
<div class="SettingsPanel_infoGrid__2nh1u mwigc-settingsgrid">
<div class="mwigc-settingslabel">Guild text gradient: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD">
<textarea class="mwigc-textarea" id="mwigctextgradient" cols="30" rows="5" placeholder="Input your text gradient here!">` + localStorage.getItem("mwigcTextGradient") +`</textarea>
</div>
</div>
<div class="mwigc-settingslabel">Guild text shadow: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD">
<textarea class="mwigc-textarea" id="mwigctextshadow" cols="30" rows="5" placeholder="Input your text shadow/glow here!">` + localStorage.getItem("mwigcTextShadow") +`</textarea>
</div>
</div>
<div class="mwigc-settingslabel">Guild text saturation: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD mwigc-settingsbw">
<input class="mwigc-settingsnumber" type="text" class="Input_input__2-t98" id="mwigctextsaturation" placeholder="#" value="` + localStorage.getItem("mwigcTextSaturation") +`">
</div>
<div class="mwigc-settingsinfo"> (makes the main gradient pop)</div>
</div>
</div>
</div>
<div class="mwigc-settingssections">
<div class="mwigc-settings-header" id="mwigc-settingsinfo-pbs"> Profile Border Settings <img src="https://www.mwilinks.site/mwigc/files/info.png" style="width: 0.8rem; opacity: 0.6;"></div>
<div class="SettingsPanel_infoGrid__2nh1u mwigc-settingsgrid">
<div class="mwigc-settingslabel">Profile border gradient:
</div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD">
<textarea class="mwigc-textarea" id="mwigcbordergradient" cols="30" rows="5" placeholder="Input your border gradient here!">` + localStorage.getItem("mwigcBorderGradient") +`</textarea><br>
</div>
</div>
<div class="mwigc-settingslabel">Profile border shadow: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD">
<textarea class="mwigc-textarea" id="mwigcbordershadow" cols="30" rows="5" placeholder="Input your border shadow/glow here!">` + localStorage.getItem("mwigcBorderShadow") +`</textarea>
</div>
</div>
<div class="mwigc-settingslabel">Profile Border Thickness: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD mwigc-settingsbw">
<input class="mwigc-settingsnumber" type="text" class="Input_input__2-t98" id="mwigcborderwidth" placeholder="#" value="` + localStorage.getItem("mwigcBorderWidth") +`">
</div>
<div class="mwigc-settingsinfo"> (sets border thickness)</div>
</div>
</div>
</div>
<div class="mwigc-settingssections">
<div class="mwigc-settings-header" id="mwigc-settingsinfo-bg"> Icon/Background Settings <img src="https://www.mwilinks.site/mwigc/files/info.png" style="width: 0.8rem; opacity: 0.6;"></div>
<div class="SettingsPanel_infoGrid__2nh1u mwigc-settingsgrid">
<div class="mwigc-settingslabel">Guild icon: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD">
<input type="text" class="mwigc-settingstext" id="mwigcguildicon" placeholder="http:// (.png)" value="` + localStorage.getItem("mwigcGuildIcon") +`">
</div>
</div>
</div>
</div>
<div class="mwigc-settingssections">
<div class="mwigc-settings-header" id="mwigc-settingsinfo-ie"> Import/Export <img src="https://www.mwilinks.site/mwigc/files/info.png" style="width: 0.8rem; opacity: 0.6;"></div>
<div class="SettingsPanel_infoGrid__2nh1u mwigc-settingsgrid">
<div class="mwigc-settingslabel">Export CSS Personal: </div>
<div class="SettingsPanel_value__2nsKD">
<button class="Button_button__1Fe9z" id="downloadcss1" title="Generate your CSS settings into a file.">Download CSS</button>
</div>
<div class="mwigc-settingslabel">Export CSS for script: </div>
<div class="SettingsPanel_value__2nsKD">
<button class="Button_button__1Fe9z" id="downloadcss2" title="Generate your CSS settings into a file.">Download CSS</button>
</div>
<div class="mwigc-settingslabel">Import CSS: </div>
<div class="SettingsPanel_value__2nsKD">
<div class="Input_inputContainer__22GnD">
<textarea class="mwigc-textarea" id="mwigcimportcss" placeholder="Just copy/paste a generated CSS file here to see what it looks like." value="` + localStorage.getItem("mwigcImportCss") +`"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
`);
//Ends the settings html creation.
//Starts the local storage listeners
// Basic settings listeners
document.getElementById("mwigcskillgrid").addEventListener("change", function(){
localStorage.setItem("mwigcSkillGrid", document.getElementById("mwigcskillgrid").value);
});
document.getElementById("mwigciconbg").addEventListener("change", function(){
if(document.getElementById("mwigciconbg").value == "off")
{ document.getElementById("mwigciconbg").value = "on"; localStorage.setItem("mwigcIconBg", "on"); }
else { document.getElementById("mwigciconbg").value = "off"; localStorage.setItem("mwigcIconBg", "off"); }
});
// Profile Border listeners.
document.getElementById("mwigcbordergradient").addEventListener("change", function(){
localStorage.setItem("mwigcBorderGradient", document.getElementById("mwigcbordergradient").value);
});
document.getElementById("mwigcbordershadow").addEventListener("change", function(){
localStorage.setItem("mwigcBorderShadow", document.getElementById("mwigcbordershadow").value);
});
document.getElementById("mwigcborderwidth").addEventListener("change", function(){
localStorage.setItem("mwigcBorderWidth", document.getElementById("mwigcborderwidth").value);
});
// Guild colour listeners
document.getElementById("mwigctextgradient").addEventListener("change", function(){
localStorage.setItem("mwigcTextGradient", document.getElementById("mwigctextgradient").value);
});
document.getElementById("mwigctextshadow").addEventListener("change", function(){
localStorage.setItem("mwigcTextShadow", document.getElementById("mwigctextshadow").value);
});
document.getElementById("mwigctextsaturation").addEventListener("change", function(){
localStorage.setItem("mwigcTextSaturation", document.getElementById("mwigctextsaturation").value);
});
// Icon listeners
document.getElementById("mwigcguildicon").addEventListener("change", function(){
localStorage.setItem("mwigcGuildIcon", document.getElementById("mwigcguildicon").value);
});
// CSS import listener
document.getElementById("mwigcimportcss").addEventListener("change", function(){
localStorage.setItem("mwigcImportCss", document.getElementById("mwigcimportcss").value);
});
// Modal listeners
document.getElementById("mwigc-settingsinfo-gap").addEventListener("click", function(){
document.getElementById("mwigc-settings-gapmodal").style.display = "block"
document.getElementById("mwigc-settings-modal-base").style.display = "block";
});
document.getElementById("mwigc-settings-modal-base").addEventListener("click", function(){
document.getElementById("mwigc-settings-gapmodal").style.display = "none";
document.getElementById("mwigc-settings-modal-base").style.display = "none";
});
document.getElementById("mwigc-settingsinfo-ie").addEventListener("click", function(){
document.getElementById("mwigc-settings-iemodal").style.display = "block";
document.getElementById("mwigc-settings-modal-base").style.display = "block";
});
document.getElementById("mwigc-settings-modal-base").addEventListener("click", function(){
document.getElementById("mwigc-settings-iemodal").style.display = "none";
document.getElementById("mwigc-settings-modal-base").style.display = "none";
});
document.getElementById("mwigc-settingsinfo-bg").addEventListener("click", function(){
document.getElementById("mwigc-settings-bgmodal").style.display = "block";
document.getElementById("mwigc-settings-modal-base").style.display = "block";
});
document.getElementById("mwigc-settings-modal-base").addEventListener("click", function(){
document.getElementById("mwigc-settings-bgmodal").style.display = "none";
document.getElementById("mwigc-settings-modal-base").style.display = "none";
});
document.getElementById("mwigc-settingsinfo-pbs").addEventListener("click", function(){
document.getElementById("mwigc-settings-pbsmodal").style.display = "block";
document.getElementById("mwigc-settings-modal-base").style.display = "block";
});
document.getElementById("mwigc-settings-modal-base").addEventListener("click", function(){
document.getElementById("mwigc-settings-pbsmodal").style.display = "none";
document.getElementById("mwigc-settings-modal-base").style.display = "none";
});
document.getElementById("mwigc-settingsinfo-personal").addEventListener("click", function(){
document.getElementById("mwigc-settings-psmodal").style.display = "block";
document.getElementById("mwigc-settings-modal-base").style.display = "block";
});
document.getElementById("mwigc-settings-modal-base").addEventListener("click", function(){
document.getElementById("mwigc-settings-psmodal").style.display = "none";
document.getElementById("mwigc-settings-modal-base").style.display = "none";
});
// Reloads the resources
const mwigcReloadDate = Date.now();
document.getElementById("reloadStylesheet").onclick = function(){localStorage.setItem("mwigcReload", mwigcReloadDate); window.location.reload();};
// Downloads a generated text file on button click.
// First one adds !important
document.getElementById("downloadcss1").addEventListener("click", function(){
const link = document.createElement("a");
const mwigcIsSaturated = localStorage.getItem("mwigcTextSaturation") > 0 ? "filter: saturate(" + localStorage.getItem("mwigcTextSaturation") + "); \n" : "";
const content =
"/*========*/ \n/*========== " + localStorage.getItem("guildRegistration") + " ==========*/ \n/*========*/ \n."
+ localStorage.getItem("guildRegistration") + " { \n display: inline-grid; \n grid-template-rows: var(--spacing-lg-plus); \n } \n ."
+ localStorage.getItem("guildRegistration") + ":before { \n grid-area: 1/1; \n content: attr(data-name); \n color: transparent; \n text-shadow: "
+ localStorage.getItem("mwigcTextShadow") + " !important; \n } \n ."
+ localStorage.getItem("guildRegistration") + " span { \n width: 100%; \n -webkit-background-clip: text; \n -webkit-text-fill-color: transparent; \n background-image: "
+ localStorage.getItem("mwigcTextGradient") + " !important; \n"
+ mwigcIsSaturated
+ "} \n ." + localStorage.getItem("guildRegistration") + "-border { \n border-image: "
+ localStorage.getItem("mwigcBorderGradient")
+ " 1 !important; \n box-shadow: "
+ localStorage.getItem("mwigcBorderShadow") + " !important!; \n border-width: " +
+ localStorage.getItem("mwigcBorderWidth") + "px !important; \n border-style: solid;}";
const file = new Blob([content], { type: 'text/css' });
link.href = URL.createObjectURL(file);
link.download = localStorage.getItem("guildRegistration"); + ".css";
link.click();
URL.revokeObjectURL(link.href);
});
// Second one does not add !important. This one is for upload.
document.getElementById("downloadcss2").addEventListener("click", function(){
const link = document.createElement("a");
const mwigcIsSaturated = localStorage.getItem("mwigcTextSaturation") > 0 ? "filter: saturate(" + localStorage.getItem("mwigcTextSaturation") + "); \n" : "";
const content =
"/*========*/ \n/*========== " + localStorage.getItem("guildRegistration") + " ==========*/ \n/*========*/ \n."
+ localStorage.getItem("guildRegistration") + " { \n display: inline-grid; \n grid-template-rows: var(--spacing-lg-plus); \n } \n ."
+ localStorage.getItem("guildRegistration") + ":before { \n grid-area: 1/1; \n content: attr(data-name); \n color: transparent; \n text-shadow: "
+ localStorage.getItem("mwigcTextShadow") + "; \n } \n ."
+ localStorage.getItem("guildRegistration") + " span { \n width: 100%; \n -webkit-background-clip: text; \n -webkit-text-fill-color: transparent; \n background-image: "
+ localStorage.getItem("mwigcTextGradient") + "; \n"
+ mwigcIsSaturated
+ "} \n ." + localStorage.getItem("guildRegistration") + "-border { \n border-image: "
+ localStorage.getItem("mwigcBorderGradient")
+ " 1; \n box-shadow: "
+ localStorage.getItem("mwigcBorderShadow") + "; \n border-width: " +
+ localStorage.getItem("mwigcBorderWidth") + "px ; \n border-style: solid;}";
const file = new Blob([content], { type: 'text/css' });
link.href = URL.createObjectURL(file);
link.download = localStorage.getItem("guildRegistration"); + ".css";
link.click();
URL.revokeObjectURL(link.href);
});
} // Ends the settings tab function and starts it.
gcSettingsTabContent();
// Creates the code to make the tabs interact with MWI ones.
tableEl.querySelectorAll(".SettingsPanel_tabsComponentContainer__Xb_5H .MuiButtonBase-root").forEach((buttonEl) =>
{
buttonEl.addEventListener('click', function ()
{
function tabSectionOne(){
// Removes all tab settings to default them.
document.querySelector(".SettingsPanel_tabsComponentContainer__Xb_5H .Mui-selected").setAttribute("tabindex", "-1");
document.querySelector(".SettingsPanel_tabsComponentContainer__Xb_5H .Mui-selected").setAttribute("aria-selected", "false");
document.querySelector(".SettingsPanel_tabsComponentContainer__Xb_5H .Mui-selected").classList.remove("Mui-selected");
document.getElementById("mwigc-settingscontent").classList.add("TabPanel_hidden__26UM3");
}
tabSectionOne();
function tabSectionTwo(){
// If a selection is found(MWI has reset), hide/deselect mwigc tab.
if(document.querySelector(".SettingsPanel_tabsComponentContainer__Xb_5H .MuiButtonBase-root:not(#mwigc-settingstab)"))
{
document.getElementById("mwigc-settingscontent").classList.add("TabPanel_hidden__26UM3");
document.getElementById("mwigc-settingstab").setAttribute("tabindex", "-1");
document.getElementById("mwigc-settingstab").setAttribute("aria-selected", "false");
document.getElementById("mwigc-settingstab").classList.remove("Mui-selected");
buttonEl.closest(".TabsComponent_tabsComponent__3PqGp").querySelector("#mwigc-settingscontent").style.display = ("none");
}
}
tabSectionTwo();
// Adds the markers for mwigc tab on selection.
function tabSectionThree(){
buttonEl.classList.add("Mui-selected");
buttonEl.setAttribute("tabindex", "0");
buttonEl.setAttribute("aria-selected", "true");
};
tabSectionThree();
// Unhides mwigc tab, hides the others, on selection of mwigctab.
function tabSectionFour(){
if(document.querySelector("#mwigc-settingstab:is(.Mui-selected)") != null)
{
buttonEl.closest(".TabsComponent_tabsComponent__3PqGp").querySelector(".TabPanel_tabPanel__tXMJF:nth-child(3)").classList.add("TabPanel_hidden__26UM3");
buttonEl.closest(".TabsComponent_tabsComponent__3PqGp").querySelector(".TabPanel_tabPanel__tXMJF:nth-child(2)").classList.add("TabPanel_hidden__26UM3");
buttonEl.closest(".TabsComponent_tabsComponent__3PqGp").querySelector(".TabPanel_tabPanel__tXMJF:nth-child(1)").classList.add("TabPanel_hidden__26UM3");
buttonEl.closest(".TabsComponent_tabsComponent__3PqGp").querySelector("#mwigc-settingscontent").classList.remove("TabPanel_hidden__26UM3");
buttonEl.closest(".TabsComponent_tabsComponent__3PqGp").querySelector("#mwigc-settingscontent").style.display = ("block");
if (document.getElementById("toolasha-settings-tab") != null){buttonEl.closest(".TabsComponent_tabsComponent__3PqGp").querySelector("#toolasha-settings").classList.add("TabPanel_hidden__26UM3");}
}
}
tabSectionFour();
}); // Ends tab event listeners
}); // Ends the tab interaction foreach
}); // Ends the settings page functions.
})(); // Ends the entire script.