started adding onscreen kb for #871

src/client/css/main.less

@@ -29,7 +29,7 @@ body {
 	}
 
 	&.mobile {
-		.uiQuests, .uiEvents, .uiTooltipInfo, .uiMessages {
+		.uiQuests, .uiEvents, .uiTooltipInfo {
 			display: none !important;
 		}
 	} 

src/client/js/components/spellbook.js

@@ -174,7 +174,7 @@ define([
 					this.groundTargetSpell = null;
 
 					events.emit('onGetAnnouncement', {
-						msg: `Cancelled casting ${spell.name}`
+						msg: `Cancelled castingn ${spell.name}`
 					});
 
 					return;

src/client/ui/templates/messages/messages.js

@@ -37,10 +37,15 @@ define([
 			this.onEvent('onGetCustomChatChannels', this.onGetCustomChatChannels.bind(this));
 			this.onEvent('onGetBlockedPlayers', this.onGetBlockedPlayers.bind(this));
 
-			this.find('input')
-				.on('keydown', this.sendChat.bind(this))
-				.on('input', this.checkChatLength.bind(this))
-				.on('blur', this.toggle.bind(this, false, true));
+			if (isMobile) {
+				this.on('click', this.toggle(true));
+				this.renderKeyboard();
+			} else {
+				this.find('input')
+					.on('keydown', this.sendChat.bind(this))
+					.on('input', this.checkChatLength.bind(this))
+					.on('blur', this.toggle.bind(this, false, true));
+			}
 
 			this
 				.find('.filter:not(.channel)')
@@ -53,6 +58,9 @@ define([
 		},
 
 		update: function () {
+			if (isMobile)
+				return;
+			
 			if (this.el.hasClass('typing'))
 				return;
 
@@ -69,6 +77,41 @@ define([
 				elTime.html(timeString);
 		},
 
+		renderKeyboard: function () {
+			let container = $('<div class="keyboard"></div>')
+				.appendTo(this.el);
+
+			'|1234567890|qwertyuiop|asdfghjkl|zxcvbnm>|'	
+				.split('')
+				.forEach(k => {
+					if (k === '|') {
+						$('<div class="newline"></div>')
+							.appendTo(container);
+
+						return;	
+					}
+
+					$(`<div class="key">${k}</div>`)
+						.appendTo(container)
+						.on('click', this.clickKey.bind(this, k));
+				});
+		},
+
+		clickKey: function (key) {
+			if (key === '>') {
+				this.sendChat({
+					which: 13
+				});
+				return;
+			}
+
+			let input = this.find('input');
+			input.val(input.val() + key);
+			this.checkChatLength();
+
+			this.find('.input').html(input.val());
+		},
+
 		checkChatLength: function () {
 			let textbox = this.find('input');
 			let val = textbox.val();

src/client/ui/templates/messages/styles.less

@@ -13,6 +13,10 @@
 
 	pointer-events: none;
 
+	.input {
+		display: none;
+	}
+
 	&.typing {
 		pointer-events: all;
 
@@ -178,3 +182,77 @@
 		color: @white;
 	}
 }
+
+.mobile .uiMessages {
+	z-index: 999999999;
+
+	input {
+		display: none;
+	}
+
+	&.typing {
+		left: 0px;
+		top: 0px;
+		width: 100%;
+		height: 100%;
+		background-color: fade(@darkGray, 90%);
+
+		.input {
+			display: block;
+		}
+
+		.el.textbox:not(.input) {
+			&.message, &.time {
+				display: none;
+			}
+		}
+
+		.keyboard {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			background-color: @blackB;
+			position: absolute;
+			bottom: 10px;
+			justify-content: center;
+			align-items: center;
+			padding: 10px;
+
+			.key {
+				flex: 1;
+				background-color: @blackA;
+				color: @blueA;
+				padding: 10px 10px;
+				text-align: center;
+			}
+
+			.newline {
+				width: 100%;
+			}
+		}
+	}
+
+	&:not(.typing) {
+		right: 10px;
+		top: 80px;
+		left: auto;
+		bottom: auto;
+		width: @btnSize;
+		height: @btnSize;
+
+		&:after {
+			content: '';
+			position: absolute;
+			left: 0px;
+			top: 0px;
+			background: url('../../../images/uiIcons.png');
+			background-position: -448px -64px;
+			width: @btnSize;
+			height: @btnSize;
+		}
+
+		> * {
+			display: none;
+		}
+	}
+}

src/client/ui/templates/messages/template.html

@@ -9,5 +9,6 @@
 		
 	</div>
 	<input type="text" class="el textbox message">
+	<div class="input el textbox message"></div>
 	<div class="el textbox time"></div>
 </div>