Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm trying to come up with a way to make it so that certain text only appears if you have a specific state. Similar to the effect of
JavaScript
requiredState: (currentState) => currentState.StateHere
However this only works on
JavaScript
optionButtonsElement
(from my experience)
HTML
<div class="container">
  <div id="text">Text</div>
  <div id="option-buttons" class="btn-grid">
    <button class="btn">Option 1</button>
    <button class="btn">Option 2</button>
    <button class="btn">Option 3</button>
    <button class="btn">Option 4</button>
  </div>
</div>


JavaScript
const textElement = document.getElementById("text");
const optionButtonsElement = document.getElementById("option-buttons");

let state = {};

function startGame() {
  state = {};
  showTextNode(1.1);
}

function showTextNode(textNodeIndex) {
  const textNode = textNodes.find((textNode) => textNode.id === textNodeIndex);
  textElement.innerText = textNode.text;
  while (optionButtonsElement.firstChild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild);
  }

  textNode.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.1,
    text:
      "What is going on? Where am I? No. That's not what I need to ask. A better question would be...",
    options: [
      {
        text: "Who... am I?",
        nextText: 1.2
      }
    ]
  },
  {
    id: 1.2,
    text:
      "I, I don't know. I can't remember. I need to survive. I need food, water, and shelter the basics of survival. Maybe I'll remember more in time. Until then, I must survive.",
    options: [
      {
        text: "And survive I will!",
        setState: { Survivalist: true },
        nextText: 1.3
      },
      {
        text: "Later...",
        nextText: 1.3
      }
    ]
  },
  {
    id: 1.3,
    text: "PLACEHOLDER"
  }
];

startGame();


What I have tried:

I'm a beginning developer, and haven't been able to come up with anything to make this happen.
Posted
Comments
Member 15627495 21-Aug-22 3:53am    
hello,

don't mind too much about "option" states,

just reload the parent fully.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900