From 8858549de390b82bb146cc8ecd3ac0a3f8f532a4 Mon Sep 17 00:00:00 2001 From: Vftdan Date: Tue, 23 Apr 2024 01:36:54 +0200 Subject: [PATCH] Moved everything under NeomojiMixer namespace --- index.html | 14 +- neomojimixer.js | 708 +++++++++++++++++++++++++----------------------- 2 files changed, 376 insertions(+), 346 deletions(-) diff --git a/index.html b/index.html index de31418..2e2b5bd 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,12 @@
-
name body
-
name eyes
-
name mouth
-
name arms
-
-
+
name body
+
name eyes
+
name mouth
+
name arms
+
+
stats
@@ -46,4 +46,4 @@ - \ No newline at end of file + diff --git a/neomojimixer.js b/neomojimixer.js index 2d94c0b..619dc80 100644 --- a/neomojimixer.js +++ b/neomojimixer.js @@ -1,370 +1,400 @@ -//global variables +const NeomojiMixer = (function(NeomojiMixer) { + //global variables -//Arrays to hold the parts -let eyes = []; -let body = []; -let mouth = []; -let arms = []; + //Arrays to hold the parts + let eyes = []; + let body = []; + let mouth = []; + let arms = []; -//FOr all the different colours of the arms there will be each a own arraz -let arms_orange = []; -let arms_blue = []; -let arms_lightgrey = []; -let arms_red = []; -let arms_white = []; -let arms_yellow = []; + //FOr all the different colours of the arms there will be each a own arraz + let arms_orange = []; + let arms_blue = []; + let arms_lightgrey = []; + let arms_red = []; + let arms_white = []; + let arms_yellow = []; -//Index to easily find when to roll back to the first/last element in the list -let inex_eyes = 0; -let index_body = 0; -let index_mouth = 0; -let index_arms = 0; -let index_color = 0; + //Index to easily find when to roll back to the first/last element in the list + let inex_eyes = 0; + let index_body = 0; + let index_mouth = 0; + let index_arms = 0; + let index_color = 0; -//shotnames for HTML elements to interact with + //shotnames for HTML elements to interact with -//images -const body_image = document.getElementById("body_img"); -const eyes_image = document.getElementById("eyes_img"); -const mouth_image = document.getElementById("mouth_img"); -const arms_image = document.getElementById("arms_img"); + //images + const body_image = document.getElementById("body_img"); + const eyes_image = document.getElementById("eyes_img"); + const mouth_image = document.getElementById("mouth_img"); + const arms_image = document.getElementById("arms_img"); -const canvas = document.getElementById("canvas_export"); -const export_img = document.getElementById("imageExport"); -const neomoji_name = document.getElementById("fullNeomojiName"); + const canvas = document.getElementById("canvas_export"); + const export_img = document.getElementById("imageExport"); + const neomoji_name = document.getElementById("fullNeomojiName"); -//names -const body_name = document.getElementById("body_name"); -const eyes_name = document.getElementById("eyes_name"); -const mouth_name = document.getElementById("mouth_name"); -const arms_name = document.getElementById("arms_name"); + //names + const body_name = document.getElementById("body_name"); + const eyes_name = document.getElementById("eyes_name"); + const mouth_name = document.getElementById("mouth_name"); + const arms_name = document.getElementById("arms_name"); -//Stats -const stats = document.getElementById("stats"); + //Stats + const stats = document.getElementById("stats"); -// Loading the JSON and getting all the available parts -async function getData() { + // Loading the JSON and getting all the available parts + async function getData() { - fetch('./parts.json') - .then(function(response) { - return response.json(); - }) - .then(function(data) { - loadParts(data); - }) - .catch(function(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,
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; iwith " + 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 - 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]; + 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 } - 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]; + 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 + } - 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 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 exportImage() { //Export image so it can be saved as one PNG - let ctx=canvas.getContext("2d"); + 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 + } - ctx.clearRect(0, 0, canvas.width, canvas.height); + function fillArraysArms() { + for (let i=0; i