better Chat and pause blur

Author: michaljaz

coffee/client/module/FirstPersonControls.coffee

@@ -17,8 +17,8 @@ class FirstPersonControls
 		@socket=options.socket
 		@gameState="menu"
 		@listen()
-		$("#commandx").blur()
-		$(".command").hide()
+		$(".com_i").blur()
+		$(".com").hide()
 	updatePosition: (e)->
 		#Updatowanie kursora
 		if @gameState is "gameLock"
@@ -38,28 +38,28 @@ class FirstPersonControls
 
 			#Klawisz Enter
 			if z.keyCode is 13 and _this.gameState is "chat"
-				_this.socket.emit "command",commandx.value
-				commandx.value=""
+				_this.socket.emit "command",$(".com_i").val()
+				$(".com_i").val("")
 
 			#Klawisz T lub /
 			if (z.keyCode is 84 or z.keyCode is 191) and _this.gameState is "gameLock"
 				if z.keyCode is 191
-					commandx.value="/"
+					$(".com_i").val("/")
 				_this._Chat()
 				z.preventDefault()
 
 			#Klawisz `
 			if z.keyCode is 192
-				$("#commandx").blur()
-				$(".command").hide()
+				$(".com_i").blur()
+				$(".com").hide()
 				z.preventDefault()
 				if (_this.gameState is "menu") or (_this.gameState is "chat")
 					_this._Game()
 				else
 					_this._Menu()
 			if z.keyCode is 27 and _this.gameState is "chat"
-				$("#commandx").blur()
-				$(".command").hide()
+				$(".com_i").blur()
+				$(".com").hide()
 				_this._Menu()
 
 			#Wysyłanie state'u do serwera
@@ -82,15 +82,15 @@ class FirstPersonControls
 			if document.pointerLockElement is _this.canvas or document.mozPointerLockElement is _this.canvas
 				#Lock
 				if _this.gameState is "game"
-					$("#commandx").blur()
-					$(".command").hide()
+					$(".com_i").blur()
+					$(".com").hide()
 					_this.state "gameLock"
 					$(".gameMenu").css "display", "none"
 			else
 				#Unlock
 				if (_this.gameState is "menu") or (_this.gameState is "gameLock")
-					$("#commandx").blur()
-					$(".command").hide()
+					$(".com_i").blur()
+					$(".com").hide()
 					_this._Menu()
 			return
 		document.addEventListener 'pointerlockchange', lockChangeAlert, false
@@ -101,12 +101,21 @@ class FirstPersonControls
 		return @
 	state:(state)->
 		@gameState=state
+		if @gameState is "chat"
+			$(".chat").addClass("focus")
+			$(".chat").removeClass("blur")
+		else
+			$(".chat").removeClass("focus")
+			$(".chat").addClass("blur")
+		if @gameState isnt "menu"
+			$(".winbl").removeClass("blur")
 		console.log "Game state: "+state
 	_Game:()->
 		@state "game"
 		@canvas.requestPointerLock()
 	_Menu:()->
 		@state "menu"
+		$(".winbl").addClass("blur")
 		$(".gameMenu").css "display", "block"
 		document.exitPointerLock = document.exitPointerLock or document.mozExitPointerLock
 		document.exitPointerLock();
@@ -116,8 +125,8 @@ class FirstPersonControls
 			$(".gameMenu").css "display", "none"
 			document.exitPointerLock = document.exitPointerLock or document.mozExitPointerLock
 			document.exitPointerLock()
-			$(".command").show()
-			$("#commandx").focus()
+			$(".com").show()
+			$(".com_i").focus()
 
 
 

coffee/client/module/index.coffee

@@ -76,10 +76,20 @@ init = ()->
 		world._computeSections sections,x,z,biomes
 	socket.on "hp",(points)->
 		inv_bar.setHp(points)
+	socket.on "inventory",(inv)->
+		console.log inv
 	socket.on "food",(points)->
 		inv_bar.setFood(points)
 	socket.on "msg",(msg)->
+		atBottom = isElementScrolledToBottom(consoleDiv)
 		$(".chat").append(msg+"<br>")
+		if atBottom
+			scrollToBottom(consoleDiv)
+	socket.on "kicked",(reason)->
+		atBottom = isElementScrolledToBottom(consoleDiv)
+		$(".chat").append("You have been kicked!<br>")
+		if atBottom
+			scrollToBottom(consoleDiv)
 	socket.on "xp",(xp)->
 		inv_bar.setXp xp.level,xp.progress
 	socket.on "move", (pos)->
