From 07ad0fa8f96f4e3b8b3680b7908f8306bd8bbca3 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 17:19:51 +0100
Subject: [PATCH 01/11] Add game containers

---
 index.html | 28 ++++++++++++++++------------
 style.css  |  9 +++++++++
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index db3d537..78472a0 100644
--- a/index.html
+++ b/index.html
@@ -25,20 +25,24 @@ <h1>ChatVenture</h1>
     <p>Hello PLAYER! Welcome to the text adventure game where the story is made up by GPT :)</p>
   </header>
 
-  <div class="loading hidden">
-    <img src="./images/loader.gif" alt="loading icon">
-  </div>
+  <main class="container">
+    <div class="loading hidden">
+      <img src="./images/loader.gif" alt="loading icon">
+    </div>
 
-  <div class="error hidden">
-    <strong>Sorry, something went wrong...</strong>
-    <div class="error-messages"></div>
-  </div>
+    <div class="error hidden">
+      <strong>Sorry, something went wrong...</strong>
+      <div class="error-messages"></div>
+    </div>
 
-  <div class="genres">
-    <button class="genre" data-genre="horror">👻</button>
-    <button class="genre" data-genre="spy film">🕵🏻‍</button>
-    <button class="genre" data-genre="marvel superheros">🦸🏻</button>
-  </div>
+    <div class="stage-container"></div>
+
+    <div class="genres">
+      <button class="genre" data-genre="horror">👻</button>
+      <button class="genre" data-genre="spy film">🕵🏻‍</button>
+      <button class="genre" data-genre="marvel superheros">🦸🏻</button>
+    </div>
+  </main>
 </body>
 
 </html>
diff --git a/style.css b/style.css
index 35b898a..2f6addd 100644
--- a/style.css
+++ b/style.css
@@ -29,6 +29,15 @@ header {
   padding: 32px;
 }
 
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.container > * {
+  margin-bottom: 32px;
+}
+
 .loading {
   display: flex;
   justify-content: center;

From 9047d7a48da104bf46f7f4ee1a6236f31f9aa81d Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 17:20:11 +0100
Subject: [PATCH 02/11] Add stage-template elements

---
 index.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/index.html b/index.html
index 78472a0..77df42d 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,25 @@ <h1>ChatVenture</h1>
       <button class="genre" data-genre="marvel superheros">🦸🏻</button>
     </div>
   </main>
+
+
+  <template id="stage-template">
+    <div class="stage-set">
+      <div class="stage-image">
+        <!-- <img src="https://picsum.photos/600" alt=""> -->
+      </div>
+      <p class="stage-setting">
+        <!-- Lorem ipsum -->
+      </p>
+    </div>
+    <div class="stage-actions">
+      <!--
+      <button>Action 1</button>
+      <button>Action 2</button>
+      <button>Action 3</button>
+      -->
+    </div>
+  </template>
 </body>
 
 </html>

From 43f907bad04ec0fb48d2e4ea1156389adf98cf2f Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 17:22:23 +0100
Subject: [PATCH 03/11] Extract functions to utils file

---
 index.html |  1 +
 main.js    | 33 ---------------------------------
 utils.js   | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 33 deletions(-)
 create mode 100644 utils.js

diff --git a/index.html b/index.html
index 77df42d..4c504bd 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
   <!-- Importing local CSS file -->
   <link href="./style.css" rel="stylesheet">
   <!-- Importing local JS file -->
+  <script src="utils.js" defer></script>
   <script src="config.js" defer></script>
   <script src="main.js" defer></script>
 </head>
diff --git a/main.js b/main.js
index f2816c1..2c8a041 100644
--- a/main.js
+++ b/main.js
@@ -1,38 +1,5 @@
 const chatGptMessages = [];
 
-const makeRequest = async (url, data) => {
-  const response = await fetch(url, {
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${_CONFIG_.API_KEY}`,
-      // Our _CONFIG data is imported in the HTML file using the <script> tag meaning
-      // it is then accessible via global scope (other JS files, browser console, etc).
-    },
-    method: 'POST',
-    body: JSON.stringify(data)
-  });
-
-  return response.json();
-}
-
-const showLoadingAnimation = (isLoading) => {
-  const loadingScreen = document.querySelector('.loading');
-  if(isLoading) {
-    loadingScreen.classList.remove('hidden');
-  } else {
-    loadingScreen.classList.add('hidden');
-  }
-}
-
-const showErrorMessage = (isError) => {
-  const loadingScreen = document.querySelector('.error');
-  if(isError) {
-    loadingScreen.classList.remove('hidden');
-  } else {
-    loadingScreen.classList.add('hidden');
-  }
-}
-
 const startGame = async (genre) => {
   showErrorMessage(false);
 
diff --git a/utils.js b/utils.js
new file mode 100644
index 0000000..b9f6836
--- /dev/null
+++ b/utils.js
@@ -0,0 +1,32 @@
+const makeRequest = async (url, data) => {
+  const response = await fetch(url, {
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${_CONFIG_.API_KEY}`,
+      // Our _CONFIG data is imported in the HTML file using the <script> tag meaning
+      // it is then accessible via global scope (other JS files, browser console, etc).
+    },
+    method: 'POST',
+    body: JSON.stringify(data)
+  });
+
+  return response.json();
+}
+
+const showLoadingAnimation = (isLoading) => {
+  const loadingScreen = document.querySelector('.loading');
+  if(isLoading) {
+    loadingScreen.classList.remove('hidden');
+  } else {
+    loadingScreen.classList.add('hidden');
+  }
+}
+
+const showErrorMessage = (isError) => {
+  const loadingScreen = document.querySelector('.error');
+  if(isError) {
+    loadingScreen.classList.remove('hidden');
+  } else {
+    loadingScreen.classList.add('hidden');
+  }
+}

