diff --git a/FF2024/browser_game.html b/FF2024/browser_game.html index fc60184..47e9ca2 100644 --- a/FF2024/browser_game.html +++ b/FF2024/browser_game.html @@ -115,13 +115,13 @@

Adding complex
# Can we make multiple levels of difficulty with the AI player. The first level is easy and ai moves randomly. The second level is the current ai player.
-

At this stage, the game still used basic ui elements but now had a difficulty setting in the interface: facility_forum_borwser_game_2.png

+

At this stage, the game still used basic UI elements but now had a difficulty setting in the interface: facility_forum_borwser_game_2.png

☝️ TIP: Think about what kind of description you would need to provide to a colleague that is making a website or game for you, provide that same information to the LLM.

Improving the look

-

To improve the look of the game we can use libraries such as Bootstrap to make ít look more appealing. We can be as specific or as general as we want. I will be a bit general and ask it to use bootstrap to with a prompt like this

+

To improve the look of the game we can use libraries such as Bootstrap to make it look more appealing. We can be as specific or as general as we want. I will be a bit general and ask it to use bootstrap to with a prompt like this

# Can you improve it visually by adding more colors and use bootstrap to make this look better. Can you also move the tic tac toe grid to the centre and create a popup for the winner. Add a scoreboard as well.
@@ -131,11 +131,11 @@

Improving the look

# Change the theme to life science and use information on this page for color scheme https://www.scilifelab.se/community-pages/resources/visual-identity/.
-

☝️ TIP: In this case we have asked the LLM to look at the Scilifelab website visual identity page and use those color themes in the game. We can be more specific about the colors and what elements hosuld have these colors but in this case its interesting to see the variation there is when we allow the LLM some "artistic freedom".

+

☝️ TIP: In this case we have asked the LLM to look at the Scilifelab website visual identity page and use those color themes in the game. We can be more specific about the colors and what elements should have these colors but in this case its interesting to see the variation there is when we allow the LLM some "artistic freedom".

After incorporating the Scilifelab theme, and adding images the interface looked like this: facility_forum_borwser_game_4.png

-

The LLM changed the players from X and O to images for cell and DNA. It does say in the instructions to add these images manually so you can download any image that you like for each player and name it accorindg to the instructions by the LLM. In this case it used two images named cell.png and dna.png.

+

The LLM changed the players from X and O to images for cell and DNA. It does say in the instructions to add these images manually so you can download any image that you like for each player and name it according to the instructions by the LLM. In this case it used two images named cell.png and dna.png.

To wrap up we added used prompts to make UI improvements. Some of them were

@@ -204,6 +204,7 @@

Hosting the game

Example chat and prompts

The whole chat with the LLM and all the prompts and responses can be seen at chatgpt_browser_game.md

+

If you look at the chat, it can be seen that there were sometimes small bugs either in the code logic or misplaced visual elements but and sometimes you had to ask the LLM to fix them but it was not able to do so. In those cases we had to manually look at problem areas i.e do some manual debugging and then ask the LLM to fix that area. For example, the LLM was having problems with the async nature of javascript and it set timeout for the player turns to make it visually better but that resulted in one player having multiple turns before the other. We had to manually look at the code and ask it to remove the timeouts in this case. There were similar problems with the placing UI elements as well.