STEEM Battle is a tool which allows users to compare on the STEEM blockchain, this includes posts, users, tags, etc. Currently, I have implemented the first piece of the puzzle surrounding its development, this is the ability to compare users.
The changes for this release can be broken down into two main parts:
- Initial View/Home Page
- Results Page
Within the initial view, I built the ability to present the user with the ability to enter two usernames and submit their request to compare these users. A screenshot showing this is shown below:
Following a submission, a user will be shown the results page, the results page will show a user a side by side view of the two chosen users along with a list of stats related to them. What makes this different from other stats apps as that it provides this in a scoring system, each user is assigned a point based on whether or not they achieved higher for any given stat. For example, if user A had more followers than user B user A would receive a point and so on. The user which has the most number of points at the end of the comparison will be indicated by a winner icon located near scoreline. An example if this page can be seen below:
Following the completion of a comparison, a user can press the compare more button to initiate another comparison.
How was this implemented?
Firstly the mocked an initial concept using AdobeXD as an example of what I mocked is shown below:
Following the completion of this I built the initial landing page using HTML and CSS, this page is the first page the user sees and is used to capture the information required for compare users, this can be found in index.html, styles.css. Alongside this, I implemented the getUsers function which allowed me to grab the user stats for each user. I used the getAccounts call found within this API http://steem.esteem.ws/. When making this call I pass in the information gathered from the landing page into the getAccounts call, based on the number of results returned from the API I iterate through the results to generate the results containers shown on the results page. I also populate a user info container on the results page using the same method.
Following results being gathered I then calculate an overall score for the user, this was simply done by comparing the results of the two users for each individual stat by stating that if x was greater than y then user A gets a point else user B gets the point. The user who has the most points following all of the stats being gather will be deemed the winner.
All of the code which relates to the changes mentioned for grabbing the user info can be found here with userInfo.js:
https://github.com/tobias-g1/steem-battle/blob/master/js/userInfo.js
The changes mentioned in this addition to steembattles can be found within these commits:
Links to these commits can be found here:
Ordered from Newest to Oldest
- https://github.com/tobias-g1/steem-battle/commit/3de7f50b35ad61525702a7bafb52a92f65be2a65
- https://github.com/tobias-g1/steem-battle/commit/ff712bd374d5dcf035586b9e89fe98208e80f3d6
- https://github.com/tobias-g1/steem-battle/commit/38b4b2f1fd392711ac332ecc34dedab57f530834
- https://github.com/tobias-g1/steem-battle/commit/dc9b6dbb58d0df6fa78ecd87448648aab33ed655
- https://github.com/tobias-g1/steem-battle/commit/dc9b6dbb58d0df6fa78ecd87448648aab33ed655
- https://github.com/tobias-g1/steem-battle/commit/48ecbe1f1853004b0e187c067d06775edcca00e1
- https://github.com/tobias-g1/steem-battle/commit/3d4cad028b94b235ce179d83a5fd08d9db3d0100
Current Limitations
- Currently, validation isn't implemented
- Not suitable for mobile user
- Limited Number of stats implemented.
See it in action
A link to a working version of this can be found here: https://tobias-g1.github.io/steem-battle/
Posted on Utopian.io - Rewarding Open Source Contributors