From 4c1f659b7ca7c9e60a8b3d37ee22e1ddd9b7db87 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 17:40:51 +0100
Subject: [PATCH 04/11] Add setting to the stage

---
 main.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/main.js b/main.js
index 2c8a041..6c2b0e0 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,16 @@
 const chatGptMessages = [];
+const stageContainer = document.querySelector('.stage-container');
+
+const createStage = (setting, actions) => {
+  if(!setting || !actions.length) {
+    return null;
+  }
+
+  const stageTemplate = document.querySelector('#stage-template');
+  const stage = stageTemplate.content.cloneNode(true);
+  stage.querySelector('.stage-setting').innerHTML = setting;
+  stageContainer.append(stage);
+}
 
 const startGame = async (genre) => {
   showErrorMessage(false);
@@ -36,6 +48,8 @@ const startGame = async (genre) => {
     console.log('SETTING:', setting);
     console.log('ACTIONS:', actions);
 
+    createStage(setting, actions);
+
     showLoadingAnimation(false);
   } catch (error) {
     let errorMessages = `<p>${error.message}</p>`;

From 0d974fc45edca8f29cbfa97c135b302bf10d6151 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 17:55:19 +0100
Subject: [PATCH 05/11] Add action buttons to the stage

---
 main.js   | 10 ++++++++--
 style.css | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/main.js b/main.js
index 6c2b0e0..b3294aa 100644
--- a/main.js
+++ b/main.js
@@ -10,6 +10,14 @@ const createStage = (setting, actions) => {
   const stage = stageTemplate.content.cloneNode(true);
   stage.querySelector('.stage-setting').innerHTML = setting;
   stageContainer.append(stage);
+
+  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',
+    () => alert(button.innerText)
+  ))
 }
 
 const startGame = async (genre) => {
@@ -45,8 +53,6 @@ const startGame = async (genre) => {
     const message = chatResponseJson.choices[0].message;
     const content = JSON.parse(message.content);
     const {setting, actions} = content;
-    console.log('SETTING:', setting);
-    console.log('ACTIONS:', actions);
 
     createStage(setting, actions);
 
diff --git a/style.css b/style.css
index 2f6addd..c53e05a 100644
--- a/style.css
+++ b/style.css
@@ -38,6 +38,24 @@ header {
   margin-bottom: 32px;
 }
 
+.stage-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+}
+
+.stage-actions button {
+  background-color: transparent;
+  padding: 16px;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 20px;
+  text-align: center;
+  color: white;
+  border: 2px solid #a1d2ff;
+  cursor: pointer;
+}
+
 .loading {
   display: flex;
   justify-content: center;

From 19c7cfe94f9333b572e3298a2a40f0de1d05592c Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 18:01:49 +0100
Subject: [PATCH 06/11] Extract functions

---
 main.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/main.js b/main.js
index b3294aa..6fff4bf 100644
--- a/main.js
+++ b/main.js
@@ -1,23 +1,31 @@
 const chatGptMessages = [];
 const stageContainer = document.querySelector('.stage-container');
 
-const createStage = (setting, actions) => {
-  if(!setting || !actions.length) {
-    return null;
-  }
-
-  const stageTemplate = document.querySelector('#stage-template');
-  const stage = stageTemplate.content.cloneNode(true);
+const createSetting = (stage, setting) => {
   stage.querySelector('.stage-setting').innerHTML = setting;
   stageContainer.append(stage);
+}
 
+const createActions = (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',
     () => alert(button.innerText)
-  ))
+  ));
+}
+
+const createStage = (setting, actions) => {
+  if(!setting || !actions.length) {
+    return null;
+  }
+
+  const stageTemplate = document.querySelector('#stage-template');
+  const stage = stageTemplate.content.cloneNode(true);
+
+  createSetting(stage, setting);
+  createActions(actions);
 }
 
 const startGame = async (genre) => {

From 198ba72f3e449238213e85643fb4cf11c4651b0f Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 18:11:05 +0100
Subject: [PATCH 07/11] Add image to the stage

---
 main.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/main.js b/main.js
index 6fff4bf..75461e3 100644
--- a/main.js
+++ b/main.js
@@ -16,7 +16,22 @@ const createActions = (actions) => {
   ));
 }
 
