Part II: Setup the development environment

Overview

This is the 2nd post of a 5 parts series describing how to create a fully multiplayer TicTacToe game on Plynd:

  1. Setup and publish the skeleton of your application
  2. Setup the development environment (this post)
  3. Read the game state and display information about the players
  4. Update the game state with events
  5. Put the update logic server-side

Don’t hesitate to ask all your questions via the comments section or directly to info@plynd.com

Goal

In this post, we’ll see how Plynd loads the Application Page and how to get set up in order to code the TicTacToe application locally.

The Application Page

Here’s how Plynd works: When a user opens a game, it actually opens the corresponding Application Page - which is a static web page - in an iframe, and in a specific context. In the previous section, we’ve set Application Page to the final code we’ll have at the end of this series.

Now, let’s go ahead, and change it to our starting point for this tutorial http://plynd.github.io/TicTacToe/parts/part-1-setup/

Now, if you open the playground, you should be able to see this

As you see, the changes made to Application Page are automatically reflected when you open the game. The code we have loaded here is just a code template with some html placeholders for our game.

Set up a local server with the github sources

Now we are going to code starting from the code templates provided on github.
To be able to modify the javascript and html files, the easiest is to start a local server with our copy of these code templates, and then modify them.

First, clone the git repository on your local machine

1
git clone https://github.com/Plynd/TicTacToe.git

If you have node installed on your machine, we have provided a little utility to set up a local server on port 3000.

1
2
3
cd TicTacToe
npm install
node index.js

Alternatively, you can use any way you like to create a local server.
From now on, we’ll assume that the github sources are available on your machine via http://localhost:3000

For these tutorials, we’ll work in the directory /work-directory: copy what’s inside the folder /parts/part-1-setup into the folder /work-directory to initialize the code templates for our next section.

Next update your application configuration to link to this folder http://localhost:3000/work-directory via your local server:

Now all the changes that you’ll make to your local files in the /work-directory will be automatically reflected as your application sources.

Summary

In this post, we’ve seen:

  • how Application Page works and that it gets automatically updated everytime you reopen a game
  • how it can point to a local server to allow easy development

Now let’s get started with some coding to display the players info