In order to display a GAME OVER message in the browser after all squares have been filled I realized I could do so in one of two ways. I could check the state of each cookie and display a message if each cookie held an X or an O; or I could create an incrementer cookie that counts up by 1 after each move. I chose the latter, due to its simpler implementation.

In addition to being able to display a message, I wanted to make the input method simpler. Previously two clicks and two mouse gestures were required to select a square and then submit the move. I decided to change the radio buttons to submit buttons that accomplish both the selection and submission of information.

As you can see from the image above, there are nine cookies associated with the nine squares on the board, a cookie that denotes the number of turns taken, and the three configuration cookies. When a button is pressed, the corresponding cookie is set to the value of the ‘marker’ cookie, and the marker alternates.

Now the value of the marker cookie is an O, meaning that the next button pressed will put an O on the board, like so:

This also updates the cookie for square 1 and increases the incrementer, indicating that 2 moves have been made. When all nine squares are selected, a GAME OVER message is displayed and an option to restart is given.

The restart button takes the user to the configuration screen. After configuration, all cookies are reset and the board shows up empty, ready for a new game: