added bot version text field, guiScale for small screens and removed unused images (#260)

* added readme pt-pt

* added url/querystring deps and fix chat pos/scale

url and querystring were missing in node_modules.
chat scale option wasn't implemented and chat input was on top instead of bottom.

* added bot version text field and guiScale for small screens

text field to choose bot version. gui scale changes on small screens (slider takes no effect then). Removed unused images.

* Update index.js

Co-authored-by: Romain Beaumont <romain.rom1@gmail.com>

README_PT.md

@@ -9,7 +9,7 @@
 
 Um cliente de Minecraft a funcionar numa página web. **Demostração em https://webclient.prismarine.js.org/**
 
-## Como functiona
+## Como funciona
 prismarine-web-client executa mineflayer e prismarine-viewer no teu navegador, que se conecta por WebSocket a uma proxy 
 que traduz o conexão do WebSocket em TCP para poderes conectar-te a servidores normais do Minecraft. Prismarine-web-client é basiado em:
 * [prismarine-viewer](https://github.com/PrismarineJS/prismarine-viewer) para renderizar o mundo

index.js

@@ -178,6 +178,7 @@ async function connect (options) {
   const bot = mineflayer.createBot({
     host,
     port,
+    version: options.botVersion === '' ? false : options.botVersion,
     username,
     password,
     viewDistance: 'tiny',

lib/menus/play_screen.js

@@ -37,6 +37,15 @@ class PlayScreen extends LitElement {
         transform: translate(-50%);
         width: 310px;
       }
+
+      .extra-info-bv {
+        font-size: 10px;
+        color: rgb(206, 206, 206);
+        text-shadow: 1px 1px black;
+        position: absolute;
+        left: calc(50% + 2px);
+        bottom: -34px;
+      }
     `
   }
 
@@ -47,7 +56,8 @@ class PlayScreen extends LitElement {
       proxy: { type: String },
       proxyport: { type: Number },
       username: { type: String },
-      password: { type: String }
+      password: { type: String },
+      version: { type: String }
     }
   }
 
@@ -59,6 +69,7 @@ class PlayScreen extends LitElement {
     this.proxyport = ''
     this.username = window.localStorage.getItem('username') ?? 'pviewer' + (Math.floor(Math.random() * 1000))
     this.password = ''
+    this.version = ''
 
     window.fetch('config.json').then(res => res.json()).then(config => {
       this.server = config.defaultHost
@@ -115,7 +126,15 @@ class PlayScreen extends LitElement {
             pmui-value="${this.username}"
             @input=${e => { this.username = e.target.value }}
           ></pmui-editbox>
+          <pmui-editbox
+            pmui-width="150px"
+            pmui-label="Bot Version"
+            pmui-id="botversion"
+            pmui-value="${this.version}"
+            @input=${e => { this.version = e.target.value }}
+          ></pmui-editbox>
         </div>
+        <p class="extra-info-bv">Leave blank and it will be chosen automatically</p>
       </main>
 
       <div class="button-wrapper">
@@ -133,7 +152,8 @@ class PlayScreen extends LitElement {
         server: `${this.server}:${this.serverport}`,
         proxy: `${this.proxy}${this.proxy !== '' ? `:${this.proxyport}` : ''}`,
         username: this.username,
-        password: this.password
+        password: this.password,
+        botVersion: this.version
       }
     }))
   }

styles.css

@@ -85,4 +85,20 @@ canvas {
   image-rendering: pixelated;
   -ms-interpolation-mode: nearest-neighbor;
   font-family: minecraft, mojangles, monospace;
+}
+
+@media only screen and (max-width: 971px) {
+  #ui-root {
+    transform: scale(2);
+    width: calc(100% / 2);
+    height: calc(100% / 2);
+  }
+}
+
+@media only screen and (max-width: 561px) {
+  #ui-root {
+    transform: scale(1);
+    width: calc(100% / 1);
+    height: calc(100% / 1);
+  }
 }