2024-07-21

Last modified: 2024-07-21 15:53:22

GPT Blotto

The plan is to make Colonel Blotto: https://en.wikipedia.org/wiki/Blotto_game - except you play against GPT4o.

The Colonel makes his allocation and sends you a SHA256 commitment. You then make your allocation and send it to the server, and you get to find out his allocation and the text to prove his commitment was valid.

Then he gives some analysis/commentary/coaching, and you can chat to him if you want, and then the next round starts.

It will be interesting to see if the user can manipulate him into making bad moves via the chat box. Also whether we can get him to manipulate the user.

How could you set difficulty settings? Just ask the Colonel to play bad moves?

I think I want a DALL-E art of the Colonel to use on the web page.

The backend will be Mojolicious, communication over websocket.

I got ChatGPT to write the user interface, I just gave it a description of the websocket protocol, and it worked, incredible technology.

Current status is:

• the game works
• it doesn't play Blotto very well, you can beat it by just going all 10s every round
• the user interface could be nicer

Here are the changes I want to make:

1. As an alternative to "Start New Game" I want a button that says "Tell me the rules" or something, and when they click it it pops up the rules, and then they can close the rules and start a game instead.
2. Put "By James Stanley & ChatGPT" at the bottom.
3. When you start a game instead of popping up an input box to select the number of rounds, just have 3 big buttons to select from, "3 rounds", "5 rounds", "10 rounds".
4. When the websocket is disconnected, display an error message.
5. During the soldier allocation, lay out the 10 input boxes horizontally on one line and make them larger.
6. During the soldier allocation, show a running total of how many soldiers have been allocated.
7. Don't allow the user to submit an allocation that sums to more than 100 soldiers.
8. When showing the colonel's thinking, make it more clear that he is thinking, perhaps display a spinning animation or something next to the thinking text.
9. When showing the colonel's allocation, instead of popping up an alert box, instead put it somewhere subtly on the page, and show a bash command line people can use to verify the commitment
10. Hide the chat during allocation selection.
11. Let the user start picking their allocation as soon as the round starts, even though the colonel is still thinking.
12. Add a button that will fill in a random allocation.
13. On each round, show the colonel's allocation from the previous round.
14. When the final round is complete, make it clear that the game is over.
15. Initialise the allocation input boxes with all 10s.

I'm going to paste the current UI code to ChatGPT and have it try to make those changes, will see how well it does.

It actually did a really good job. Changes required:

• when the allocation screen first pops up the sum shown is 0 when it should be 100
• I want to see the SHA256 of the Colonel's commitment next to the verification command line
• in the "breakdown", I want to append "(User wins)" or "(Colonel wins)" next to each battlefield
• after each round I want to prominently display the winner of the round, or whether it was a draw, along with the score for the round
• at the end of the game I want to prominently display the winner of the game, or whether it was a draw, along with the score for the game
• don't show the chat box until the Colonel has sent his chat message after the end of the round
• make the enter button submit the chat box, and move the "Send" button to be on the same line as the box
• decrease the spacing between the allocation input boxes, and make the text bigger
• change "Start New Round" to say "Next Round"
• Make the "User:"/"Colonel:" text in the chat box bold
• Make the random allocation allocate exactly 100 soldiers

Now we need:

• full statement of the rules
• make the 3/5/10 round buttons all show up on one line, and look different to the other buttons (maybe a different colour? bold the number?)
• change allocation input width to 75px.
• change the allocation algorithm so instead of sticking excess soldiers on the last battlefield, it just does like: initialise all battlefields to 0, for (1 to 100) add a soldier to a random battlefield
• remove the box at the top that shows the colonel's commitment, because we see it down below now
• the chat box no longer respects newlines from the colonel
• scroll the chat box to the bottom every time a new message is added
• after I click "next round", hide the chat box until the colonel next sends a chat message
• swap the order of "random allocation" and "submit allocation" and show them on the same line
• don't show "next round" at the start, show it whenever the colonel sends a chat message, and hide it after I click it
• show the numbers at the top for the user/colonel score in bold, but keep the labels as is
• the "SHA256" shown at the bottom for the commitment verification is showing the commitment input rather than the SHA output, instead take the SHA that we are first given when the colonel sends his commitment

And now:

• the 3/5/10 round buttons should be centred
• "start new game" needs to close the existing websocket (if any) and create a new one
• remove the "margin" on the allocation inputs
• make the chat box safe against xss, for example instead of assigning to innerHTML, instead take the username and the message as separate inputs and construct a bold element for the name with a colon, and a separate p or span or something for the text which you set with .innerText
• put " /100" after the allocation total
• separate chat messages with <br> but don't put one there straight away because it results in a blank line at the bottom of the chat box
• "start new game" and "tell me the rules" should be on the same line
• hide the "colonel's allocation" and commitment stuff when I start a new round, and don't show it again until after we have the result for the round
• don't show "next round" at the end of the game

Now:

• Put "submit allocation" and "random allocation" on the same line
• when we find out the colonel's allocation, show it in a table with 11 columns and 3 rows, first column should say "User", "Colonel" in top 2 rows, the next 10 columns should have the user's allocation on top and the Colonel's underneath, the last row should show +1 where the user wins and -1 where the Colonel wins, this should replace the existing text-based round breakdown display
• show the Colonel's commitment input string in monospace
• hide chat,allocation,commitment stuff when chat is not applicable, i.e. during allocation selection and while waiting for the first chat message after submitting the round

The interaction with ChatGPT for programming like this is quite unwieldy. You have to keep clicking "continue generating" because the output gets too long, and it takes a very long time for it to keep outputting almost exactly the same code every time. Ideally it would work more like a human and use some sort of editor to just change the parts that need changing.

OK, I did some finalising by hand, and I think this is ready. I ought to put a limit on the number of simultaneous in-progress games to stop people wasting my OpenAI credit.

Now live at https://blotto.incoherency.co.uk/ - I should blog this tonight before I lose interest in it.