fixes #532

src/client/ui/templates/createCharacter/createCharacter.js

@@ -27,7 +27,11 @@ define([
 
 			uiFactory.build('tooltips');
 
-			this.find('.txtClass').on('click', this.changeClass.bind(this));
+			this.find('.txtClass')
+				.on('click', this.changeClass.bind(this))
+				.on('mousemove', this.onClassHover.bind(this))
+				.on('mouseleave', this.onClassUnhover.bind(this));
+
 			this.find('.txtCostume').on('click', this.changeCostume.bind(this));
 
 			this.find('.btnBack').on('click', this.back.bind(this));
@@ -59,8 +63,8 @@ define([
 
 			this.costume = -1;
 
-			this.class = 'wizard';
-			this.find('.txtClass').html('Wizard');
+			this.class = 'owl';
+			this.find('.txtClass').html('Owl');
 
 			this.changeCostume({
 				target: this.find('.txtCostume')
@@ -80,12 +84,10 @@ define([
 			events.emit('onShowTooltip', text, el[0], pos);
 			$('.uiTooltips .tooltip').addClass('bright');
 		},
-
 		onProphecyUnhover: function (e) {
 			var el = $(e.currentTarget);
 			events.emit('onHideTooltip', el[0]);
 		},
-
 		onProphecyClick: function (e) {
 			var el = $(e.currentTarget);
 			var pName = el.attr('prophecy');
@@ -140,9 +142,30 @@ define([
 				this.el.find('.message').html(result);
 		},
 
+		onClassHover: function (e) {
+			var el = $(e.currentTarget);
+
+			var pos = {
+				x: e.clientX + 25,
+				y: e.clientY
+			};
+
+			var text = ({
+				owl: `The wise Owl guides you; granting you the focus needed to cast spells. <br /><br />Upon level up, you gain 1 Intellect.`,
+				bear: `The towering Bear strenghtens you; lending force to your blows. <br /><br />Upon level up, you gain 1 Strength.`,
+				lynx: `The nimble Lynx hastens you; allowing your strikes to land true. <br /><br />Upon level up, you gain 1 Dexterity.`
+			})[this.class];
+
+			events.emit('onShowTooltip', text, el[0], pos, 200);
+			$('.uiTooltips .tooltip').addClass('bright');
+		},
+		onClassUnhover: function (e) {
+			var el = $(e.currentTarget);
+			events.emit('onHideTooltip', el[0]);
+		},
 		changeClass: function (e) {
 			var el = $(e.target);
-			var classes = ['owl', 'bear', 'thief'];
+			var classes = ['owl', 'bear', 'lynx'];
 			var nextIndex = (classes.indexOf(this.class) + 1) % classes.length;
 			this.costume = -1;
 
@@ -151,6 +174,8 @@ define([
 			el.html(newClass[0].toUpperCase() + newClass.substr(1));
 
 			this.class = newClass;
+
+			this.onClassHover(e);
 		},
 
 		changeCostume: function (e) {

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

@@ -7,7 +7,7 @@
 			<div class="heading">
 				<div class="col">level</div>
 				<div class="col">name</div>
-				<div class="col">class</div>
+				<div class="col">spirit</div>
 			</div>
 		</div>
 	</div>

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

@@ -11,12 +11,12 @@
 		text-align: justify;
 
 		&.bright {
-			background-color: @blueC;
-			color: @white;
+			background-color: @grayB;
+			color: @black;
 		}
 
 		.hidden {
 			display: none;
 		}
 	}
-}
+}

src/server/components/spellbook.js

@@ -106,7 +106,7 @@ define([
 				else if (sheetName.indexOf('/') > -1)
 					animation = animations.mobs[sheetName];
 				else
-					animation = animations.classes[this.obj.class];
+					animation = animations.classes;
 
 				if ((animation) && (animation[this.obj.cell]) && (animation[this.obj.cell][animationName])) {
 					builtSpell.animation = extend(true, {}, animation[this.obj.cell][animationName]);

src/server/config/animations.js

@@ -8,138 +8,132 @@ define([
 			events.emit('onBeforeGetAnimations', this);
 		},
 		classes: {
-			wizard: {
-				'2': {
-					hitStaff: {
-						sheet: 'animChar',
-						row: 1,
-						col: 5,
-						frames: 3,
-						frameDelay: 4
-					},
-					raiseStaff: {
-						sheet: 'animChar',
-						row: 0,
-						col: 3,
-						frames: 5,
-						frameDelay: 3
-					}
+			'2': {
+				hitStaff: {
+					sheet: 'animChar',
+					row: 1,
+					col: 5,
+					frames: 3,
+					frameDelay: 4
+				},
+				raiseStaff: {
+					sheet: 'animChar',
+					row: 0,
+					col: 3,
+					frames: 5,
+					frameDelay: 3
+				}
+			},
+			'3': {
+				hitStaff: {
+					sheet: 'animChar',
+					row: 0,
+					col: 0,
+					frames: 3,
+					frameDelay: 4
+				},
+				raiseStaff: {
+					sheet: 'animChar',
+					row: 1,
+					col: 0,
+					frames: 5,
+					frameDelay: 3
+				}
+			},
+			'4': {
+				hitStaff: {
+					sheet: 'animChar',
+					row: 2,
+					col: 5,
+					frames: 3,
+					frameDelay: 5
 				},
-				'3': {
-					hitStaff: {
-						sheet: 'animChar',
-						row: 0,
-						col: 0,
-						frames: 3,
-						frameDelay: 4
-					},
-					raiseStaff: {
-						sheet: 'animChar',
-						row: 1,
-						col: 0,
-						frames: 5,
-						frameDelay: 3
-					}
+				raiseStaff: {
+					sheet: 'animChar',
+					row: 2,
+					col: 0,
+					frames: 5,
+					frameDelay: 4
+				}
+			},
+			'5': {
+				hitStaff: {
+					sheet: 'animChar',
+					row: 3,
+					col: 0,
+					frames: 3,
+					frameDelay: 5
+				},
+				raiseStaff: {
+					sheet: 'animChar',
+					row: 3,
+					col: 3,
+					frames: 5,
+					frameDelay: 4
+				}
+			},
+			'6': {
+				hitSword: {
+					sheet: 'animChar',
+					row: 5,
+					col: 5,
+					frames: 3,
+					frameDelay: 5
 				},
-				'4': {
-					hitStaff: {
-						sheet: 'animChar',
-						row: 2,
-						col: 5,
-						frames: 3,
-						frameDelay: 5
-					},
-					raiseStaff: {
-						sheet: 'animChar',
-						row: 2,
-						col: 0,
-						frames: 5,
-						frameDelay: 4
-					}
+				raiseHands: {
+					sheet: 'animChar',
+					row: 5,
+					col: 0,
+					frames: 5,
+					frameDelay: 5
+				}
+			},
+			'7': {
+				hitSword: {
+					sheet: 'animChar',
+					row: 4,
+					col: 0,
+					frames: 3,
+					frameDelay: 5
 				},
-				'5': {
-					hitStaff: {
-						sheet: 'animChar',
-						row: 3,
-						col: 0,
-						frames: 3,
-						frameDelay: 5
-					},
-					raiseStaff: {
-						sheet: 'animChar',
-						row: 3,
-						col: 3,
-						frames: 5,
-						frameDelay: 4
-					}
+				raiseHands: {
+					sheet: 'animChar',
+					row: 4,
+					col: 3,
+					frames: 5,
+					frameDelay: 6
 				}
 			},
-			thief: {
-				'6': {
-					hitSword: {
-						sheet: 'animChar',
-						row: 5,
-						col: 5,
-						frames: 3,
-						frameDelay: 5
-					},
-					raiseHands: {
-						sheet: 'animChar',
-						row: 5,
-						col: 0,
-						frames: 5,
-						frameDelay: 5
-					}
+			'9': {
+				hitSword: {
+					sheet: 'animChar',
+					row: 6,
+					col: 0,
+					frames: 3,
+					frameDelay: 5
 				},
-				'7': {
-					hitSword: {
-						sheet: 'animChar',
-						row: 4,
-						col: 0,
-						frames: 3,
-						frameDelay: 5
-					},
-					raiseHands: {
-						sheet: 'animChar',
-						row: 4,
-						col: 3,
-						frames: 5,
-						frameDelay: 6
-					}
+				raiseShield: {
+					sheet: 'animChar',
+					row: 7,
+					col: 0,
+					frames: 5,
+					frameDelay: 7
 				}
 			},
-			warrior: {
-				'9': {
-					hitSword: {
-						sheet: 'animChar',
-						row: 6,
-						col: 0,
-						frames: 3,
-						frameDelay: 5
-					},
-					raiseShield: {
-						sheet: 'animChar',
-						row: 7,
-						col: 0,
-						frames: 5,
-						frameDelay: 7
-					}
+			'10': {
+				hitSword: {
+					sheet: 'animChar',
+					row: 7,
+					col: 5,
+					frames: 3,
+					frameDelay: 5
 				},
-				'10': {
-					hitSword: {
-						sheet: 'animChar',
-						row: 7,
-						col: 5,
-						frames: 3,
-						frameDelay: 5
-					},
-					raiseShield: {
-						sheet: 'animChar',
-						row: 6,
-						col: 3,
-						frames: 5,
-						frameDelay: 7
-					}
+				raiseShield: {
+					sheet: 'animChar',
+					row: 6,
+					col: 3,
+					frames: 5,
+					frameDelay: 7
 				}
 			}
 		},

src/server/config/maps/tutorial/map.json

@@ -1918,7 +1918,7 @@
                  "name":"",
                  "properties":
                     {
-                     "cpnNotice":"{\"maxLevel\": 1, \"msg\": \"The seagull's eyes are bloodshot and in its beak you see a glinting locket. It stole your family heirloom!<br \/><br \/>Click on it to target it then press <font class='color-green'>space<\/font> to toggle auto-attack. Remember to stand close if you are a Warrior, Thief or Necromancer.\"}"
+                     "cpnNotice":"{\"maxLevel\": 1, \"msg\": \"The seagull's eyes are bloodshot and in its beak you see a glinting locket. It stole your family heirloom!<br \/><br \/>Click on it to target it then press <font class='color-green'>space<\/font> to toggle auto-attack. Remember to stand close if you are using melee attacks.\"}"
                     },
                  "propertytypes":
                     {
@@ -1994,7 +1994,7 @@
                  "name":"",
                  "properties":
                     {
-                     "cpnNotice":"{\"maxLevel\": 1, \"msg\": \"The seagull's eyes are bloodshot and in its beak you see a glinting locket. It stole your family heirloom!<br \/><br \/>Click on it to target it then press <font class='color-green'>space<\/font> to toggle auto-attack. Remember to stand close if you are a Warrior, Thief or Necromancer.\"}"
+                     "cpnNotice":"{\"maxLevel\": 1, \"msg\": \"The seagull's eyes are bloodshot and in its beak you see a glinting locket. It stole your family heirloom!<br \/><br \/>Click on it to target it then press <font class='color-green'>space<\/font> to toggle auto-attack. Remember to stand close if you are using melee attacks.\"}"
                     },
                  "propertytypes":
                     {