From 95852452d057f035bc1e05886cd3f06e63ae0004 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 12:24:44 +0100
Subject: [PATCH 1/4] Create function to send request to OpenAI

---
 index.html |  1 +
 main.js    | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/index.html b/index.html
index 503e1c4..dfc6607 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="config.js" defer></script>
   <script src="main.js" defer></script>
 </head>
 
diff --git a/main.js b/main.js
index 67b0f50..a90c750 100644
--- a/main.js
+++ b/main.js
@@ -1,3 +1,18 @@
+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 init = () => {
   const genres = document.querySelectorAll('.genre');
   genres.forEach((button) => button.addEventListener(

From 73ee1136c8440867491bf1195e98804283fe17f1 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 13:25:44 +0100
Subject: [PATCH 2/4] Buttons send message to API to start game

---
 main.js | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/main.js b/main.js
index a90c750..cfdfb97 100644
--- a/main.js
+++ b/main.js
@@ -1,3 +1,5 @@
+const chatGptMessages = [];
+
 const makeRequest = async (url, data) => {
   const response = await fetch(url, {
     headers: {
@@ -13,11 +15,43 @@ const makeRequest = async (url, data) => {
   return response.json();
 }
 
+const startGame = async (genre) => {
+  // 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'
+  });
+
+  // Send request to ChatGPT Chat Completion API
+  // https://platform.openai.com/docs/api-reference/chat/create
+  const chatJSON = await makeRequest(
+    _CONFIG_.API_BASE_URL + '/chat/completions',
+    {
+      model: _CONFIG_.GPT_MODEL,
+      messages: chatGptMessages,
+      temperature: 0.7
+      // The model predicts which text is most likely to follow the text preceding it.
+      // Temperature is a value between 0 and 1 that essentially lets you control how confident the model should be when making these predictions.
+      // Lowering temperature means it will take fewer risks, and completions will be more accurate and deterministic.
+      // Increasing temperature will result in more diverse completions.
+  });
+
+  const message = chatJSON.choices[0].message;
+  const content = JSON.parse(message.content);
+  const { setting, actions } = content;
+  console.log('SETTING:', setting);
+  console.log('ACTIONS:', actions);
+}
+
 const init = () => {
   const genres = document.querySelectorAll('.genre');
   genres.forEach((button) => button.addEventListener(
     'click',
-    () => alert(`You selected the genre: ${button.dataset.genre}`))
+    () => startGame(button.dataset.genre))
   )
 }
 

From b7471916e304edf95808855ad201698061644b24 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 13:40:26 +0100
Subject: [PATCH 3/4] Show loading icon when making request

---
 index.html |  4 ++++
 main.js    | 13 +++++++++++++
 style.css  | 11 +++++++++++
 3 files changed, 28 insertions(+)

diff --git a/index.html b/index.html
index dfc6607..c7e1df8 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,10 @@ <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>
+
   <div class="genres">
     <button class="genre" data-genre="horror">👻</button>
     <button class="genre" data-genre="spy film">🕵🏻‍</button>
diff --git a/main.js b/main.js
index cfdfb97..02277ca 100644
--- a/main.js
+++ b/main.js
@@ -15,6 +15,15 @@ const makeRequest = async (url, data) => {
   return response.json();
 }
 
+const showLoadingAnimation = (isLoading) => {
+  const loadingScreen = document.querySelector('.loading');
+  if(isLoading) {
+    loadingScreen.classList.remove('hidden');
+  } else {
+    loadingScreen.classList.add('hidden');
+  }
+}
+
 const startGame = async (genre) => {
   // Message to send to ChatGPT to start the game
   chatGptMessages.push({
@@ -26,6 +35,8 @@ const startGame = async (genre) => {
       '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'
   });
 
+  showLoadingAnimation(true);
+
   // Send request to ChatGPT Chat Completion API
   // https://platform.openai.com/docs/api-reference/chat/create
   const chatJSON = await makeRequest(
@@ -45,6 +56,8 @@ const startGame = async (genre) => {
   const { setting, actions } = content;
   console.log('SETTING:', setting);
   console.log('ACTIONS:', actions);
+
+  showLoadingAnimation(false);
 }
 
 const init = () => {
diff --git a/style.css b/style.css
index ffdf0ce..cbcfcd6 100644
--- a/style.css
+++ b/style.css
@@ -29,6 +29,13 @@ header {
   padding: 32px;
 }
 
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 512px;
+}
+
 .genres {
   display: grid;
   grid-template-columns: repeat(3, 100px);
@@ -52,3 +59,7 @@ header {
   background-color: rgba(255,255,255,0.7);
   border: 4px solid #f1c82d;
 }
+
+.hidden {
+  display: none;
+}

From c8492324274cec1befe79932e55ed7a356a09bab Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Thu, 22 Jun 2023 14:25:54 +0100
Subject: [PATCH 4/4] Add error handling

---
 index.html |  5 +++++
 main.js    | 55 ++++++++++++++++++++++++++++++++++++++----------------
 style.css  |  9 +++++++++
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index c7e1df8..db3d537 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,11 @@ <h1>ChatVenture</h1>
     <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="genres">
     <button class="genre" data-genre="horror">👻</button>
     <button class="genre" data-genre="spy film">🕵🏻‍</button>
diff --git a/main.js b/main.js
index 02277ca..f2816c1 100644
--- a/main.js
+++ b/main.js
@@ -24,7 +24,18 @@ const showLoadingAnimation = (isLoading) => {
   }
 }
 
+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);
+
   // Message to send to ChatGPT to start the game
   chatGptMessages.push({
     role: 'system',
@@ -35,29 +46,41 @@ const startGame = async (genre) => {
       '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'
   });
 
-  showLoadingAnimation(true);
+  let chatResponseJson;
+
+  try {
+    showLoadingAnimation(true);
 
-  // Send request to ChatGPT Chat Completion API
-  // https://platform.openai.com/docs/api-reference/chat/create
-  const chatJSON = await makeRequest(
-    _CONFIG_.API_BASE_URL + '/chat/completions',
-    {
+    // Send request to ChatGPT Chat Completion API
+    // https://platform.openai.com/docs/api-reference/chat/create
+    chatResponseJson = await makeRequest(_CONFIG_.API_BASE_URL + '/chat/completions', {
       model: _CONFIG_.GPT_MODEL,
       messages: chatGptMessages,
       temperature: 0.7
       // The model predicts which text is most likely to follow the text preceding it.
-      // Temperature is a value between 0 and 1 that essentially lets you control how confident the model should be when making these predictions.
-      // Lowering temperature means it will take fewer risks, and completions will be more accurate and deterministic.
-      // Increasing temperature will result in more diverse completions.
-  });
+      // Temperature is a value between 0 and 1 that essentially lets you control how confident the model should be
+      // when making these predictions. Lowering temperature means it will take fewer risks, and completions will be
+      // more accurate and deterministic. Increasing temperature will result in more diverse completions.
+    });
 
-  const message = chatJSON.choices[0].message;
-  const content = JSON.parse(message.content);
-  const { setting, actions } = content;
-  console.log('SETTING:', setting);
-  console.log('ACTIONS:', actions);
+    const message = chatResponseJson.choices[0].message;
+    const content = JSON.parse(message.content);
+    const {setting, actions} = content;
+    console.log('SETTING:', setting);
+    console.log('ACTIONS:', actions);
 
-  showLoadingAnimation(false);
+    showLoadingAnimation(false);
+  } catch (error) {
+    let errorMessages = `<p>${error.message}</p>`;
+
+    if (chatResponseJson.error) {
+      errorMessages += `<p>${chatResponseJson.error.message}</p>`;
+    }
+
+    showLoadingAnimation(false);
+    document.querySelector('.error-messages').innerHTML = errorMessages;
+    showErrorMessage(true);
+  }
 }
 
 const init = () => {
diff --git a/style.css b/style.css
index cbcfcd6..35b898a 100644
--- a/style.css
+++ b/style.css
@@ -36,6 +36,15 @@ header {
   height: 512px;
 }
 
+.error {
+  text-align: center;
+  font-size: 24px;
+}
+
+.error > * {
+  color: tomato;
+}
+
 .genres {
   display: grid;
   grid-template-columns: repeat(3, 100px);