data-item and data-texture for Item class

Author: michaljaz

coffee/client/module/InventoryBar.coffee

@@ -6,7 +6,7 @@ class InventoryBar
 		for i in [0..9]
 			$(".player_food").append("<span class='food'></span> ")
 		for i in [1..9]
-			$(".inv_bar").append("<span class='inv_box'></span> ")
+			$(".inv_bar").append("<span class='inv_box item' data-texture=''></span> ")
 	setHp: (points)->
 		lista={}
 		for i in [1..10]
@@ -49,9 +49,11 @@ class InventoryBar
 	updateInv:(inv)->
 		for i in [36..44]
 			if inv[i] isnt null
-				$(".inv_box").eq(i-36).css("background-image","url(/assets/items/#{inv[i].name}.png)")
+				$(".inv_box").eq(i-36).attr("data-texture",inv[i].name)
+				$(".inv_box").eq(i-36).attr("data-amount",String(inv[i].count))
 			else
-				$(".inv_box").eq(i-36).css("background-image","")
+				$(".inv_box").eq(i-36).attr("data-texture","")
+				$(".inv_box").eq(i-36).attr("data-amount","0")
 		return
 	listen:()->
 		focus=0
@@ -64,4 +66,17 @@ class InventoryBar
 				focus--
 			focus=focus %% 9
 			_this.setFocus focus
+	tick:()->
+		#background-image:url('/assets/items/' attr(data-texture) '.png');
+		list = $(".item")
+		for i in [0..list.length-1]
+			if $(list[i]).attr('data-texture') is ""
+				url=""
+			else
+				url="'/assets/items/#{$(list[i]).attr('data-texture')}.png'"
+			$(list[i]).css("background-image","url(#{url})")
+			$(list[i]).html("<div style='z-index:99;text-align:right;position:relative;bottom:-22px;color:white;font-weight:bold;'>"+$(list[i]).attr('data-amount')+"</div>")
+			if $(list[i]).attr('data-amount') is "0" or $(list[i]).attr('data-amount') is "1"
+				$(list[i]).html("<div style='z-index:99;text-align:right;position:relative;bottom:-22px;color:white;font-weight:bold;'>&#8291</div>")
+
 export {InventoryBar}

coffee/client/module/World/chunk.worker.coffee

@@ -14,28 +14,12 @@ class TerrainManager
 		@blocksTex=options.blocksTex
 		console.log @blocksTex
 	genBlockFace: (type,block,pos)->
-		if @blocksTex[block.name] isnt undefined
-			if @blocksTex[block.name]["all"] isnt undefined
-				toxX=@blocksMapping[@blocksTex[block.name].all]["x"]
-				toxY=@blocksMapping[@blocksTex[block.name].all]["y"]
-			else if @blocksTex[block.name]["side"] isnt undefined
-				mapka={
-					"py":"top"
-					"ny":"bottom"
-				}
-				if mapka[type] isnt undefined
-					toxX=@blocksMapping[@blocksTex[block.name][mapka[type]]]["x"]
-					toxY=@blocksMapping[@blocksTex[block.name][mapka[type]]]["y"]
-				else
-					toxX=@blocksMapping[@blocksTex[block.name]["side"]]["x"]
-					toxY=@blocksMapping[@blocksTex[block.name]["side"]]["y"]
+		if @blocksTex[block.name] isnt undefined or @blocksTex[String(block.stateId)] isnt undefined
+			if @blocksTex[String(block.stateId)] isnt undefined
+				xd=@blocksTex[String(block.stateId)]
 			else
-				toxX=@blocksMapping[@blocksTex[block.name][type]]["x"]
-				toxY=@blocksMapping[@blocksTex[block.name][type]]["y"]
-		else if @blocksTex[String(block.stateId)] isnt undefined
-			xd=@blocksTex[String(block.stateId)]
+				xd=@blocksTex[block.name]
 			if xd["all"] isnt undefined
-				console.log "1"
 				toxX=@blocksMapping[xd.all]["x"]
 				toxY=@blocksMapping[xd.all]["y"]
 			else if xd["side"] isnt undefined
@@ -44,15 +28,12 @@ class TerrainManager
 					"ny":"bottom"
 				}
 				if mapka[type] isnt undefined
-					console.log "2"
 					toxX=@blocksMapping[xd[mapka[type]]]["x"]
 					toxY=@blocksMapping[xd[mapka[type]]]["y"]
 				else
-					console.log xd["side"]
 					toxX=@blocksMapping[xd["side"]]["x"]
 					toxY=@blocksMapping[xd["side"]]["y"]
 			else
-				console.log xd[type]
 				toxX=@blocksMapping[xd[type]]["x"]
 				toxY=@blocksMapping[xd[type]]["y"]
 		else if block.name is "water"

coffee/client/module/index.coffee

@@ -197,8 +197,9 @@ render = ->
 	world.updateCellsAroundPlayer camera.position,params.chunkdist
 
 	#Updatowanie sceny i animacji TWEEN
-	TWEEN.update();
+	TWEEN.update()
 	renderer.render scene, camera
+	inv_bar.tick()
 	return
 
 #Funkcja animate

src/client/css/style.css

@@ -219,14 +219,26 @@ canvas {
   height:485px;
   transform: translate(-50%,-50%);
 }
-.inv_box{
-  background-repeat: no-repeat;
+.item{
+	background-repeat: no-repeat;
   background-size: 43px 43px;
+  width:43px;
+  height:43px;
+	-webkit-text-stroke: 1px black;
+   color: white;
+   text-shadow:
+       1px 1px 0 #000,
+     -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+       1px 1px 0 #000;
+  font-weight:bold;
+  font-size:17px;
+}
+.inv_box{
   display:inline-block;
   margin-left:9px;
   margin-top:9px;
-  width:43px;
-  height:43px;
   margin-right:-1px;
 }
 .inv_cursor{

src/client/module/InventoryBar.js

@@ -28,8 +28,7 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns:[
         {from: 'src/client/assets',to: 'assets'},
-        {from: 'src/client/css',to: 'css'},
-        {from: 'src/client/index.html',to: 'index.html'}
+        {from: 'src/client/css',to: 'css'}
       ]
     })
   ]