From 8d2bf437642ff052d681d5584eefcd1febf1bea8 Mon Sep 17 00:00:00 2001
From: Misode <Misoloo64@gmail.com>
Date: Sun, 8 Nov 2020 12:54:34 +0100
Subject: [PATCH] Render choice nodes as a dropdown

---
 package-lock.json           | 22 +++++++++++-----------
 package.json                |  6 +++---
 src/app/hooks/renderHtml.ts | 20 ++++++++++----------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 20677bfc..84e95fcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,24 +5,24 @@
   "requires": true,
   "dependencies": {
     "@mcschema/core": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.11.1.tgz",
-      "integrity": "sha512-WSPS8Ht7/ugv0grAF1UWIIzdQ8OQzSpscby6U/BSip7Wgos0ITnX79fQpq7iIlbkIf6VfdTlM1yO4VRMks8D0g=="
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.11.2.tgz",
+      "integrity": "sha512-Y5jKXDesEkwwM/USwSQFoNaokAfZZDopb2bjIz77RppSFsa4f7zJuHPn+A+Wohn4ZZAmizkXx7P6slUj4rvc6Q=="
     },
     "@mcschema/java-1.16": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.13.tgz",
-      "integrity": "sha512-wANhbztNSnvHWkqpRq3xZaqazT2AkA8UlOYHFtvP+8LA3IbKyQ7YmUH0J+OGMZ/FnFrrLbdFZhBSFZwy/vIGww==",
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.14.tgz",
+      "integrity": "sha512-k9V9SN6+fkSaWIqGNpGS9CHfeaNDqPsApzm8+tOc1Azw0sBIIaa1XEDEuzHgFmx//O5L8RD6eC/3EPZG9udfbA==",
       "requires": {
-        "@mcschema/core": "^0.11.1"
+        "@mcschema/core": "^0.11.2"
       }
     },
     "@mcschema/java-1.17": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@mcschema/java-1.17/-/java-1.17-0.1.2.tgz",
-      "integrity": "sha512-LMT6QVpTypceZJmPM/Ceuit6NFa7HxSh5tvWXQAM3cAUv5zQ7WTKe6/BeRCLEnp3a80t46umEr1NzS82S8HUZg==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@mcschema/java-1.17/-/java-1.17-0.1.3.tgz",
+      "integrity": "sha512-YQ0zxBAS2MFk6YWOTYip2/eZo/WXHBWxh/CuZEyibYoRMqEwryj0IR71d5Q/mgFZlhm4S8MI05ucuwfRk+X27A==",
       "requires": {
-        "@mcschema/core": "^0.11.1"
+        "@mcschema/core": "^0.11.2"
       }
     },
     "@mcschema/locales": {
diff --git a/package.json b/package.json
index 4004ed07..549bf551 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,9 @@
   "author": "Misode",
   "license": "MIT",
   "dependencies": {
-    "@mcschema/core": "^0.11.1",
-    "@mcschema/java-1.16": "^0.5.13",
-    "@mcschema/java-1.17": "^0.1.2",
+    "@mcschema/core": "^0.11.2",
+    "@mcschema/java-1.16": "^0.5.14",
+    "@mcschema/java-1.17": "^0.1.3",
     "@mcschema/locales": "^0.1.11",
     "@types/google.analytics": "0.0.40",
     "@types/split.js": "^1.4.0",
diff --git a/src/app/hooks/renderHtml.ts b/src/app/hooks/renderHtml.ts
index 5fb2424c..82bca8c1 100644
--- a/src/app/hooks/renderHtml.ts
+++ b/src/app/hooks/renderHtml.ts
@@ -38,19 +38,19 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
     const pathWithContext = (config?.context) ?
       new ModelPath(path.getModel(), new Path(path.getArray(), [config.context])) : path
     const pathWithChoiceContext = config?.choiceContext ? new Path([], [config.choiceContext]) : config?.context ? new Path([], [config.context]) : path
-    const inject = choices.map(c => {
-      if (c.type === choice.type) {
-        return `<button class="selected" disabled>
-          ${htmlEncode(pathLocale(pathWithChoiceContext.push(c.type)))}
-        </button>`
-      }
-      const buttonId = mounter.registerClick(el => {
+
+    const inputId = mounter.register(el => {
+      (el as HTMLSelectElement).value = choice.type
+      el.addEventListener('change', () => {
+        const c = choices.find(c => c.type === (el as HTMLSelectElement).value) ?? choice
         path.model.set(path, c.change ? c.change(value) : c.node.default())
       })
-      return `<button data-id="${buttonId}">
+    })
+    const inject = `<select data-id="${inputId}">
+      ${choices.map(c => `<option value="${htmlEncode(c.type)}">
         ${htmlEncode(pathLocale(pathWithChoiceContext.push(c.type)))}
-      </button>`
-    }).join('')
+      </option>`).join('')}
+    </select>`
 
     const [prefix, suffix, body] = choice.node.hook(this, pathWithContext, value, mounter)
     return [prefix, inject + suffix, body]