Javascript and Rendering
Almost the entire app is programmed on the front-end. Each page, componenent, action, etc, is all done through Javascript.
Table of Contents
File System
All of the actions are seperated into different files. Here are all of them.
| Name | File Name | Description | Auth Required |
| Components | /lib/chipledger/js/components.js | Stores individual componenent that are NOT shared across pages. | |
| Footer | /lib/chipledger/js/footer.js | Fills the footer element at the bottom of the screen. Has theme switcher menu. | |
| Pages | /lib/chipledger/js/pages.js | All pages for those logged in. Such as settings, games, etc. | |
| Splash | /lib/chipledger/js/splash.js | The splash page, also contains login and register page. | |
| Theme Switcher | /lib/chipledger/js/themeswitcher.js | Stores the code behind changing the color of the navigation bar and light/dark themes. | |
| View | /lib/chipledger/js/views.js | Contains all the code behind the view game page. |
Splash
The Splash page, which is shown to users who are not logged in, is controlled by splash.js.
| Name | Function | Async | Description |
| Login | login() |
Makes a network call to the login api, if successful refreshes page. | |
| Login Alert | loginAlert() |
Shows or hides an error message inside of the login dialog. | |
| Register | register() |
Makes a network call to the register api, if successful refreshes page. | |
| Register Alert | registerAlert() |
Shows or hides an error message inside of the register dialog. | |
| Set Page | setPage(pageName) |
Sets the current url. Used when clicking the register or login buttons. |
Each time a user clicks on register or login, the url is changed to be /login or
/register.
If the user goes to these links beforehand, the popup will open automatically.
Components
This file only includes the navigation at the moment, but can/will be used later on.
| Name | Function | Async | Description |
| Show Navigation | showNav(pageSelected) |
Shows the navigation and highlights the current url that is given as a param. |
Pages that will highlight are /home and /games.
Footer
This file includes no functions, and just generates a footer with the version attached.
Pages
This file contains all pages on Chipledger. It is complex, and a little messy...
| Name | Function | Async | Description |
| Set Params | setParams() |
Gets the current url parameters, and puts them into the array paramList. |
|
| Show Error | showError(message) |
Shows an error at the top of the page. NOT used by view screen on games. | |
| Delete Error | deleteError |
Clears the error message from the DOM. | |
| Set Page | setPage(pageName) |
Sets the URL on the browser, and adds it to the history. | |
| Games Search | gamesSearch |
Code that makes the search work on the games list. | |
| Games | games() |
Sets the page to /games, calls the API for a list of games, and creates the list.
Also creates a dialog for creating new games. |
|
| New Game | newgame() |
Creates an API call to make a new game, if it is successful it sets the page to
/view?game=
|
|
| Home | home() |
Sets the page to /home, and calls the API for release notes. |
|
| Error 404 | error404() |
Sets the document title to "Error 404" and fills dom with a 404 message. | |
| Settings | settings() |
Sets the page to /settings, fills DOM with settings options, and contains more
special functions inside. |
|
| Tutorial | tutorial() |
Sets the page to /tutorial, and fills DOM with content from the data api. |
|
| Find Page | findPage(pathname) |
Finds the page in a switch statement, and runs the pages function. It is ran once on the initial
pageload with document.location.pathname.toLowerCase() as the param, but is then
ran again when popstate is triggered. |
Settings Special Functions
Inside of the settings() function, there are many more functions.
| Name | Function | Async | Description |
| Change Password | changePassword() |
Calls the change password API. | |
| Change Email | changeEmail() |
Calls the change email API. | |
| Delete Account | deleteAccount() |
Calls the delete account API. If successful it refreshes the page. |
View
This file contains all the front-end logic behind showing games and interacting with them.
| Name | Function | Async | Description |
| View | view() |
Creates the View page, sets it to /view, checks if game is valid, and fills
contents of the page. |
|
| Error Show | errorShow(error) |
Rehydrates the page, and shows an error at the top. | |
| Hydrate | hydrate() |
Fills in information on the page with info inside of the data variable. |
|
| Rehydrate | rehydrate() |
Calls hydrate() alongside removing errors. |
|
| Add Player | addPlayer() |
Sends a API call to add a player and rehyrates. | |
| Add Buyin | addBuyin() |
Sends a API call to add a buyin and rehyrates. | |
| Add Cashout | addCashout() |
Sends a API call to rename the game, sets the new name as a url param, and calls upon
view() again. |
|
| Edit Buyin | editBuyin() |
Sends a API call to edit a buyin value, then rehydrates. | |
| Edit Cashout | editCashout() |
Sends a API call to edit a cashout value, then rehydrates. | |
| Edit Buyin Render | editBuyinRender(...) |
Fills in the form with all the data from the selected buyin to edit. Parameters are, in order,
name, value, method, buyinId |
|
| Edit Cashout Render | editCashoutRender(...) |
Fills in the form with all the data from the selected cashout to edit. Parameters are, in order,
name, value, method, cashoutId |
|
| Rename Game | addPlayer() |
Sends a API call to add a player and rehyrates. | |
| Delete Game | deleteGame() |
Sends a API call to delete the game, if successful calls games(). |
Some parts of this may be repeated in pages.js, but this code was mostly ported from an older build and rewriting isn't worth it.