Game end/turn order UI

At this point, we have a working game of tic-tac-toe, with a custom designed board and tokenset, and rule logic enforced. We can do a couple things to make the game UI more intuitive:

• right now, it’s hard to tell whose turn it is except by trying to play and getting a reject message
• there’s no notification when the game ends, the backend game engine will simply shut down with no changes in the frontend UI

To address these two issues, we’ll add some more board areas to the board to relay these pieces of information.

Showing turn order

We’ll add an extra board area to the board to show whose turn it is.

1. First, change the board settings to create an extra column to accomodate the new widget

Width: 800px
Height: 600px
Grid Template Cols: repeat(4, 1fr)
Grid Template Rows: repeat(3, 1fr)

2. Create a board area in the new column
3. Set Content Type to info. This mode will render text in the board area
4. Set Content to It's $current_player.eval_prop.map_to_user 's turn

• $ is a special character that allows for evaluating expressions
• $current_player.eval_prop fetches the current_player PROP from the game state. It will have a value of ‘x’ or ‘o’.
• map_to_user maps a player position to the user name of the user sitting in that position (the user who is playing as ‘x’ or ‘o’)

5. Save this, and reload any open games to see that this has been updated

End of game notification

For the end of the game, we’ll create a modal (pop up).

1. First, create a board area through the usual mechanism
2. Modals exist outside of the grid placement (you can think of it as existing on another layer), so it doesn’t matter which cell you select to create the board area
3. Set Content Type to info-modal. This mode is similar to info (so $ scripting works the same way), except that the text is rendered in a modal
4. Set Content to The winner is $winner.eval_prop.map_to_user ! Similar to turn order, this will find the winner PROP in the game state, evaluate it, and convert it to a user name
5. Set Show Modal to $game_over.eval_prop. This value determines whether the modal is hidden or shown. So now, the modal will be shown whenever the game_over PROP is true