This is the 2nd post of a 5 parts series describing how to create a fully multiplayer TicTacToe game on Plynd:
- Setup and publish the skeleton of your application
- Setup the development environment (this post)
- Read the game state and display information about the players
- Update the game state with events
- Put the update logic server-side
Don’t hesitate to ask all your questions via the comments section or directly to firstname.lastname@example.org
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
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.
First, clone the git repository on your local machine
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.
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
Link your application to your local sources
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.
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