Cyan Street http://cyanstreet.net Just notices Wed, 16 Dec 2009 10:45:47 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Specific of getting HTML form attributes by JavaScript code in Internet Explorer http://cyanstreet.net/programming/html-form-attributes-internet-explorer/ http://cyanstreet.net/programming/html-form-attributes-internet-explorer/#comments Mon, 16 Nov 2009 12:15:18 +0000 admin http://cyanstreet.net/?p=131 Even such simple action as getting attributes of an html form by JavaScript can sometimes confuse the developer. Internet Explorer, as it often does, makes us research its "illogical logic".

Let's assume we have an HTML form looking like this:

<form action="form1 action attribute" id="f1">
<input name="input1" value="first input value">
</form>

To access form's "action" attribute (or any other attribute) we may use several methods, i.e.:

  • form.action
  • form.getAttribute('action')
  • form.attributes['action'].value
  • form.getAttributeNode('action').value

Also, to access one of the form’s fields we may use the following method: "form.input1", where "input1" is the value of the "name" attribute of the field inside the form. But lets see what happens if "name" attribute of an input inside a form is the same as the name of one of form's attributes.

To illustrate this, lets take a simple HTML document with a form and several elements, and add some JavaScript code showing what we receive using different methods of getting form attributes.

Example is available here (example.html), its code looks like this:

<html>
<head>
<script>
function alert_stat() {
var f = document.getElementById("f");
var a = "";
a += "form.method = " + f.method + "\n\r\n\r";
a += "form.action = " + f.action + "\n\r";
a += "form.action.value = " + f.action.value + "\n\r\n\r";
a += "form.getAttribute('action') = " + f.getAttribute('action') + "\n\r";
a += "form.getAttribute('action').value = " + f.getAttribute('action').value + "\n\r\n\r";
a += "form.attributes['action'] = " + f.attributes['action'] + "\n\r";
a += "form.attributes['action'].value = " + f.attributes['action'].value + "\n\r\n\r";
a += "form.getAttributeNode('action') = " + f.getAttributeNode('action') + "\n\r";
a += "form.getAttributeNode('action').value = " + f.getAttributeNode('action').value + "\n\r\n\r";
a += "form.getAttribute('customName') = " + f.getAttribute('customName') + "\n\r";
a += "form.getAttribute('customName').value = " + f.getAttribute('customName').value + "\n\r";
alert(a);
}
</script>
</head>
<body>
<form action="value of form's 'action' attribute" id="f" customName="value of form's custom attribute" method='post'>
<input name="action" value="value of input (name='action')" />
<input name="customName" value="value of input (name='cusomName') ">
</form>
<input type='button' onclick="javascript:alert_stat()" value='click me'>
</body>
</html>

If we open this example in any browser other than IE and press the button, we will see that values we receive are quite logical. But let’s see what happens in any version of Internet Explorer:
"form.method" returns the "method" attribute, how it should, but "form.action" returns input object that has "name" attribute equal to "action". OK, let’s look further: "form.getAttribute('action')" doesn't return attribute, but also returns input object.

For me this is not logical at all. However, we still able to access attribute node by calling "form.attributes['action']" or "form.getAttributeNode['action']". We can see the same behavior if the name of the attribute is not html-standart.

The real problems may occur because usually "getAttribute" method is used to get an attribute, but in case described above this method doesn't return what it must return.

So we can assert the following:


When getting HTML form’s attribute by getAttribute method in Internet Explorer, it will not return an attribute but will return a form field object, if the “name” attribute of this field is the same as the name of form’s attribute.

Good point is that other browsers do not have such problems. However developing cross-browser application often makes us to take in account such illogical features.

Related posts:

]]> http://cyanstreet.net/programming/html-form-attributes-internet-explorer/feed/ 0 Specific of rising onMouseOver and onMouseOut events of HTML elements http://cyanstreet.net/programming/onmouseover-onmouseout-of-html-elements/ http://cyanstreet.net/programming/onmouseover-onmouseout-of-html-elements/#comments Thu, 12 Nov 2009 14:21:34 +0000 admin http://cyanstreet.net/?p=129 In this clause I would like to review some specific of handling onMouseOver and onMouseOut events for HTML elements by JavaScript scenarios.

