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.



Screen Shot 2018-05-12 at 21.45.23.png

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.


Screen Shot 2018-05-12 at 21.50.34.png

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.


Screen Shot 2018-05-12 at 21.53.20.png

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.


Screen Shot 2018-05-12 at 22.01.07.png

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.


Screen Shot 2018-05-12 at 22.10.33.png

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!

Sort:  

Thanks for the contribution!

Very cool, I'm already looking forward to your next contribution! Do you have any other options in mind (sorry if it's a bit of a silly question)?

A link to the answers of the questionnaire can be found here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Thanks Amos!

I'm definitely looking at a save game option - I can run this off the boardArray. Also some difficulty levels for one player play would be good. Possibly different map layouts, although based on the same sized grid. That would be useful once I start testing game play.

Probably the next settings panel I put in though will be developer tools. So that I can toggle on and off different elements and logs to check why bugs keep arising!

Adding developer tools sounds like a great idea!

I'm also a navigator. I know the traffic of ships. I will play! Still need to know the weather: the direction of the wind, the height of the wave, the bank of the ship and the ballast ...

Ha! The wind direction you can see on the compass. The waves you'll have to imagine!

Hey @miniature-tiger
Thanks for contributing on Utopian.
We're already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!