90 lines
No EOL
2.3 KiB
JavaScript
90 lines
No EOL
2.3 KiB
JavaScript
let char = "doowie";
|
|
let charData = {
|
|
"emotion": "main",
|
|
"face": "main",
|
|
"fur1": "main",
|
|
"fur2": "main",
|
|
"fur3": "main"
|
|
}
|
|
let colors = {
|
|
|
|
};
|
|
|
|
function getRandomColor() {
|
|
var letters = '0123456789ABCDEF';
|
|
var color = '#';
|
|
for (var i = 0; i < 6; i++) {
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
}
|
|
return color;
|
|
}
|
|
|
|
function addChar(i) {
|
|
charData[i[0]] = i[1];
|
|
main();
|
|
}
|
|
|
|
function main(init = false) {
|
|
let ctx = document.querySelector('iframe').contentDocument.querySelectorAll('g > g > g');
|
|
let sec = document.body.querySelector('section.main');
|
|
|
|
if (!init) {
|
|
for (let x of document.querySelectorAll('.char')) {
|
|
x.remove();
|
|
}
|
|
} else {
|
|
for (let char in charData) {
|
|
let p = document.createElement('span');
|
|
p.textContent = char;
|
|
document.querySelector('.inputs').appendChild(p);
|
|
let input = document.createElement('input');
|
|
input.type = 'color';
|
|
input.id = 'color_' + char;
|
|
input.value = getRandomColor();
|
|
document.querySelector('.inputs').appendChild(input);
|
|
input.onchange = () => main(false);
|
|
}
|
|
}
|
|
|
|
for (let face of ctx) {
|
|
face.style.display = 'none';
|
|
}
|
|
|
|
for (let face of ctx) {
|
|
face.style.display = 'block';
|
|
|
|
let imgElem = document.querySelector('iframe').contentDocument.querySelector('svg');
|
|
let imgElem2 = imgElem.cloneNode(true);
|
|
imgElem2.classList.add('char');
|
|
imgElem2.setAttribute('temp_id', face.id);
|
|
|
|
let splitId = face.id.split('_');
|
|
|
|
let val = document.getElementById('color_' + splitId[0]).value;
|
|
|
|
if (val) {
|
|
face.style.fill = val;
|
|
face.style.stroke = val;
|
|
}
|
|
|
|
imgElem2.classList.add('selected_' + (charData[splitId[0]] == splitId[1]));
|
|
sec.appendChild(imgElem2);
|
|
imgElem2.onclick = () => addChar(splitId);
|
|
|
|
face.style.display = 'none';
|
|
}
|
|
|
|
for (let face of ctx) {
|
|
let splitId = face.id.split('_');
|
|
if (charData[splitId[0]] == splitId[1]) {
|
|
face.style.display = 'block';
|
|
} else {
|
|
face.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
window.onload = () => {
|
|
main(true);
|
|
main(false);
|
|
} |