Archipelago - Settings and game management

---

Introduction

Two areas remained outstanding following the conversion of Archipelago from CSS graphics to canvas and SVG; the settings panel and the "end turn" button. A couple of readers had noted that the options on the settings pop-up were no longer functioning with the new graphics implementation so this seemed like a good moment to give the setting panel system an overhaul and convert these final two elements to the SVG format.

This contribution covers:

• The new settings pop-up system;
• The game-speed panel;
• The update of the "end-turn" button.

---

Phase 2 of Archipelago development (Resources, Goods, Building, and Trade Contracts) is now well underway.

For a full view of the current state of the game development see my github-hosted page.
https://miniature-tiger.github.io/archipelago/

Please note that the game is not yet complete - you can see current progress and test functionality but you will have to wait a little longer to play!

Background details of the project can be found at the end of this contribution post.

---

Repository

The repository for Archipelago can be found here:
https://github.com/miniature-tiger/archipelago

---

New Features covered by this Contribution

Overhaul of the settings pop-up system
The first stage was the redesign of the SVG "cog" icon to sit in the bottom left hand corner of the screen.

_{Settings "cog" icon}

When a player clicks on this icon an event listener and handler launches the settings pop-up box which will hold all the settings options. The scalable nature of SVG means that the icon design can be scaled up to a larger size for the pop-up settings box.

Circles were added on each of the cog teeth to hold icons - the first two icons added were the close "cross" icon and the game speed "lightning bolt".

A central panel was added to hold text and the option buttons.

_{Settings pop-up box}

The game-speed panel

The first option added to the new settings pop-up box was the option to change the game speed, i.e the speed at which ships move. Clicking on the lightning bolt icon launches the game-speed panel.

Methods were written to create red and green option boxes and also to add text based on data held in an array. This should streamline adding additional panels in future.

Three options for game speeds were added. Clicking on one of the options changes the colours of the boxes and updates the game speed.

_{Option boxes}

The code changes for the above two new features can be found here:
https://github.com/miniature-tiger/archipelago/pull/49/files

Update of the "end-turn" button

As a final update to the SVG graphics the "end-turn" button was changed from CSS to SVG. Clicking this button completes a player's turn and shows the colour of the next team to move.

_{End turn icon}

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

---

Proof of Work Carried Out

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

---

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

---

Details of the Archipelago Project

What is the Project About?

Archipelago is a new project that I have been working on. The aim is to develop a seafaring and trading turn-based strategy game. Players will guide their ships around the islands, searching for goods to aid construction of ships and their bases, trading with the Kingdom settlements and avoiding hazards like pirates and whirlpools.

Technology Stack

The project is a browser based game:

• Mechanics: Javascript
• Visuals: HTML and CSS initially but now moved across to Canvas and SVG.

Roadmap

Phase 1 - the first main goal of getting ships on the board and moving at different speeds under the influence of the compass is complete.

The graphics overhaul is also now complete.

Work is now ongoing on Phase 2 which is resource discovery, goods production, building and the trade contracts that underlie the game.

Work has also begun on adding pirates and conflicts.

Phase 1 - Board and ship movement: COMPLETE!!!

• Board set up - COMPLETE
• Basic ship creation: functionality and graphics - COMPLETE
• Manual ship movement and board updating - COMPLETE
• Basic compass creation: functionality and graphics - COMPLETE
• Turn based activity of ship movement - COMPLETE
• Logic of length of longer moves around obstacles - COMPLETE
• Chaining together transitions to allow graphics of longer moves - COMPLETE
• Separation of board layers (Canvas base layer, Canvas activation layer overlay, SVG piece overlays) - COMPLETE

Phase 2 - Resources, Goods, Building and Trade Contracts

Resources

• Add Resource tiles (forest, ironworks, flax, gold etc) - in progress: forest, ironworks, quarry, plantation added
• Discovery of resource tiles - COMPLETE
• Claiming of resource tiles - COMPLETE
• Dashboard of player pieces - COMPLETE

Goods

• Creation of new goods each turn - COMPLETE
• Loading, unloading and transportation of goods - COMPLETE
• Dashboard of goods pieces - COMPLETE
• Goods icons - COMPLETE
• Variable quantity of goods to be loaded / unloaded - COMPLETE

Contracts for delivery:

• Semi-random (equitable) generation of trade delivery contracts - COMPLETE
• Creation of trade settlements - COMPLETE
• Dashboard for contracts - COMPLETE
• Mechanics for contract sign-up - COMPLETE
• Mechanics for contract delivery - COMPLETE
• Island naming: for describing location of trading settlements - COMPLETE
• Graphics of trade routes - COMPLETE

Building (On hold - decide if necessary once contracts implemented)

• Recipes, time to implement, graphics etc

Scoring:

• Work out scoring mechanism (linked to contracts)
• Add score dashboard

Phase 3 - Conflicts

Pirates

• Add pirate ships - COMPLETE
• Automate pirate ship movements (basic movement with wind and search for cargo ships) - COMPLETE
• Telescope range of 4 tiles for stronger search for ships
• Consider separate cargo and war ships for teams

Forts

• Add fort icons - COMPLETE
• Create safe harbour from pirate ships

Conflicts

• Develop conflict method between ships
• Stealing of cargo
• Limping back to port

Phase 4 - Game Management and Settings

Settings

• Settings pop up box created - COMPLETE
• Options added - In progress - game speed added
• Local options (player name etc)
• Game saving and replay

Phase 5 - Central trading centre

• Develop central market allowing players without resources to trade and fulfill contracts

Phase 6 - Rules, roll-out, documentation, testing etc

Contact / Contribute

You can get in touch with me on discord if you would like to contribute.

You can find the current state of the game here:
https://miniature-tiger.github.io/archipelago/

The repository for the project is here:
https://github.com/miniature-tiger/archipelago

Have fun!