From d3033b89129770971c5ee559e303a8d7fd494270 Mon Sep 17 00:00:00 2001
From: Vftdan <vftdan@gmail.com>
Date: Tue, 23 Apr 2024 08:48:38 +0200
Subject: [PATCH] Use `<select>` instead of `<span>` to show parts' name

Users can now select an item from dropdown menus
---
 index.html       |  8 ++++----
 neomojimixer.css |  2 +-
 neomojimixer.js  | 26 +++++++++++++++++++++++++-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index ed2d43e..ce7eaa7 100644
--- a/index.html
+++ b/index.html
@@ -18,10 +18,10 @@
 			<img class="arms" id="arms_img" src="" />
 		</div>
 		<div id="controls">
-			<div class="body"><button id="body_left" onclick="NeomojiMixer.part_handlers.body.onClickPrev();" disabled><</button><span class="name" id="body_name">name body</span><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><span class="name" id="eyes_name">name eyes</span><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><span class="name" id="mouth_name">name mouth</span><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><span class="name" id="arms_name">name arms</span><button id="arms_right" onclick="NeomojiMixer.part_handlers.arms.onClickNext();" disabled>></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></div>
 		</div>
diff --git a/neomojimixer.css b/neomojimixer.css
index df5a90d..39862d5 100644
--- a/neomojimixer.css
+++ b/neomojimixer.css
@@ -47,7 +47,7 @@ button#export {
 	width: 250px;
 }
 
-span.name {
+#controls > div > .name {
 	display: inline-block;
 	width: 200px;
 	text-align: center;
diff --git a/neomojimixer.js b/neomojimixer.js
index 680e512..6a50a50 100644
--- a/neomojimixer.js
+++ b/neomojimixer.js
@@ -70,7 +70,9 @@ const NeomojiMixer = (function(NeomojiMixer) {
 		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
+			//Change name in controls
+			this.updateOptions();
+			this.name_element.selectedIndex = this.selected_index;
 		},
 		onClickNext: function() {
 			this.setIndex(this.selected_index + 1);
@@ -78,9 +80,13 @@ const NeomojiMixer = (function(NeomojiMixer) {
 		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));
@@ -91,6 +97,24 @@ const NeomojiMixer = (function(NeomojiMixer) {
 			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) {