Javascript text adventure with typing effect

Question

So, I'm trying to make a text adventure and have used this Github page for the source code. I wanted to add a typing effect so I also used this page from W3Schools for the typing effect. From the code I used on GitHub, I only modified game.js to incorporate the typing effect, but after doing so I noticed the player can select options before it finishes typing, so I moved the class that shows the buttons to a separate function. Now, what I want to do is have the buttons hidden until the typeWriter fucntion is finished typing.

Here is the modified game.js code:

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
var typingl = 0;
var speed = 50;

function typeWriter() {
  if (typingl < baseText.length) {
    textElement.innerHTML += baseText.charAt(typingl);
    typingl++;
    setTimeout(typeWriter, speed);
  }
}

let state = {}

function startGame() {
  state = {}
  showTextNode(1)
}

function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = ''
  baseText = textNode.text
  typingl=0;typeWriter();
  while (optionButtonsElement.firstChild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild)
  }
  showButtons(textNode);
}


function showButtons(btnx) {
  btnx.options.forEach(option => {
    if (showOption(option)) {
      const button = document.createElement('button')
      button.innerText = option.text
      button.classList.add('btn')
      button.addEventListener('click', () => selectOption(option))
      optionButtonsElement.appendChild(button)
    }
  })
}

function showOption(option) {
  return option.requiredState == null || option.requiredState(state)
}

function selectOption(option) {
  const nextTextNodeId = option.nextText
  if (nextTextNodeId <= 0) {
    return startGame()
  }
  state = Object.assign(state, option.setState)
  showTextNode(nextTextNodeId)
}

const textNodes = [
  {
    id: 1,
    text: 'You wake up in a strange place and you see a jar of blue goo near you.',
    options: [
      {
        text: 'Take the goo',
        setState: { blueGoo: true },
        nextText: 2
      },
      {
        text: 'Leave the goo',
        nextText: 2
      }
    ]
  },
  {
    id: 2,
    text: 'You venture forth in search of answers to where you are when you come across a merchant.',
    options: [
      {
        text: 'Trade the goo for a sword',
        requiredState: (currentState) => currentState.blueGoo,
        setState: { blueGoo: false, sword: true },
        nextText: 3
      },
      {
        text: 'Trade the goo for a shield',
        requiredState: (currentState) => currentState.blueGoo,
        setState: { blueGoo: false, shield: true },
        nextText: 3
      },
      {
        text: 'Ignore the merchant',
        nextText: 3
      }
    ]
  },
  {
    id: 3,
    text: 'After leaving the merchant you start to feel tired and stumble upon a small town next to a dangerous looking castle.',
    options: [
      {
        text: 'Explore the castle',
        nextText: 4
      },
      {
        text: 'Find a room to sleep at in the town',
        nextText: 5
      },
      {
        text: 'Find some hay in a stable to sleep in',
        nextText: 6
      }
    ]
  },
  {
    id: 4,
    text: 'You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 5,
    text: 'Without any money to buy a room you break into the nearest inn and fall asleep. After a few hours of sleep the owner of the inn finds you and has the town guard lock you in a cell.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 6,
    text: 'You wake up well rested and full of energy ready to explore the nearby castle.',
    options: [
      {
        text: 'Explore the castle',
        nextText: 7
      }
    ]
  },
  {
    id: 7,
    text: 'While exploring the castle you come across a horrible monster in your path.',
    options: [
      {
        text: 'Try to run',
        nextText: 8
      },
      {
        text: 'Attack it with your sword',
        requiredState: (currentState) => currentState.sword,
        nextText: 9
      },
      {
        text: 'Hide behind your shield',
        requiredState: (currentState) => currentState.shield,
        nextText: 10
      },
      {
        text: 'Throw the blue goo at it',
        requiredState: (currentState) => currentState.blueGoo,
        nextText: 11
      }
    ]
  },
  {
    id: 8,
    text: 'Your attempts to run are in vain and the monster easily catches.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 9,
    text: 'You foolishly thought this monster could be slain with a single sword.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 10,
    text: 'The monster laughed as you hid behind your shield and ate you.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 11,
    text: 'You threw your jar of goo at the monster and it exploded. After the dust settled you saw the monster was destroyed. Seeing your victory you decide to claim this castle as your and live out the rest of your days there.',
    options: [
      {
        text: 'Congratulations. Play Again.',
        nextText: -1
      }
    ]
  }
]

startGame()

What I have tried to get the effect to work is put an else statement in the typeWriter function to call the ShowButtons function, but it didn't work for me. For some reason I can't seem to get the buttons to show when the typing finishes, only when it starts typing.

Answer 1

Here's what worked for me, based off of Peter's answer:

Change typewriter function to this:

async function typeWriter() {
  return await new Promise((resolve) => {
      if (typingl < baseText.length) {
        textElement.innerHTML += baseText.charAt(typingl);
        typingl++;
        setTimeout(typeWriter, speed);
      } else {
        optionButtonsElement.style.display = 'grid';
        resolve(true);
      }
  });
}

Change ShowTextNode to this:

function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = ''
  baseText = textNode.text
  typingl=0;
  optionButtonsElement.style.display = 'none';
  while (optionButtonsElement.firstChild) {
      optionButtonsElement.removeChild(optionButtonsElement.firstChild)
  }
  typeWriter();
  showButtons(textNode);
}

No modification needed for StartGame function.

Answer 2

You could use a promise inside your typeWriter() function and return the promise itself.

async function typeWriter() {
  return await new Promise((resolve) => {
      if (typingl < baseText.length) {
        textElement.innerHTML += baseText.charAt(typingl);
        typingl++;
        setTimeout(typeWriter, speed);
      } else {
        optionButtonsElement.style.display = 'block';
        resolve(true);
      }
  });
}

This way typeWriter() function promise will resolve true when typingl == baseText.length. You could use this on showTextNode() function like this.

function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = ''
  baseText = textNode.text
  typingl=0;
  typeWriter().then((res) => {
   if(res) { // res == true
      while (optionButtonsElement.firstChild) {
          optionButtonsElement.removeChild(optionButtonsElement.firstChild)
      }
      showButtons(textNode);
   }
  });    
}

Please consider the above just a minor example on working with Promise. Do check the available documentation to get more information. Have also a look in this answer .

Perhaps there is also a need to check the state or the textNode whenever showTextNode() is called to check which textNode is used since typeWriter() is now an asynchromous function.

EDIT

Hide options-buttons on game start.

function startGame() {
  optionButtonsElement.style.display = 'none';
  state = {}
  showTextNode(1)
}