# HTML/Attrs Tester Environment

I have a few objectives (which are working fine, but I want tips in case I can improve it).

Let me try to make this as clear as possible, as this is a much larger project:

There are three move categories:

• Hammer (10 damage)
• Scythe (5 damage)
• Meditate (0 damage)

I will be having hundreds of additions, but these values above are static indefinitely. I'm trying to update a total damage count, but the kicker is that the player can change this move type in the middle of adding other things.

Essentially, I need it to display an accurate estimated damage count based on other values that will end up occurring (this is entirely GUI based, I have the back-end data working).

HTML:

<input type="radio" value="hammer" class="hammer" data-damage="10" name="attackTypeP1" />
<label>Hammer (10)</label>
<input type="radio" value="scythe" class="scythe" data-damage="5" name="attackTypeP1" />
<label>Scythe (5)</label>
<input type="radio" value="meditate" class="meditate" data-damage="0" name="attackTypeP1" />
<label>Meditate (0)</label>

<hr />
<input type="button" id="remDmg" value="Remove Damage" />

<div>Total</div>
<div id="total">0</div>


JS:

$(function() { var dom =$('#total');
var total = 0;
var moveVal = 0;
$('#addDmg').on('click', function() { total += 1; dom.text(total + moveVal); });$('#remDmg').on('click', function() {
total -= 1;
dom.text(total + moveVal);
});
$(':radio').on('click', function() { moveVal =$(this).data('damage');
dom.text(total + moveVal);
});
});


3 questions:

1. I'm using data-attr via HTML to find the values. I understand it would be quicker to run this in an array or something, but if it has to traverse the DOM anyway to find out which one was selected, is there any real performance upgrade opposed to using data in HTML?
2. If these are the only radio buttons on the page, is the way I've built my :radio click function reasonable? Welcoming any tips you could provide if somebody else has advice to make this faster.
3. Is using a variable for moveVal pretty much the only way to tackle this without adding all the other additions and whatnot EVERY time?

Maybe this will make more sense if I show a full demo?

### Play: Js Fiddle: http://jsfiddle.net/epZzP/

One problem I see is that moveVal is shared across every click, but I suspect you want to bind it to each addition so that removing it removes the approach damage. To do this you'll need to store each value with an "added damage" object attached to the character stats.

In order to remove it, you need a way to find it. If the UI works like a stack (removing always undoes the previous addition), you can maintain a global array. However, global state can be quite brittle and difficult to refractor later.

Instead, embed the UI actions either in a UI controller (look up the MVC pattern) or the character builder class itself. If the player should be able to interact with each attack type independently, you'll need to separate the actions by type.

The best model depends heavily on your desired UI capabilities so I can't recommend one over the other without more info.

• I will eventually bind it to the user. We have 12 characters to develop. This should be local for the moment. We're just making a testing UI for the creator. – Nicholas Hazel Apr 15 '14 at 2:23
• @NicholasHazel You'll need to model the character-adjustment operations either way. You can make them UI actions that disappear when the character is finalized or keep them around. But you must capture that value at each step since it changes based on the operation performed and must be undone when removed. – David Harkness Apr 15 '14 at 2:27
• I like the idea though. Make a separate object for each move. I had the same idea, but I wanted to get confirmation first. Upvoted. Thank you! – Nicholas Hazel Apr 15 '14 at 2:27

Ahh, the origins of a simulator. I have always wanted to create one of those. Anyways...

I suggest you model this all in the JS. If you follow MVC, then all data (or most of it) live in the Model, the data storage. The View would be the HTML, and all event handlers like clicks, change, hovers, live in the controller. Controller updates the model data, like add/remove damage and the view updates values when the model data changes.

Using MVC, or a derivative, allows separation of concerns. For instance, you can easily swap HTML and avoid breaking the logic that controls actions and calculations.

• Well I intend to send out a JSON server test of current state every 5 seconds or if user presents submit, but this project is meant for local testing for the next 3 months. – Nicholas Hazel Apr 15 '14 at 2:22