// Rendering
function render() {
// Calculate percent
var time_left = _time_end - Date.now();
var percent = Math.round( 100 - time_left / 100 );
// Delete character
if (percent >= 100) {
_ui_box.remove();
_overlay.detach();
deleteCharacter();
return;
}
// Update text
_ui_box.ui.find('.text').text( DB.getMessage(296).replace('%d', Math.round(10-percent/10) ) );
// Update progressbar
_ctx.clearRect(0, 0, _width, _height);
_ctx.fillStyle = 'rgb(0,255,255)';
_ctx.fillRect( 0, 0, _width, _height );
_ctx.fillStyle = 'rgb(140,140,140)';
_ctx.fillRect( 1, 1, _width-2 , _height-2 );
_ctx.fillStyle = 'rgb(66,99,165)';
_ctx.fillRect( 2, 2, Math.round(percent*(_width-4)/100) , _height-4 );
_ctx.fillStyle = 'rgb(255,255,0)';
_ctx.fillText( percent + '%' , ( _width - _ctx.measureText( percent+'%').width ) * 0.5 , 12 );
_TimeOut = Events.setTimeout( render, 30);
}
/**
* Moving function
*/
function walkIntervalProcess()
{
// setTimeout isn't accurate, so reduce the value
// to avoid possible errors.
if (_walkLastTick + 450 > Renderer.tick) {
return;
}
var isWalkable = (Mouse.world.x > -1 && Mouse.world.y > -1);
var isCurrentPos = (Math.round(Session.Entity.position[0]) === Mouse.world.x &&
Math.round(Session.Entity.position[1]) === Mouse.world.y);
if (isWalkable && !isCurrentPos) {
var pkt = new PACKET.CZ.REQUEST_MOVE();
if (!checkFreeCell(Mouse.world.x, Mouse.world.y, 1, pkt.dest)) {
pkt.dest[0] = Mouse.world.x;
pkt.dest[1] = Mouse.world.y;
}
Network.sendPacket(pkt);
}
Events.clearTimeout(_walkTimer);
_walkTimer = Events.setTimeout( walkIntervalProcess, 500);
_walkLastTick = +Renderer.tick;
}
UIComponent.prototype.append = function append()
{
this.__active = true;
if (!this.__loaded) {
this.prepare();
// Hack to fix async preferences on Chrome App...
// Check if we still want to display it.
Events.setTimeout(function(){
if (this.__active) {
this.append();
}
}.bind(this), 10 );
return;
}
this.ui.appendTo('body');
if (this.onKeyDown) {
jQuery(window).on('keydown.' + this.name, this.onKeyDown.bind(this));
}
if (this.onAppend) {
this.onAppend();
}
};
/**
* Spam an effect to the scene
*
* @param {object} effect
* @param {number} owner aid
* @param {Array} position
* @param {number} tick
* @param {boolean} persistent
*/
function spamSTR(effect, AID, position, tick, persistent)
{
var filename;
// Get STR file
if (Preferences.mineffect && effect.min) {
filename = effect.min;
}
else {
filename = effect.file;
}
// Randomize STR file name
if (effect.rand) {
filename = filename.replace('%d', Math.round(effect.rand[0] + (effect.rand[1] - effect.rand[0]) * Math.random()));
}
// Play sound
if (effect.wav) {
Events.setTimeout(function ()
{
Sound.play(effect.wav + '.wav');
}, tick - Renderer.tick);
}
// Start effect
EffectManager.add(new StrEffect('data/texture/effect/' + filename + '.str', position, tick), AID, persistent);
}
this.ui.find('.input .message').blur(function(){
Events.setTimeout(function(){
if (!document.activeElement.tagName.match(/input|select|textarea/i)) {
this.focus();
}
}.bind(this), 1);
});
UIComponent.prototype.append = function append()
{
this.__active = true;
if (!this.__loaded) {
this.prepare();
// Hack to fix async preferences on Chrome App...
// Check if we still want to display it.
Events.setTimeout(function(){
if (this.__active) {
this.append();
}
}.bind(this), 10 );
return;
}
this.ui.appendTo('body');
if (this.onKeyDown) {
jQuery(window).off('keydown.' + this.name).on('keydown.' + this.name, this.onKeyDown.bind(this));
}
if (this.mouseMode === UIComponent.MouseMode.FREEZE) {
Mouse.intersect = false;
Cursor.setType( Cursor.ACTION.DEFAULT );
}
if (this.onAppend) {
this.onAppend();
}
this.focus();
};
return function onTouchStart(event)
{
remoteAutoFocus();
_touches = event.originalEvent.touches;
event.stopImmediatePropagation();
// Delayed click (to detect gesture)
if (_timer > -1) {
Events.clearTimeout(_timer);
_timer = -1;
}
// Gesture
if (_touches.length > 1) {
_scale = touchDistance(_touches);
_angle = touchAngle(_touches);
_processGesture = true;
return false;
}
Mouse.screen.x = _touches[0].pageX;
Mouse.screen.y = _touches[0].pageY;
Mouse.intersect = true;
_intersect = true;
_timer = Events.setTimeout( delayedClick, 200);
return false;
};
// Process dragging
function dragging()
{
var x_ = Mouse.screen.x + x;
var y_ = Mouse.screen.y + y;
var opacity = parseFloat(container.css('opacity') || 1) - 0.02;
// Magnet on border
if (x_ < 10 && x_ > -10) {
x_ = 0;
}
if (y_ < 10 && y_ > -10) {
y_ = 0;
}
if (x_ + width > Mouse.screen.width - 10 && x_ + width < Mouse.screen.width + 10) {
x_ = Mouse.screen.width - width;
}
if (y_ + height > Mouse.screen.height - 10 && y_ + height < Mouse.screen.height + 10) {
y_ = Mouse.screen.height - height;
}
container.css({ top: y_, left: x_, opacity: Math.max(opacity, 0.7) });
drag = Events.setTimeout(dragging, 15);
}
return function onItemFocus( event )
{
NpcStore.ui.find('.item.selected').removeClass('selected');
jQuery(this).addClass('selected');
Events.setTimeout( stopDragDrop, 4);
event.stopImmediatePropagation();
};
element.on('mousedown touchstart', function(event) {
if (event.type === 'touchstart') {
Mouse.screen.x = event.originalEvent.touches[0].pageX;
Mouse.screen.y = event.originalEvent.touches[0].pageY;
}
// Only on left click
else if (event.which !== 1) {
return;
}
var x, y, width, height, drag;
x = container.position().left - Mouse.screen.x;
y = container.position().top - Mouse.screen.y;
width = container.width();
height = container.height();
// Start the loop
container.stop();
drag = Events.setTimeout( dragging, 15);
// Stop the drag (need to focus on window to avoid possible errors...)
jQuery(window).on('mouseup.dragdrop touchend.dragdrop', function(event){
if (event.type === 'touchend' || event.which === 1 || event.isTrigger) {
container.stop().animate({ opacity:1.0 }, 500 );
Events.clearTimeout(drag);
jQuery(window).off('mouseup.dragdrop touchend.dragdrop');
}
});
// Process dragging
function dragging() {
var x_ = Mouse.screen.x + x;
var y_ = Mouse.screen.y + y;
var opacity = parseFloat(container.css('opacity')||1) - 0.02;
// Magnet on border
if (Math.abs(x_) < 10) {
x_ = 0;
}
if (Math.abs(y_) < 10) {
y_ = 0;
}
if (Math.abs((x_ + width) - Mouse.screen.width) < 10) {
x_ = Mouse.screen.width - width;
}
if (Math.abs((y_ + height) - Mouse.screen.height) < 10) {
y_ = Mouse.screen.height - height;
}
container.css({ top: y_, left: x_, opacity: Math.max(opacity,0.7) });
drag = Events.setTimeout( dragging, 15);
}
});
EffectManager.spamEffect = function spamEffect( effect, AID, position, tick, persistent )
{
var entity = EntityManager.get(AID);
var filename;
if (!position) {
if (!entity) {
return;
}
position = entity.position;
}
// Copy instead of get reference
position = effect.attachedEntity ? position : [ position[0], position[1], position[2] ];
persistent = persistent || effect.repeat || false;
// Play sound
if (effect.wav) {
filename = effect.wav;
if (effect.rand) {
filename = filename.replace('%d', Math.round(effect.rand[0] + (effect.rand[1]-effect.rand[0]) * Math.random()));
}
Events.setTimeout(function(){
Sound.play(filename + '.wav');
}, tick - Renderer.tick);
}
switch (effect.type) {
case 'SPR':
spamSprite( effect, AID, position, tick, persistent );
break;
case 'STR':
spamSTR( effect, AID, position, tick, persistent );
break;
case 'CYLINDER':
EffectManager.add(new Cylinder( position, effect.topSize, effect.bottomSize, effect.height, effect.textureName, tick), AID);
break;
case 'FUNC':
if (effect.func) {
if (effect.attachedEntity) {
if (entity) {
effect.func.call(this, entity, tick);
}
}
else {
effect.func.call(this, position, tick);
}
}
break;
}
};
return function rendering()
{
var i, count, max;
var action, animation, anim;
switch (_type) {
case 0: // waiting
action = _action.actions[0];
anim = Math.floor((Renderer.tick - _start) / action.delay * 2);
break;
case 1: // pending
action = _action.actions[1];
max = action.animations.length + (_result ? 7 : 3);
anim = Renderer.tick - _start;
anim = Math.floor(anim / action.delay);
anim = Math.min(anim, max);
if (anim === max) {
_type = _result ? 2 : 3;
_start = Renderer.tick;
}
break;
case 2: // success
case 3: // fail
action = _action.actions[_type];
max = action.animations.length;
anim = Renderer.tick - _start;
anim = Math.floor(anim / action.delay);
if (anim >= max) {
Renderer.stop(rendering);
Events.setTimeout(function(){
SlotMachine.remove();
}, 500);
}
break;
}
animation = action.animations[anim % action.animations.length];
// Initialize context
SpriteRenderer.bind2DContext(_ctx, 140, 165);
_ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
// Render layers
for (i = 0, count = animation.layers.length; i < count; ++i) {
_entity.renderLayer( animation.layers[i], _sprite, _sprite, 1.0, position, false);
}
};
/**
* If the character moved to attack, once it finished to move ask to attack
*/
function onWalkEnd()
{
// No action to do ?
if (Session.moveAction) {
// Not sure why, but there is a synchronization error with the
// server when moving to attack (wrong position).
// So wait 50ms to be sure we are at the correct position before
// performing an action
Events.setTimeout(function(){
if (Session.moveAction) {
Network.sendPacket(Session.moveAction);
Session.moveAction = null;
}
}, 50);
}
}
jQuery(window).on('mouseup.dragdrop', function(event){
// Only on left click
if (event.which !== 1 && !event.isTrigger) {
return;
}
// Get back zIndex, push the element to the end to be over others components
if (updateDepth) {
Events.setTimeout(function(){
element.css('zIndex', 50);
if (element[0].parentNode) {
element[0].parentNode.appendChild(element[0]);
}
}, 1);
}
container.stop().animate({ opacity:1.0 }, 500 );
Events.clearTimeout(drag);
jQuery(window).off('mouseup.dragdrop');
});
ChatBox.processBattleMode = function processBattleMode( keyId )
{
// Direct process
if (this.ui.find('.battlemode').is(':visible') ||
KEYS.ALT || KEYS.SHIFT || KEYS.CTRL ||
(keyId >= KEYS.F1 && keyId <= KEYS.F24)) {
return BattleMode.process(keyId);
}
var messageBox = this.ui.find('.input .message');
var text = messageBox.val();
// Hacky, need to wait the browser to add text in the input
// If there is no change, send the shortcut.
Events.setTimeout(function(){
// Nothing rendered, can process the shortcut
if (messageBox.val() === text) {
BattleMode.process(keyId);
}
}.bind(this), 4);
return false;
};
/**
* Spam an effect to the scene
*
* @param {object} effect
* @param {number} owner aid
* @param {Array} position
* @param {number} tick
* @param {boolean} persistent
*/
function spamSprite(effect, AID, position, tick, persistent)
{
var entity = EntityManager.get(AID);
if (!entity) {
entity = new Entity();
entity.GID = AID;
entity.position = position;
entity.objecttype = entity.constructor.TYPE_EFFECT;
EntityManager.add(entity);
}
else if (!effect.attachedEntity) {
entity = new Entity();
entity.GID = -1;
entity.position = position;
entity.objecttype = entity.constructor.TYPE_EFFECT;
EntityManager.add(entity);
}
// Play sound
if (effect.wav) {
Events.setTimeout(function ()
{
Sound.play(effect.wav + '.wav');
}, tick - Renderer.tick);
}
// Sprite effect
entity.attachments.add({
file: effect.file,
head: !!effect.head,
direction: !!effect.direction,
repeat: persistent,
stopAtEnd: effect.stopAtEnd
});
}
ItemObtain.set = function set( itemid, identify, amount )
{
var it = DB.getItemInfo( itemid );
var display = identify ? it.identifiedDisplayName : it.unidentifiedDisplayName;
var resource = identify ? it.identifiedResourceName : it.unidentifiedResourceName;
this.ui.find('.content').html(
'<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="'+ itemid +'" width="24" height="24" /> ' +
display + ' ' + DB.getMessage(696).replace('%d', amount)
);
this.ui.css('left', ( Renderer.width - (this.ui.width()) ) >> 1 );
Client.loadFile( DB.INTERFACE_PATH + 'item/' + resource + '.bmp', (function(url){
this.ui.find('img.' + itemid).attr('src', url);
}).bind(this));
// Start tomer
if (_timer) {
Events.clearTimeout(_timer);
}
_timer = Events.setTimeout( this.timeEnd.bind(this), _life );
};
element.mousedown( function(event) {
// Only on left click
if (event.which !== 1) {
return;
}
var x, y, width, height, drag;
var updateDepth = element.css('zIndex') == 50;
// Don't propagate event.
event.stopImmediatePropagation();
// Set element over others components
if (updateDepth) {
element.css('zIndex', 51);
}
x = container.position().left - Mouse.screen.x;
y = container.position().top - Mouse.screen.y;
width = container.width();
height = container.height();
// Start the loop
container.stop();
drag = Events.setTimeout( dragging, 15);
// Stop the drag (need to focus on window to avoid possible errors...)
jQuery(window).on('mouseup.dragdrop', function(event){
// Only on left click
if (event.which !== 1 && !event.isTrigger) {
return;
}
// Get back zIndex, push the element to the end to be over others components
if (updateDepth) {
Events.setTimeout(function(){
element.css('zIndex', 50);
if (element[0].parentNode) {
element[0].parentNode.appendChild(element[0]);
}
}, 1);
}
container.stop().animate({ opacity:1.0 }, 500 );
Events.clearTimeout(drag);
jQuery(window).off('mouseup.dragdrop');
});
// Process dragging
function dragging() {
var x_ = Mouse.screen.x + x;
var y_ = Mouse.screen.y + y;
var opacity = parseFloat(container.css('opacity')||1) - 0.02;
// Magnet on border
if (x_ < 10 && x_ > -10) {
x_ = 0;
}
if (y_ < 10 && y_ > -10) {
y_ = 0;
}
if (x_ + width > Mouse.screen.width - 10 && x_ + width < Mouse.screen.width + 10) {
x_ = Mouse.screen.width - width;
}
if (y_ + height > Mouse.screen.height - 10 && y_ + height < Mouse.screen.height+ 10) {
y_ = Mouse.screen.height- height;
}
container.css({ top: y_, left: x_, opacity: Math.max(opacity,0.7) });
drag = Events.setTimeout( dragging, 15);
}
});
/**
* Entity use skill on another entity with damage
*
* @param {object} pkt - PACKET.ZC.NOTIFY_SKILL
*/
function onEntityUseSkillToAttack( pkt )
{
var srcEntity = EntityManager.get(pkt.AID);
var dstEntity = EntityManager.get(pkt.targetID);
if (srcEntity) {
pkt.attackMT = Math.min( 450, pkt.attackMT ); // FIXME: cap value ?
pkt.attackMT = Math.max( 1, pkt.attackMT );
srcEntity.attack_speed = pkt.attackMT;
if (srcEntity.objecttype !== Entity.TYPE_MOB) {
srcEntity.dialog.set( ( (SkillInfo[pkt.SKID] && SkillInfo[pkt.SKID].SkillName ) || 'Unknown Skill' ) + ' !!' );
}
var action = (SkillInfo[pkt.SKID] && SkillInfo[pkt.SKID].ActionType) || 'SKILL';
srcEntity.setAction({
action: srcEntity.ACTION[action],
frame: 0,
repeat: false,
play: true,
next: {
action: srcEntity.ACTION.READYFIGHT,
frame: 0,
repeat: true,
play: true,
next: false
}
});
}
if (dstEntity) {
var target = pkt.damage ? dstEntity : srcEntity;
var i;
if (pkt.damage && target) {
var addDamage = function(i) {
return function addDamageClosure() {
var isAlive = dstEntity.action !== dstEntity.ACTION.DIE;
var isCombo = target.objecttype !== Entity.TYPE_PC && pkt.count > 1;
EffectManager.spamSkillHit( pkt.SKID, dstEntity.GID, Renderer.tick);
Damage.add( pkt.damage / pkt.count, target, Renderer.tick);
// Only display combo if the target is not entity and
// there are multiple attacks
if (isCombo) {
Damage.add(
pkt.damage / pkt.count * (i+1),
target,
Renderer.tick,
Damage.TYPE.COMBO | ( (i+1) === pkt.count ? Damage.TYPE.COMBO_FINAL : 0 )
);
}
if (isAlive) {
dstEntity.setAction({
action: dstEntity.ACTION.HURT,
frame: 0,
repeat: false,
play: true,
next: {
action: dstEntity.ACTION.READYFIGHT,
frame: 0,
repeat: true,
play: true,
next: false
}
});
}
};
};
for (i = 0; i < pkt.count; ++i) {
Events.setTimeout( addDamage(i), pkt.attackMT + (200 * i)); //TOFIX: why 200 ?
}
}
}
if (srcEntity && dstEntity) {
EffectManager.spamSkill( pkt.SKID, dstEntity.GID, null, Renderer.tick + pkt.attackMT);
}
}
Renderer.onResize = function onResize()
{
Events.clearTimeout(this.resizeTimeOut);
this.resizeTimeOut = Events.setTimeout(this.resize.bind(this), 500);
};