bartvdbraak/SlayerWeightCalculator
1
0
Fork 0
mirror of https://github.com/bartvdbraak/SlayerWeightCalculator.git synced 2025-04-26 17:21:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

README cleanup, additions

Browse source
This commit is contained in:
Bart van der Braak 2020-02-06 16:21:11 +01:00
parent 69fef0bcee
commit f3483983a7
2 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
README.md
View file

@ -1,10 +1,40 @@
# Slayer Weight Calculator
A calculator for slayer geeks that need to know percentages. This branch is will be an update using VueJS.
[![A cross-section of the Applications interface.](application.png)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
> A calculator for slayer geeks that need to know percentages. Reworked in VueJS.
***
The full application can be accessed at:
https://bartvdbraak.github.io/slayweightcalc/index.html
## Why VueJS?
This application was first written with little knowledge of the front-end Javascript landscape. Therefore, only jQuery and Datatables were used in conjunction with vanilla HTML and Bootstrap CSS. The codebase wasn't easily maintainable, making bugfixes or feature additions extremely tedious and time consuming.
The reactiveness and structure that is used in VueJS is alot easier to maintain and extend. Also, I just really wanted to learn more front-end javascript and it's very likely that many parts of the codebase can be improved.
## Why a static API?
This choice stems from the fact that I want users to be able to reach the application in Github pages. The application is meant for RuneScape players, which are (and should be) very hesitant to use tools that may compromise their account details. Therefor, the way to go was: an **open-source codebase** with all the **API endpoints stored** in JSON while the application can be reached by **Github Pages**.
## NPM Libraries
* `lodash` for filtering objects
* `bootstrap-vue` for reactive bootstrap components
* `vue-router` for navigation handling
## Project folder structure
```
.
+-- api/ # python, csv, json files for API generate
+-- public/ # beginning point for VueJS app (index)
+-- src/ # files used by app
| +-- assets/ # images
| +-- components/ # vuejs components
| +-- data/ # json endpoint files
| +-- plugins/ # plugins (bootstrap-vue)
```
## Project setup
```
yarn install

BIN
application.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 312 KiB