From c01c7cb56d6adc894f3389186f9c5b72d79955a3 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 18:46:45 +0100
Subject: [PATCH 1/2] Add action to gpt message list on click

---
 main.js  | 2 +-
 utils.js | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/main.js b/main.js
index d3c2eb3..e34d754 100644
--- a/main.js
+++ b/main.js
@@ -12,7 +12,7 @@ const createActions = (actions) => {
   const buttons = document.querySelectorAll('.stage-actions button');
   buttons.forEach((button) => button.addEventListener(
     'click',
-    () => alert(button.innerText)
+    () => addActionMessage(button.innerText)
   ));
 }
 
diff --git a/utils.js b/utils.js
index 2751236..feed13d 100644
--- a/utils.js
+++ b/utils.js
@@ -13,6 +13,14 @@ const makeRequest = async (url, data) => {
   return response.json();
 }
 
+const addActionMessage = (message) => {
+  chatGptMessages.push({
+    role: 'user',
+    content: `${message}. If this action is fatal the action list is empty. Don't give any text other than a JSON object. Your responses are only in JSON format like this example:\n\n###\n\n {"setting": "
+you died for this reason", "actions": []}###`
+  })
+}
+
 const showLoadingAnimation = (isLoading) => {
   const loadingScreen = document.querySelector('.loading');
   if(isLoading) {

From e4119880ee2a1e2f8839b05c971b1bb3de152c38 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 20:05:52 +0100
Subject: [PATCH 2/2] Set stage after each action selection

---
 main.js  | 42 ++++++++++++++++++++++++++----------------
 utils.js |  2 +-
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/main.js b/main.js
index e34d754..d89b080 100644
--- a/main.js
+++ b/main.js
@@ -6,13 +6,16 @@ const createSetting = (stage, setting) => {
   stageContainer.append(stage);
 }
 
-const createActions = (actions) => {
+const createActions = (genre, actions) => {
   const actionsHtml = actions.map((action) => `<button>${action}</button>`).join('');
   document.querySelector('.stage-actions').innerHTML = actionsHtml;
   const buttons = document.querySelectorAll('.stage-actions button');
   buttons.forEach((button) => button.addEventListener(
     'click',
-    () => addActionMessage(button.innerText)
+    async () => {
+      addActionMessage(button.innerText);
+      await setStage(genre);
+    }
   ));
 }
 
@@ -36,23 +39,13 @@ const createStage = async (genre, setting, actions) => {
   const stage = stageTemplate.content.cloneNode(true);
 
   createSetting(stage, setting);
-  createActions(actions);
+  createActions(genre, actions);
   await createImage(genre, setting);
 }
 
-const startGame = async (genre) => {
-  showErrorMessage(false);
-  showGenresButtons(false);
-
-  // Message to send to ChatGPT to start the game
-  chatGptMessages.push({
-    role: 'system',
-    content: 'I want you to play like a classic text adventure game. I will be the protagonist and main player. Don\'t refer to yourself. ' +
-      'The setting of this game will have a theme of ' + genre + '. ' +
-      'Each setting has a description of 150 characters followed by an array of 3 possible actions that the player can perform. ' +
-      'One of these actions is fatal and ends the game. Never add other explanations. Don\'t refer to yourself. ' +
-      'Your responses are just in JSON format like this example:\n\n###\n\n {"setting":"setting description","actions":["action 1", "action 2", "action 3"]}\n\n###\n\n'
-  });
+const setStage = async (genre) => {
+  // Reset stage container for each round
+  stageContainer.innerHTML = "";
 
   let chatResponseJson;
 
@@ -95,6 +88,23 @@ const startGame = async (genre) => {
   }
 }
 
+const startGame = async (genre) => {
+  showErrorMessage(false);
+  showGenresButtons(false);
+
+  // Message to send to ChatGPT to start the game
+  chatGptMessages.push({
+    role: 'system',
+    content: 'I want you to play like a classic text adventure game. I will be the protagonist and main player. Don\'t refer to yourself. ' +
+      'The setting of this game will have a theme of ' + genre + '. ' +
+      'Each setting has a description of 150 characters followed by an array of 3 possible actions that the player can perform. ' +
+      'One of these actions is fatal and ends the game. Never add other explanations. Don\'t refer to yourself. ' +
+      'Your responses are just in JSON format like this example:\n\n###\n\n {"setting":"setting description","actions":["action 1", "action 2", "action 3"]}\n\n###\n\n'
+  });
+
+  await setStage(genre);
+}
+
 const init = () => {
   const genres = document.querySelectorAll('.genre');
   genres.forEach((button) => button.addEventListener(
diff --git a/utils.js b/utils.js
index feed13d..ee7bfd2 100644
--- a/utils.js
+++ b/utils.js
@@ -17,7 +17,7 @@ const addActionMessage = (message) => {
   chatGptMessages.push({
     role: 'user',
     content: `${message}. If this action is fatal the action list is empty. Don't give any text other than a JSON object. Your responses are only in JSON format like this example:\n\n###\n\n {"setting": "
-you died for this reason", "actions": []}###`
+you died for this reason", "actions": []}\n\n###\n\n`
   })
 }