Externalized core functionality. Added reference.

README.md

@@ -15,6 +15,7 @@ This repository contains a set of template files for building a multi-device, mu
     * [Using with Heroku](#using-with-heroku)
         * [What is Heroku?](#what-is-heroku)
         * [Installation](#heroku-installation)
+* [Reference](docs/REFERENCE.md)
 
 ![An example image of the base project in action. It shows a host window on the left side of a screen populated by two colored squares, each matching client controller windows on the right side of the screen.](data/example.png)
 

docs/REFERENCE.md

@@ -0,0 +1,332 @@
+[Home](../README.md)
+
+# Reference
+
+[Client](#client)
+* [setupClient()](#setupclient)
+* [sendData()](#senddata)
+* [isClientConnected()](#isclientconnected)
+
+[Host](#host)
+* [setupHost()](#setuphost)
+* [isHostConnected()](#ishostconnected)
+* [displayAddress()](#displayaddress)
+* [Callbacks](#callbacks)
+    * [onClientConnect()](#onclientconnect)
+    * [onClientDisconnect()](#onclientdisconnect)
+    * [onReceiveData()](#onreceivedata)
+
+-----
+
+## Client
+
+-----
+
+#### setupClient()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+// Network settings
+const serverIp      = '127.0.0.1';
+const serverPort    = '3000';
+const local         = true;   // true if running locally, false
+                              // if running on remote server
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+
+  setupClient();
+}
+```
+##### Description
+Sets up client to connect to server and send messages to host.
+
+##### Syntax
+```javascript
+setupClient()
+```
+
+##### Parameters
+`None`
+
+##### Returns
+`None`
+
+-----
+
+#### sendData()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+sendData('playerColor', {
+  r: red(playerColor)/255,
+  g: green(playerColor)/255,
+  b: blue(playerColor)/255
+});
+```
+```javascript
+let myData = {
+    val1: 0,
+    val2: 128,
+    val3: true
+}
+
+sendData('myDataType', myData);
+```
+##### Description
+Sends JavaScript object message of specified data type from client to host.
+
+##### Syntax
+```javascript
+sendData(datatype, data)
+```
+
+##### Parameters
+`datatype` String: data type of message
+`data` Object: a JavaScript object containing user-defined values
+
+##### Returns
+`None`
+
+-----
+
+#### isClientConnected()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+function draw() {
+  background(0);
+
+  if(isClientConnected(display=true)) {
+    // Client draw here. ---->
+
+
+    // <----
+  }
+}
+```
+##### Description
+Checks to see if the client is successfully connected to the server and returns Boolean result. If `display=true`, connectivity support instructions are displayed on the screen.
+
+##### Syntax
+```javascript
+isClientConnected(display)
+```
+
+##### Parameters
+`display` Boolean: displays connectivity support instructions if `true` (default is `false`)
+
+##### Returns
+Boolean: `true` if client is connected, `false` otherwise
+
+-----
+
+## Host
+
+-----
+
+#### setupHost()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+// Network settings
+const serverIp      = '127.0.0.1';
+const serverPort    = '3000';
+const local         = true;   // true if running locally, false
+                              // if running on remote server
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+
+  setupHost();
+}
+```
+##### Description
+Sets up host to connect to server and receive messages from clients.
+
+##### Syntax
+```javascript
+setupHost()
+```
+
+##### Parameters
+`None`
+
+##### Returns
+`None`
+
+-----
+
+#### isHostConnected()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+function draw () {
+  background(15);
+
+  if(isHostConnected(display=true)) {
+    // Host/Game draw here. --->
+
+
+    // <----
+
+    // Display server address
+    displayAddress();
+  }
+}
+```
+##### Description
+Checks to see if the host is successfully connected to the server and returns Boolean result. If `display=true`, connectivity status is displayed on the screen.
+
+##### Syntax
+```javascript
+isHostConnected(display)
+```
+
+##### Parameters
+`display` Boolean: displays connectivity status if `true` (default is `false`)
+
+##### Returns
+Boolean: `true` if host is connected, `false` otherwise
+
+-----
+
+#### displayAddress()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+function draw () {
+  background(15);
+
+  if(isHostConnected(display=true)) {
+    // Host/Game draw here. --->
+
+
+    // <----
+
+    // Display server address
+    displayAddress();
+  }
+}
+```
+##### Description
+Displays the server address in the lower left of the canvas.
+
+##### Syntax
+```javascript
+displayAddress()
+```
+
+##### Parameters
+`None`
+
+##### Returns
+`None`
+
+-----
+
+### Callbacks
+User-defined callbacks for handling client connections and disconnections and data received from clients. These **must** be present in your `host.js` sketch.
+
+-----
+
+#### onClientConnect()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+function onClientConnect (data) {
+  // Client connect logic here. --->
+  print(data.id + ' has connected.');
+
+  // <----
+}
+```
+##### Description
+Callback for when new client connects to server. Must be defined in `host.js` sketch. `data` parameter provides: 
+* `.id` String: unique ID of client
+
+##### Syntax
+```javascript
+onClientConnect (data)
+```
+
+##### Parameters
+`data` Object: contains client connection data
+
+##### Returns
+`None`
+
+-----
+
+#### onClientDisconnect()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+function onClientDisconnect (data) {
+  // Client connect logic here. --->
+  print(data.id + ' has disconnected.');
+
+  // <----
+}
+```
+##### Description
+Callback for when client disconnects from server. Must be defined in `host.js` sketch. `data` parameter provides: 
+* `.id` String: unique ID of client
+
+##### Syntax
+```javascript
+onClientDisconnect (data)
+```
+
+##### Parameters
+`data` Object: contains client connection data
+
+##### Returns
+`None`
+
+-----
+
+#### onReceiveData()
+[[Back to top]](#reference)
+
+##### Example
+```javascript
+function onReceiveData (data) {
+  // Input data processing here. --->
+  console.log(data);
+
+  // <---
+
+  /* Example:
+     if (data.type === 'myDataType') {
+       processMyData(data);
+     }
+
+     Use `data.type` to get the message type sent by client.
+  */
+
+}
+```
+##### Description
+Callback for when data is received from a client. Must be defined in `host.js` sketch. `data` parameter provides all data sent from client and always includes:
+* `.id` String: unique ID of client
+* `.type` String: data type of message
+
+##### Syntax
+```javascript
+onReceiveData (data)
+```
+
+##### Parameters
+`data` Object: contains all data sent from client
+
+##### Returns
+`None`

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "p5_sockets",
+  "name": "p5.multiplayer",
   "version": "1.0.0",
-  "description": "p5.js sockets example",
+  "description": "p5.multiplayer example and template",
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

public/host.js

@@ -65,7 +65,6 @@ function draw () {
 
 function onClientConnect (data) {
   // Client connect logic here. --->
-
   console.log(data.id + ' has connected.');
 
   if (!game.checkId(data.id)) {
@@ -91,6 +90,7 @@ function onClientDisconnect (data) {
 
 function onReceiveData (data) {
   // Input data processing here. --->
+  console.log(data);
 
   if (data.type === 'joystick') {
     processJoystick(data);
@@ -103,6 +103,14 @@ function onReceiveData (data) {
   }
 
   // <----
+
+  /* Example:
+     if (data.type === 'myDataType') {
+       processMyData(data);
+     }
+
+     Use `data.type` to get the message type sent by client.
+  */
 }
 
 ////////////