editable server ip and port in url param

Author: michaljaz

README.md

@@ -3,7 +3,6 @@
 [![Join the chat at https://gitter.im/web-minecraft/community](https://badges.gitter.im/web-minecraft/community.svg)](https://gitter.im/web-minecraft/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Discord](https://img.shields.io/badge/chat-on%20discord-brightgreen.svg)](https://discord.gg/h6DQzDx2G7)
 
-
 ## About
 
 **Web-minecraft is minecraft client written in Javascript.** From web browser this client connects to node.js server and then to real minecraft server, so you can play minecraft in the browser.
@@ -18,19 +17,16 @@ git clone https://github.com/michaljaz/web-minecraft
 cd web-minecraft
 npm i
 
-``` 
-</details>
-
-
+```
 
+</details>
 
 <details>
 <summary>Minecraft server setup</summary>
-To run this game you need to start real minecraft server (by default it is 1.16.5 offline mode java edition on ip localhost:25565) you can also define it in */src/server.json* file.
+To run this game you need to start real minecraft server (by default it is 1.16.5 offline mode java edition on ip localhost:25565).
 
 </details>
 
-
 <details>
 <summary>Linting</summary>
 
@@ -53,6 +49,7 @@ npm run lint:fix
 npm run dev
 
 ```
+
 </details>
 <details>
 <summary>Production setup</summary>
@@ -71,10 +68,8 @@ npm start
 
 </details>
 
-
-
-
 ## Screenshots
+
 [<img src="https://i.ibb.co/bPh99MV/hypixel.png" alt="screen6" width="100%">](https://i.ibb.co/bPh99MV/hypixel.png)
 [<img src="https://i.ibb.co/jzZVrT2/Screenshot-from-2021-01-27-21-13-37.png" alt="screen6" width="100%">](https://i.ibb.co/jzZVrT2/Screenshot-from-2021-01-27-21-13-37.png)
 [<img src="https://i.ibb.co/tKmnJ8D/Screenshot-from-2021-01-27-21-16-12.png" alt="screen6" width="100%">](https://i.ibb.co/tKmnJ8D/Screenshot-from-2021-01-27-21-16-12.png)

package-lock.json

@@ -21,6 +21,7 @@
         "compression": "^1.7.4",
         "dat.gui": "^0.7.7",
         "express": "^4.17.1",
+        "express-ws": "^4.0.0",
         "extract-zip": "^2.0.1",
         "helmet": "^4.4.1",
         "html-webpack-plugin": "^4.5.1",
@@ -44,7 +45,8 @@
         "webpack-dev-server": "^3.11.1",
         "webpack-merge": "^5.7.3",
         "webpackbar": "^5.0.0-3",
-        "worker-loader": "^3.0.7"
+        "worker-loader": "^3.0.7",
+        "ws": "^7.4.3"
     },
     "devDependencies": {
         "autoprefixer": "^9.0.0",

package.json

@@ -4,7 +4,7 @@ import Stats from "stats-js";
 import * as dat from "dat.gui";
 import io from "socket.io-client";
 import { DistanceBasedFog } from "./DistanceBasedFog.js";
-import { RandomNick } from "./RandomNick.js";
+import { UrlParams } from "./UrlParams.js";
 import { gpuInfo } from "./gpuInfo.js";
 import { World } from "./World/World.js";
 import { InventoryBar } from "./InventoryBar.js";
@@ -35,11 +35,13 @@ function Setup(game) {
     game.stats.showPanel(0);
     document.body.appendChild(game.stats.dom);
     game.distanceBasedFog = new DistanceBasedFog(game);
-    RandomNick(game);
+    UrlParams(game);
     console.warn(gpuInfo());
     game.socket = io({
         query: {
             nick: game.nick,
+            server: game.server,
+            port: game.serverPort,
         },
     });
     game.pii = new PlayerInInventory(game);

src/client/scripts/Setup.js

@@ -1,4 +1,4 @@
-var RandomNick = function (game) {
+var UrlParams = function (game) {
     var nameList = [
         "Time",
         "Past",
@@ -176,14 +176,26 @@ var RandomNick = function (game) {
     var finalName = "";
     finalName = nameList[Math.floor(Math.random() * nameList.length)];
     finalName += nameList[Math.floor(Math.random() * nameList.length)];
-    game.nick = document.location.hash.substring(
-        1,
-        document.location.hash.length
-    );
-    if (game.nick === "") {
+
+    game.nick = new URL(document.location).searchParams.get("nick");
+    game.server = new URL(document.location).searchParams.get("server");
+    game.serverPort = new URL(document.location).searchParams.get("port");
+    var reload = false;
+    if (game.nick === "" || game.nick === null) {
+        reload = true;
         game.nick = finalName;
-        document.location.href = `#${game.nick}`;
+    }
+    if (game.server === "" || game.server === null) {
+        reload = true;
+        game.server = "localhost";
+    }
+    if (game.serverPort === "" || game.serverPort === null) {
+        reload = true;
+        game.serverPort = "25565";
+    }
+    if (reload) {
+        document.location.href = `?server=${game.server}&port=${game.serverPort}&nick=${game.nick}`;
     }
 };
 
-export { RandomNick };
+export { UrlParams };

src/client/scripts/RandomNick.js src/client/scripts/UrlParams.jssrc/client/scripts/RandomNick.js renamed to src/client/scripts/UrlParams.js

@@ -40,6 +40,7 @@ class Game {
             console.log("Connected to server!");
             $(".loadingText").text("Joining server...");
             console.log(`User nick: ${this.nick}`);
+            console.log(`Server ip: ${this.server}:${this.serverPort}`);
             this.socket.emit("initClient", {
                 nick: this.nick,
             });

src/client/scripts/index.js

@@ -1,12 +1,11 @@
+var version = "1.16.5";
 var opn = require("open");
-var fs = require("fs");
-var config = JSON.parse(fs.readFileSync(`${__dirname}/properties.json`));
 var express = require("express");
 var app = express();
 var server = require("http").createServer(app);
 var io = require("socket.io")(server);
 var mineflayer = require("mineflayer");
-var Chunk = require("prismarine-chunk")(config.version);
+var Chunk = require("prismarine-chunk")(version);
 var vec3 = require("vec3");
 var Convert = require("ansi-to-html");
 var convert = new Convert();
@@ -42,10 +41,10 @@ io.sockets.on("connection", function (socket) {
     console.log(`[\x1b[32m+\x1b[0m] ${query.nick}`);
     var heldItem = null;
     var bot = mineflayer.createBot({
-        host: config.ip,
-        port: config.port,
+        host: query.server,
+        port: query.port,
         username: query.nick,
-        version: config.version,
+        version: version,
     });
     botByNick[query.nick] = bot;
     bot._client.on("map_chunk", function (packet) {

src/index.js

@@ -1,6 +1,6 @@
+var version = "1.16.5";
 var fs = require("fs");
-var config = require("./properties.json");
-var pBlock = require("prismarine-block")(config.version);
+var pBlock = require("prismarine-block")(version);
 var atlasCreator = require("./atlasCreator");
 
 new atlasCreator({