simple tab list

Author: michaljaz

src/html/index.html

@@ -41,6 +41,16 @@ <h1 class="loadingText">Loading assets...</h1>
 		<!-- Inventory window -->
 		<div class="inv_window"></div>
 
+		<!-- Tab List -->
+		<div class="tab_list text-light">
+			<div class="tab_player clearfix">
+				<span class="float-left">xd</span>
+				<span class="float-right">OK</span>
+			</div>
+			<div class="tab_player">lol</div>
+			<div class="tab_player">xd</div>
+		</div>
+
 		<!-- MENU -->
 		<div class="gameMenu">	
 			<div class="w-100 text-center p-3 gameMenuX">

src/scripts/EventHandler.js

@@ -43,6 +43,10 @@ class EventHandler {
           focus = i - 1
         }
       }
+      if (z.code === 'Tab' && this.gameState === 'gameLock') {
+        $('.tab_list').show()
+        z.preventDefault()
+      }
       if (z.code === 'KeyQ') {
         this.game.socket.emit('drop')
       }
@@ -124,6 +128,9 @@ class EventHandler {
     })
     $(document).on('keyup', (z) => {
       delete this.keys[z.code]
+      if (z.code === 'Tab') {
+        $('.tab_list').hide()
+      }
       if (this.controls[z.code] !== undefined) {
         this.game.socket.emit('move', this.controls[z.code], false)
         const to = {

src/scripts/Setup.js

@@ -14,6 +14,7 @@ import { BlockBreak } from './rendering/BlockBreak.js'
 import { BlockPlace } from './rendering/BlockPlace.js'
 import { EventHandler } from './EventHandler.js'
 import { Socket } from './proxy/Socket.js'
+import { TabList } from './gui/TabList.js'
 import $ from 'jquery'
 
 async function Setup (game) {
@@ -51,6 +52,7 @@ async function Setup (game) {
       game.ent = new Entities(game)
       game.chat = new Chat(game)
       game.inv_bar = new InventoryBar(game)
+      game.tl = new TabList(game)
       game.distanceBasedFog.addShaderToMaterial(game.world.material)
       game.distanceBasedFog.addShaderToMaterial(game.ent.mobMaterial)
       game.distanceBasedFog.addShaderToMaterial(game.ent.playerMaterial)

src/scripts/gui/TabList.js

@@ -0,0 +1,26 @@
+import $ from 'jquery'
+
+class TabList {
+  constructor (game) {
+  	this.game = game
+  	this.lastHTML
+  }
+
+  update (players) {
+  	let newHTML = ''
+  	if (players !== undefined && JSON.stringify(players) !== '{}') {
+  		for (const i in players) {
+  			newHTML += `<div class="tab_player clearfix">
+				<span class="float-left">${i}</span>
+				<span class="float-right">${players[i].ping}ms</span>
+			</div>`
+  		}
+  		if (newHTML != this.lastHTML) {
+  			// console.log(players)
+  			this.lastHTML = newHTML
+  			$('.tab_list').html(this.lastHTML)
+  		}
+  	}
+  }
+}
+export { TabList }

src/scripts/index.js

@@ -50,6 +50,9 @@ class Game {
       this.camera.rotation.y = yaw
       this.camera.rotation.x = pitch
     })
+    this.socket.on('players', (players) => {
+      this.tl.update(players)
+    })
     this.socket.on('dimension', (dim) => {
       this.dimension = dim
       console.log(`Player dimension has been changed: ${dim}`)

src/scripts/proxy/Proxy.worker.js

@@ -93,6 +93,7 @@ addEventListener('message', function (e) {
         emit('game', bot.game)
       })
       setInterval(function () {
+        emit('players', bot.players)
         if (bot.inventory !== undefined) {
           const invNew = JSON.stringify(bot.inventory.slots)
           if (inv !== invNew) {

src/styles/style.scss

@@ -5,6 +5,21 @@
     src: url(../assets/fonts/MinecraftRegular-Bmg3.otf);
 }
 
+.tab_player{
+    padding:3px;
+}
+
+.tab_list{
+    display:none;
+    position:fixed;
+    top:20px;
+    left:50%;
+    width:300px;
+    margin-left:-150px;
+    border:1px solid black;
+    background:rgba(0,0,0,0.5);
+}
+
 .dg.ac {
     z-index: 98;
 }