enhanced keyboard and reskinned char select and create for #871

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

@@ -144,9 +144,9 @@
 }
 
 .mobile .uiCharacters {
-	height: calc(@totalHeight - 110px);
+	height: 300px;
 
 	.logo {
-		margin-bottom: 20px;
+		display: none;
 	}
 }

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

@@ -175,7 +175,7 @@
 }
 
 .mobile .uiCreateCharacter {
-	height: calc(@totalHeight - 54px);
+	height: 276px;
 	width: calc(@totalWidth - 80px);
 	display: flex;
 	flex-direction: row;
@@ -183,7 +183,7 @@
 	justify-content: center;
 
 	.logo {
-		margin-left: 0px;
+		display: none;
 	}
 
 	.box-left {

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

@@ -44,6 +44,8 @@ define([
 				.on('click', this.onClickFilter.bind(this));
 
 			if (isMobile) {
+				this.kbUpper = 0;
+
 				this.el.on('click', this.toggle.bind(this, true));
 				this.renderKeyboard();
 
@@ -84,11 +86,20 @@ define([
 		},
 
 		renderKeyboard: function () {
+			this.find('.keyboard').remove();
+
 			let container = $('<div class="keyboard"></div>')
 				.appendTo(this.el);
 
-			'1234567890|qwertyuiop|asdfghjkl|zxcvbnm>'	
-				.split('')
+			let controls = ['|', 'caps', 'space', 'backspace', 'enter'];
+
+			let keyboard = {
+				0: '1234567890|qwertyuiop|asdfghjkl|zxcvbnm',
+				1: '!@#$%^&*()|QWERTYUIOP|ASDFGHJKL|ZXCVBNM',
+				2: '!@#$%^&*()|     {}[]\\|`-=_+;\':"|~,./<>?'
+			}[this.kbUpper].split('').concat(controls);
+
+			keyboard
 				.forEach(k => {
 					if (k === '|') {
 						$('<div class="newline"></div>')
@@ -97,22 +108,51 @@ define([
 						return;	
 					}
 
-					$(`<div class="key">${k}</div>`)
-						.appendTo(container)
-						.on('click', this.clickKey.bind(this, k));
+					let className = (k.match(/[a-z]/i) || k.length > 1) ? 'key' : 'key special';
+					if (k === ' ') {
+						k = '.';
+						className = 'key hidden';
+					}
+
+					className += ' ' + k;
+
+					let elKey = $(`<div class="${className}">${k}</div>`)
+						.appendTo(container);
+
+					if (!className.includes('hidden')) 	
+						elKey.on('click', this.clickKey.bind(this, k));
 				});
 		},
 
 		clickKey: function (key) {
 			window.navigator.vibrate(20);
 
-			if (key === '>') {
-				this.sendChat({
-					which: 13
-				});
-				this.find('.input').html('');
-				this.find('input').val('');
-
+			const handler = {
+				caps: () => {
+					this.kbUpper = (this.kbUpper + 1) % 3;
+					this.renderKeyboard();
+				},
+
+				space: () => {
+					this.clickKey(' ');
+				},
+
+				backspace: () => {
+					let elInput = this.find('input');
+					elInput.val(elInput.val().slice(0, -1));
+					this.find('.input').html(elInput.val());
+				},
+
+				enter: () => {
+					this.sendChat({
+						which: 13
+					});
+					this.find('.input').html('');
+					this.find('input').val('');
+				}
+			}[key];
+			if (handler) {
+				handler();
 				return;
 			}
 

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

@@ -184,7 +184,7 @@
 }
 
 .mobile .uiMessages {
-	padding: 0px;
+	padding: 10px 0px;
 	pointer-events: all;
 
 	.btnClose.active {
@@ -231,17 +231,32 @@
 			display: flex;
 			flex-direction: row;
 			flex-wrap: wrap;
-			background-color: @blackB;
+			background-color: @blackC;
 			justify-content: center;
 			align-items: center;
-			height: 224px;
+			height: 258px;
 
 			.key {
 				flex: 1;
 				background-color: @blackA;
-				color: @blueA;
-				padding: 10px 10px;
+				color: @white;
+				padding: 6px 10px;
 				text-align: center;
+				border-top: 4px solid @blackC;
+				border-left: 2px solid @blackC;
+				border-right: 2px solid @blackC;
+
+				&.special {
+					color: @orange;
+				}
+
+				&.hidden {
+					color: @blackC;
+				}
+
+				&.space {
+					flex: 5;
+				}
 			}
 
 			.newline {