Make the code wait for a user input to run an action, and then ask for input again

Question

Hello, I came across a problem trying to develop an algorithm for a small text-based rpg (based on the Sololearn Python course) in Javascript, and I’ve been trying to think of a way to get over it without breaking the logic, which would be "the user inserts a text, a message returns by it, and again, the code waits for the user input", and so on, can anyone help me solve it? , I’ll leave an excerpt of the code here:

const $ = (e) => document.querySelector(e);

const res = $('#resultado');
const showResponse = (i) => res.innerHTML = i;

let isPlaying = false;

class Message {
  constructor() {
    this.comandos = [
      "atacar",
      "defender",
      "pegar",
      "ir para"
    ]
  }

  generateRandomNumber(max) {
    return Math.floor(Math.random() * max + 1);
  }

  getResponse(type) {
    if(this.comandos.includes(type)) {
      switch(type) {
        case "ir para":
          console.log(type);
          break;
        case "atacar":
          showResponse("Você atacou");
          break;
        case "defender":
          showResponse("Você defendeu");
          break;
        case "pegar":
          showResponse("Você pegou");
          break;
      } 
    }
  }
}

class Weapon {
  constructor(name, damage, durability, weaponClass, effects = {}) {
    this.name = name;
    this.level = 0;

    this.damage = damage;

    this.durability = durability;

    this.effects = effects;

    this.weaponClass = weaponClass;
  }
}

class Armor {
  constructor(name, defense, durability, armorClass, effects = {}) {
    this.name = name;
    this.level = 0;

    this.defense = defense;

    this.durability = durability;

    this.armorClass = armorClass;

    this.effects = effects;
  }
}

class Enemy {
  constructor(name, level) {
    this.name = name;
    this.level = level;

    this.weapon1 = 'unarmed';
    this.weapon2 = 'unarmed';

    this.spells = {}

    this.armor = {
      helmet: armors["Cloth Set"]["Bandana"],
      chest: armors["Cloth Set"]["Cloth Armor"],
      gloves: armors["Cloth Set"]["Cloth Clamp"],
      boots: armors["Cloth Set"]["Light Boots"],
    }

    this.drops = {}
  }
}

const weapons = {
  swords: {
    "Simple Sword": new Weapon("Simple Sword", 10, 200, 'Sword')
  },
  twoHandedSwords: {
    "Two Handed Iron Sword": new Weapon("Two Handed Iron Sword", 35, 200, 'Two Handed Sword')
  },
  shields: {
    "Wooden Shield": new Armor("Wooden Shield", 20, 220, "Shield")
  }
}

const armors = {
  "Cloth Set": {
    "Bandana": new Armor("Bandana", 10, 220, "Helmet"),
    "Cloth Armor": new Armor("Cloth Armor", 20, 220, "Chest"),
    "Cloth Clamp": new Armor("Cloth Clamp", 15, 220, "Gloves"),
    "Light Boots": new Armor("Light Boots", 15, 220, "Boots")
  }
}

class Character {
  constructor(name) {
    this.name = name;
    this.level = 1;

    this.weapon1 = 'unarmed';
    this.weapon2 = 'unarmed';

    this.spells = {}

    this.armor = {
      helmet: armors["Cloth Set"]["Bandana"],
      chest: armors["Cloth Set"]["Cloth Armor"],
      gloves: armors["Cloth Set"]["Cloth Clamp"],
      boots: armors["Cloth Set"]["Light Boots"],
    }

    this.inventory = {}
    this.gold = 0;

    this.isFighting = false;
    this.isTraveling = false;
    this.isShopping = false;
    this.isTalking = false;
  }
}

const runNextTurn = (query) => new Message().getResponse(query);
window.addEventListener('keydown', (e) => {
  const userInput = $('input').value.toLowerCase();
  if(e.keyCode !== 13) return;
  showResponse("");
  if(!isPlaying && userInput === 'iniciar') {
    isPlaying = true;
    runNextTurn(userInput);
    showResponse("Você iniciou o jogo");
  } else if(!isPlaying && userInput !== 'iniciar') {
    showResponse("Você precisa iniciar o jogo primeiro");
  } else {
    runNextTurn(userInput);
  }

  return $('input').value = "";
})

I appreciate anyone who can help me in this study

Answer 1

You can use the command confirm, that works well like the alert, but the confirm will return if user clicked on OK or not, and you can put this command inside a IF..ELSE to continue only after a user action.

if (confirm("abrir o baú?")) {
  alert("+100g");
} else {
  alert("nada acontece");
}