Merge remote-tracking branch 'origin/main' into export-options

added Johann150 to the thank you section in README.md
Merge pull request 'add direct link ability' (#12 ) from Johann150/neomojimixer:main into main
2024-04-24 20:57:06 +02:00 · 2024-04-24 20:12:56 +02:00 · 2024-04-24 18:07:19 +00:00 · 2024-04-24 18:07:01 +00:00 · 2024-04-24 15:48:20 +02:00 · 2024-04-24 15:43:56 +02:00
50 changed files with 462 additions and 381 deletions
--- a/README.md
+++ b/README.md
@ -26,7 +26,7 @@ The colour of the arms is determined by the last of the three entries named `"co

 The export works in a way that in the background all the parts are drawn onto a canvas and then exported into a PNG that is then displayed. Direct canvas download isn't supported on the most mobile browsers so I chosen to got that little bit longer route, to make it more easily to download any of the mixed neomojis.

-## I dowoloaded it localy, but it doesn't work?!?
+## I downloaded it localy, but it doesn't work?!?

 Welcome to the world of Javascript!
 Due to security reasons javascript that is displayed in a Brwoser can't access files diretly, so to speak on the PC the JavaScript si executed one. The solutions is relativly simple: Run a small http server locally.
@ -58,5 +58,16 @@ YES! I actually do! creating the first 95 elements took me over six hours to mak
 - For creating the [neopossum emojis](https://yiff.life/@EeveeEuphoria/112039918021786980)
 - For letting me use them in this project!

+[olivvybee](https://honeycomb.engineer/@olivvybee)
+- For creating the [neobread emojis](https://github.com/olivvybee/neobread) and [blobbee emojis](https://github.com/olivvybee/blobbee/releases/latest)
+- For letting me use them in this project!
+
+[vftdan](https://mastodon.ml/@vftdan)
+- For completly rewriting the JavaScript
+- Adding drowpdown menus for the part selection
+
+[Johann150](https://genau.qwertqwefsday.eu/@Johann150)
+- For the permalink functionality
+
 You
 - For any feedback, bug report or pull request to improve this project!
--- a/index.html
+++ b/index.html
@ -5,7 +5,6 @@
 		<title>Neomojimixer (BETA)</title>
 		<link rel="shortcut icon" href="favicon.gif"  type="image/gif" />
 		<link rel="stylesheet" href="neomojimixer.css">
-		
 	</head>
 	<body>
 		<h2>Neomojimixer (BETA)</h2>
@ -18,24 +17,43 @@
 			<img class="arms" id="arms_img" src="" />
 		</div>
 		<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="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="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="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="random"><button id="random" onclick="randomize();" disabled>Random</button></div>
-			<div class="export"><button id="export" onclick="exportImage();" disabled>Export Image</button></div>
+			<div class="body"><button id="body_left" onclick="NeomojiMixer.part_handlers.body.onClickPrev();" disabled><</button><select class="name" id="body_name" onchange="NeomojiMixer.part_handlers.body.onChangeDropdown();" disabled>name body</select><button id="body_right" onclick="NeomojiMixer.part_handlers.body.onClickNext();" disabled>></button></div>
+			<div class="eyes"><button id="eyes_left" onclick="NeomojiMixer.part_handlers.eyes.onClickPrev();" disabled><</button><select class="name" id="eyes_name" onchange="NeomojiMixer.part_handlers.eyes.onChangeDropdown();" disabled>name eyes</select><button id="eyes_right" onclick="NeomojiMixer.part_handlers.eyes.onClickNext();" disabled>></button></div>
+			<div class="mouth"><button id="mouth_left" onclick="NeomojiMixer.part_handlers.mouth.onClickPrev();" disabled><</button><select class="name" id="mouth_name" onchange="NeomojiMixer.part_handlers.mouth.onChangeDropdown();" disabled>name mouth</select><button id="mouth_right" onclick="NeomojiMixer.part_handlers.mouth.onClickNext();" disabled>></button></div>
+			<div class="arms"><button id="arms_left" onclick="NeomojiMixer.part_handlers.arms.onClickPrev();" disabled><</button><select class="name" id="arms_name" onchange="NeomojiMixer.part_handlers.arms.onChangeDropdown();" disabled>name arms</select><button id="arms_right" onclick="NeomojiMixer.part_handlers.arms.onClickNext();" disabled>></button></div>
+			<div class="random"><button id="random" onclick="NeomojiMixer.randomize();" disabled>Random</button></div>
+			<div class="export">
+				<button id="export" onclick="NeomojiMixer.exportImage();" disabled>Export Image</button>
+				<label>
+					Export type:
+					<input type="text" id="export-mime" list="export-mime-list" value="image/png" />
+					<datalist id="export-mime-list">
+						<option value="image/png"></option>
+						<option value="image/webp"></option>
+						<option value="image/jpeg"></option>
+					</datalist>
+				</label>
+				<label>
+					<input type="checkbox" id="export-quality-enabled" />Quality:<input type="number" id="export-quality" min="0.0" max="1.0" step="0.1" value="1.0" />
+				</label>
+			</div>
 		</div>
 		<div id="stats">stats</div>
 		<canvas id="canvas_export" width="256" height="256" hidden name="test.png"></canvas>
 		<img id="imageExport" src="" hidden/>
-		<p id="exportSaveMessage" hidden>To save right click and choose "Save image as..."</p>
-		<input type="text" id="fullNeomojiName" name="" value="" readonly hidden/>
+		<p>
+			<a id="imageExportLink" download href="" target="_blank" hidden>Download</a>
+		</p>
+		<p id="exportSaveMessage" hidden>To save right click and choose "Save image as..." or click the "Download" link</p>
+		<a id="fullNeomojiName" hidden></a>
 		<p>Neomojis are from the following sources: </p>
 			<ul>
 				<li><b><a href="https://volpeon.ink/emojis/neofox/" target="_blank" class="links">Neofox</a></b> by <a href="https://is-a.wyvern.rip/@volpeon" target="_blank" class="links">Volpeon</a></li>
 				<li><b><a href="https://volpeon.ink/emojis/neocat/" target="_blank" class="links">Neocat</a></b> by Volpeon</li>
 				<li><b><a href="https://emoji-repo.absturztau.be/repo/neorat.zip" target="_blank" class="links">Neorat</a></b> by <a href="https://onemuri.nl/" target="_blank" class="links">Justje</a></li>
 				<li><b><a href="https://yiff.life/@EeveeEuphoria/112039918021786980" target="_blank" class="links">Neopossum</a></b> by <a href="https://yiff.life/@EeveeEuphoria" target="_blank" class="links">EeveeEuphoria</a></li>
+				<li><b><a href="https://github.com/olivvybee/neobread" target="_blank" class="links">Neobread</a></b> by <a href="https://honeycomb.engineer/@olivvybee" target="_blank" class="links">Olivvybee</a></li>
+				<li><b><a href="https://github.com/olivvybee/blobbee/releases/latest" target="_blank" class="links">Blobbee</a></b> by Olivvybee</li>
 				<li><b>Neoredpanda</b> by <a href="https://hat-eine.entenbru.st/@Erpel" target="_blank" class="links">Ente</a></li>
 			</ul>
 		<p>Sourcecode on Codeberg: <a href="https://codeberg.org/fotoente/neomojimixer" target="_blank">Neomojimixer</a>
@ -45,5 +63,3 @@
 		<script src="neomojimixer.js"></script>
 	</body>
 </html>
-
-				
--- a/neomojimixer.css
+++ b/neomojimixer.css
@ -34,20 +34,37 @@ img.arms {
 	width: 256px;
 }

+input, button, select {
+	box-sizing: border-box;
+}
+
 button {
 	width: 25px;
 	height: 25px;
 }

-button#random {
+input[type="checkbox"] {
+	margin: 4px;
+	width: 17px;
+	height: 17px;
+}
+
+.export > label {
+	display: block;
+	width: 250px;
+	clear: both;
+}
+
+.export > label > input:not([type="checkbox"]) {
+	width: 125px;
+	float: right;
+}
+
+button#random, button#export {
 	width: 250px;
 }

-button#export {
-	width: 250px;
-}
-
-span.name {
+#controls > div > .name {
 	display: inline-block;
 	width: 200px;
 	text-align: center;
--- a/neomojimixer.js
+++ b/neomojimixer.js
@ -1,51 +1,205 @@
+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",
+		"lightbrown",
+	];
+	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 export_img_download = document.getElementById("imageExportLink");
 	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
+			//Change name in controls
+			this.updateOptions();
+			this.name_element.selectedIndex = this.selected_index;
+		},
+		onClickNext: function() {
+			this.setIndex(this.selected_index + 1);
+		},
+		onClickPrev: function() {
+			this.setIndex(this.selected_index - 1);
+		},
+		onChangeDropdown: function() {
+			this.setIndex(this.name_element.selectedIndex);
+		},
+		activateControls: function() {
+			this.button_left.disabled = false;
+			this.button_right.disabled = false;
+			this.name_element.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;
+		},
+		updateOptions: function() {
+			const options = this.name_element.options;
+			for (let i = 0; i < this.entry_indices.length; i++) {
+				const index = this.entry_indices[i];
+				const entry = this.entries[index];
+				if (options.length > i && options[i].value == entry[0]) {
+					continue;
+				} else {
+					const option = new Option(entry[0], entry[0], false, this.selected_index == i);
+					if (this.name_element.length <= i) {
+						this.name_element.add(option);
+					} else {
+						this.name_element.remove(i);
+						this.name_element.add(option, i);
+					}
+				}
+			}
+		},
+	};
+
+	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();
@ -60,311 +214,151 @@ async function getData() {

 	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();

+		// If there was a hash, restore as a direct permalink.
+		if (document.location.hash != "") {
+			loadFromHash(document.location.hash);
+		}
+		window.addEventListener("hashchange", () => {
+			loadFromHash(document.location.hash);
+		});
+
 		//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,<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;
+		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 loadFromHash(hash) {
+		let parts = hash
+			.slice(1) // the first character is always the '#' sign
+			.split('+');

-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
-}
+		// define a constant order for the parts to appear in the hash
+		const parts_order = ["body", "eyes", "mouth", "arms"];

-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);
+		if (parts.length == parts_order.length) {
+			// convert the part names to part indices
+			parts = parts.map((name, i) =>
+				Array.from(part_handlers[parts_order[i]].name_element.options).findIndex(x => x.value === name)
+			);
+			if (parts.every(x => x != -1)) {
+				// all part names were found
+				parts.forEach((part_index, i) => part_handlers[parts_order[i]].setIndex(part_index));
 			}
 		}
 	}

-
-
-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];
+		for (const i in part_handlers) {
+			part_handlers[i].randomize();
 		}
-	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");
+		let export_mime = document.getElementById("export-mime").value;
+		let export_options = undefined;
+		if (document.getElementById("export-quality-enabled").checked) {
+			export_options = +document.getElementById("export-quality").value;
+		}

 		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
+		//Set name for the emoji to use as the image name and to show as shortcode
+		let name = part_handlers.body.getSelectedEntry()[0] + "_" + part_handlers.eyes.getSelectedEntry()[0] + "_" + part_handlers.mouth.getSelectedEntry()[0] + "_" + part_handlers.arms.getSelectedEntry()[0];
+		neomoji_name.innerText = name;
+		neomoji_name.href = new URL("#" + part_handlers.body.getSelectedEntry()[0] + "+" + part_handlers.eyes.getSelectedEntry()[0] + "+" + part_handlers.mouth.getSelectedEntry()[0] + "+" + part_handlers.arms.getSelectedEntry()[0], document.location.href)

-	let body_export = new Image();
-	let eyes_export = new Image();
-	let mouth_export = new Image();
-	let arms_export = new Image();
+		let export_layers = [
+			part_handlers.body.createExportImage(),
+			part_handlers.eyes.createExportImage(),
+			part_handlers.mouth.createExportImage(),
+			part_handlers.arms.createExportImage(),
+		];

-	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");
+		function layerCallback() {
+			while (export_layers.length) {
+				const layer = export_layers[0];
+				if (!layer.complete) {
+					layer.onload = layerCallback;
+					return; //Wait to load
+				}
+				//Finished waiting
+				export_layers.shift()
+				ctx.drawImage(layer, 0, 0, 256, 256);
+			}
+			let img = canvas.toDataURL(export_mime, export_options);
 			export_img.src = img;
+			export_img_download.href = img;
+			export_img_download.download = name + "." + (export_mime.match(/\/(\w+)/) || ["", "png"])[1];
 		}
-			}
-		}
-	};
+
+		setTimeout(layerCallback, 0); //Run asynchronously

 		export_img.hidden = false;
+		export_img_download.hidden = false;
 		neomoji_name.hidden = false;
 		document.getElementById("exportSaveMessage").hidden = false;
 	}

+	NeomojiMixer.PartHandler = PartHandler;
+	NeomojiMixer.ColoredPartHandler = ColoredPartHandler;
+	NeomojiMixer.BodyPartHandler = BodyPartHandler;
+
+	NeomojiMixer.color_names = color_names;
+	NeomojiMixer.color_change_callbacks = color_change_callbacks;
+	NeomojiMixer.part_handlers = part_handlers;
+	NeomojiMixer.onColorChange = onColorChange;
+	NeomojiMixer.getData = getData;
+	NeomojiMixer.loadParts = loadParts;
+	NeomojiMixer.randomize = randomize;
+	NeomojiMixer.exportImage = exportImage;
+	NeomojiMixer.canvas = canvas;
+	NeomojiMixer.export_img = export_img;
+	NeomojiMixer.neomoji_name = neomoji_name;
+	NeomojiMixer.stats = stats;
+
+	Object.defineProperty(NeomojiMixer, 'selected_color', {
+		enumerable: true,
+		configurable: true,
+		get: function() {
+			return selected_color;
+		},
+		set: function(value) {
+			selected_color = value;
+			onColorChange();
+		},
+	});
+
+	return NeomojiMixer;
+})(window.NeomojiMixer || {});
+
+
 //Main Programm
 document.getElementById("noJSmessage").hidden = true;
-getData();
+NeomojiMixer.getData();
--- a/parts.json
+++ b/parts.json
@ -13,7 +13,7 @@
 			{"name": "devil", "url": "/parts/eyes_devil.png"},
 			{"name": "drowsy", "url": "/parts/eyes_drowsy.png"},
 			{"name": "evil", "url": "/parts/eyes_evil.png"},
-			{"name": ">_<", "url": "/parts/eyes_><.png"},
+			{"name": ">_<", "url": "/parts/eyes_squint.png"},
 			{"name": "cry", "url": "/parts/eyes_cry.png"},
 			{"name": "owo", "url": "/parts/eyes_owo.png"},
 			{"name": "sad", "url": "/parts/eyes_sad.png"},
@ -56,6 +56,7 @@
 			{"name": "neocat_mask","url": "/parts/neocat_mask.png", "color": "yellow"},
 			{"name": "neoredpanda","url": "/parts/neoredpanda.png", "color": "orange"},
 			{"name": "neopossum","url": "/parts/neopossum.png", "color": "lightgrey"},
+			{"name": "neopossum_floof","url": "/parts/neopossum_floof.png", "color": "lightgrey"},
 			{"name": "neopossum_angel","url": "/parts/neopossum_angel.png", "color": "lightgrey"},
 			{"name": "neopossum_foxmask","url": "/parts/neopossum_foxmask.png", "color": "lightgrey"},
 			{"name": "neopossum_catmask","url": "/parts/neopossum_catmask.png", "color": "lightgrey"},
@ -65,6 +66,16 @@
 			{"name": "neopossum_rainbow","url": "/parts/neopossum_rainbow.png", "color": "lightgrey"},
 			{"name": "neorat","url": "/parts/neorat.png", "color": "white"},
 			{"name": "neorat_frozen","url": "/parts/neorat_frozen.png", "color": "blue"},
+			{"name": "neobread","url": "/parts/neobread.png", "color": "lightbrown"},
+			{"name": "neobread_ace","url": "/parts/neobread_ace.png", "color": "lightbrown"},
+			{"name": "neobread_agender","url": "/parts/neobread_agender.png", "color": "lightbrown"},
+			{"name": "neobread_aro","url": "/parts/neobread_aro.png", "color": "lightbrown"},
+			{"name": "neobread_bi","url": "/parts/neobread_bi.png", "color": "lightbrown"},
+			{"name": "neobread_lesbian","url": "/parts/neobread_lesbian.png", "color": "lightbrown"},
+			{"name": "neobread_nb","url": "/parts/neobread_nb.png", "color": "lightbrown"},
+			{"name": "neobread_pan","url": "/parts/neobread_pan.png", "color": "lightbrown"},
+			{"name": "neobread_rainbow","url": "/parts/neobread_rainbow.png", "color": "lightbrown"},
+			{"name": "neobread_trans","url": "/parts/neobread_trans.png", "color": "lightbrown"},
 			{"name": "neofox","url": "/parts/neofox.png", "color": "orange"}
 		],
 		"mouth": [
@ -91,6 +102,7 @@
 			{"name": "nom_verified","url": "/parts/mouth_nom_verified.png"},
 			{"name": "nom_waffle","url": "/parts/mouth_nom_waffle.png"},
 			{"name": "hissing","url": "/parts/mouth_hissing.png"},
+			{"name": "woozy","url": "/parts/mouth_woozy.png"},
 			{"name": "blank", "url": "/parts/blank.png"}
 		],
 		"arms": [
@ -280,6 +292,37 @@
 			{"name": "book","url": "/parts/arms_book_yellow.png", "color": "yellow"},
 			{"name": "hold_burger","url": "/parts/arms_hold_burger_yellow.png", "color": "yellow"},
 			{"name": "hungry","url": "/parts/arms_hungry_yellow.png", "color": "yellow"},
+			{"name": "hide","url": "/parts/arms_hide_lightbrown.png", "color": "lightbrown"},
+			{"name": "aww","url": "/parts/arms_aww_lightbrown.png", "color": "lightbrown"},
+			{"name": "pleading","url": "/parts/arms_pleading_lightbrown.png", "color": "lightbrown"},
+			{"name": "reach","url": "/parts/arms_reach_lightbrown.png", "color": "lightbrown"},
+			{"name": "3c","url": "/parts/arms_3c_lightbrown.png", "color": "lightbrown"},
+			{"name": "facepalm","url": "/parts/arms_facepalm_lightbrown.png", "color": "lightbrown"},
+			{"name": "mug","url": "/parts/arms_mug_lightbrown.png", "color": "lightbrown"},
+			{"name": "knife","url": "/parts/arms_knife_lightbrown.png", "color": "lightbrown"},
+			{"name": "phone","url": "/parts/arms_phone_lightbrown.png", "color": "lightbrown"},
+			{"name": "fingerguns","url": "/parts/arms_fingerguns_lightbrown.png", "color": "lightbrown"},
+			{"name": "science","url": "/parts/arms_science_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_no","url": "/parts/arms_sign_no_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_aaa","url": "/parts/arms_sign_aaa_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_nya","url": "/parts/arms_sign_nya_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_thx","url": "/parts/arms_sign_thx_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_yes","url": "/parts/arms_sign_yes_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_yip","url": "/parts/arms_sign_yip_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_boobs","url": "/parts/arms_sign_boobs_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_butts","url": "/parts/arms_sign_butts_lightbrown.png", "color": "lightbrown"},
+			{"name": "sign_heart","url": "/parts/arms_heart_lightbrown.png", "color": "lightbrown"},
+			{"name": "solder","url": "/parts/arms_solder_lightbrown.png", "color": "lightbrown"},
+			{"name": "redlos","url": "/parts/arms_redlos_lightbrown.png", "color": "lightbrown"},
+			{"name": "think","url": "/parts/arms_think_lightbrown.png", "color": "lightbrown"},
+			{"name": "sweat","url": "/parts/arms_sweat_lightbrown.png", "color": "lightbrown"},
+			{"name": "verified","url": "/parts/arms_verified_lightbrown.png", "color": "lightbrown"},
+			{"name": "shocked","url": "/parts/arms_shocked_lightbrown.png", "color": "lightbrown"},
+			{"name": "thumbsdown","url": "/parts/arms_thumbsdown_lightbrown.png", "color": "lightbrown"},
+			{"name": "thumbsup","url": "/parts/arms_thumbsup_lightbrown.png", "color": "lightbrown"},
+			{"name": "book","url": "/parts/arms_book_lightbrown.png", "color": "lightbrown"},
+			{"name": "hold_burger","url": "/parts/arms_hold_burger_lightbrown.png", "color": "lightbrown"},
+			{"name": "hungry","url": "/parts/arms_hungry_lightbrown.png", "color": "lightbrown"},
 			{"name": "boop","url": "/parts/arms_boop.png", "color": ""},
 			{"name": "sip","url": "/parts/arms_sip.png", "color": ""},
 			{"name": "blank", "url": "/parts/blank.png", "color": ""}
--- a/parts/arms_3c_lightbrown.png
+++ b/parts/arms_3c_lightbrown.png
--- a/parts/arms_aww_lightbrown.png
+++ b/parts/arms_aww_lightbrown.png
--- a/parts/arms_book_lightbrown.png
+++ b/parts/arms_book_lightbrown.png
--- a/parts/arms_facepalm_lightbrown.png
+++ b/parts/arms_facepalm_lightbrown.png
--- a/parts/arms_fingerguns_lightbrown.png
+++ b/parts/arms_fingerguns_lightbrown.png
--- a/parts/arms_heart_lightbrown.png
+++ b/parts/arms_heart_lightbrown.png
--- a/parts/arms_hide_lightbrown.png
+++ b/parts/arms_hide_lightbrown.png
--- a/parts/arms_hold_burger_lightbrown.png
+++ b/parts/arms_hold_burger_lightbrown.png
--- a/parts/arms_hungry_lightbrown.png
+++ b/parts/arms_hungry_lightbrown.png
--- a/parts/arms_knife_lightbrown.png
+++ b/parts/arms_knife_lightbrown.png
--- a/parts/arms_mug_lightbrown.png
+++ b/parts/arms_mug_lightbrown.png
--- a/parts/arms_phone_lightbrown.png
+++ b/parts/arms_phone_lightbrown.png
--- a/parts/arms_pleading_lightbrown.png
+++ b/parts/arms_pleading_lightbrown.png
--- a/parts/arms_reach_lightbrown.png
+++ b/parts/arms_reach_lightbrown.png
--- a/parts/arms_redlos_lightbrown.png
+++ b/parts/arms_redlos_lightbrown.png
--- a/parts/arms_science_lightbrown.png
+++ b/parts/arms_science_lightbrown.png
--- a/parts/arms_shocked_lightbrown.png
+++ b/parts/arms_shocked_lightbrown.png
--- a/parts/arms_sign_aaa_lightbrown.png
+++ b/parts/arms_sign_aaa_lightbrown.png
--- a/parts/arms_sign_boobs_lightbrown.png
+++ b/parts/arms_sign_boobs_lightbrown.png
--- a/parts/arms_sign_butts_lightbrown.png
+++ b/parts/arms_sign_butts_lightbrown.png
--- a/parts/arms_sign_no_lightbrown.png
+++ b/parts/arms_sign_no_lightbrown.png
--- a/parts/arms_sign_nya_lightbrown.png
+++ b/parts/arms_sign_nya_lightbrown.png
--- a/parts/arms_sign_thx_lightbrown.png
+++ b/parts/arms_sign_thx_lightbrown.png
--- a/parts/arms_sign_yes_lightbrown.png
+++ b/parts/arms_sign_yes_lightbrown.png
--- a/parts/arms_sign_yip_lightbrown.png
+++ b/parts/arms_sign_yip_lightbrown.png
--- a/parts/arms_solder_lightbrown.png
+++ b/parts/arms_solder_lightbrown.png
--- a/parts/arms_sweat_lightbrown.png
+++ b/parts/arms_sweat_lightbrown.png
--- a/parts/arms_think_lightbrown.png
+++ b/parts/arms_think_lightbrown.png
--- a/parts/arms_thumbsdown_lightbrown.png
+++ b/parts/arms_thumbsdown_lightbrown.png
--- a/parts/arms_thumbsup_lightbrown.png
+++ b/parts/arms_thumbsup_lightbrown.png
--- a/parts/arms_verified_lightbrown.png
+++ b/parts/arms_verified_lightbrown.png
--- a/parts/eyes_glasses.png
+++ b/parts/eyes_glasses.png
--- a/parts/eyes_squint.png
+++ b/parts/eyes_squint.png
--- a/parts/mouth_woozy.png
+++ b/parts/mouth_woozy.png
--- a/parts/neobread.png
+++ b/parts/neobread.png
--- a/parts/neobread_ace.png
+++ b/parts/neobread_ace.png
--- a/parts/neobread_agender.png
+++ b/parts/neobread_agender.png
--- a/parts/neobread_aro.png
+++ b/parts/neobread_aro.png
--- a/parts/neobread_bi.png
+++ b/parts/neobread_bi.png
--- a/parts/neobread_lesbian.png
+++ b/parts/neobread_lesbian.png
--- a/parts/neobread_nb.png
+++ b/parts/neobread_nb.png
--- a/parts/neobread_pan.png
+++ b/parts/neobread_pan.png
--- a/parts/neobread_rainbow.png
+++ b/parts/neobread_rainbow.png
--- a/parts/neobread_trans.png
+++ b/parts/neobread_trans.png
--- a/parts/neopossum_floof.png
+++ b/parts/neopossum_floof.png
Author	SHA1	Message	Date
Vftdan	9d6f01a5e6	Merge remote-tracking branch 'origin/main' into export-options	2024-04-24 20:57:06 +02:00
ente	477e2adb31	added Johann150 to the thank you section in README.md	2024-04-24 20:12:56 +02:00
fotoente	a7e4ce76d1	Merge pull request 'add direct link ability' (#12 ) from Johann150/neomojimixer:main into main Reviewed-on: https://codeberg.org/fotoente/neomojimixer/pulls/12	2024-04-24 18:07:19 +00:00
fotoente	26a17cd4b4	Merge branch 'main' into main	2024-04-24 18:07:01 +00:00
Vftdan	9631a7a61a	Added a download link with filename for exported images	2024-04-24 15:48:20 +02:00
Vftdan	16606663e9	Added export format & quality options	2024-04-24 15:43:56 +02:00
Johann150	90d156e3f2	output direct link for export	2024-04-23 23:31:35 +02:00
Johann150	2bd7ec3818	direct link ability This allows to link directly to one variant of an emoji by using the URL fragment, which will in turn be selected from the available boxes.	2024-04-23 23:31:33 +02:00
Johann150	4cc1f0d7ca	fix spacing	2024-04-23 23:31:13 +02:00
Johann150	709d211297	rename eye part image file This totally isnt because Windows can't handle this file name and because this is annoying when using a shell which interprets the less and greater than signs as input/output redirection.	2024-04-23 23:30:18 +02:00
ente	f2382a3d00	Added neobread emojis & links to olivybee	2024-04-23 22:45:48 +02:00
ente	3c75ccb346	added neopossum floof	2024-04-23 21:20:54 +02:00
ente	0db1f26874	added mouth_woozy.png	2024-04-23 21:12:46 +02:00
ente	6ed1d5df2b	removed background colour in glasses	2024-04-23 20:53:40 +02:00
ente	bbe8fdc753	added thanks to vft dan in README.md	2024-04-23 20:46:25 +02:00
fotoente	d202a4f150	Merge pull request 'dev' (#11 ) from dev into main Reviewed-on: https://codeberg.org/fotoente/neomojimixer/pulls/11	2024-04-23 18:36:14 +00:00
fotoente	1b58a70546	Merge pull request 'Show parts names in dropdown menu' (#9 ) from vftdan/neomojimixer:part-dropdown into dev Reviewed-on: https://codeberg.org/fotoente/neomojimixer/pulls/9	2024-04-23 07:31:53 +00:00
Vftdan	d3033b8912	Use `<select>` instead of `<span>` to show parts' name Users can now select an item from dropdown menus	2024-04-23 08:48:38 +02:00
Vftdan	ed6a9097ee	Refactored by moving common logic into PartHandler classes	2024-04-23 04:25:13 +02:00
Vftdan	8858549de3	Moved everything under NeomojiMixer namespace	2024-04-23 01:44:31 +02:00
Vftdan	dfc0870fc1	Fixed some inconsistent whitespaces	2024-04-23 01:02:02 +02:00