This edition of our developer diary is brought to you by Coleman Charlton, lead designer for Catan Online. Here, we focus on trading in Catan Online

In Catan Online, you start with a couple of settlements and roads, and, over the course of a game, you build a road network, more settlements, cities, and development cards. However, you usually cannot produce on your own all of the different types of resources you need. So, if you do not efficiently trade resources with your fellow players, you will not win many games.

From the beginning of our design and development process, trading was a key, if not the key, element. The game had to provide the players with a simple and accessible mechanism for handling the trading process that The Settlers of Catan players utilize during face-to-face games. Not only did this mechanism need to handle trade resolution, but it also had to facilitate communication between traders. After all, while chat mechanisms could shoulder some of the trade communication burden, they could not handle the bulk of trade offers in a typical Catan Online game.

Since a trade in Catan Online must involve the player whose turn it is, we initially considered having that player indicate what he wanted to receive from a trade. Then, that player could choose to start a trading process with any other player who indicated that he/she had such a resource and was willing to consider trading it. However, this approach was soon discarded because it lacked the dynamic interactivity of normal trading in a game of The Settlers of Catan. There, any player can initiate a trade; and even if two players are discussing a trade, the other players can jump in with their own trade offers.

• Offer: The players make trade offers, in any order at any time. But each player can only have one offer displayed at a time—i.e., a player only sees one offer from each of the other players. 
• Match: Eventually, two (or more) players have matching offers—i.e., one player is offering what the other player wants, and vice versa.
• Consider: Each of the two players involved in a matching trade indicates that he/she is willing to consider making the trade. A player may only consider one trade at a time.
• Confirm: Each of the two players involved in a mutually considered trade confirms the trade and the trade is resolved. If either fails to confirm, the trade is not resolved.

The Initial Mockup
The mockup shown here was one of our first iterations of a trade window. Each player sees his/her own version of this trade window with the large section containing his/her trade information. In this case this is the trade window that you see as the blue player. It is your turn—otherwise, you would only have one set of controls (the equal sign, arrow, and circle/slash) opposite the player whose turn it is.

Each player can have one trade offer at a time that all of the players see, but trade offers can be changed at any time. Here, red is offering one lumber for one wool, white is saying that he/she has one grain to trade, yellow is offering one lumber for one brick, and you (blue) are offering one lumber for one wool.
There is one set of controls opposite each of the players that you can trade with:

• Clicking the equal sign changes your trade offer so that it matches the trade offer of the corresponding player.
• Clicking the arrow confirms that you are willing to consider the trade offer of the corresponding player—this starts the trade resolution process. The arrow is only active when you and the corresponding player have matched trade offers.
• Clicking the circle/slash declines the trade offer of the corresponding player.

The other controls shown are:

• The curved arrow confirms the resolution of the trade that you and another player are both considering.
• The octagon closes the trade window.

A Full Mockup
The next mockup shows the next iteration of the trade window. Here, you are the blue player and it is your turn. The two yellow arrows indicate that you and the yellow player are considering a trade: one wool for one lumber. The green check mark indicates that you have already clicked your green “Offer” button (i.e., your confirm button), and you are waiting for yellow to either confirm the trade or to decline it. You could stop the trade before it finalizes by clicking on the decline button (the X icon).

The mechanism for making a trade offer has also been added. To add a resource to an offer, you click on the resource card and then click in either the WANT area or the TRADE area. To remove a resource from an offer, you click on the resource icon in either the WANT area or the TRADE area.

Note the question mark resource icon that is used to communicate an open element(s) in a trade. For example, in the mockup, Player Three is saying “ I want brick, what do you want in exchange?”
The maritime trade (port trade) mechanism has also been added—it allows you to trade with the “bank.” To use it, you:

• Click on one of the port types that you have available.
• Make a legal port trade offer.
• Click the green “Offer” button to confirm.

An Early Prototype
Most of the changes between the mockups and the early prototypes were graphical and organizational, but a few elements were modified:

• The match, consider, and confirm functions are activated sequentially, so their buttons are combined. The combined button is “Match” until two corresponding offers are the same. Then, the combined button is “Consider” until that button is clicked. Then, the combined button is “Confirmed” until the trade is resolved.
• The green check mark that indicated trade confirmation is changed to a green arrow.
• Two sets of resource cards are included, one for WANT and one for GIVE. This allows one click to populate an area rather than two.
• The Hide Trade button allows you to minimize the trade window so that the game board is visible.
• Port trading was moved to its own pop-up window that you can open by clicking the Port Trade button.

The Final Trade Window
The final trade window has larger resource icons, the final graphical skins, a different font, and modified base colors; but nothing changed functionally.