diff --git a/main.js b/main.js index d3c2eb3..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) => ``).join(''); document.querySelector('.stage-actions').innerHTML = actionsHtml; const buttons = document.querySelectorAll('.stage-actions button'); buttons.forEach((button) => button.addEventListener( 'click', - () => alert(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 2751236..ee7bfd2 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": []}\n\n###\n\n` + }) +} + const showLoadingAnimation = (isLoading) => { const loadingScreen = document.querySelector('.loading'); if(isLoading) {