Add experience Bar and number

Author: michaljaz

coffee/client/module/InventoryBar.coffee

@@ -5,7 +5,7 @@ class InventoryBar
 		@padding=options.padding
 		@boxes=9
 		@activeBox=1
-		document.querySelector(@div).style="position:fixed;bottom:30px;left:50%;width:#{(@boxSize+2)*@boxes}px;margin-left:-#{@boxSize*@boxes/2}px;height:#{@boxSize}px;"
+		document.querySelector(@div).style="position:fixed;bottom:50px;left:50%;width:#{(@boxSize+2)*@boxes}px;margin-left:-#{@boxSize*@boxes/2}px;height:#{@boxSize}px;"
 	setBox: (number,imageSrc)->
 		if imageSrc is null
 			imageSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="

coffee/client/module/index.coffee

@@ -75,6 +75,9 @@ init = ()->
 		inv_bar.setHp(points)
 	socket.on "food",(points)->
 		inv_bar.setFood(points)
+	socket.on "xp",(xp)->
+		$(".player_xp").text(xp.level)
+		$(".progress-bar").css("width",xp.progress*100+"%")
 	socket.on "move", (pos)->
 		to={x:pos.x-0.5,y:pos.y+17,z:pos.z-0.5}
 		new TWEEN.Tween camera.position

coffee/server.coffee

@@ -60,6 +60,10 @@ module.exports=(config)->
 					io.to(socket.id).emit "hp",socketInfo[socket.id].bot.health
 					io.to(socket.id).emit "food",socketInfo[socket.id].bot.food
 				return
+			socketInfo[socket.id].bot.on 'experience',()->
+				try
+					io.to(socket.id).emit "xp",socketInfo[socket.id].bot.experience
+				return
 			socketInfo[socket.id].bot.on 'blockUpdate',(oldb,newb)->
 				io.to(socket.id).emit "blockUpdate",[newb.position.x,newb.position.y,newb.position.z,newb.stateId]
 				return

src/client/cdn/css/main.css

@@ -85,3 +85,29 @@ canvas {
 .player_health{
   margin-bottom:5px;
 }
+.progress{
+  margin:5px;
+  margin-right:20px;
+  margin-left:-3px;
+  background:#122a08;
+  border:1px solid black;
+}
+.progress-bar{
+  background:#487329;
+}
+.player_xp{
+  position:fixed;
+  transform: translateX(-50%);
+  left:50%;
+  bottom:70px;
+  -webkit-text-stroke: 1px black;
+   color: #259c45;
+   text-shadow:
+       3px 3px 0 #000,
+     -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+       1px 1px 0 #000;
+  font-size:20px;
+  font-weight:bold;
+}

src/client/index.html

@@ -17,7 +17,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.0/css/mdb.min.css">
     <link rel="stylesheet" href="/cdn/css/main.css">
 
-
     <!-- JS -->
     <script type="text/javascript" src="/cdn/js/tween.umd.js"></script>
     <script type="text/javascript" src="/cdn/js/jq.js"></script>
@@ -63,6 +62,11 @@ <h1 class="loadingText">Ładowanie zasobów...</h1>
             <img class='hp hp_10'>
           </span>
 
+          <!-- PLAYER XP -->
+          <span class="player_xp">
+            1
+          </span>
+
           <!-- PLAYER FOOD -->
           <span class="player_food">
             <img class='food food_10'>
@@ -78,6 +82,11 @@ <h1 class="loadingText">Ładowanie zasobów...</h1>
           </span>
         </div>
 
+        <!--EXPERIENCE BAR -->
+        <div class="progress">
+          <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+        </div>
+
         <!-- PLAYER ITEMS -->
         <div class="player_items">
           <img class='inv_box inv_box_1'>