MediaWiki:Citizen.js

/* All JavaScript here will be loaded for users of the Citizen skin */
//Get player counts of Minecraft server
$.getJSON('https://mcapi.us/server/status?ip=play.prismparty.net', function(json) {
   if (json.status !== "error") {
     $("#online").html('<i class="fas fa-users"></i> ' + json.players.now);
   } else {
     $("#online").html('<i class="fas fa-spinner fa-spin"></i>');
   }
     setTimeout(5000);
});

// Discord Button
$(document).ready( function () {
   $('.citizen-drawer').after($('<div class="citizen-discord citizen-header__item mw-checkbox-hack-container"><a href="https://discord.gg/gwuGnK3"><div class="citizen-discord__button citizen-header__button"><label id="citizen-discord__buttonCheckbox" class="mw-checkbox-hack-button citizen-header__buttonCheckbox" for="citizen-discord__checkbox" title="Join us on Discord!" aria-hidden="true"><span>Join us on Discord!</span></label><span class="citizen-ui-icon mw-ui-icon-discord"></div></a></div>'));
});

// Sidebar Icons
//Search
$(document).ready( function () {
   $('#n-Posts > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-news"></span>'));
   $('#n-Search > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-search"></span>'));
   $('#t-specialpages > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-specialpage"></span>'));
   $('#t-upload > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-upload"></span>'));
//possibly excessive
   $('#n-About > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-about"></span>'));
   $('#n-Shop > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-shop"></span>'));
   $('#n-Map > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-map"></span>'));
   $('#n-Vote > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-vote"></span>'));
   $('#n-Commands > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-commands"></span>'));
   $('#n-Plugins > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-plugins"></span>'));
//
   $('#n-Rules > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-rules"></span>'));
   $('#n-FAQ > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-faq"></span>'));
   $('#n-Staff > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-staff"></span>'));
   $('#n-Forums > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-forums"></span>'));
   $('#n-Discord > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-discord"></span>'));
   $('#n-Punishments > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-punishments"></span>'));
//
   $('#n-Getting-Started > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-start"></span>'));
   $('#n-Economy > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-gem"></span>'));
   $('#n-Levels > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-level"></span>'));
   $('#n-mcMMO > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-swords"></span>'));
   $('#n-Shops > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-shop2"></span>'));
   $('#n-Claims > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-claim"></span>'));
});

// Randomly select background from array (light only, no path, no extension)
var bgArray = [
               'arena',
               'beach',
               //'blackmont',
               'casino',
               'castle1',
               'castle2',
               //'coldrift',
               'creative',
               'dimension',
               'district',
               'freebuild',
               'maze',
               //'plots',
               //'ravine',
               //'savanna',
               'spawn',
               'waterfall'
               //'well'
              ];
var bg = bgArray[Math.floor(Math.random() * bgArray.length)];

// Page Header IMG 
var page = document.querySelector("body");
if (page.classList.contains('page-Home')) {
	var mwBody = document.getElementById('content');
	var newDiv = document.createElement('div');
	newDiv.setAttribute('class', 'header-hero');
	newDiv.innerHTML = '<div class="header-hero-image" style="background-image: linear-gradient(to top, var(--color-surface-0), transparent 150%), var(--hero-image);background-size: cover;background-position: 0 0, center;height: 36vh;margin-bottom: -31vh;"></div>';
	mwBody.parentNode.insertBefore(newDiv, mwBody);
}

var html = document.querySelector("html");
	if (html.classList.contains('skin-citizen-dark')) {
		document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/' + bg + '_dark.webp)');
	} else {
		document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/' + bg + '.webp)');
}

document.addEventListener('click', function(event) {
  setTimeout(function() {
    var html = document.querySelector("html");
    if (html.classList.contains("skin-citizen-dark")) {
      document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/' + bg + '_dark.webp)');
    } else if (html.classList.contains("skin-citizen-light"))
    {
      document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/' + bg + '.webp)');
    }
  }, 100);
}, true);