To see what is happening lets take simple HTML document with a few elements nested inside each other.

<html>
<body>
<div>
First level div
<div class="d2">
Second level div <br />
<span>span inside second div</span>
</div>
<br />
<span>span inside first div</span>
</div>
</body>

Then let’s modify it in the following way:

  • For the top-level DIV add handlers for onMouseOver and onMouseOut events.
  • Add borders for the elements to see where limits of each element are.
  • Add element where log of handling events will be written and some JavaScript to write this statistic.

The HTML document we got available here (example_1.html).
Its code looks like this:

<html>
<head>
<style>
.d1 { width:250px; height:150px; border:1px solid red; }
.d2 { border:1px solid blue; margin:10px; }
span { border:1px solid cyan; }
#log_container { border:1px solid green; }
</style>
<script>
var logContainer;
var index = 0;
function writelog(msg) { index++; logContainer.innerHTML += index + ". " + msg + "<br />"; }
function mouseover() { writelog("onMouseOver Event"); }
function mouseout() { writelog("onMouseOut Event"); }
</script>
</head>
<body>
<div class="d1" onmouseover="javascript:mouseover()" onmouseout="jabascript:mouseout()">
first div
<div class="d2">
another div <br />
<span>span inside second div</span>
</div><br />
<span>span inside first div</span>
</div><br /><br />
<div id='log_container'></div>
</body>
<script>logContainer = document.getElementById('log_container');</script>
</html>

Now, if we move mouse cursor over the elements and look at the output statistic we may notice two regularities:

  • When cursor crosses the red border (border of the top-level DIV with event handlers), as it should be, two events – onMouseOver and onMouseOut occur.
  • But interesting things happen when mouse cursor crosses limits of other elements (nested inside DIV with attached event handlers). Despite that cursor is not crossing borders of the top-level DIV, its events occur anyway. And they occur in the following order: each time the cursor crosses limits of a nested element (at that, it doesn’t matter if it moves inside or outside of the element) firstly onMouseOut event occurs, and then instantly onMouseOver event. And it is the same in any browser.

So now we can affirm the following:

events onMouseOver and onMouseOut of a parent element occur when mouse cursor crosses limits of a child element.

Now lets look what can be affected by such behavior.

The most widespread area where we can face usage of onMouseOver and onMouseOut events is drop-down menus on websites.

In the simplest case they behave like this:
When onMouseOver event for some element occur, some JavaScript code showing the menu is executed, and when onMouseOut event occur – some code hiding the menu.
This logic could be ideal, if these “undesirable” events don’t occur when cursor moves inside a displayed menu. Such behavior may become the reason of rising of unexpected effect, because JavaScript code of the onMouseOver and onMouseOut event handles is executed multiple times when cursor crosses limits of nested elements.

Here is a part of the page from real project (example_2.html) where I had to face such problems. If you open this page in IE, then you can notice how drop-down menus “blink” when cursor moves inside them. This happened exactly because of rising of the unexpected events.

So we can make the following conclusion: while developing JavaScript scenarios we can not manage rising of unexpected onMouseOver and onMouseOut events, so that we must just take into account the specific reviewed in this article and adjust scenarios logic accordingly.

Related posts:

]]> http://cyanstreet.net/programming/onmouseover-onmouseout-of-html-elements/feed/ 0 Melee damage calculation in RO http://cyanstreet.net/ragnarok-online/melee-damage-calculation/ http://cyanstreet.net/ragnarok-online/melee-damage-calculation/#comments Tue, 25 Aug 2009 11:23:51 +0000 admin http://cyanstreet.net/?p=91 While developing the calc I spent many hours trying to understand - why the values of damage I'm getting in my calc are different from the ones I'm getting in the game. All formulas taken from different guides like this one were checked many times and were correct, but the values still was not the same. With time I've finally got correct values. The biggest problem was in different ways of rounding intermediate values.

In the guide presented below I've tried to describe correct way of calculation melee damage in RO.

