add autocomplete for versions & supported indicator (wip)

src/index.js

@@ -2,6 +2,9 @@
 /* global THREE */
 require('./chat')
 
+// workaround for mineflayer
+process.versions.node = '14.0.0'
+
 require('./menus/components/button')
 require('./menus/components/edit_box')
 require('./menus/components/slider')
@@ -64,9 +67,6 @@ _fs.promises.open = async (...args) => {
 const net = require('net')
 const Stats = require('stats.js')
 
-// workaround for mineflayer
-process.versions.node = '14.0.0'
-
 const mineflayer = require('mineflayer')
 const { WorldView, Viewer, MapControls } = require('prismarine-viewer/viewer')
 const PrismarineWorld = require('prismarine-world')

src/menus/components/edit_box.js

@@ -11,6 +11,22 @@ class EditBox extends LitElement {
         background: black;
         border: 1px solid grey;
       }
+      .edit-container.invalid {
+        border: 1px solid #c70000;
+      }
+
+      .edit-container.warning {
+        border: 1px solid rgb(159, 151, 0);
+      }
+
+      .edit-container.invalid:hover,
+      .edit-container.invalid:focus-within {
+        border-color: red;
+      }
+      .edit-container.warning:hover,
+      .edit-container.warning:focus-within {
+        border-color: yellow;
+      }
 
       .edit-container:hover,
       .edit-container:focus-within {
@@ -97,6 +113,10 @@ class EditBox extends LitElement {
       required: {
         type: Boolean,
         attribute: 'pmui-required'
+      },
+      state: {
+        type: String,
+        attribute: true
       }
     }
   }
@@ -104,7 +124,7 @@ class EditBox extends LitElement {
   render () {
     return html`
       <div
-        class="edit-container"
+        class="edit-container ${this.state ?? ''}"
         style="width: ${this.width};"
       >
         <label for="${this.id}">${this.label}</label>

src/menus/loading_or_error_screen.js

@@ -40,7 +40,7 @@ class LoadingErrorScreen extends LitElement {
   constructor () {
     super()
     this.hasError = false
-    this.maybeRecoverable = false
+    this.maybeRecoverable = true
     this.status = 'Waiting for JS load'
     this._loadingDots = ''
   }

src/menus/play_screen.js

@@ -1,6 +1,12 @@
 const { LitElement, html, css } = require('lit')
 const { commonCss } = require('./components/common')
 const { hideCurrentModal } = require('../globalState')
+const mcAssets = require("minecraft-assets")
+const data = require('minecraft-data')
+const mineflayer = require('mineflayer')
+
+const fullySupporedVersions = mcAssets.versions
+const partialSupportVersions = mineflayer.supportedVersions
 
 class PlayScreen extends LitElement {
   static get styles () {
@@ -76,6 +82,8 @@ class PlayScreen extends LitElement {
 
   constructor () {
     super()
+    this.version = ''
+    // todo set them sooner add indicator
     window.fetch('config.json').then(res => res.json()).then(c => c, (error) => {
       console.error('Failed to load config.json', error)
       return {}
@@ -167,6 +175,8 @@ class PlayScreen extends LitElement {
             pmui-id="botversion"
             pmui-value="${this.version}"
             pmui-inputmode="decimal"
+            state="${this.version && (fullySupporedVersions.includes(this.version) ? '' : /* TODO improve check: check exact including all */ partialSupportVersions.some(v => this.version.startsWith(v)) ? 'warning' : 'invalid')}"
+            .autocompleteValues=${mcAssets.versions}
             @input=${e => { this.version = e.target.value }}
           ></pmui-editbox>
         </div>