274 lines
6.3 KiB
JavaScript
274 lines
6.3 KiB
JavaScript
function Hand(keyMapper) {
|
|
this.keyMapper = keyMapper;
|
|
this.pressingFinger = KeyButton.NONE_FINGER;
|
|
this.prevFingerSprite = null;
|
|
|
|
this.hand = game.add.image(0, Hand.DEFAULT_Y_PX, "hand_palm");
|
|
this.hand.anchor.set(0.5);
|
|
this.hand.scale.set(2);
|
|
|
|
this.thumb = game.add.image(0, 0, "hand_thumb");
|
|
this.thumb.alpha = 0.5;
|
|
this.hand.addChild(this.thumb);
|
|
|
|
this.index_finger = game.add.image(0, 0, "hand_index_finger");
|
|
this.index_finger.alpha = 0.5;
|
|
this.hand.addChild(this.index_finger);
|
|
|
|
this.middle_finger = game.add.image(0, 0, "hand_middle_finger");
|
|
this.middle_finger.alpha = 0.5;
|
|
this.hand.addChild(this.middle_finger);
|
|
|
|
this.ring_filger = game.add.image(0, 0, "hand_little_finger");
|
|
this.ring_filger.alpha = 0.5;
|
|
this.hand.addChild(this.ring_filger);
|
|
|
|
this.little_finger = game.add.image(0, 0, "hand_ring_finger");
|
|
this.little_finger.alpha = 0.5;
|
|
this.hand.addChild(this.little_finger);
|
|
|
|
var mask = game.add.graphics();
|
|
mask.beginFill(0xffffff);
|
|
mask.drawRect(100, 300, 1028, 360);
|
|
this.hand.mask = mask;
|
|
}
|
|
|
|
Hand.prototype.move = function(sprite, x, y) {
|
|
sprite.x = x;
|
|
sprite.y = y;
|
|
}
|
|
|
|
Hand.prototype.moveTo = function(key) {
|
|
}
|
|
|
|
Hand.prototype.moveToDefaultPosition = function() {
|
|
this.moveRow(3, null);
|
|
this.unhighlightOffFinger(KeyButton.NONE_FINGER);
|
|
}
|
|
|
|
|
|
Hand.prototype.moveRow = function(rowNo, key) {
|
|
var rowIndex = rowNo - 1;
|
|
this.hand.y = Hand.DEFAULT_Y_PX + Keyboard.DEFAULT_KEY_SIZE_PX * rowIndex;
|
|
|
|
this.moveColumn(rowNo, key);
|
|
}
|
|
|
|
Hand.prototype.moveColumn = function(rowNo, key) {
|
|
}
|
|
|
|
|
|
Hand.prototype.getFingerSprite = function(fingerNo) {
|
|
var fingerSprite = null;
|
|
switch(fingerNo) {
|
|
case KeyButton.THUMB:
|
|
fingerSprite = this.thumb;
|
|
break;
|
|
case KeyButton.INDEX_FINGER:
|
|
case KeyButton.INDEX_FINGER_BASELINE:
|
|
fingerSprite = this.index_finger;
|
|
break;
|
|
case KeyButton.MIDDLE_FINGER:
|
|
fingerSprite = this.middle_finger;
|
|
break;
|
|
case KeyButton.RING_FINGER:
|
|
fingerSprite = this.ring_filger;
|
|
break;
|
|
case KeyButton.LITTLE_FINGER:
|
|
fingerSprite = this.little_finger;
|
|
break;
|
|
}
|
|
return fingerSprite;
|
|
}
|
|
|
|
Hand.prototype.highlightOnFinger = function(fingerNo) {
|
|
// console.log(fingerNo);
|
|
var pressingFingerSprite = this.getFingerSprite(fingerNo);
|
|
if(pressingFingerSprite === this.prevFingerSprite)
|
|
return;
|
|
|
|
if(this.prevFingerSprite !== null)
|
|
this.unhighlightOffFinger();
|
|
|
|
if(pressingFingerSprite !== null) {
|
|
// console.log(pressingFingerSprite);
|
|
pressingFingerSprite.tint = 0xffff00;
|
|
pressingFingerSprite.alpha = 1;
|
|
}
|
|
|
|
this.prevFingerSprite = pressingFingerSprite;
|
|
}
|
|
|
|
Hand.prototype.unhighlightOffFinger = function() {
|
|
if(this.prevFingerSprite === null)
|
|
return;
|
|
this.prevFingerSprite.tint = 0xffffff;
|
|
this.prevFingerSprite.alpha = 0.5;
|
|
|
|
this.prevFingerSprite = null;
|
|
}
|
|
|
|
|
|
Hand.loadResources = function() {
|
|
game.load.image('hand_palm', '../../../resources/image/ui/hand_palm.png');
|
|
game.load.image('hand_thumb', '../../../resources/image/ui/hand_thumb.png');
|
|
game.load.image('hand_index_finger', '../../../resources/image/ui/hand_index_finger.png');
|
|
game.load.image('hand_middle_finger', '../../../resources/image/ui/hand_middle_finger.png');
|
|
game.load.image('hand_little_finger', '../../../resources/image/ui/hand_little_finger.png');
|
|
game.load.image('hand_ring_finger', '../../../resources/image/ui/hand_ring_finger.png');
|
|
}
|
|
|
|
|
|
Hand.DEFAULT_Y_PX = 540; // 680;
|
|
|
|
|
|
|
|
LeftHand.prototype = Object.create(Hand.prototype);
|
|
LeftHand.constructor = LeftHand;
|
|
|
|
function LeftHand(keyMapper) {
|
|
Hand.call(this, keyMapper);
|
|
|
|
this.move(this.thumb, 126, -50);
|
|
this.move(this.index_finger, 96, -102);
|
|
this.move(this.middle_finger, 58, -116);
|
|
this.move(this.ring_filger, 32, -110);
|
|
this.move(this.little_finger, 4, -106);
|
|
this.moveToDefaultPosition();
|
|
}
|
|
|
|
LeftHand.prototype.moveTo = function(key) {
|
|
if(key === undefined)
|
|
return;
|
|
|
|
// console.log(key);
|
|
var keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
|
|
|
|
if(keyCode != "Space")
|
|
this.moveRow(key.row, key);
|
|
else
|
|
this.moveRow(3, key);
|
|
|
|
switch(key.keyCode) {
|
|
case "Key5":
|
|
case "KeyT":
|
|
case "KeyG":
|
|
case "KeyB":
|
|
this.moveColumn(5, key);
|
|
break;
|
|
}
|
|
|
|
this.highlightOnFinger(key.fingerType);
|
|
}
|
|
|
|
LeftHand.prototype.moveColumn = function(rowNo, key) {
|
|
var rowIndex = rowNo - 1;
|
|
this.hand.x = LeftHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * rowIndex;
|
|
|
|
if(key === null)
|
|
return;
|
|
|
|
var keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
|
|
switch(keyCode) {
|
|
case "Key5":
|
|
case "KeyT":
|
|
case "KeyG":
|
|
case "KeyB":
|
|
this.hand.x += Keyboard.DEFAULT_KEY_SIZE_PX;
|
|
break;
|
|
|
|
case "ShiftLeft":
|
|
this.hand.x = LeftHand.DEFAULT_X_PX;
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
LeftHand.DEFAULT_X_PX = 100;
|
|
|
|
|
|
|
|
RightHand.prototype = Object.create(Hand.prototype);
|
|
RightHand.constructor = RightHand;
|
|
|
|
function RightHand(keyMapper) {
|
|
Hand.call(this, keyMapper);
|
|
|
|
this.hand.scale.x *= -1;
|
|
|
|
this.move(this.thumb, 126, -50);
|
|
this.move(this.index_finger, 96, -102);
|
|
this.move(this.middle_finger, 58, -116);
|
|
this.move(this.ring_filger, 32, -110);
|
|
this.move(this.little_finger, 4, -106);
|
|
this.moveToDefaultPosition();
|
|
}
|
|
|
|
RightHand.prototype.moveTo = function(key) {
|
|
if(key === undefined)
|
|
return;
|
|
|
|
// console.log(key);
|
|
var keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
|
|
|
|
if(keyCode != "Space")
|
|
this.moveRow(key.row, key);
|
|
else
|
|
this.moveRow(3, key);
|
|
|
|
switch(key.keyCode) {
|
|
case "Key5":
|
|
case "KeyT":
|
|
case "KeyG":
|
|
case "KeyB":
|
|
this.moveColumn(5, key);
|
|
break;
|
|
}
|
|
|
|
this.highlightOnFinger(key.fingerType);
|
|
}
|
|
|
|
RightHand.prototype.moveColumn = function(rowNo, key) {
|
|
var rowIndex = rowNo - 1;
|
|
this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * rowIndex;
|
|
|
|
if(key === null)
|
|
return;
|
|
|
|
var keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
|
|
switch(keyCode) {
|
|
case "Key6":
|
|
case "KeyY":
|
|
case "KeyH":
|
|
case "KeyN":
|
|
this.hand.x -= Keyboard.DEFAULT_KEY_SIZE_PX;
|
|
break;
|
|
|
|
case "Minus":
|
|
case "BracketLeft":
|
|
case "Quote":
|
|
this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 3;
|
|
break;
|
|
|
|
case "Equal":
|
|
case "BracketRight":
|
|
this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 5;
|
|
break;
|
|
|
|
case "Backslash":
|
|
this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 7;
|
|
break;
|
|
|
|
case "Enter":
|
|
this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 6;
|
|
break;
|
|
|
|
case "ShiftRight":
|
|
this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 6;
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
RightHand.DEFAULT_X_PX = 810; |