Is there a reason why this array index is getting changed incorrectly?

Question

I am making a text-based game in javascript and have the following code:

!(function () {
  let iterator = 0;
  let cbs = [];

  class Room {
    get side() {
      const self = this;
      return new Proxy([], {
        get(t, p) {
          return self.sides[p].description;
        }
      })
    }
    constructor(sides) {
      this.sides = sides;
    }
  }

  class Character {}
  
  function start(roomMap) {
    function showRoom(room) {
      let finalArray = [
        ['in this room, there are four doors', '[ ok ]']
      ];
      for (let i in room.sides) {
        finalArray.push(['#' + (parseInt(i) + 1) + ': ' + room.side[i], '[ next ]']);
      }
      follow(...finalArray);
    }
    showRoom(roomMap);
  }

  function write(text, subtext = "") {
    document.querySelector("#title").innerText = text;
    document.querySelector("#subtitle").innerText = subtext;
  }

  function step(callback) {
    cbs.push(callback);
  }
  
  function follow(...steps) {
    function call(i) {
      return function() {
        const toCall = call(i + 1);
        const st = steps[i];
        let shouldContinue = true;
        function callIt() {
          step(toCall);
        }
        if (typeof st !== "undefined") {
          if (typeof st === "object") {
            write(...st);
          } else if (typeof st === "function") {
            const called = st();
            if (called instanceof Promise) {
              shouldContinue = false;
              write(null, '[ loading... ]');
              called.then(callIt);
            } else if (typeof called === "object") {
              write(...called);
            }
          }
          if (shouldContinue) {
            callIt();
          }
        } else {
          write('the end', '[ ok ]');
        }
      }
    }
    call(0)();
  }

  window.onload = function () {
    function next() {
      const callback = cbs[iterator];
      if (typeof callback === "function") {
        callback();
        iterator++;
      }
    }
    document.querySelector("#subtitle").onclick = next;
    document.onkeypress = function(e) {
      if (e.key.trim().length === 0 || e.key === 'Enter' || e.key === 'Return') {
        next();
      }
    }
  };
  
  follow(
    ["a game by ezra", "[ ok ]"],
    ["follow on-screen instructions", "[ ok ]"],
    [null, "[ start ]"],
    function() {
      start(new Room([
        {
          description: 'creepy description'
        },
        {
          description: 'another creepy description'
        },
        {
          description: 'less creepy description'
        },
        {
          description: 'boring description'
        }
      ]));
    }
  );
})();

body {
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  color: #ffffff;
  height: 100vh;
  flex-direction: column;
  user-select: none;
}

#title {
  font-size: 25px;
  font-weight: 700;
}

#subtitle {
  font-size: 18px;
}

#title:not(:empty) + #subtitle:not(:empty) {
  margin-top: 10px;
}

#subtitle:hover {
  cursor: pointer;
}

<div id="title"></div>
<div id="subtitle"></div>

However, as you can see, it gets stuck after the first press and thinks the game is over. I tried debugging and logging the iterator variable, but it was following the correct order, meaning there were no hiccups with iterating over the array of callbacks.

So I'm just wondering what I'm doing wrong during the follow function that is referencing an undefined index on the cbs (callbacks) array.

Any help would be appreciated.

Could you please describe the problem in terms of what you expect to happen vs what actually happens? Running the snippet above shows _stuff_ happening but we have no idea what it's meant to do. There were no errors about undefined indexes either — Phil, May 18 '20 at 02:31
Don't use `for..in` to iterate an array. See [Why is using “for…in” with array iteration a bad idea?](https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea) — Phil, May 18 '20 at 02:33
Haven't done java programming for a while (I'm aware that this is JS), but java had an issue with the enhanced for loop - The concurrent modification exception, which gives strange results. — Sumuk Shashidhar, May 18 '20 at 02:46

Is there a reason why this array index is getting changed incorrectly?

0 Answers0