04 - Display Game

main.js

@@ -1,4 +1,24 @@
 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 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) => {
   showErrorMessage(false);
@@ -33,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

@@ -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;