-const createStage = (setting, actions) => {
+const createImage = async (genre, setting) => {
+  const generatedImage = await makeRequest(
+    _CONFIG_.API_BASE_URL + '/images/generations',
+    {
+      prompt: `This is a story based on ${genre}. ${setting}`,
+      n: 1,
+      size: '512x512',
+      response_format: 'url',
+    }
+  );
+
+  const image = generatedImage.data[0].url;
+  document.querySelector('.stage-image').innerHTML = `<img src="${image}" alt="${setting}" >`
+}
+
+const createStage = async (genre, setting, actions) => {
   if(!setting || !actions.length) {
     return null;
   }
@@ -26,6 +41,7 @@ const createStage = (setting, actions) => {
 
   createSetting(stage, setting);
   createActions(actions);
+  await createImage(genre, setting);
 }
 
 const startGame = async (genre) => {
@@ -62,7 +78,7 @@ const startGame = async (genre) => {
     const content = JSON.parse(message.content);
     const {setting, actions} = content;
 
-    createStage(setting, actions);
+    await createStage(genre, setting, actions);
 
     showLoadingAnimation(false);
   } catch (error) {

From 06692a5c0c78b26f0e501c23cd2921cbc826de27 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 18:15:18 +0100
Subject: [PATCH 08/11] Do not show stage while loading

---
 utils.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/utils.js b/utils.js
index b9f6836..991532d 100644
--- a/utils.js
+++ b/utils.js
@@ -17,8 +17,10 @@ const showLoadingAnimation = (isLoading) => {
   const loadingScreen = document.querySelector('.loading');
   if(isLoading) {
     loadingScreen.classList.remove('hidden');
+    stageContainer.classList.add('hidden');
   } else {
     loadingScreen.classList.add('hidden');
+    stageContainer.classList.remove('hidden');
   }
 }
 

From b1e9f03a029903aa033ecbd968ac461f407bba7e Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 18:27:15 +0100
Subject: [PATCH 09/11] Show/Hide genres buttons as needed

---
 main.js  | 2 ++
 utils.js | 9 +++++++++
 2 files changed, 11 insertions(+)

diff --git a/main.js b/main.js
index 75461e3..cb553d8 100644
--- a/main.js
+++ b/main.js
@@ -46,6 +46,7 @@ const createStage = async (genre, setting, actions) => {
 
 const startGame = async (genre) => {
   showErrorMessage(false);
+  showGenresButtons(false);
 
   // Message to send to ChatGPT to start the game
   chatGptMessages.push({
@@ -91,6 +92,7 @@ const startGame = async (genre) => {
     showLoadingAnimation(false);
     document.querySelector('.error-messages').innerHTML = errorMessages;
     showErrorMessage(true);
+    showGenresButtons(true);
   }
 }
 
diff --git a/utils.js b/utils.js
index 991532d..2751236 100644
--- a/utils.js
+++ b/utils.js
@@ -32,3 +32,12 @@ const showErrorMessage = (isError) => {
     loadingScreen.classList.add('hidden');
   }
 }
+
+const showGenresButtons = (isVisible) => {
+  const genres = document.querySelector('.genres');
+  if(isVisible) {
+    genres.classList.remove('hidden');
+  } else {
+    genres.classList.add('hidden');
+  }
+}

From 9b0b9b00c72ed3c93cc30aef60af8ae1574ff9f8 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 18:33:11 +0100
Subject: [PATCH 10/11] Add styles for stage image

---
 style.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/style.css b/style.css
index c53e05a..f1aa04e 100644
--- a/style.css
+++ b/style.css
@@ -56,6 +56,15 @@ header {
   cursor: pointer;
 }
 
+.stage-image {
+  display: grid;
+  place-items: center;
+}
+
+.stage-image img {
+  max-width: 100%;
+}
+
 .loading {
   display: flex;
   justify-content: center;

From b207e8fd5ef8358980079a2ee89436943f958a44 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 20:56:46 +0100
Subject: [PATCH 11/11] Add generated message to history

---
 main.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/main.js b/main.js
index cb553d8..d3c2eb3 100644
--- a/main.js
+++ b/main.js
@@ -32,10 +32,6 @@ const createImage = async (genre, setting) => {
 }
 
 const createStage = async (genre, setting, actions) => {
-  if(!setting || !actions.length) {
-    return null;
-  }
-
   const stageTemplate = document.querySelector('#stage-template');
   const stage = stageTemplate.content.cloneNode(true);
 
@@ -79,6 +75,9 @@ const startGame = async (genre) => {
     const content = JSON.parse(message.content);
     const {setting, actions} = content;
 
+    // Add the generated message to our message history
+    chatGptMessages.push(message)
+
     await createStage(genre, setting, actions);
 
     showLoadingAnimation(false);