Home

Develop a game

You would like to add a new game, follow this.

Set up environment

1. Add new entry in config.js
2. Add new folder under games/ folder
3. Add game.js (your backend), index.html (page that server displays), player.html (page that players receive) under the folder you just made in step 2.

If you start up the server, you should be able to see the new entry of your game

The files

• index.html - The main visual that will display on the server
• player.html - The player visual that displays on players' phones
• game.js - The server side of your game, when developing a game you have two choices as to where the game logic should reside - game.js, or index.html. Details of pros/cons discussed later. Regardless, there are certain fields that need to be filled in game.js.

Front-end: player.html & index.html

These are the visuals, so it would help to have some understanding of front-end web development. In the javascript of both of these files.

Web Sockets

it is required to include the socket.io.js and clientsocket.js scripts because these will take care of the server-client connections.

	<script src="/socket.io/socket.io.js"></script>
	<script src="/js/clientsocket.js"></script>

Then once the html is initialized, we can set up the event listeners in the clients. Usually this is enclosed in the document.ready function.

$(document).ready(function(){ // jquery implementation
...
});

First set up the socket, use these keywords to identify what kind of client this is "main" or "player"

	socket = new MTSocket("main");

Create listeners, events are defined by string.

	socket.onReceiveEvent("EVENT_NAME", function(event_data){
		data = event_data;
	});

The clients can also send events to the server with the sendEvent() function

	socket.sendEvent("EVENT_NAME", event_data);

Source HTML

The backend is able to modify the source file of the html before sending it off to requested client, so we can modify certain values that need to exist in order for your game to initialize.

In the front-end

		var roles = {{ROLES}}; // enum of roles
		var rolesData = {{ROLESDATA}}; // a string/json pair, specific data associated with the roles
		var GameState = {{GAMESTATE}}; // current game state, useful for when player refresh during gameplay

In the backend

	this.initMainHTML = function(html){
		if (!initialized){
			this.initializeGame();
		}
		html = html.replace("{{ROLES}}", JSON.stringify(roles));
		html = html.replace("{{ROLESDATA}}", JSON.stringify(rolesData));
		html = html.replace("{{GAMESTATE}}", JSON.stringify(GameState));
		return html;
	}

Backend: game.js

Best idea is to use an existing game's game.js as template. The Game class should implement an interface (not enforced) and is used by another object on the server side, there are certain fields that the objects expects, therefore it is important that those fields are filled in.

	// required fields
	this.name = "One Night Ultimate Werewolf"; // The name of the game
	this.player_count = [3,10]; // min and max player inclusive
	this.playtime = "20 min"; // string indicating playtime

	this.mainHTML = "index.html"; // The front-end html files
	this.playerHTML = "player.html";

	this.mappableFolders = ["js", "css"]; // Your front-end will only be able to access files inside these folders.

	// for cover art on main hub
	this.cover_img = "https://path/to/image.jpeg"

Like the fields, the parent object also expects certain methods like the following

// Initializing methods
this.initPlayers = function(players){}
this.initMainHTML = function(html){}
this.initPlayerHTML = function(playerID, html){}

// Event trigger methods (do not implement these! only have the skeleton here, they will be populated later)
this.sendEventToPlayers = function(players, event, payload){}
this.sendEventToMain = function(event, payload){}
this.sendEventToAll = function(event, payload){}

// Event listeners
this.onPlayerConnect = function(playerID){}
this.onPlayerDisconnect = function(playerID){}
this.onReceiveEventFromPlayer = function(playerID, event, payload){}
this.onReceiveEventFromMain = function(event, payload){}

At the end of the file also make sure you have

module.exports = Game;