Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | export const ConversationUI = { /** * renderConversation. * * @param {Object} conversation * @param {Character} conversation.character * @param {currentDialog} conversation.currentDialog * @example renderConversation(gameState.conversation); */ renderConversation(conversation, updateConvo) { const el = document.getElementById('conversation'); if (!conversation) { el.style.display = 'none'; return; } const { character, currentDialog, } = conversation; const { response } = currentDialog; const goodbye = { query: 'Goodbye' }; const options = (currentDialog.options || []).concat(goodbye); el.style.display = 'block'; // add multiple conversation options const optionHTML = Object.keys(options) .map( (i) => `<button class="option_button">${options[i].query}</button><br>`, ) .join(''); const html = `<p> <b>${character.name}:</b> ${response} </p>`; const buttonHTML = `<p>${optionHTML}</p>`; const finalHTML = html + buttonHTML; el.innerHTML = finalHTML; // add onclick functions to all buttons const buttons = el.querySelectorAll('button'); Object.keys(options) .forEach((i) => { const button = buttons[i]; button.addEventListener('click', () => { const option = options[i]; if (option === goodbye || option.response == null) { updateConvo({ ...conversation, active: false }); return; } updateConvo({ ...conversation, currentDialog: option, }); }); }); if (!conversation.active) { el.style.display = 'none'; } }, }; |