first commit
This commit is contained in:
commit
c2087afc00
6 changed files with 398 additions and 0 deletions
86
index.js
Normal file
86
index.js
Normal file
|
@ -0,0 +1,86 @@
|
|||
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('p');
|
||||
p.textContent = char;
|
||||
sec.appendChild(p);
|
||||
let input = document.createElement('input');
|
||||
input.type = 'color';
|
||||
input.id = 'color_' + char;
|
||||
input.value = getRandomColor();
|
||||
sec.appendChild(input);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
Loading…
Add table
Add a link
Reference in a new issue