With the core and web servers running on your machine, you should be able to access the Homegames dashboard at http://localhost:80 (unless you have configured the web client server to run on a different port). If you can't, let us know using the contact button at the bottom of the page.

1. Create a new directory for your game in the `games` directory of homegames-core

   /Users/josephgarcia/homegames_demo/homegames-core$ mkdir src/games/hello-world

2. Create an index.js file in your new directory using a text editor of your choice

   vim src/games/hello-world/index.js

3. Import game dependencies

   const { Colors, Game, GameNode, Shapes, ShapeUtils } = require('squish-120');

   Colors is a helper that contains a bunch of predefined RGBA values for common colors, eg. black and white. You can choose your own color from this file or hardcode a color of your choice using an array of rgba values, eg. [255, 0, 0, 255] for red.
   
   Game is the base class that all games inherit from. It contains logic that lets the game session listen to state updates.
   
   GameNode is the base unit of all "things" in a game. For example, the text we're going to render on the screen is a thing. The canvas we're going to put it on is a different thing.
   
   Shapes contains constants representing each type of shape we support, eg. polygon.
   
   ShapeUtils is a helper that gives us a simple interface to create shapes, eg. a white rectangular canvas.
   
   require('squish-120') imports the specific version of SquishJS (the Homegames game library) we are depending on. In this case, it's version 1.2.0.
4. Define your game class

   // A new class that extends the base "Game" class
   class HelloWorld extends Game {
       // tell the game session what version of squish we're using
       static metadata() {
           return {
               squishVersion: '120'
           }
       }
       
       // instantiate game, set up initial stuff in base class
       constructor() {
           super();
   
           // create base canvas, a white rectangle
           this.base = new GameNode.Shape({
               // a rectangle is a polygon
               shapeType: Shapes.POLYGON,
               // use our helper to create a list of drawing coordinates for a rectangle
               // the rectangle starts at (0, 0) on the plane (first 2 arguments)
               // and it takes up 100% of the width and 100% of the height of the screen (3rd and 4th arguments)
               coordinates2d: ShapeUtils.rectangle(0, 0, 100, 100),
               // it's white
               fill: Colors.COLORS.WHITE
           });
       }
   
       // tell the game session what layers define our game. 
       // in this case, it's one layer - a white canvas
       getLayers() {
           return [{ root: this.base }];
       }
   }                            
   // export our game class as the main thing of this file, using CommonJS syntax
   module.exports = HelloWorld;
   

   This is one of the most basic "games" we can possibly make. It's a class that extends the Game class in a specific version of SquishJS, and says it uses a specific version of SquishJS, and it defines a single layer.
5. Add "hello world!" text node

       constructor() {
           super();
           this.base = new GameNode.Shape({
               shapeType: Shapes.POLYGON,
               coordinates2d: ShapeUtils.rectangle(0, 0, 100, 100),
               fill: COLORS.WHITE
           });
           
           // create a text node centered at (50, 50) on the screen, with black text saying "Hello, world!"
           const textNode = new GameNode.Text({
               textInfo: {
                   x: 50,
                   y: 50,
                   align: 'center',
                   size: 2,
                   text: 'Hello, world!',
                   color: Colors.COLORS.BLACK
               }
           });
           
           // add that text node as a child of the canvas
           this.base.addChild(textNode);
       }
   

   The full file looks like this

   const { Colors, Game, GameNode, Shapes, ShapeUtils } = require('squish-120');
   
   class HelloWorld extends Game {
       static metadata() {
           return {
               squishVersion: '120'
           };
       }
   
       constructor() {
           super();
           this.base = new GameNode.Shape({
               shapeType: Shapes.POLYGON,
               coordinates2d: ShapeUtils.rectangle(0, 0, 100, 100),
               fill: Colors.COLORS.WHITE
           });
   
           const textNode = new GameNode.Text({
               textInfo: {
                   x: 50,
                   y: 50,
                   align: 'center',
                   size: 2,
                   text: 'Hello, world!',
                   color: Colors.COLORS.BLACK
               }
           });
           
           this.base.addChild(textNode);
       }
   
       getLayers() {
           return [{root: this.base}];
       }
   }
   
   module.exports = HelloWorld;
   

6. Test your game

   node index.js

You should now be able to see your new "HelloWorld" game in the homegames dashboard (assuming you also have a client pointed to your game server)

1. Create a game in the Homegames developer dashboard. Your game has an image and a description. You can submit specific Github commits to build versions of your game, and then optionally publish them to the Homegames catalog.
   
2. Push your code to Github
   
3. Submit a publish request
   
4. Wait for approval (automated)
   
5. Submit your game to the catalog (optional)