object links with hover effect

Is it possible with Javascript or Quest core file changes that object links in the game already show the object description when you just hover over it?


It should be possible, but I'd be careful about it. The delay taken to request a description from the server would mean that the description takes some time to appear, unless you send all the descriptions to the client in a turnscript or similar.

It shouldn't be too hard to make a turnscript that sends object descriptions, so the JS code has them ready to display. The only disadvantage of doing it this way is that description scripts wouldn't work properly. You would have to either omit them from the hover thing, or run them whenever the object comes into sight. Or possibly run them using an ASLEvent call when necessary… but then the description wouldn't appear immediately for those objects.

After a little more thought, I think the simplest solution might be to do something like this:

  <function name="ProcessTextCommand_Object" type="string" parameters="section, data">
    <![CDATA[
    objectname = Mid(section, 8)
    text = ""
    colon = Instr(objectname, ":")
    if (colon > 0) {
      text = Mid(objectname, colon + 1)
      objectname = Left(objectname, colon - 1)
    }
    object = ObjectForTextProcessor(objectname)
    if (object = null) {
      return ("@@@open@@@" + ProcessTextSection(section, data) + "@@@close@@@")
    }
    else {
      if (LengthOf(text) = 0) {
        text = SafeXML(GetDisplayAlias(object))
      }
      if (game.enablehyperlinks) {
        linkid = ProcessTextCommand_GetNextLinkId()
        colour = ""
        if (HasString(object, "linkcolour") and GetUIOption("UseGameColours") = "true") {
          colour = object.linkcolour
        }
        else {
          colour = GetLinkTextColour()
        }
        style = GetCurrentTextFormat(colour)
        if (HasString (object, "quick_look")) {
          description = "<span class="objdescription">" + ProcessTextSection(object.quick_look, data) + "</span>"
        }
        else if (HasString (object, "look")) {
          description = "<span class="objdescription">" + ProcessTextSection(object.look, data) + "</span>"
        }
        else {
          description = ""
        }
        return ("<a id=\"" + linkid + "\" style=\"" + style + "\" class=\"cmdlink elementmenu\" data-elementid=\"" + object.name + "\">" + text + description + "</a>")
      }
      else {
        return (text)
      }
    }
    ]]>
  </function>

This adds the description to each object link, allowing a second description attribute quick_look as an alternative for objects that do something when the player looks at them.

You could then use CSS to position the hovering box:

<style>
  .objdescription {
    position: absolute;
    z-index: 1;
    visibility: hidden;
    background-color: pink;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 2px;
  }

  a:hover:not(.disabled) .objdescription {
    visibility: visible;
  }
</style>

(might need a little playing around with the position so that the description doesn't obscure the verb menu; or even move the verbs into the description box)

If an object's description changes, it might be a good idea to update the description boxes of any links currently onscreen. You could do this with a turnscript, but now I think about it:

  <changedlook type="script">
    if (not HasString (this, "quick_look")) {
      if (HasString (this, "look")) {
        JS.UpdateObjectDescription(this.name, ProcessText (this.look))
      }
      else {
        JS.UpdateObjectDescription(this.name)
      }
    }
  </changedlook>

  <changedquick_look type="script">
    if (HasString (this, "quick_look")) {
      JS.UpdateObjectDescription(this.name, ProcessText (this.quick_look))
    }
    else if (HasString (this, "look")) {
      JS.UpdateObjectDescription(this.name, ProcessText (this.look))
    }
    else {
      JS.UpdateObjectDescription(this.name)
    }
  </changedquick_look>

backed up by some JS functions:

UpdateObjectDescription = function (id, desc) {
  $(".cmdlink").each(function (i, e) {
    if (id == $(e).data("elementid")) {
      if (desc) {
        var box = $(e).find(".objdescription");
        if (box.length == 0) {
          box = $("<span>", {class: "objdescription"}).appendTo(e);
        }
        box.html(desc);
      } else {
        $(e).find(".objdescription").remove();
      }
    }
  });
}

(off the top of my head, not tested. So feel free to point out any errors)


Wow, this is all off the top of your head? Respect! Thank you, I will test it


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums