Archipelago - Huge Refactor!

A huge refactor of the Archipelago game code with one eye on the implementation of a multi-player option.

Introduction

Archipelago is my first coding project. Since the first commit ten months ago growth has been organic, with no overriding structure or plan, other than a general idea of the game I am trying to produce. Each new feature has pushed the project forwards but also increased the complexity of the code. The largest files have swollen to thousands of lines with many features intertwined.

The development has been a learning experience. My understanding of Javascript has (slowly!) improved. Going back over older code I can see areas that could be simplified, new tricks that could be implemented, as well as the potential for increased consistency in style.

Now that I am looking ahead to a multi-player version of the game it has also become clear that I need to give more thought to the code structure. Running a single game on separate computers will require a separation of computation, as well as the ability for each machine to update the game state based on information sent from other players. The "move" will become the fundamental driver for updating the game and each move will need to be clearly and consistently defined, whether generated by a human player, computer opponent or pirate.

Based on the above, over the last month I have undertaken a refactor of (almost) the entire code. The project now follows an object-orientated design. More details on all of this below.

---

Repository

The repository for Archipelago can be found here. Background details of the project and the road-map can be found in the read-me file.
https://github.com/miniature-tiger/archipelago

For a full view of the current state of the game see my github-hosted page. Please note that the game is not yet complete - you can see current progress and test functionality and play the basic one-player version but there is still plenty to be added!
https://miniature-tiger.github.io/archipelago/

---

New Features covered by this Contribution

Below are some of the main design changes made in the refactor:

Object-oriented programming approach

Some of the features that I am aiming to introduce will require many instances of each item to be available at once. For example I am currently looking at:

• a landing page with an introductory story based on a journey across a number of different maps;
• a help page with an index of the pieces showing how to make the different moves; and
• a multi-player option with potentially many games being processed at once.

This requirement seems to lend itself to an object-oriented programming approach.

Javascript has (at least) three ways to implement object-orientated design:

• Object Constructor and Prototype Inheritance (ES5);
• Classes (ES6); and
• Factory functions.

After a little research I came to the conclusion that each of these approaches could work with my project. The ES6 classes and the ES5 Constructor / Prototype approaches seem similar, with many guides describing the ES6 change as "syntactic sugar" sprinkled over the ES5 method. Factory functions, which simply use normal functions and Javascript's inherent flexibility to create new objects, are favoured by many online reviewers, with one reason being stronger encapsulation.

In the end I decided to go with the ES5 approach. As I'm still learning I tend to favour the core underlying methods (e.g. pure Javascript in place of code libraries) and (to me at least) this choice feels closest to the heart of Javascript programming.

I have implemented the following constructors as part of an object-orientated approach:

• Game - Each new game.
• Move - Each move made. Moves will be central in development of the multi-player game. The idea is that in future a player will be able to receive a move made from another computer, without any of the intermediate code, and the game will (check and) update accordingly.
• Board - The game board. This is mainly to produce the board array which defines the state of the game.
• Piece - Each new piece object within the game board array.
• BoardDisplay - The graphics of the board, including all the canvas layers and tiles.
• PieceSVG - The graphics of each tile on the board display.
• BoardHolder - The surrounding border for dashboards and buttons.
• IconSet - The goods icons.

Some of these, such as Game, Move and Piece, are new code, designed for the new code structure. Others, such as Board, are rewrites of existing code to an object-orientated approach.

I believe that this approach has also led to code which is clearer in structure and more understandable.

gameData

The key data use in the game is now aggregated in a separate file. This includes:

• the board layout and starting pieces;
• the piece definitions;
• the team players.

All of the methods relating to the board layout have been rewritten to simplify the board creation process.

This will make it much easier to redefine the board, to set up testing for particular issues, and to create the boards on the landing page / help pages.

main.js

The main.js script previously included all kinds of set up methods and global variables as well as all the game logic for human player moves. The script has now been separated into its various constituents. Set up code is included in each object constructor. There are now three files for game logic:

• human.js
• automove.js - for computer opponents
• pirates.js

Code changes

The code changes for the refactor can be found here:
https://github.com/miniature-tiger/archipelago/pull/100/files

---

Proof of Work Carried Out

This is the full url to my github account:
https://github.com/miniature-tiger

---

Contact / Contribute

That is all for this update. If you have any queries please drop them in the comments or contact me on discord.

Have fun!