04 - Display Game

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>
@@ -25,20 +26,43 @@ <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>
+
+
+  <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>

main.js

@@ -1,36 +1,23 @@
 const chatGptMessages = [];
+const stageContainer = document.querySelector('.stage-container');
 
-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 createStage = (setting, actions) => {
+  if(!setting || !actions.length) {
+    return null;
   }
-}
 
-const showErrorMessage = (isError) => {
-  const loadingScreen = document.querySelector('.error');
-  if(isError) {
-    loadingScreen.classList.remove('hidden');
-  } else {
-    loadingScreen.classList.add('hidden');
-  }
+  const stageTemplate = document.querySelector('#stage-template');
+  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) => {
@@ -66,8 +53,8 @@ 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);
 
     showLoadingAnimation(false);
   } catch (error) {

style.css

@@ -29,6 +29,33 @@ header {
   padding: 32px;
 }
 
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.container > * {
+  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;

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');
+  }
+}