diff --git a/index.html b/index.html
index 2e2b5bd..ed2d43e 100644
--- a/index.html
+++ b/index.html
@@ -18,10 +18,10 @@
-
name body
-
name eyes
-
name mouth
-
name arms
+
name body
+
name eyes
+
name mouth
+
name arms
diff --git a/neomojimixer.js b/neomojimixer.js
index 619dc80..680e512 100644
--- a/neomojimixer.js
+++ b/neomojimixer.js
@@ -1,52 +1,179 @@
const NeomojiMixer = (function(NeomojiMixer) {
//global variables
- //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 = [];
-
- //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;
+ const color_names = [
+ "blue",
+ "lightgrey",
+ "orange",
+ "red",
+ "white",
+ "yellow",
+ ];
+ let selected_color = "blue";
+ let color_change_callbacks = [];
//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");
-
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");
-
//Stats
const stats = document.getElementById("stats");
+ function onColorChange() {
+ for (let i = 0; i < color_change_callbacks.length; i++) {
+ if (color_change_callbacks[i]) {
+ color_change_callbacks[i]();
+ }
+ }
+ }
+
+ function PartHandler(name) {
+ this.name = name;
+ this.entries = []; //Arrays to hold the parts
+ this.entry_indices = []; //Maps selected_index to entries index
+ this.selected_index = 0; //index_color -> arms.selected_index; index_arms -> arms.entry_indices[arms.selected_index]
+ this.image_element = document.getElementById(name + "_img");
+ this.name_element = document.getElementById(name + "_name");
+ this.button_left = document.getElementById(name + "_left");
+ this.button_right = document.getElementById(name + "_right");
+ }
+
+ PartHandler.prototype = {
+ fillArray: function(item) {
+ let name = item.name;
+ let url = item.url;
+ this.entries.push([name, url]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
+ },
+ fillIndices: function() {
+ for (let i = 0; i < this.entries.length; i++) {
+ this.entry_indices.push(i); //By default preserve index
+ }
+ },
+ getSelectedEntry: function() {
+ return this.entries[this.entry_indices[this.selected_index]];
+ },
+ setIndex: function(index) {
+ const modulo = this.entry_indices.length; //Check if index is too big for the array
+ if (!modulo) {
+ this.selected_index = 0; //Error
+ } else {
+ index %= modulo;
+ if (index < 0) {
+ index += modulo;
+ }
+ this.selected_index = index;
+ }
+ this.redraw();
+ },
+ redraw: function() {
+ const entry = this.getSelectedEntry();
+ this.image_element.src = "." + entry[1]; //Change URL of picture
+ this.name_element.innerHTML = entry[0]; //Change name in controls
+ },
+ onClickNext: function() {
+ this.setIndex(this.selected_index + 1);
+ },
+ onClickPrev: function() {
+ this.setIndex(this.selected_index - 1);
+ },
+ activateControls: function() {
+ this.button_left.disabled = false;
+ this.button_right.disabled = false;
+ },
+ randomize: function() {
+ this.setIndex(Math.floor(Math.random() * this.entry_indices.length));
+ },
+ createExportImage: function() {
+ const entry = this.getSelectedEntry();
+ let img = new Image();
+ img.src = "." + entry[1];
+ return img;
+ },
+ };
+
+ function ColoredPartHandler(name) {
+ PartHandler.call(this, name);
+ //For all the different colours of the arms there will be each a own array
+ this.colored_indices = Object.create(null);
+ for (let i = 0; i < color_names.length; i++) {
+ this.colored_indices[color_names[i]] = [];
+ }
+ this.entry_indices = this.colored_indices[selected_color];
+ const that = this;
+ color_change_callbacks.push(function() {
+ that.onColorChange();
+ });
+ }
+
+ ColoredPartHandler.prototype = Object.assign(Object.create(PartHandler.prototype), {
+ constructor: PartHandler,
+ fillArray: function(item) {
+ let name = item.name;
+ let url = item.url;
+ let color = item.color;
+ this.entries.push([name, url, color]); //Two dimensional array, Second dimension holds name on index 0, url at index 1, and color at index 2
+ },
+ fillIndices: function() {
+ for (let i = 0; i < this.entries.length; i++) {
+ const color = this.entries[i][2];
+ if (color == "") {
+ //All colors
+ for (let j in this.colored_indices) {
+ this.colored_indices[j].push(i);
+ }
+ } else {
+ const indices = this.colored_indices[color];
+ if (indices == undefined) {
+ console.log("Cannot register " + this.name + " with unknown color: " + color);
+ } else {
+ indices.push(i);
+ }
+ }
+ }
+ },
+ onColorChange: function() {
+ this.entry_indices = this.colored_indices[selected_color];
+ this.redraw();
+ },
+ });
+
+ function BodyPartHandler(name) {
+ PartHandler.call(this, name);
+ }
+
+ BodyPartHandler.prototype = Object.assign(Object.create(PartHandler.prototype), {
+ constructor: PartHandler,
+ fillArray: ColoredPartHandler.prototype.fillArray,
+ setIndex: function(index) {
+ const modulo = this.entry_indices.length; //Check if index is too big for the array
+ if (!modulo) {
+ this.selected_index = 0; //Error
+ } else {
+ index %= modulo;
+ if (index < 0) {
+ index += modulo;
+ }
+ this.selected_index = index;
+ }
+ this.redraw();
+ const entry = this.getSelectedEntry();
+ selected_color = entry[2]; //Global
+ onColorChange(); //Global
+ },
+ });
+
+ const part_handlers = {
+ body: new BodyPartHandler("body"),
+ eyes: new PartHandler("eyes"),
+ mouth: new PartHandler("mouth"),
+ arms: new ColoredPartHandler("arms"),
+ };
+
// Loading the JSON and getting all the available parts
async function getData() {
-
fetch('./parts.json')
.then(function(response) {
return response.json();
@@ -61,273 +188,41 @@ const NeomojiMixer = (function(NeomojiMixer) {
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);
+ for (const i in part_handlers) {
+ parts.type[i].forEach(function(p) {part_handlers[i].fillArray(p);});
+ }
//find the indexes of each part of the corresponding color and write those into the color arrays
- fillArraysArms();
+ for (const i in part_handlers) {
+ part_handlers[i].fillIndices();
+ }
//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;
+ var sum = 0;
+ var variety = 1;
+ for (const i in part_handlers) {
+ sum += part_handlers[i].entries.length;
+ variety *= part_handlers[i].entry_indices.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;
+ for (const i in part_handlers) {
+ part_handlers[i].activateControls();
+ }
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