User:Mr Pie 5/common.js
Jump to navigation
Jump to search
In other languages: Español • Français
CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
$( function () {
return true;
if ( !document.getElementById("koish-randomizer") ) return; // Early exit
var colors = {
"crystal": {
"8d0a26":{
"shadow": "6f061c",
"original": "8F0D38"
},
"fb6b72":{
"shadow": "c8545a",
"original": "FF7D9E"
},
"fb744b":{
"shadow": "c85b3a",
"original": "FF8869"
},
"fbc49f":{
"shadow": "c89c7d",
"original": "FFE4D9"
},
"266c57":{
"shadow": "1c5543",
"original": "267E79"
},
"39aa8a":{
"shadow": "2b876d",
"original": "3AC6BD"
}
},
"digital": {
"1d1f1d":{
"shadow": "151715",
"original": "1E262B"
},
"595f63":{
"shadow": "464a4d",
"original": "5B6F89"
},
"8a9095":{
"shadow": "6d7276",
"original": "8CA8CC"
},
"e0c7b7":{
"shadow": "b39e91",
"original": "E4E7FA"
},
"d77475":{
"shadow": "ab5b5c",
"original": "DB87A2"
},
"da2447":{
"shadow": "ad1a37",
"original": "DD2B64"
}
},
"earth": {
"682632":{
"shadow": "511c25",
"original": "6A2E47"
},
"574c3f":{
"shadow": "443a30",
"original": "595959"
},
"e86e54":{
"shadow": "b95741",
"original": "EC8175"
},
"fbc487":{
"shadow": "c89c6b",
"original": "FFE4BA"
},
"787830":{
"shadow": "5e5e24",
"original": "7A8C45"
},
"d6b133":{
"shadow": "aa8d27",
"original": "D9CE49"
}
},
"electric": {
"61412f":{
"shadow": "4c3223",
"original": "634D43"
},
"de6912":{
"shadow": "b1520c",
"original": "E27B1D"
},
"f9bb48":{
"shadow": "c79437",
"original": "FDD965"
},
"fbd09f":{
"shadow": "c8a57d",
"original": "FFF1D9"
},
"006755":{
"shadow": "005042",
"original": "007877"
},
"00d6b4":{
"shadow": "00aa8e",
"original": "00F8F5"
}
},
"fire": {
"7b1113":{
"shadow": "610b0d",
"original": "7D161E"
},
"f47316":{
"shadow": "c35a0f",
"original": "F88622"
},
"f48372":{
"shadow": "c3675a",
"original": "F8999E"
},
"fbb058":{
"shadow": "c88b44",
"original": "FFCC7A"
},
"26453b":{
"shadow": "1c362d",
"original": "275254"
},
"78dc5c":{
"shadow": "5eaf48",
"original": "7AFF80"
}
},
"melee": {
"591f1b":{
"shadow": "461713",
"original": "5B2629"
},
"993632":{
"shadow": "792925",
"original": "9C4047"
},
"ed8926":{
"shadow": "bd6c1c",
"original": "F19F38"
},
"f6bb83":{
"shadow": "c49467",
"original": "FAD9B4"
},
"993552":{
"shadow": "792840",
"original": "9C3F73"
},
"da8dbb":{
"shadow": "ad6f94",
"original": "DDA4FF"
}
},
"mental": {
"711d28":{
"shadow": "59151d",
"original": "73233A"
},
"b92d41":{
"shadow": "932232",
"original": "BC365C"
},
"f67868":{
"shadow": "c45e51",
"original": "FA8C90"
},
"fbc4a5":{
"shadow": "c89c83",
"original": "FFE4E2"
},
"3b3229":{
"shadow": "2d261f",
"original": "3C3C3C"
},
"987290":{
"shadow": "795971",
"original": "9B85C5"
}
},
"nature": {
"2d472a":{
"shadow": "22371f",
"original": "2E543D"
},
"64bd4a":{
"shadow": "4e9639",
"original": "66DB68"
},
"d7d493":{
"shadow": "aba974",
"original": "DAF6CA"
},
"decb2a":{
"shadow": "b1a21f",
"original": "E2EC3D"
},
"6f4537":{
"shadow": "57352a",
"original": "71514E"
},
"a55746":{
"shadow": "834336",
"original": "A86662"
}
},
"neutral": {
"332f29":{
"shadow": "27231f",
"original": "34383C"
},
"a1907e":{
"shadow": "807263",
"original": "A4A8AD"
},
"3e5f5f":{
"shadow": "2f4a4a",
"original": "3F6F84"
},
"f4d8ba":{
"shadow": "c3ac94",
"original": "F8FBFE"
},
"762d3e":{
"shadow": "5d2230",
"original": "783658"
},
"7db48c":{
"shadow": "628f6e",
"original": "7FD1C0"
}
},
"toxic": {
"1d1714":{
"shadow": "150f0d",
"original": "1E1C1F"
},
"564743":{
"shadow": "433733",
"original": "58545E"
},
"988c89":{
"shadow": "796f6c",
"original": "9BA3BC"
},
"fbdaa8":{
"shadow": "c8ae85",
"original": "FFFDE5"
},
"7d304c":{
"shadow": "63243b",
"original": "80396A"
},
"c04c76":{
"shadow": "983a5d",
"original": "C359A3"
}
},
"water": {
"243236":{
"shadow": "1b2629",
"original": "253C4D"
},
"768787":{
"shadow": "5d6a6a",
"original": "789DB9"
},
"7cb29f":{
"shadow": "618d7d",
"original": "7ECFD9"
},
"d7ccb8":{
"shadow": "aba392",
"original": "DAEDFB"
},
"853640":{
"shadow": "692931",
"original": "87405B"
},
"c23853":{
"shadow": "9a2a41",
"original": "C54274"
}
},
"wind": {
"235647":{
"shadow": "1a4337",
"original": "246564"
},
"009e6a":{
"shadow": "007d53",
"original": "00B892"
},
"3adc9d":{
"shadow": "2caf7c",
"original": "3BFFD7"
},
"fbd09f":{
"shadow": "c8a57d",
"original": "FFF1D9"
},
"793242":{
"shadow": "5f2633",
"original": "7B3C5D"
},
"fb698e":{
"shadow": "c85270",
"original": "FF7BC3"
}
}
}
var types = Object.keys(colors);
var randomizer = document.getElementById('koish-randomizer');
// var body = randomizer.querySelector('#koish-randomizer .body img');
var bodySegments = randomizer.querySelector('.body-segments').children;
function ucfirst(string){
return string.charAt(0).toUpperCase() + string.slice(1);
}
function getType(){
return randomizer.querySelector('#type-selector').value;
}
function getColorsForType(type) {
return Object.keys(colors[type]);
}
function updateColor(segment, color){
var type = getType()
bodySegments[segment].querySelector('.base').style.backgroundColor = '#' + color;
bodySegments[segment].querySelector('.shadow').style.backgroundColor = '#' + colors[type][color];
}
function updateColorSelectorValues() {
var type = getType();
var currentColors = getColorsForType(type);
for(var i = 0; i < 3; i++){
var segment = randomizer.querySelector('#color-selector-' + i);
for(var j = 0; j < 6; j++){
segment.children[j].value = currentColors[j];
segment.children[j].text = colors[type][currentColors[j]]['original'];
}
segment.dispatchEvent(new Event('change', { bubbles: true }));
}
}
function changeType(type) {
// update the base body type
randomizer.querySelector('.body img').replaceWith(document.querySelector('img.' + type + '.body').cloneNode());
// update type of fins and whiskers, but don't change length
var finLength = randomizer.querySelector('#fin-selector').value;
var whiskerLength = randomizer.querySelector('#whisker-selector').value;
randomizer.querySelector('.fins img').replaceWith(document.querySelector('img.' + type + '.fin.' + finLength).cloneNode());
randomizer.querySelector('.whiskers img').replaceWith(document.querySelector('img.' + type + '.whisker.' + whiskerLength).cloneNode());
updateColorSelectorValues();
}
function changeLength(part, length){
var type = getType()
randomizer.querySelector('.' + part + 's img').replaceWith(document.querySelector('img.' + type + '.' + part + '.' + length).cloneNode());
}
function createInterface(){
var interface = document.createElement('fieldset');
// create type selector
var typeSelector = document.createElement('select');
for(var i = 0; i < types.length; i++){
var type = types[i];
var option = document.createElement('option');
option.value = type;
option.text = ucfirst(type);
if(type == 'water'){
option.selected = '1';
}
typeSelector.append(option);
}
typeSelector.id = 'type-selector';
typeSelector.name = 'type';
typeSelector.addEventListener('change', function(){
changeType(this.value);
});
typeSelector.querySelector
interface.append(typeSelector);
// create fins and whiskers selector
var fSelector = document.createElement('select');
var wSelector = document.createElement('select');
var selectors = [fSelector, wSelector]; // cries in lack of es6 for-of loop
for(var i = 0; i < selectors.length; i++){
var part = selectors[i];
var lengths = ['short', 'long'];
for(var j = 0; j < lengths.length; j++){
var length = lengths[j];
var option = document.createElement('option');
option.value = length;
option.text = ucfirst(length);
part.append(option);
}
}
fSelector.id = 'fin-selector';
fSelector.name = 'fin';
fSelector.addEventListener('change', function(){
changeLength('fin', this.value);
});
interface.append(fSelector);
wSelector.id = 'whisker-selector';
wSelector.name = 'whisker';
wSelector.addEventListener('change', function(){
changeLength('whisker', this.value);
});
interface.append(wSelector);
// create color selectors
for(var i = 0; i < 3; i++){
var colorPicker = document.createElement('select');
colorPicker.id = 'color-selector-' + i;
colorPicker.classList.add('color-selctor');
for(var j = 0; j < 6; j++){
var option = document.createElement('option');
colorPicker.append(option);
}
colorPicker.dataset.segment = i;
colorPicker.addEventListener('change', function(){
updateColor(this.dataset.segment, this.value);
});
interface.append(colorPicker);
}
randomizer.append(interface);
}
function createButton(){
var button = document.createElement('button');
button.textContent = 'Randomize';
button.addEventListener('click', function(){
randomize();
})
randomizer.append(button);
}
function randomize(){
var type = types[Math.floor(Math.random() * types.length)]
for(var i = 0; i < bodySegments.length; i++){
var segment = bodySegments[i];
var rand = Math.floor(Math.random() * 6);
// segment.querySelector('.base').style.filter = colors[type][rand].base.filter;
// segment.querySelector('.shadow').style.filter = colors[type][rand].shadow.filter;
segment.querySelector('.base').style.backgroundColor = '#' + colors[type][rand].base;
segment.querySelector('.shadow').style.backgroundColor = '#' + colors[type][rand].shadow;
}
changeLength('fin', (Math.floor(Math.random() * 2)) == 1 ? 'short' : 'long');
changeLength('whisker', (Math.floor(Math.random() * 2)) == 1 ? 'short' : 'long');
}
createButton();
createInterface();
updateColorSelectorValues();
});