Mobile, schmobile

[KVonGit]

Before I forget, also see #23

---

CSS is far my being something I am good at, so this can most assuredly use some tweaking...

Plus, all I have to test things with is an Android phone, and I know that iStuff behaves slightly differently quite frequently. =)

All that aside, I've been hacking away at the style settings and scrolling behavior, mostly focusing on mobile (although I actually see no difference on desktop after the scrolling tweaks).

If you'd like to viddy an example, the game can be played on GitHub Pages here: https://kvongit.github.io/Koww_QuestJS/play.html

The style setting stuff is the latest post in that issue (link at the beginning of this post), and here are the scrolling bits:

/* FIX SCROLLING ON MOBILE */

io.scrollToEnd = function() {
  if (settings.autoscroll) {
    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
  }
}

// This should be called after each turn to ensure we are at the end of the page and the text box has the focus
function endTurnUI(update) {
  if (!currentLocation) return errormsg("currentLocation not set (" + (player ? 'but player is' : 'nor is player') + ")")
  if (settings.panes !== 'none' && update) {
    // set the lang.exit_list
    for (let exit of lang.exit_list) {
      const el = document.querySelector('#exit-' + exit.name)
      if (!el) continue
      if (currentLocation.hasExit(exit.name, {excludeScenery:true}) || exit.type === 'nocmd') {
        el.style.display = 'block'
      }
      else {
        el.style.display = 'none'
      }
    }
    io.updateStatus()
  }
  for (let o of io.modulesToUpdate) {
    o.update(update)
  }
  io.updateUIItems()
  if (settings.updateCustomUI) settings.updateCustomUI()

  io.scrollToEnd()
  // give focus to command bar
  // Modified this last line to add the setTimeout for mobile browsers
  if (settings.textInput) { setTimeout(function(){document.querySelector('#textbox').focus();},150) }
}

io.outputFromQueue = function() {
  if (io.outputSuspended) return
  if (io.outputQueue.length === 0) {
    if (!io.disableTextFunction) io.enable()
    return
  }
  
  //if (settings.textInput) document.querySelector('#input').style.display = 'block'
  const data = io.outputQueue.shift()
  if (data.action === 'wait' && (!settings.disableWaitInDevMode || settings.playMode !== 'dev')) {
    io.disable()
    io.outputSuspended = true
    //if (settings.textInput) document.querySelector('#input').style.display = 'none'
    data.tag = 'p'
    data.onclick="io.unpause()"
    if (!data.text) data.text = lang.click_to_continue
    io.print(data)
  }
  if (data.action === 'delay' && (!settings.disableWaitInDevMode || settings.playMode !== 'dev')) {
    log('here')
    io.disable()
    io.outputSuspended = true
    if (data.text) {
      data.tag = 'p'
      io.print(data)
    }
    setTimeout(io.unpause, data.delay * 1000)
  }
  if (data.action === 'output') {
    const html = io.print(data)
    io.speak(data.text);
    saveLoad.transcriptAppend(data);
    io.outputFromQueue()
  }
  if (data.action === 'func') {
    if (data.func()) io.outputFromQueue()
  }
  if (data.action === 'effect') {
    io.disable()
    // need a way to handle spoken and transcript here
    data.effect(data)
  }
  if (data.action === 'clear') {
    document.querySelector('#output').textContent = "";
    io.outputFromQueue()
  }
  if (data.action === 'sound') {
    if (!settings.silent) {
      const el = document.getElementById(data.name)
      el.currentTime = 0
      el.play()
    }
  }
  if (data.action === 'ambient') {
    for (let el of document.getElementsByTagName('audio')) el.pause()
    if (!settings.silent && data.name) {
      const el = document.getElementById(data.name)
      el.currentTime = 0
      el.loop = true
      el.play()
      if (data.volume) el.volume = data.volume / 10
    }
  }
  
  io.scrollToEnd()
  // Modified this last line to add the setTimeout for mobile browsers
  if (settings.textInput) { setTimeout(function(){document.querySelector('#textbox').focus();},150) }
}

---

Comments and suggestions are always more than welcome and much appreciated.

[KVonGit]

Also... On mobile, when a link is at the bottom of the screen, the object link dropdown will sometimes appear too low, with all or part of it below the visible text on screen.

I changed the code in the links library to apply CSS to set the bottom of the menu options element at the link, so it will pop up above the link rather then drop down below it.

I also added an event listener that closes any open object link menu when clicking outside of that menu's element.

settings.nameTransformer = function (alias, obj, options = {}) {
  if (!settings.linksEnabled) return alias;
  if (options.noLink) return alias;

  let s = `<span class="object-link dropdown" data-objname="${obj.name}"`;
  //for (const key in options) s += ` data-${key}="${options[key]}"`
  s += '><span onclick="itemLinks.itemClick(this, event)" ';
  s += `obj="${obj.name}" class="droplink" name="${obj.name}-link">${alias}</span>`;
  s += `<span obj="${obj.name}" class="dropdown-content">`;
  s += `<span obj="${obj.name}-verbs-list-holder">`;
  s += itemLinks.getVerbsLinks(obj);
  s += "</span></span></span>";
  return s;
};

    document.addEventListener("click", function (e) {
      // If click is not inside any .dropdown-content or a dropdown trigger
      const isDropdown = e.target.closest(".dropdown-content");
      const isTrigger = e.target.closest(".dropdown");

      if (!isDropdown && !isTrigger) {
        for (const el of document.querySelectorAll(".dropdown-content")) {
          el.style.display = "none";
        }
      }
    })