Disc Golf at Buhl
Table of Contents
Disc Golf at Buhl is the first iteration of a larger application. The main focus of this application is to enable players to tracker their's and other players scores in real-time during a match. Players create their own gamerooms which others join. From there players simply update their score and all other player's clients are updated in real-time. Along with individual tee scoring the app also updates a scorecard that represents the overall status of the match.
A live version of the site can be view here.
From the main landing page 2 demo accounts are provided to test the application. There is also an option to create a new user account. The a new user is registered login with the newly created account to handle any account management. Selecting "Account" from the top-left menu will display existing user information along with enabling the user to change the current information or delete the account.
Select "Game" from the top-menu provides users with two options. To create a new game-room or joing an existing one. Selecting "new" provides the user a short form to provide a game-room name and a location. While the app is currently designed for the course at Buhl Park, future updates plan on expending this functionality to allow usage for other courses. Once the room is created the player will be taken directly into the new game-room.
Joining existing gamerooms is as simple as creating one. When a user selects join from the sub-menu a list of existing games will populate the screen. If none are found then a notification is presented. Any new rooms created after navigating to this screen will automatically be displayed. There is no need to refresh the page. Lastly, to join the room simply tap the room you wish to join. Upon entering the room the player will be added to the roster
Once in match the user is presented with 2 menu items. The match scorecard which contains the summary of the match. And a vertical list of all the course tees. The scorecard is hidden under a drop-down, selecting this menu item will display the roster of all the player in the room, the tees and their scores, and the total strokes which each player has taken. The scorecard is presentational in focus, players cannot enter in their scores here. Underneath the scorecard is a vertical list of tees. Each tee contains the roster and a section for players to input their score. By default the roster for each tee is hidden under a drop-down to prevent screen clutter, especially for large teams.
Once a match is completed players simply need to leave the room and the match will be added to their history. The room will be atomically closed when the last player leaves and removed from all connected clients to prevent other from joining the empty room.
Selecting "History" from the main menu will provide a list of all the completed matches the user has played. Each match is automatically added when a player leave a game-room. Note that navigating to "Account" or "History" during a match does not add the match to history. The functionality only occurs when a player elects to leave a game-room. As with the scorecard and tee rosters, the roster and scores are hidden under a drop-down menu. By default the matches title, date, and location are displayed ina vertical list. Selecting one of these matches will then display the scorecard for that match.
The core stack used for this application is al follows...
- React / Redux client served from Netlify
- Node/Express/Socket.io server hosted from Heroku
- MongoDB hosted on mLab
- HTML 5, CSS3
- Server Side
- Route: "/users/" - Route provides a path to 4 endpoint used for user management.
- Route: "/history/" - Rout provides a path for managing completed user matches.
- Client Side
- user - Used for managing user accounts.
- gameMngt - Managing creating and storing current gamerooms.
- match - Managing player roster & scores for the current match players are in.
- history - Used for storing & retrieving users match history.
- users - 6 synchronous actions, 4 asynchronous.
- gameManagement - 2 synchronous actions, 4 socket.io actions
- matchManagement - 6 synchronous actions, 2 socket.io actions
- history - 2 synchronous actions, 2 asynchronous.
Goal is in the near future ti simplify the "/user" endpoints. Also, removing matches is currently used to remove testing matches from the server. Currently exploring the idea of allowing players to remove matches but as more stats are added there is a concern with boosting stats.
- Intergrate WebGL/Three.js course into Game section.
- Refractor UI to work with new 3D course representation.
- Enable support for other courses (Excluding WebGL Map)
- App currently not at 1.0 release...