69 lines
3.1 KiB
Markdown
69 lines
3.1 KiB
Markdown
Archeage Skills Calculator
|
|
==========================
|
|
|
|
A pure php/javascript skill calculator for the game Archeage. Very easy to implement and to use.
|
|
A basic webpage is set up at http://s285114191.onlinehome.fr/AASkillsCalculator/.
|
|
|
|
The PHP file is used to create the basic setup, the 3 lists, the button and the hidden content. The JS file takes care of every interaction, create the link and also read the - if existed - URL parameter and display the page accordingly.
|
|
|
|
Nothing but pure PHP / JS was used in order to use it the easiest way possible, without having to deal with any framework.
|
|
|
|
##### What's missing #####
|
|
The XML file is currently filled with false content. The same image and description is used for everything. The XML format is described further.
|
|
|
|
## How the files work ##
|
|
#### PHP file ####
|
|
Read the XML and return the HTML code of the calculator.
|
|
#### JS file ####
|
|
Everything is in one file so it's easier to implement, however the code inside the file is divided into several parts so it's still easy to read and edit:
|
|
* **Lists related** - Functions related to the "select" lists.
|
|
* **Skills related** - Functions related to anything that touches specific skills (highlight selected skills, display details, ...).
|
|
* **Points related** - Functions related to the points count.
|
|
* **URL/Skills related** - Functions related to the creation of the link, and reading the parameter to display a specific build.
|
|
|
|
It is also worth mentioning that the **parentNode** / **childNodes** combination has been abused a lot, so changing casually the HTML would most likely break the entire thing.
|
|
|
|
#### XML file ####
|
|
The XML is build that way:
|
|
```xml
|
|
<?xml version="1.0"?>
|
|
<root>
|
|
<ecole name="Name1" id="Name1">
|
|
<active>
|
|
<skill name="Skill Name" img="img/img.png">
|
|
<stat name="Name">Value</stat>
|
|
[...]
|
|
<stat name="Name">Value</stat>
|
|
<description>Lorem ipsum dolor sit amet, consectetur --b--adipiscing elit++b++. Phasellus in vehicula tellus, rutrum bibendum leo. Maecenas quis eleifend risus. Vestibulum --b--cursus++b++ leo sed fermentum vulputate..</description>
|
|
</skill>
|
|
[...]
|
|
</active>
|
|
<passive>
|
|
<skill name="Skill Name" img="img/img.png" req="2">
|
|
<stat name="Name">Value</stat>
|
|
[...]
|
|
<stat name="Name">Value</stat>
|
|
<description>Lorem ipsum dolor sit amet, consectetur --b--adipiscing elit++b++. Phasellus in vehicula tellus, rutrum bibendum leo. Maecenas quis eleifend risus. Vestibulum --b--cursus++b++ leo sed fermentum vulputate..</description>
|
|
</skill>
|
|
[...]
|
|
</passive>
|
|
</ecole>
|
|
[...]
|
|
</root>
|
|
```
|
|
You probably notice a custom tag:
|
|
* **--b-- / ++b++** : It is rendered as BOLD in the page.
|
|
|
|
## Implement the calculator ##
|
|
It's very easy, all you need to do is include the PHP file, the JS file and the CSS file.
|
|
```php
|
|
require_once 'class/AASkillsCalculator.php';
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/style_aaSkillsCalculator.css">
|
|
<script type="text/javascript" src="js/aa_skillsCalculator.js"></script>
|
|
```
|
|
Then you call the **getTree()** method to generate the 3 lists and everything, afterwards the JS file takes care of everything.
|
|
```php
|
|
echo $AASkillsCalculator->getTree();
|
|
```
|