Adds some fun backgrounds to the Arknights Sprite Database viewer.
// ==UserScript==
// @name Arknights SD Additional Backgrounds
// @namespace https://twitter.com/Automalix
// @version 0.0.4
// @description Adds some fun backgrounds to the Arknights Sprite Database viewer.
// @author Felix "Automalix"
// @match https://arknights.nuke.moe/
// @grant none
// ==/UserScript==
(function() {
'use strict';
let addGlobalStyle = css => {
let head = document.getElementsByTagName('head')[0];
if (!head) return;
let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addGlobalStyle(`.tt {
display: inline-block;
position: relative;
border-bottom: 1px dotted black;
}
.tt .ttx {
visibility: hidden;
width: 110px;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
bottom: 35%;
left: 50%;
margin-left: -55px;
z-index: 999;
}
.tt:hover .ttx {
visibility: visible;
}`);
let office = ['https://i.imgur.com/1V84jO0.png', 'office', 'HR Office'],
reception = ['https://i.imgur.com/AOTkaMv.png', 'reception', 'Reception'],
trainingRoom = ['https://i.imgur.com/OiGZgiP.png', 'trainingRoom', 'Training Room'],
powerPlant = ['https://i.imgur.com/9ycOHGm.png', 'powerPlant', 'Power Plant'],
dormBG = ['https://i.imgur.com/YB6G2eg.png', 'dormBG', 'Dormatory'],
tradingPost = ['https://i.imgur.com/Fqx1yAi.png', 'tradingPost', 'Trading Post'],
hexagons = ['https://i.imgur.com/sK43n89.png', 'hexagons', 'Hexagons'],
cyan = ['https://i.imgur.com/zHfXvBn.jpg', 'cyan', 'Cyan'],
magenta = ['https://i.imgur.com/KBv3VKe.jpg', 'magenta', 'Magenta'],
yellow = ['https://i.imgur.com/Fx6PCxC.jpg', 'yellow', 'Yellow'],
red = ['https://i.imgur.com/o7fuMV3.jpg', 'red', 'Red'],
black = ['https://i.imgur.com/9j3dBBe.jpg', 'black', 'Black'],
white = ['https://i.imgur.com/4g3LLKy.jpg', 'white', 'White'],
none = ['https://i.imgur.com/4Br88bA.png', 'none', 'Transparent'];
let backgroundArr = [red, cyan, magenta, yellow, black, white, none, office, reception, trainingRoom, powerPlant, dormBG, tradingPost, hexagons];
let backgroundSelection = picked => {
document.querySelector("#SdCanvas").style.backgroundImage = `url(${picked})`;
document.body.removeChild(document.getElementById("selector"));
document.body.removeChild(document.getElementById("darken"));
document.body.style.overflow = "auto";
}
let thumbnailSelection = arr => {
let ifTransparent;
for(let item of arr) {
item[1] === 'none' ? ifTransparent = 'border:1px solid #98a3b5;' : ifTransparent = 'border: none;';
document.querySelector('#selector').insertAdjacentHTML('beforeend',
`<div class="thumbbutton tt" style="${ifTransparent} background-image: url('${item[0]}'); background-size: cover; background-position: 50% 50%;" id="${item[1]}"><span class="ttx">${item[2]}</span></div>`);
document.getElementById(item[1]).addEventListener('click', () => backgroundSelection(item[0]));
}
}
document.querySelector('.btnGenericText[onclick="onSelectBG()"]').addEventListener('click', e => thumbnailSelection(backgroundArr))
})();