Project Refactor

[matheussampaio]

Hi, I found your project here on github and really liked it, it seems there is nothing like that for Tree of Savior (yeap, I'm playing too 😄 ), so I forked and start looking a way to collaborate. But I struggling to understand the project, so I starting refactoring the project:

• Change the folders structure.
• Separating controllers, factories and filters on individual files.
• Add gulp for build step process
• Add scss.
• And a lot of minor things.

Do you have an interest on iterate on what I'm doing? I can create a PR here.

Would be awesome to help you with this project, I'm looking for a good map for ToS. 😃

[vtange]

Sure, we can work together.

This was the first app I built with Angular. Somethings are very messy. The map was pulled straight from the old map at ToSBase http://www.tosbase.com/game/world-map/

Map Zone data and Monster Data is stored in JSON and then is ng-repeated with filters and stuff.

Last I recall I stopped working on this app since I didn't know how to set up a persistent database (you can edit and save monsters but the change is gone if you reload the page)

[matheussampaio]

It's fine, I already have some experience with Angular.

As soon as I finish the refactor (fix what I broke) I'll create a PR here.

[matheussampaio]

So, what is your idea in edit the monsters?

I'm asking because I want to know if this is really important for now, since it makes the app a lot more complex (yes, I'm struggling to refactor the index.html), and if it's not, we could skip it and add it back later.

Tomorrow I'm going to normalize the images filenames and refactor some ng-switch.

For example:

<td data-ng-switch on="monster.kind">
    <img data-ng-switch-when="Normal" src="assets/images/mon_info/mon.png" />
    <img data-ng-switch-when="Boss" src="assets/images/mon_info/boss.png" />
    <br>{{monster.kind}}
</td>
<td data-ng-switch on="monster.race">
    <img data-ng-switch-when="Mutant" src="assets/images/mon_info/paramune.png" />
    <img data-ng-switch-when="Beast" src="assets/images/mon_info/widling.png" />
    <img data-ng-switch-when="Demon" src="assets/images/mon_info/velnias.png" />
    <img data-ng-switch-when="Plant" src="assets/images/mon_info/forester.png" />
    <img data-ng-switch-when="Insect" src="assets/images/mon_info/klaida.png" />
    <br>{{monster.race}}
</td>
<td data-ng-switch on="monster.elem">
    <img data-ng-switch-when="Earth" src="assets/images/mon_info/earth.png" />
    <img data-ng-switch-when="Melee" src="assets/images/mon_info/melee.png" />
    <img data-ng-switch-when="Dark" src="assets/images/mon_info/dark.png" />
    <img data-ng-switch-when="Poison" src="assets/images/mon_info/poison.png" />
    <img data-ng-switch-when="Ice" src="assets/images/mon_info/ice.png" />
    <img data-ng-switch-when="Lightning" src="assets/images/mon_info/lightning.png" />
    <img data-ng-switch-when="Holy" src="assets/images/mon_info/holy.png" />
    <img data-ng-switch-when="Fire" src="assets/images/mon_info/fire.png" />
    <br>{{monster.elem}}
</td>
<td data-ng-switch on="monster.armr">
    <img data-ng-switch-when="Cloth" src="assets/images/mon_info/cloth.png" />
    <img data-ng-switch-when="Leather" src="assets/images/mon_info/leather.png" />
    <img data-ng-switch-when="Plate" src="assets/images/mon_info/iron.png" />
    <img data-ng-switch-when="Ghost" src="assets/images/mon_info/ghost.png" />
    <br>{{monster.armr}}
</td>
<td data-ng-switch on="monster.foot">
    <img data-ng-switch-when="Normal" src="assets/images/mon_info/normal.png">
    <img data-ng-switch-when="Stationary" src="assets/images/mon_info/holding.png">
    <img data-ng-switch-when="Flying" src="assets/images/mon_info/flying.png">
    <br>{{monster.foot}}
</td>

to

<td>
    <img ng-src="assets/images/mon_info/{{monster.kind}}.png"/>
    <br>
    {{monster.kind}}
</td>
<td>
    <img ng-src="assets/images/mon_info/{{monster.race}}.png" />
    <br>
    {{monster.race}}
</td>
<td>
    <img ng-src="assets/images/mon_info/{{monster.elem}}.png" />
    <br>
    {{monster.elem}}
</td>
<td>
    <img ng-src="assets/images/mon_info/{{monster.armr}}.png" />
    <br>
    {{monster.armr}}
</td>
<td>
    <img ng-src="assets/images/mon_info/{{monster.foot}}.png">
    <br>
    {{monster.foot}}
</td>

[vtange]

That's great. Less clutter. 👍

You can see my original plan for the saving/editing monsters at the old "monsterDb' controller.
$scope.editedItem = {};
$scope.isEditing=false;
$scope.onMonsterNum = -1;
$scope.editrow=function(index){
$scope.isEditing=true;
$scope.onMonsterNum = index;
angular.copy($scope.MonsterDB.monstall[index], $scope.editedItem);
}
$scope.editPending=function(index){
return $scope.onMonsterNum === index;
}
$scope.save=function(index){
console.log("saving..");
$scope.isEditing=false;
$scope.onMonsterNum = -1;
angular.copy($scope.editedItem, $scope.MonsterDB.monstall[index]);
//add a hard,persitent save function here.
//clear editedItem -> LAST, or you save nothing lol
$scope.editedItem = {}
}
$scope.cancelEdit=function(){
$scope.isEditing=false;
$scope.onMonsterNum = -1;
$scope.editedItem = {};
}
$scope.delete=function(index){
$scope.isEditing=false;
$scope.onMonsterNum = -1;
$scope.editedItem = {};
$scope.MonsterDB.monstall.splice(index,1);//could also simply angular copy now, and end up with empty object for index. use if index problem with monster create
//add a hard,persitent delete function here.
}

basically, when you click the edit button, we clone the selected monster into the "edited item" object, and then when you save it, the clone object replaces the old one, with the changes you made.

I was planning to add a persistent save to the JSON file (monstall) where all the monster data is stored, but I didn't know how to do it yet back then.