Fixes and API Documentation

CHANGELOG.md

@@ -4,18 +4,34 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.6.0 [05/25/2019]
+### Additions
+- Added API documentation.
+### Fixes
+- Now using `pagehide` for disconnect testing. Better than `beforeunload`.
+- Fixed toggle all decks not instantly displaying on other clients.
+- Fixed Toggle All button being available to press on clients other than the host.
+
+### Known Bugs
+- The player's hand shifts up slightly on hover.
+- Mobile players are still kept in game even after leaving due to the way `pagehide` works.
+
 ## 1.5.0 [06/25/2019]
 ### Additions
 - REST API. Documentation coming soon!
 
 ### Fixes
 - Fixed kill game not working properly.
 
+### Known Bugs
+- The player's hand shifts up slightly on hover.
+- Mobile players are still kept in game even after leaving due to the way `beforeunload` works.
+
 ## 1.4.0 [06/24/2019]
 ### Additions
 - New server and client rewrite. Stabler server.
+
 ### Known Bugs
-- There is an inconsistency with players leaving making the game playable after a game ended.
 - The player's hand shifts up slightly on hover.
 - Kill game does not work.
 

README.md

@@ -1,2 +1,24 @@
-# Fullstack System Boilerplate
-Run `npm start` or `fullstack-system dev` to start the development server.
+## Play
+You can play the game at http://cards-against-humanity.surge.sh.
+
+## Built With (Major Only)
+- React
+- Material UI
+- [Dave's Fullstack System](https://github.com/imdaveead/fullstack-system/)
+- Docsify (Documentation)
+- Node.JS (Server)
+
+### Server
+The server was written in **Node.JS** along with **Socket.IO** and the code is at https://hparcells.github.io/cards-against-humanity/. The server primary action is to store the game data along with distribute it to the players when it is updated, while the client does minor logic before sending the action to the server.
+
+## Motivation
+The motovation for this project came from an idea to create some sort of card or board game within React, and I though a card game would be easier that a board game. This was also during the time when I was learning React and wanted to make a larger project then I ever have done before.
+
+Development time took around two and a half weeks, way shorter than I though it would take, given that I was gone on a trip during that time as well.
+
+## Future Roadmap
+- [ ] Desktop App via **Electon**
+
+## Credits
+- Hunter Parcells (Me): Almost the whole game.
+- [Dave](https://github.com/imdaveead): Implementing animations for the cards.

docs/_sidebar.md

@@ -1,2 +1,3 @@
 * [Home](/)
 * [Writing Custom Decks](custom-decks.md)
+* [API](api.md)

docs/api.md

@@ -0,0 +1,35 @@
+# API
+> Get data with the REST API.
+
+
+## Table of Contents
+- [API](#API)
+  - [Table of Contents](#Table-of-Contents)
+  - [URL](#URL)
+  - [Endpoints](#Endpoints)
+    - [/currentGame](#currentGame)
+    - [/sets](#sets)
+    - [/set/:set](#setset)
+    - [randomWhiteCard/:set?](#randomWhiteCardset)
+    - [randomBlackCard/:set?](#randomBlackCardset)
+
+## URL
+You can access the API through: `https://cah-game.herokuapp.com/api/`.
+
+## Endpoints
+### /currentGame
+Gets the current game object of the running game.
+
+### /sets
+Lists all the valid set IDs available.
+
+### /set/:set
+Gets the data of a specified set. The `set` parameter has to be a valid set ID. Set IDs can be found through `/sets`.
+
+### randomWhiteCard/:set?
+Gets a random white card from a set. If so `set` parameter is provided, it grabs a random white card from the default deck. Set IDs can be found through `/sets`.
+
+### randomBlackCard/:set?
+Gets a random black card from a set. If so `set` parameter is provided, it grabs a random black card from the default deck. Set IDs can be found through `/sets`.
+
+This only returns the text of the black card. It does not include how many white cards must be chosen.

package.json

@@ -1,14 +1,15 @@
 {
   "name": "cards-against-humanity",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Another Cards Against Humanity clone built in React.",
   "private": true,
   "scripts": {
     "start": "fullstack-system dev",
     "dev": "fullstack-system dev",
     "build": "fullstack-system build",
     "clean": "fullstack-system clean",
-    "production": "fullstack-system production -p $PORT"
+    "production": "fullstack-system production -p $PORT",
+    "docs": "docsify serve ./docs"
   },
   "dependencies": {
     "@material-ui/core": "^4.1.2",

src/client/components/App.jsx

@@ -267,6 +267,7 @@ class App extends Component {
         decks: toggledDecks
       }
     }));
+    socket.emit('updatedDecks', toggledDecks);
   }
   newCustomDeck = (file) => () => {
     socket.emit('newCustomDeck', file);

src/client/components/Game.jsx

@@ -96,8 +96,11 @@ class Game extends Component {
   handleTimeoutTimeChange = (event) => {
     this.setState({ timeoutTime: event.target.value });
   }
-  exit = () => {
-    socket.emit('playerDisconnect', this.props.username);
+
+  componentDidMount() {
+    window.addEventListener('pagehide', (event) => {
+      socket.emit('playerDisconnect', this.props.username);
+    });
   }
 
   render() {
@@ -109,7 +112,6 @@ class Game extends Component {
 
     return (
       <div id='game-area'>
-        <Beforeunload onBeforeunload={this.exit} />
         {
           !game.started
             ? <>
@@ -142,7 +144,7 @@ class Game extends Component {
                 }
 
                 <Typography variant='h4' style={{ marginTop: '20px' }}>Select Decks to Use</Typography>
-                <Button variant='outlined' color='primary' className={classes.button} onClick={toggleAllDecks}>Toggle All</Button>
+                <Button variant='outlined' color='primary' className={classes.button} onClick={toggleAllDecks} disabled={username !== game.players[0].username}>Toggle All</Button>
 
                 <Typography variant='h5'>Official</Typography>
                 <FormGroup row>