Moved everything under NeomojiMixer namespace
This commit is contained in:
parent
dfc0870fc1
commit
6aea5f29f5
14
index.html
14
index.html
|
@ -18,12 +18,12 @@
|
||||||
<img class="arms" id="arms_img" src="" />
|
<img class="arms" id="arms_img" src="" />
|
||||||
</div>
|
</div>
|
||||||
<div id="controls">
|
<div id="controls">
|
||||||
<div class="body"><button id="body_left" onclick="onClick_body_prev();" disabled><</button><span class="name" id="body_name">name body</span><button id="body_right" onclick="onClick_body_next();" disabled>></button></div>
|
<div class="body"><button id="body_left" onclick="NeomojiMixer.onClick_body_prev();" disabled><</button><span class="name" id="body_name">name body</span><button id="body_right" onclick="NeomojiMixer.onClick_body_next();" disabled>></button></div>
|
||||||
<div class="eyes"><button id="eyes_left" onclick="onClick_eyes_prev();" disabled><</button><span class="name" id="eyes_name">name eyes</span><button id="eyes_right" onclick="onClick_eyes_next();" disabled>></button></div>
|
<div class="eyes"><button id="eyes_left" onclick="NeomojiMixer.onClick_eyes_prev();" disabled><</button><span class="name" id="eyes_name">name eyes</span><button id="eyes_right" onclick="NeomojiMixer.onClick_eyes_next();" disabled>></button></div>
|
||||||
<div class="mouth"><button id="mouth_left" onclick="onClick_mouth_prev();" disabled><</button><span class="name" id="mouth_name">name mouth</span><button id="mouth_right" onclick="onClick_mouth_next();" disabled>></button></div>
|
<div class="mouth"><button id="mouth_left" onclick="NeomojiMixer.onClick_mouth_prev();" disabled><</button><span class="name" id="mouth_name">name mouth</span><button id="mouth_right" onclick="NeomojiMixer.onClick_mouth_next();" disabled>></button></div>
|
||||||
<div class="arms"><button id="arms_left" onclick="onClick_arms_prev();" disabled><</button><span class="name" id="arms_name">name arms</span><button id="arms_right" onclick="onClick_arms_next();" disabled>></button></div>
|
<div class="arms"><button id="arms_left" onclick="NeomojiMixer.onClick_arms_prev();" disabled><</button><span class="name" id="arms_name">name arms</span><button id="arms_right" onclick="NeomojiMixer.onClick_arms_next();" disabled>></button></div>
|
||||||
<div class="random"><button id="random" onclick="randomize();" disabled>Random</button></div>
|
<div class="random"><button id="random" onclick="NeomojiMixer.randomize();" disabled>Random</button></div>
|
||||||
<div class="export"><button id="export" onclick="exportImage();" disabled>Export Image</button></div>
|
<div class="export"><button id="export" onclick="NeomojiMixer.exportImage();" disabled>Export Image</button></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="stats">stats</div>
|
<div id="stats">stats</div>
|
||||||
<canvas id="canvas_export" width="256" height="256" hidden name="test.png"></canvas>
|
<canvas id="canvas_export" width="256" height="256" hidden name="test.png"></canvas>
|
||||||
|
@ -46,4 +46,4 @@
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
706
neomojimixer.js
706
neomojimixer.js
|
@ -1,370 +1,398 @@
|
||||||
//global variables
|
let NeomojiMixer = (function(NeomojiMixer) {
|
||||||
|
//global variables
|
||||||
|
|
||||||
//Arrays to hold the parts
|
//Arrays to hold the parts
|
||||||
let eyes = [];
|
let eyes = [];
|
||||||
let body = [];
|
let body = [];
|
||||||
let mouth = [];
|
let mouth = [];
|
||||||
let arms = [];
|
let arms = [];
|
||||||
|
|
||||||
//FOr all the different colours of the arms there will be each a own arraz
|
//FOr all the different colours of the arms there will be each a own arraz
|
||||||
let arms_orange = [];
|
let arms_orange = [];
|
||||||
let arms_blue = [];
|
let arms_blue = [];
|
||||||
let arms_lightgrey = [];
|
let arms_lightgrey = [];
|
||||||
let arms_red = [];
|
let arms_red = [];
|
||||||
let arms_white = [];
|
let arms_white = [];
|
||||||
let arms_yellow = [];
|
let arms_yellow = [];
|
||||||
|
|
||||||
//Index to easily find when to roll back to the first/last element in the list
|
//Index to easily find when to roll back to the first/last element in the list
|
||||||
let inex_eyes = 0;
|
let inex_eyes = 0;
|
||||||
let index_body = 0;
|
let index_body = 0;
|
||||||
let index_mouth = 0;
|
let index_mouth = 0;
|
||||||
let index_arms = 0;
|
let index_arms = 0;
|
||||||
let index_color = 0;
|
let index_color = 0;
|
||||||
|
|
||||||
//shotnames for HTML elements to interact with
|
//shotnames for HTML elements to interact with
|
||||||
|
|
||||||
//images
|
//images
|
||||||
const body_image = document.getElementById("body_img");
|
const body_image = document.getElementById("body_img");
|
||||||
const eyes_image = document.getElementById("eyes_img");
|
const eyes_image = document.getElementById("eyes_img");
|
||||||
const mouth_image = document.getElementById("mouth_img");
|
const mouth_image = document.getElementById("mouth_img");
|
||||||
const arms_image = document.getElementById("arms_img");
|
const arms_image = document.getElementById("arms_img");
|
||||||
|
|
||||||
const canvas = document.getElementById("canvas_export");
|
const canvas = document.getElementById("canvas_export");
|
||||||
const export_img = document.getElementById("imageExport");
|
const export_img = document.getElementById("imageExport");
|
||||||
const neomoji_name = document.getElementById("fullNeomojiName");
|
const neomoji_name = document.getElementById("fullNeomojiName");
|
||||||
|
|
||||||
//names
|
//names
|
||||||
const body_name = document.getElementById("body_name");
|
const body_name = document.getElementById("body_name");
|
||||||
const eyes_name = document.getElementById("eyes_name");
|
const eyes_name = document.getElementById("eyes_name");
|
||||||
const mouth_name = document.getElementById("mouth_name");
|
const mouth_name = document.getElementById("mouth_name");
|
||||||
const arms_name = document.getElementById("arms_name");
|
const arms_name = document.getElementById("arms_name");
|
||||||
|
|
||||||
//Stats
|
//Stats
|
||||||
const stats = document.getElementById("stats");
|
const stats = document.getElementById("stats");
|
||||||
|
|
||||||
|
|
||||||
// Loading the JSON and getting all the available parts
|
// Loading the JSON and getting all the available parts
|
||||||
async function getData() {
|
async function getData() {
|
||||||
|
|
||||||
fetch('./parts.json')
|
fetch('./parts.json')
|
||||||
.then(function(response) {
|
.then(function(response) {
|
||||||
return response.json();
|
return response.json();
|
||||||
})
|
})
|
||||||
.then(function(data) {
|
.then(function(data) {
|
||||||
loadParts(data);
|
loadParts(data);
|
||||||
})
|
})
|
||||||
.catch(function(error) {
|
.catch(function(error) {
|
||||||
console.log('An error occurred:', error);
|
console.log('An error occurred:', error);
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
function loadParts(parts) {
|
|
||||||
//Load parts into Arrays
|
|
||||||
parts.type.eyes.forEach(fillArrayEyes);
|
|
||||||
parts.type.body.forEach(fillArrayBody);
|
|
||||||
parts.type.mouth.forEach(fillArrayMouth);
|
|
||||||
parts.type.arms.forEach(fillArrayArms);
|
|
||||||
|
|
||||||
//find the indexes of each part of the corresponding color and write those into the color arrays
|
|
||||||
fillArraysArms();
|
|
||||||
|
|
||||||
//Randomize initial view
|
|
||||||
randomize();
|
|
||||||
|
|
||||||
//Show little statistic
|
|
||||||
var sum = body.length + eyes.length + mouth.length + arms.length;
|
|
||||||
var variety = body.length * eyes.length * mouth.length * arms_orange.length;
|
|
||||||
|
|
||||||
stats.innerHTML = "There are " + sum + " Elements available,<br />with " + new Intl.NumberFormat("de-DE").format(variety) + " possible combinations.";
|
|
||||||
|
|
||||||
//Activate the buttons after everything is loaded in
|
|
||||||
document.getElementById("body_left").disabled = false;
|
|
||||||
document.getElementById("body_right").disabled = false;
|
|
||||||
document.getElementById("eyes_left").disabled = false;
|
|
||||||
document.getElementById("eyes_right").disabled = false;
|
|
||||||
document.getElementById("mouth_left").disabled = false;
|
|
||||||
document.getElementById("mouth_right").disabled = false;
|
|
||||||
document.getElementById("arms_left").disabled = false;
|
|
||||||
document.getElementById("arms_right").disabled = false;
|
|
||||||
document.getElementById("random").disabled = false;
|
|
||||||
document.getElementById("export").disabled = false;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function fillArrayEyes(item) {
|
|
||||||
let name = item.name;
|
|
||||||
let url = item.url;
|
|
||||||
eyes.push ([name, url]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
|
||||||
}
|
|
||||||
|
|
||||||
function fillArrayBody(item) {
|
|
||||||
let name = item.name;
|
|
||||||
let url = item.url;
|
|
||||||
let color = item.color;
|
|
||||||
body.push ([name, url, color]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
|
||||||
}
|
|
||||||
|
|
||||||
function fillArrayMouth(item) {
|
|
||||||
let name = item.name;
|
|
||||||
let url = item.url;
|
|
||||||
mouth.push ([name, url]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
|
||||||
}
|
|
||||||
|
|
||||||
function fillArrayArms(item) {
|
|
||||||
let name = item.name;
|
|
||||||
let url = item.url;
|
|
||||||
let color = item.color;
|
|
||||||
arms.push ([name, url, color]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
|
||||||
}
|
|
||||||
|
|
||||||
function fillArraysArms() {
|
|
||||||
for (let i=0; i<arms.length; i++){
|
|
||||||
if (arms[i][2] == "blue" || arms[i][2] == ""){
|
|
||||||
arms_blue.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (arms[i][2] == "lightgrey" || arms[i][2] == ""){
|
|
||||||
arms_lightgrey.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (arms[i][2] == "orange" || arms[i][2] == ""){
|
|
||||||
arms_orange.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (arms[i][2] == "red" || arms[i][2] == ""){
|
|
||||||
arms_red.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (arms[i][2] == "white" || arms[i][2] == ""){
|
|
||||||
arms_white.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (arms[i][2] == "yellow" || arms[i][2] == ""){
|
|
||||||
arms_yellow.push(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function onClick_body_next() {
|
|
||||||
index_body++;
|
|
||||||
|
|
||||||
if (index_body == body.length) {index_body = 0;} //check if index is too big for the array
|
|
||||||
|
|
||||||
if (body[index_body][2] == "blue"){index_arms = arms_blue[index_color];}
|
|
||||||
else if (body[index_body][2] == "lightgrey"){index_arms = arms_lightgrey[index_color];}
|
|
||||||
else if (body[index_body][2] == "orange"){index_arms = arms_orange[index_color];}
|
|
||||||
else if (body[index_body][2] == "red"){index_arms = arms_red[index_color];}
|
|
||||||
else if (body[index_body][2] == "white"){index_arms = arms_white[index_color];}
|
|
||||||
else if (body[index_body][2] == "yellow"){index_arms = arms_yellow[index_color];}
|
|
||||||
|
|
||||||
body_image.src = "." + body[index_body][1]; //Change URL of body picture
|
|
||||||
body_name.innerHTML = body[index_body][0]; //Change body name in controls
|
|
||||||
|
|
||||||
arms_image.src = "." + arms[index_arms][1]; //Change URL of arms picture
|
|
||||||
arms_name.innerHTML = arms[index_arms][0]; //Change arms name in controls
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClick_body_prev() {
|
|
||||||
index_body--;
|
|
||||||
|
|
||||||
if (index_body < 0) {index_body = (body.length-1);} //check if index is too big for the array
|
|
||||||
|
|
||||||
if (body[index_body][2] == "blue"){index_arms = arms_blue[index_color];}
|
|
||||||
else if (body[index_body][2] == "lightgrey"){index_arms = arms_lightgrey[index_color];}
|
|
||||||
else if (body[index_body][2] == "orange"){index_arms = arms_orange[index_color];}
|
|
||||||
else if (body[index_body][2] == "red"){index_arms = arms_red[index_color];}
|
|
||||||
else if (body[index_body][2] == "white"){index_arms = arms_white[index_color];}
|
|
||||||
else if (body[index_body][2] == "yellow"){index_arms = arms_yellow[index_color];}
|
|
||||||
|
|
||||||
body_image.src = "." + body[index_body][1]; //Change URL of body picture
|
|
||||||
body_name.innerHTML = body[index_body][0]; //Change body name in controls
|
|
||||||
|
|
||||||
arms_image.src = "." + arms[index_arms][1]; //Change URL of arms picture
|
|
||||||
arms_name.innerHTML = arms[index_arms][0]; //Change arms name in controls
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClick_eyes_next() {
|
|
||||||
index_eyes++;
|
|
||||||
|
|
||||||
if (index_eyes == eyes.length) {index_eyes = 0;} //check if index is too big for the array
|
|
||||||
|
|
||||||
eyes_image.src = "." + eyes[index_eyes][1]; //Change URL of picture
|
|
||||||
eyes_name.innerHTML = eyes[index_eyes][0]; //Change name in controls
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClick_eyes_prev() {
|
|
||||||
index_eyes--;
|
|
||||||
|
|
||||||
if (index_eyes < 0) {index_eyes = (eyes.length-1);} //check if index is too big for the array
|
|
||||||
|
|
||||||
eyes_image.src = "." + eyes[index_eyes][1]; //Change URL of picture
|
|
||||||
eyes_name.innerHTML = eyes[index_eyes][0]; //Change name in controls
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClick_mouth_next() {
|
|
||||||
index_mouth++;
|
|
||||||
|
|
||||||
if (index_mouth == mouth.length) {index_mouth = 0;} //check if index is too big for the array
|
|
||||||
|
|
||||||
mouth_image.src = "." + mouth[index_mouth][1]; //Change URL of picture
|
|
||||||
mouth_name.innerHTML = mouth[index_mouth][0]; //Change name in controls
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClick_mouth_prev() {
|
|
||||||
index_mouth--;
|
|
||||||
|
|
||||||
if (index_mouth < 0) {index_mouth = (mouth.length-1);} //check if index is too big for the array
|
|
||||||
|
|
||||||
mouth_image.src = "." + mouth[index_mouth][1]; //Change URL of picture
|
|
||||||
mouth_name.innerHTML = mouth[index_mouth][0]; //Change name in controls
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClick_arms_next() {
|
|
||||||
index_color++;
|
|
||||||
|
|
||||||
if (body[index_body][2] == "blue"){
|
|
||||||
if (index_color == arms_blue.length) {index_color = 0;}
|
|
||||||
index_arms = arms_blue[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "lightgrey"){
|
|
||||||
if (index_color == arms_lightgrey.length) {index_color = 0;}
|
|
||||||
index_arms = arms_lightgrey[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "orange"){
|
|
||||||
if (index_color == arms_orange.length) {index_color = 0;}
|
|
||||||
index_arms = arms_orange[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "red"){
|
|
||||||
if (index_color == arms_red.length) {index_color = 0;}
|
|
||||||
index_arms = arms_red[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "white"){
|
|
||||||
if (index_color == arms_white.length) {index_color = 0;}
|
|
||||||
index_arms = arms_white[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "yellow"){
|
|
||||||
if (index_color == arms_yellow.length) {index_color = 0;}
|
|
||||||
index_arms = arms_yellow[index_color];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
arms_image.src = "." + arms[index_arms][1]; //Change URL of picture
|
function loadParts(parts) {
|
||||||
arms_name.innerHTML = arms[index_arms][0]; //Change name in controls
|
//Load parts into Arrays
|
||||||
}
|
parts.type.eyes.forEach(fillArrayEyes);
|
||||||
|
parts.type.body.forEach(fillArrayBody);
|
||||||
|
parts.type.mouth.forEach(fillArrayMouth);
|
||||||
|
parts.type.arms.forEach(fillArrayArms);
|
||||||
|
|
||||||
function onClick_arms_prev() {
|
//find the indexes of each part of the corresponding color and write those into the color arrays
|
||||||
index_color--;
|
fillArraysArms();
|
||||||
|
|
||||||
|
//Randomize initial view
|
||||||
|
randomize();
|
||||||
|
|
||||||
|
//Show little statistic
|
||||||
|
var sum = body.length + eyes.length + mouth.length + arms.length;
|
||||||
|
var variety = body.length * eyes.length * mouth.length * arms_orange.length;
|
||||||
|
|
||||||
|
stats.innerHTML = "There are " + sum + " Elements available,<br />with " + new Intl.NumberFormat("de-DE").format(variety) + " possible combinations.";
|
||||||
|
|
||||||
|
//Activate the buttons after everything is loaded in
|
||||||
|
document.getElementById("body_left").disabled = false;
|
||||||
|
document.getElementById("body_right").disabled = false;
|
||||||
|
document.getElementById("eyes_left").disabled = false;
|
||||||
|
document.getElementById("eyes_right").disabled = false;
|
||||||
|
document.getElementById("mouth_left").disabled = false;
|
||||||
|
document.getElementById("mouth_right").disabled = false;
|
||||||
|
document.getElementById("arms_left").disabled = false;
|
||||||
|
document.getElementById("arms_right").disabled = false;
|
||||||
|
document.getElementById("random").disabled = false;
|
||||||
|
document.getElementById("export").disabled = false;
|
||||||
|
|
||||||
if (body[index_body][2] == "blue"){
|
|
||||||
if (index_color < 0) {index_color = arms_blue.length-1;}
|
|
||||||
index_arms = arms_blue[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "lightgrey"){
|
|
||||||
if (index_color < 0) {index_color = arms_lightgrey.length-1;}
|
|
||||||
index_arms = arms_lightgrey[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "orange"){
|
|
||||||
if (index_color < 0) {index_color = arms_orange.length-1;}
|
|
||||||
index_arms = arms_orange[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "red"){
|
|
||||||
if (index_color < 0) {index_color = arms_red.length-1;}
|
|
||||||
index_arms = arms_red[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "white"){
|
|
||||||
if (index_color < 0) {index_color = arms_white.length-1;}
|
|
||||||
index_arms = arms_white[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "yellow"){
|
|
||||||
if (index_color < 0) {index_color = arms_yellow.length-1;}
|
|
||||||
index_arms = arms_yellow[index_color];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
arms_image.src = "." + arms[index_arms][1]; //Change URL of picture
|
function fillArrayEyes(item) {
|
||||||
arms_name.innerHTML = arms[index_arms][0]; //Change name in controls
|
let name = item.name;
|
||||||
}
|
let url = item.url;
|
||||||
|
eyes.push ([name, url]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
||||||
function randomize() { //Randomize which parts are shown
|
|
||||||
index_body = Math.floor(Math.random() * body.length);
|
|
||||||
index_eyes = Math.floor(Math.random() * eyes.length);
|
|
||||||
index_mouth = Math.floor(Math.random() * mouth.length);
|
|
||||||
index_arms = 0;
|
|
||||||
|
|
||||||
//Determine what color the body has and chose the arms color in the same way
|
|
||||||
//Basically it does a random on the arms array and returns an index number with the right color for that body
|
|
||||||
if (body[index_body][2] == "blue"){
|
|
||||||
index_color = Math.floor(Math.random() * arms_blue.length)
|
|
||||||
index_arms = arms_blue[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "lightgrey"){
|
|
||||||
index_color = Math.floor(Math.random() * arms_lightgrey.length)
|
|
||||||
index_arms = arms_lightgrey[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "orange"){
|
|
||||||
index_color = Math.floor(Math.random() * arms_orange.length)
|
|
||||||
index_arms = arms_orange[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "red"){
|
|
||||||
index_color = Math.floor(Math.random() * arms_red.length)
|
|
||||||
index_arms = arms_red[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "white"){
|
|
||||||
index_color = Math.floor(Math.random() * arms_white.length)
|
|
||||||
index_arms = arms_white[index_color];
|
|
||||||
}
|
|
||||||
else if (body[index_body][2] == "yellow"){
|
|
||||||
index_color = Math.floor(Math.random() * arms_yellow.length)
|
|
||||||
index_arms = arms_yellow[index_color];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body_image.src = "." + body[index_body][1];
|
function fillArrayBody(item) {
|
||||||
eyes_image.src = "." + eyes[index_eyes][1];
|
let name = item.name;
|
||||||
mouth_image.src = "." + mouth[index_mouth][1];
|
let url = item.url;
|
||||||
arms_image.src = "." + arms[index_arms][1];
|
let color = item.color;
|
||||||
|
body.push ([name, url, color]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
||||||
|
}
|
||||||
|
|
||||||
body_name.innerHTML = body[index_body][0];
|
function fillArrayMouth(item) {
|
||||||
eyes_name.innerHTML = eyes[index_eyes][0];
|
let name = item.name;
|
||||||
mouth_name.innerHTML = mouth[index_mouth][0];
|
let url = item.url;
|
||||||
arms_name.innerHTML = arms[index_arms][0];
|
mouth.push ([name, url]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
||||||
}
|
}
|
||||||
|
|
||||||
function exportImage() { //Export image so it can be saved as one PNG
|
function fillArrayArms(item) {
|
||||||
let ctx=canvas.getContext("2d");
|
let name = item.name;
|
||||||
|
let url = item.url;
|
||||||
|
let color = item.color;
|
||||||
|
arms.push ([name, url, color]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
||||||
|
}
|
||||||
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
function fillArraysArms() {
|
||||||
|
for (let i=0; i<arms.length; i++){
|
||||||
|
if (arms[i][2] == "blue" || arms[i][2] == ""){
|
||||||
|
arms_blue.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
neomoji_name.value = body[index_body][0] + "_" + eyes[index_eyes][0] + "_" + mouth[index_mouth][0] + "_" + arms[index_arms][0]; //Set name for the emoji to use as the image name and to show as shortcode
|
if (arms[i][2] == "lightgrey" || arms[i][2] == ""){
|
||||||
|
arms_lightgrey.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
let body_export = new Image();
|
if (arms[i][2] == "orange" || arms[i][2] == ""){
|
||||||
let eyes_export = new Image();
|
arms_orange.push(i);
|
||||||
let mouth_export = new Image();
|
}
|
||||||
let arms_export = new Image();
|
|
||||||
|
|
||||||
body_export.src = "." + body[index_body][1];
|
if (arms[i][2] == "red" || arms[i][2] == ""){
|
||||||
body_export.onload = function() {
|
arms_red.push(i);
|
||||||
ctx.drawImage(body_export, 0, 0, 256, 256);
|
}
|
||||||
eyes_export.src = "." + eyes[index_eyes][1];
|
|
||||||
eyes_export.onload = function() {
|
if (arms[i][2] == "white" || arms[i][2] == ""){
|
||||||
ctx.drawImage(eyes_export, 0, 0, 256, 256);
|
arms_white.push(i);
|
||||||
mouth_export.src = "." + mouth[index_mouth][1];
|
}
|
||||||
mouth_export.onload = function() {
|
|
||||||
ctx.drawImage(mouth_export, 0, 0, 256, 256);
|
if (arms[i][2] == "yellow" || arms[i][2] == ""){
|
||||||
arms_export.src = "." + arms[index_arms][1];
|
arms_yellow.push(i);
|
||||||
arms_export.onload = function() {
|
|
||||||
ctx.drawImage(arms_export, 0, 0, 256, 256);
|
|
||||||
let img = canvas.toDataURL("image/png");
|
|
||||||
export_img.src = img;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onClick_body_next() {
|
||||||
|
index_body++;
|
||||||
|
|
||||||
|
if (index_body == body.length) {index_body = 0;} //check if index is too big for the array
|
||||||
|
|
||||||
|
if (body[index_body][2] == "blue"){index_arms = arms_blue[index_color];}
|
||||||
|
else if (body[index_body][2] == "lightgrey"){index_arms = arms_lightgrey[index_color];}
|
||||||
|
else if (body[index_body][2] == "orange"){index_arms = arms_orange[index_color];}
|
||||||
|
else if (body[index_body][2] == "red"){index_arms = arms_red[index_color];}
|
||||||
|
else if (body[index_body][2] == "white"){index_arms = arms_white[index_color];}
|
||||||
|
else if (body[index_body][2] == "yellow"){index_arms = arms_yellow[index_color];}
|
||||||
|
|
||||||
|
body_image.src = "." + body[index_body][1]; //Change URL of body picture
|
||||||
|
body_name.innerHTML = body[index_body][0]; //Change body name in controls
|
||||||
|
|
||||||
|
arms_image.src = "." + arms[index_arms][1]; //Change URL of arms picture
|
||||||
|
arms_name.innerHTML = arms[index_arms][0]; //Change arms name in controls
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick_body_prev() {
|
||||||
|
index_body--;
|
||||||
|
|
||||||
|
if (index_body < 0) {index_body = (body.length-1);} //check if index is too big for the array
|
||||||
|
|
||||||
|
if (body[index_body][2] == "blue"){index_arms = arms_blue[index_color];}
|
||||||
|
else if (body[index_body][2] == "lightgrey"){index_arms = arms_lightgrey[index_color];}
|
||||||
|
else if (body[index_body][2] == "orange"){index_arms = arms_orange[index_color];}
|
||||||
|
else if (body[index_body][2] == "red"){index_arms = arms_red[index_color];}
|
||||||
|
else if (body[index_body][2] == "white"){index_arms = arms_white[index_color];}
|
||||||
|
else if (body[index_body][2] == "yellow"){index_arms = arms_yellow[index_color];}
|
||||||
|
|
||||||
|
body_image.src = "." + body[index_body][1]; //Change URL of body picture
|
||||||
|
body_name.innerHTML = body[index_body][0]; //Change body name in controls
|
||||||
|
|
||||||
|
arms_image.src = "." + arms[index_arms][1]; //Change URL of arms picture
|
||||||
|
arms_name.innerHTML = arms[index_arms][0]; //Change arms name in controls
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick_eyes_next() {
|
||||||
|
index_eyes++;
|
||||||
|
|
||||||
|
if (index_eyes == eyes.length) {index_eyes = 0;} //check if index is too big for the array
|
||||||
|
|
||||||
|
eyes_image.src = "." + eyes[index_eyes][1]; //Change URL of picture
|
||||||
|
eyes_name.innerHTML = eyes[index_eyes][0]; //Change name in controls
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick_eyes_prev() {
|
||||||
|
index_eyes--;
|
||||||
|
|
||||||
|
if (index_eyes < 0) {index_eyes = (eyes.length-1);} //check if index is too big for the array
|
||||||
|
|
||||||
|
eyes_image.src = "." + eyes[index_eyes][1]; //Change URL of picture
|
||||||
|
eyes_name.innerHTML = eyes[index_eyes][0]; //Change name in controls
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick_mouth_next() {
|
||||||
|
index_mouth++;
|
||||||
|
|
||||||
|
if (index_mouth == mouth.length) {index_mouth = 0;} //check if index is too big for the array
|
||||||
|
|
||||||
|
mouth_image.src = "." + mouth[index_mouth][1]; //Change URL of picture
|
||||||
|
mouth_name.innerHTML = mouth[index_mouth][0]; //Change name in controls
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick_mouth_prev() {
|
||||||
|
index_mouth--;
|
||||||
|
|
||||||
|
if (index_mouth < 0) {index_mouth = (mouth.length-1);} //check if index is too big for the array
|
||||||
|
|
||||||
|
mouth_image.src = "." + mouth[index_mouth][1]; //Change URL of picture
|
||||||
|
mouth_name.innerHTML = mouth[index_mouth][0]; //Change name in controls
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick_arms_next() {
|
||||||
|
index_color++;
|
||||||
|
|
||||||
|
if (body[index_body][2] == "blue"){
|
||||||
|
if (index_color == arms_blue.length) {index_color = 0;}
|
||||||
|
index_arms = arms_blue[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "lightgrey"){
|
||||||
|
if (index_color == arms_lightgrey.length) {index_color = 0;}
|
||||||
|
index_arms = arms_lightgrey[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "orange"){
|
||||||
|
if (index_color == arms_orange.length) {index_color = 0;}
|
||||||
|
index_arms = arms_orange[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "red"){
|
||||||
|
if (index_color == arms_red.length) {index_color = 0;}
|
||||||
|
index_arms = arms_red[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "white"){
|
||||||
|
if (index_color == arms_white.length) {index_color = 0;}
|
||||||
|
index_arms = arms_white[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "yellow"){
|
||||||
|
if (index_color == arms_yellow.length) {index_color = 0;}
|
||||||
|
index_arms = arms_yellow[index_color];
|
||||||
|
}
|
||||||
|
|
||||||
|
arms_image.src = "." + arms[index_arms][1]; //Change URL of picture
|
||||||
|
arms_name.innerHTML = arms[index_arms][0]; //Change name in controls
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick_arms_prev() {
|
||||||
|
index_color--;
|
||||||
|
|
||||||
|
if (body[index_body][2] == "blue"){
|
||||||
|
if (index_color < 0) {index_color = arms_blue.length-1;}
|
||||||
|
index_arms = arms_blue[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "lightgrey"){
|
||||||
|
if (index_color < 0) {index_color = arms_lightgrey.length-1;}
|
||||||
|
index_arms = arms_lightgrey[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "orange"){
|
||||||
|
if (index_color < 0) {index_color = arms_orange.length-1;}
|
||||||
|
index_arms = arms_orange[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "red"){
|
||||||
|
if (index_color < 0) {index_color = arms_red.length-1;}
|
||||||
|
index_arms = arms_red[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "white"){
|
||||||
|
if (index_color < 0) {index_color = arms_white.length-1;}
|
||||||
|
index_arms = arms_white[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "yellow"){
|
||||||
|
if (index_color < 0) {index_color = arms_yellow.length-1;}
|
||||||
|
index_arms = arms_yellow[index_color];
|
||||||
|
}
|
||||||
|
|
||||||
|
arms_image.src = "." + arms[index_arms][1]; //Change URL of picture
|
||||||
|
arms_name.innerHTML = arms[index_arms][0]; //Change name in controls
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomize() { //Randomize which parts are shown
|
||||||
|
index_body = Math.floor(Math.random() * body.length);
|
||||||
|
index_eyes = Math.floor(Math.random() * eyes.length);
|
||||||
|
index_mouth = Math.floor(Math.random() * mouth.length);
|
||||||
|
index_arms = 0;
|
||||||
|
|
||||||
|
//Determine what color the body has and chose the arms color in the same way
|
||||||
|
//Basically it does a random on the arms array and returns an index number with the right color for that body
|
||||||
|
if (body[index_body][2] == "blue"){
|
||||||
|
index_color = Math.floor(Math.random() * arms_blue.length)
|
||||||
|
index_arms = arms_blue[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "lightgrey"){
|
||||||
|
index_color = Math.floor(Math.random() * arms_lightgrey.length)
|
||||||
|
index_arms = arms_lightgrey[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "orange"){
|
||||||
|
index_color = Math.floor(Math.random() * arms_orange.length)
|
||||||
|
index_arms = arms_orange[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "red"){
|
||||||
|
index_color = Math.floor(Math.random() * arms_red.length)
|
||||||
|
index_arms = arms_red[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "white"){
|
||||||
|
index_color = Math.floor(Math.random() * arms_white.length)
|
||||||
|
index_arms = arms_white[index_color];
|
||||||
|
}
|
||||||
|
else if (body[index_body][2] == "yellow"){
|
||||||
|
index_color = Math.floor(Math.random() * arms_yellow.length)
|
||||||
|
index_arms = arms_yellow[index_color];
|
||||||
|
}
|
||||||
|
|
||||||
|
body_image.src = "." + body[index_body][1];
|
||||||
|
eyes_image.src = "." + eyes[index_eyes][1];
|
||||||
|
mouth_image.src = "." + mouth[index_mouth][1];
|
||||||
|
arms_image.src = "." + arms[index_arms][1];
|
||||||
|
|
||||||
|
body_name.innerHTML = body[index_body][0];
|
||||||
|
eyes_name.innerHTML = eyes[index_eyes][0];
|
||||||
|
mouth_name.innerHTML = mouth[index_mouth][0];
|
||||||
|
arms_name.innerHTML = arms[index_arms][0];
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportImage() { //Export image so it can be saved as one PNG
|
||||||
|
let ctx=canvas.getContext("2d");
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
neomoji_name.value = body[index_body][0] + "_" + eyes[index_eyes][0] + "_" + mouth[index_mouth][0] + "_" + arms[index_arms][0]; //Set name for the emoji to use as the image name and to show as shortcode
|
||||||
|
|
||||||
|
let body_export = new Image();
|
||||||
|
let eyes_export = new Image();
|
||||||
|
let mouth_export = new Image();
|
||||||
|
let arms_export = new Image();
|
||||||
|
|
||||||
|
body_export.src = "." + body[index_body][1];
|
||||||
|
body_export.onload = function() {
|
||||||
|
ctx.drawImage(body_export, 0, 0, 256, 256);
|
||||||
|
eyes_export.src = "." + eyes[index_eyes][1];
|
||||||
|
eyes_export.onload = function() {
|
||||||
|
ctx.drawImage(eyes_export, 0, 0, 256, 256);
|
||||||
|
mouth_export.src = "." + mouth[index_mouth][1];
|
||||||
|
mouth_export.onload = function() {
|
||||||
|
ctx.drawImage(mouth_export, 0, 0, 256, 256);
|
||||||
|
arms_export.src = "." + arms[index_arms][1];
|
||||||
|
arms_export.onload = function() {
|
||||||
|
ctx.drawImage(arms_export, 0, 0, 256, 256);
|
||||||
|
let img = canvas.toDataURL("image/png");
|
||||||
|
export_img.src = img;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export_img.hidden = false;
|
||||||
|
neomoji_name.hidden = false;
|
||||||
|
document.getElementById("exportSaveMessage").hidden = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
NeomojiMixer.eyes = eyes;
|
||||||
|
NeomojiMixer.body = body;
|
||||||
|
NeomojiMixer.mouth = mouth;
|
||||||
|
NeomojiMixer.arms = arms;
|
||||||
|
|
||||||
|
NeomojiMixer.arms_orange = arms_orange;
|
||||||
|
NeomojiMixer.arms_blue = arms_blue;
|
||||||
|
NeomojiMixer.arms_lightgrey = arms_lightgrey;
|
||||||
|
NeomojiMixer.arms_red = arms_red;
|
||||||
|
NeomojiMixer.arms_white = arms_white;
|
||||||
|
NeomojiMixer.arms_yellow = arms_yellow;
|
||||||
|
|
||||||
|
NeomojiMixer.getData = getData;
|
||||||
|
|
||||||
|
NeomojiMixer.onClick_body_next = onClick_body_next;
|
||||||
|
NeomojiMixer.onClick_body_prev = onClick_body_prev;
|
||||||
|
NeomojiMixer.onClick_eyes_next = onClick_eyes_next;
|
||||||
|
NeomojiMixer.onClick_eyes_prev = onClick_eyes_prev;
|
||||||
|
NeomojiMixer.onClick_mouth_next = onClick_mouth_next;
|
||||||
|
NeomojiMixer.onClick_mouth_prev = onClick_mouth_prev;
|
||||||
|
NeomojiMixer.onClick_arms_next = onClick_arms_next;
|
||||||
|
NeomojiMixer.onClick_arms_prev = onClick_arms_prev;
|
||||||
|
|
||||||
|
return NeomojiMixer;
|
||||||
|
})(window.NeomojiMixer || {});
|
||||||
|
|
||||||
export_img.hidden = false;
|
|
||||||
neomoji_name.hidden = false;
|
|
||||||
document.getElementById("exportSaveMessage").hidden = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
//Main Programm
|
//Main Programm
|
||||||
document.getElementById("noJSmessage").hidden = true;
|
document.getElementById("noJSmessage").hidden = true;
|
||||||
getData();
|
NeomojiMixer.getData();
|
||||||
|
|
Loading…
Reference in New Issue