@@ -136,6 +146,19 @@ init = ()->
 	gui.add( world.material, 'wireframe' ).name( 'Wireframe' ).listen()
 	gui.add( params, 'chunkdist',0,10,1).name( 'Render distance' ).listen()
 
+	#Autoscrollowanie chatu
+	consoleDiv = document.querySelector(".chat")
+
+	window.addEventListener "wheel", (e)->
+		if FPC.gameState isnt "chat"
+			e.preventDefault()
+	, {passive: false}
+	isElementScrolledToBottom=(el)->
+		if el.scrollTop >= (el.scrollHeight - el.offsetHeight)
+			return true
+		return false
+	scrollToBottom=(el)->
+		el.scrollTop = el.scrollHeight
 	#Wprawienie w ruch funkcji animate
 	animate()
 	return

coffee/server.coffee

@@ -71,10 +71,21 @@ module.exports=(type)->
 					io.to(socket.id).emit "hp",socketInfo[socket.id].bot.health
 					io.to(socket.id).emit "food",socketInfo[socket.id].bot.food
 				return
+			inv=""
+			socketInfo[socket.id].int=setInterval ()->
+				inv_new=JSON.stringify(socketInfo[socket.id].bot.inventory.slots)
+				if inv isnt inv_new
+					inv=inv_new
+					io.to(socket.id).emit "inventory",socketInfo[socket.id].bot.inventory.slots
+			,100
 			socketInfo[socket.id].bot.on 'spawn',()->
 				try
 					io.to(socket.id).emit "spawn"
 				return
+			socketInfo[socket.id].bot.on 'kicked',(reason,loggedIn)->
+				try
+					io.to(socket.id).emit "kicked",reason
+				return
 			socketInfo[socket.id].bot.on 'message',(msg)->
 				try
 					io.to(socket.id).emit "msg",convert.toHtml(msg.toAnsi());
@@ -103,6 +114,7 @@ module.exports=(type)->
 			return
 		socket.on "disconnect", ->
 			try
+				clearInterval socketInfo[socket.id].int
 				console.log "[-] "+socketInfo[socket.id].nick
 				socketInfo[socket.id].bot.end()
 				delete socketInfo[socket.id]

src/client/css/style.css

@@ -1,5 +1,5 @@
-body { margin: 0; background:black;}
 
+body { margin: 0; background:black;}
 canvas {
   display: block;
   width:100%;
@@ -33,7 +33,7 @@ canvas {
 }
 
 .initLoading{
-  z-index:11;
+  z-index:99;
   position:fixed;
   top:0px;
   left:0px;
@@ -86,9 +86,15 @@ canvas {
   font-size:20px;
   font-weight:bold;
 }
-.con{
-  overflow:auto;
-  display:flex; flex-direction:column-reverse;
+.chat{
+  position:fixed;
+  bottom:100px;
+  left:0px;
+  width:60%;
+  overflow-x:hidden;
+  overflow:scroll;
+  /* display:flex; */
+  /* flex-direction:column-reverse; */
   -webkit-text-stroke: 1px black;
    color: white;
    text-shadow:
@@ -97,21 +103,26 @@ canvas {
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
-  height:70%;
+  height:45%;
   font-weight:bold;
   font-size:20px;
 }
-.console{
+.chat.focus{
+  background:rgba(0,0,0,0.5);
+}
+.chat.blur{
+  background:rgba(0,0,0,0);
+}
+.com{
   position:fixed;
-  height:30%;
-  bottom:110px;
+  bottom:-30px;
+  padding:5px;
   left:0px;
-  width:60%;
-}
-.command{
-  font-size:40px;
+  width:100%;
+  background:rgba(0,0,0,0.5);
+  z-index:11;
 }
-.con::-webkit-scrollbar {
+.chat::-webkit-scrollbar {
     display: none;
 }
 .inv_bar{
@@ -131,7 +142,7 @@ canvas {
 }
 .player_hp{
   position:fixed;
-  bottom:80px;
+  bottom:70px;
   left:calc(50vw - 250px);
   display:block;
 }
@@ -189,7 +200,18 @@ canvas {
 }
 .player_food{
   position:fixed;
-  bottom:80px;
+  bottom:70px;
   right:calc(50vw - 245px);
   display:block;
 }
+.winbl{
+  z-index:13;
+  position:fixed;
+  top:0px;
+  left:0px;
+  width:100%;
+  height:100%;
+}
+.winbl.blur{
+  background:rgba(0,0,0,0.5);
+}