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:
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.
The repository for Archipelago can be found here:
https://github.com/miniature-tiger/archipelago
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.
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.
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.
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.
The code changes for the above features can be found here:
https://github.com/miniature-tiger/archipelago/pull/50/files
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.
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.
The project is a browser based game:
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.
Resources
Goods
Contracts for delivery:
Building (On hold - decide if necessary once contracts implemented)
Scoring:
Pirates
Forts
Conflicts
Settings
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!