Mathematical functions used in this guide:

  • Floor(value) - round value down
  • Round(value) - mathematical round
  • Max(value1, value2) - returns maximum of value1 and value2
  • Min(value1, value2) - returns minimum of value1 and value2

  1. Calculate attack form stats

    ATK = STR + Round(Floor(STR/10) * Floor(STR/10)) + Floor(DEX/5) + Floor(LUCK/5)

  2. Add attack modifiers from equipment
    i.e. Zipper Bear Card (ATK+30), Picky Card (ATK+10), Ring of Flame Lord (ATK+15) etc.

    ATK = ATK + AttackModifier1 + AttackModifier2 .. + AttackModifierN

  3. Add weapon attack
    If attacking without weapon skip this and go to IV

    1. Calculate dex-based item

      DEX_ITEM = Min(WEAPON_ATK, Floor(DEX * (1 + (WEAPON_LVL-1) * 0.2)))

    2. Calculate minimum and maximum weapon danger refine bonuses (MIN_WEAPON_DANGER_REF_BONUS, MAX_WEAPON_DANGER_REF_BONUS)

      1. If no danger refine then minimum and maximum bonuses are 0.
      2. Else

        MIN_WEAPON_DANGER_REF_BONUS = 1
        MAX_WEAPON_DANGER_REF_BONUS = DANDER_REF_MPLIER * (REFINE_RATE + WEAPON_LVL - 8)

        Where:

        • WEAPON_LVL - the level of equiped weapon
        • REFINE_RATE - the total refine rate of the equiped weapon
        • DANDER_REF_MPLIER depends on WEAPON_LVL:
          • lvl 1 - MPLIER=3
          • lvl 2 - MPLIER=5
          • lvl 3 - MPLIER=8
          • lvl 4 - MPLIER=14
    3. Apply calculated values to attack.
      Note, that this is where damage value branches to minimum and maximum.

      MIN_DAMAGE = ATK + MIN_WEAPON_DANGER_REF_BONUS + Floor((DEX_ITEM + IMPOSITO_MANUS) * WEAPON_SIZE_MODIFIER)
      MAX_DAMAGE = ATK + MAX_WEAPON_DANGER_REF_BONUS + Floor((WEAPON_ATK - 1) + IMPOSITO_MANUS) * WEAPON_SIZE_MODIFIER)

      Where:

      • WEAPON_ATK - the attack rate fo the equipped weapon
      • WEAPON_SIZE_MODIFIER - weapon size modifier. It depends on weapon type and size of target. If damager has Weapon Perfection buff (Blacksmith), then WEAPON_SIZE_MODIFIER always equal to 1.
      • IMPOSITO_MANUS - Imposito Manus buff bonus = IMPOSITO_MANUS_LVL*5.
  4. Apply attack modifier buffs

    MIN_DAMAGE = Floor(MIN_DAMAGE * (BUFF_BONUS + 100) / 100)
    MAX_DAMAGE = Floor(MAX_DAMAGE * (BUFF_BONUS + 100) / 100)

    Where BUFF_BONUS is the bunus to attack from the buff in percents:

    • 100 for Gospel ATK+100%
    • 5 + 3 * (SKILL_LEVEL - 1) for Provoke
    • 5 for Power Thrust

    Note, that bonuses must be applied one by one, the order does not matter.

  5. Apply active skill attack modifier
    If attack is not a skill then skip this and go to VI
    If skill has some special conditions (i.e. Azura Strike) then this item and items below must be skipped and damage must be calculated according to skill's formula.
    This formula and formulas below valid only for attack-based skills with no special conditions (i.e. Sonic Blow, Bash, Tripple Blow, etc)

    MIN_DAMAGE = Floor(MIN_DAMAGE * SKILL_DAMAGE_MODIFIER / 100)
    MAX_DAMAGE = Floor(MAX_DAMAGE * SKILL_DAMAGE_MODIFIER / 100)

    Where SKILL_DAMAGE_MODIFIER in percents.
    I.e. for Sonic Blow SKILL_DAMAGE_MODIFIER = SKILL_LEVEL * 50 + 200

  6. Apply target's defence (hard def)

    MIN_DAMAGE = Floor(MIN_DAMAGE * (100-RESULT_DEF) / 100)
    MAX_DAMAGE = Floor(MIN_DAMAGE * (100-RESULT_DEF) / 100)

    Where RESULT_DEF is the value of basic def (from equipment) with different def modifiers applied. I.e:

    • Provoke casted on mob reduces its def as

      RESULT_DEF = DEF - Floor(DEF*(5 + 5*PROVOKE_SKILL_LEVEL)/100)

    • Freeze and Stone Curse statuses reduce def by half

      RESULT_DEF = DEF - Floor(DEF * 50/100)

    • Poison status reduces def by 25%

      RESULT_DEF = DEF - Floor(DEF * 25/100)

    • Gospel bonus Def+100% increases def by 100%

      RESULT_DEF = DEF * 2

  7. Apply target's vit defence (soft def)

    1. Calculate minimum and maximum vit def

      1. For players:

        VIT_DEF_MIN = Floor(VIT * 0.5) + Floor(VIT * 0.3)
        VIT_DEF_MAX = Floor(VIT * 0.5) + Max(Floor(VIT * 0.3), Floor((VIT * VIT)/150) - 1)

      2. For mobs:

        VIT_DEF_MIN = VIT
        VIT_DEF_MAX = Max(VIT, VIT + (Floor(this.v.Target.StatsVit/20) * Floor(this.v.Target.StatsVit/20)) - 1)

    2. Apply Vit def modifiers to the recieved values

      1. Angelus buff increases vit def:

        VIT_DEF_MIN = VIT_DEF_MIN + Floor(VIT_DEF_MIN * (5 * ANGELUS_SKILL_LEVEL) / 100)
        VIT_DEF_MAX = VIT_DEF_MAX + Floor(VIT_DEF_MAX * (5 * ANGELUS_SKILL_LEVEL) / 100)

      2. Provoke reduces vit def as

        VIT_DEF_MIN = VIT_DEF_MIN - Floor(VIT_DEF_MIN * (5 + 5 * PROVOKE_SKILL_LEVEL)/100)
        VIT_DEF_MAX = VIT_DEF_MAX - Floor(VIT_DEF_MAX * (5 + 5 * PROVOKE_SKILL_LEVEL)/100)

      3. Freeze and Stone Curse statuses on mob reduce its vit def by half

        VIT_DEF_MIN = Round(VIT_DEF_MIN * 0.5)
        VIT_DEF_MAX = Round(VIT_DEF_MAX * 0.5)

    3. Apply recieved values:

      MIN_DAMAGE = MIN_DAMAGE - MAX_VIT_DEF
      MAX_DAMAGE = MAX_DAMAGE - MIN_VIT_DEF

  8. Apply non-danger weapon refine bonus

    MIN_DAMAGE = MIN_DAMAGE + WEAPON_NONDANGER_REF_BONUS
    MAX_DAMAGE = MAX_DAMAGE + WEAPON_NONDANGER_REF_BONUS

    Where

    WEAPON_NONDANGER_REF_BONUS = MODIFIER * WEAPON_REFINE_RATE

    MODIFIER depends on level of equipped weapon:

    • lvl 1 - MODIFIER=2
    • lvl 2 - MODIFIER=3
    • lvl 3 - MODIFIER=5
    • lvl 4 - MODIFIER=7
  9. Apply Weapon Mastery Skill
    I.e. Mace Mastery, Katar Mastery, Knuckle mastery, etc

    MIN_DAMAGE = MIN_DAMAGE + MASTERY_BONUS
    MAX_DAMAGE = MAX_DAMAGE + MASTERY_BONUS

    Where MASTERY_BONUS usually is 3*MASTERY_SKILL_LEVEL

  10. Apply damage modifiers from skills

    MIN_DAMAGE = Floor(MIN_DAMAGE * (DAMAGE_MODIFIER / 100))
    MAX_DAMAGE = Floor(MAX_DAMAGE * (DAMAGE_MODIFIER / 100))

    Where DAMAGE_MODIFIER is:

    1. For Enchant Deadly Poison

      DAMAGE_MODIFIER = 150 + 50 * EDP_SKILL_LEVEL

    2. For Advanced Katar Mastery

      DAMAGE_MODIFIER = 110 + 2 * ADVANCED_KATAR_MASTERY_SKILL_LEVEL

    3. For Sonic Acceleration

      DAMAGE_MODIFIER = 110

    and so on.
    Note, that this bonuses, as always, must be applied not by their summ, but one by one.

  11. Apply different damage modifiers

    MIN_DAMAGE = Floor(MIN_DAMAGE * (100 + DAMAGE_MODIFIER) / 100)
    MAX_DAMAGE = Floor(MAX_DAMAGE * (100 + DAMAGE_MODIFIER) / 100)

    1. Race modifiers.
      i.e. Hydra Card gives race damage modifier 20 on demi-human race
    2. Size modifiers
      i.e. 2 Skeleton Worker Cards when hitting Medium-sized enemy give DAMAGE_MODIFIER=30
    3. Element modifiers
      i.e. 4 Drainliar Cards give DAMAGE_MODIFIER=80 on Water property target
    4. All damage modifiers
      i.e. Turtle General Card - DAMAGE_MODIFIER=20
  12. Apply different resist modifiers

    MIN_DAMAGE = Floor(MIN_DAMAGE * (100 - RESIST_MODIFIER) / 100)
    MAX_DAMAGE = Floor(MAX_DAMAGE * (100 - RESIST_MODIFIER) / 100)

    1. Race modifiers
      i.e. race RESIST_MODIFIER is 40 if Thara Frog Card and Feather Beret equipped
    2. Element damage modifiers
      i.e. Raydrick card
    3. Energy coat
      different values depending on target's sp. Maximum resist is 30
    4. Non-bosses damage modifiers
      Alice Card increases damage from non-bosses on 40%. RESIST_MODIFIER = -40
  13. Apply last damage modifiers

    MIN_DAMAGE = Floor(MIN_DAMAGE * WOE * TERNA * ASSUMPTIO)
    MAX_DAMAGE = Floor(MAX_DAMAGE * WOE * TERNA * ASSUMPTIO)

    Where

    • WOE is 0.6 for WoE mechanic and 1 for PvP/PvM mechanic
    • ASSUMPTIO is 0.666 if target has Assumptio buff and 1 otherwise
    • ERNA is 2 if target has Lex Aetherna, otherwise 1
  14. Apply element modifier

    MIN_DAMAGE = Floor(MIN_DAMAGE * ELEMENT_MODIFIER/100)
    MAX_DAMAGE = Floor(MAX_DAMAGE * ELEMENT_MODIFIER/100)

    Where ELEMENT_MODIFIER is percentage value of target's element and damager's weapon element.
    i.e. for Neutral element attack to Ghost 1 property target ELEMENT_MODIFIER is 25

  15. Apply Fiber Lock bonus
    If target is in Fiber Lock and damager's element is Fire, then

    MIN_DAMAGE = MIN_DAMAGE*2
    MAX_DAMAGE = MAX_DAMAGE*2

  16. Apply number of hits

    MIN_DAMAGE = Floor(MIN_DAMAGE / NUMBER_OF_HITS) * NUMBER_OF_HITS
    MAX_DAMAGE = Floor(MAX_DAMAGE / NUMBER_OF_HITS) * NUMBER_OF_HITS

    I.e. for Sonic Blow skill NUMBER_OF_HITS is 8, for Bash is 1

Related posts:

]]> http://cyanstreet.net/ragnarok-online/melee-damage-calculation/feed/ 0 Changed layout http://cyanstreet.net/uncategorized/changed-layout/ http://cyanstreet.net/uncategorized/changed-layout/#comments Thu, 20 Aug 2009 16:22:27 +0000 admin http://cyanstreet.net/?p=88 Just finished cutting of new layout. Thanks to sairin for the design =).

Related posts:

  • none
]]> http://cyanstreet.net/uncategorized/changed-layout/feed/ 0 UNDER CONSTRUCTION http://cyanstreet.net/uncategorized/hello-world/ http://cyanstreet.net/uncategorized/hello-world/#comments Thu, 16 Jul 2009 12:00:34 +0000 admin http://cyanstreet.net/?p=1 Hello there.

This site is currently under construction, but some stuff is already available. Ragnarok Online players may find this calculator and these maps interesting.

Related posts:

  • none
]]> http://cyanstreet.net/uncategorized/hello-world/feed/ 1