Hyphens causing havoc with custom status pane

ShadowsEdge19
21 Sept 2017, 16:30

Hi, I've been messing around with a game using a custom status pane that displays the alias of the room the player is current in and I had some interesting time with a couple of examples where the status would not display in the HTML and would just default to "---".
I just now figured out why it was doing this, the alias contained a hyphen character: '
How do I add an escape clause on that character when it is displayed in the HTML?

In the below example Room3 has a custom alias On Enter that contains a hyphen for testing purposes, from the start just go North East.

<!--Saved by Quest 5.7.6404.15496-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="TestRoomStatus">
    <gameid>0bae2a50-2560-4e7c-8016-02867de11bb8</gameid>
    <version>1.0</version>
    <firstpublished>2017</firstpublished>
    <feature_advancedscripts />
    <customstatuspane />
    <roomenter type="script"><![CDATA[
      oRoomObj = player.parent
      if (oRoomObj.name <> "Start") {
        if (HasAttribute (oRoomObj, "SpecialRoom")) {
          s = "<table width=\"100%\"><tr>"
          s = s + "   <td style=\"text-align:center;\" width=\"100%\"><span id=\"roomalias-span\">---</span></td>"
          s = s + " </tr>"
          s = s + "</table>"
          JS.setCustomStatus (s)
          if (HasScript(oRoomObj, "changedalias")) {
            do (oRoomObj, "changedalias")
          }
        }
      }
      if (HasScript(player, "changedalias")) {
        do (player, "changedalias")
      }
    ]]></roomenter>
    <start type="script"><![CDATA[
      foreach (room, AllObjects()) {
        if (room.name <> "Start") {
          if (HasAttribute (room, "SpecialRoom")) {
            room.changedalias => {
              // When a room's alias is changed, we change the status pane only if the player is in that room
              // Whether the if() line is necessary will depend on your gameplay, but it does no harm to include it
              if (Contains (this, player)) {
                JS.eval ("$('#roomalias-span').html('" + this.alias + "');")
              }
            }
          }
        }
        room.alias = "A Room"
      }
    ]]></start>
  </game>
  <object name="Building1">
    <inherit name="editor_object" />
    <object name="Room1">
      <inherit name="TheRoom" />
      <enter type="script">
        Room1.alias = "Room 1"
      </enter>
      <exit alias="east" to="Room2">
        <inherit name="eastdirection" />
      </exit>
      <object name="player">
        <inherit name="editor_object" />
        <inherit name="editor_player" />
        <alias>Player 1</alias>
      </object>
      <exit alias="northeast" to="Room3">
        <inherit name="northeastdirection" />
      </exit>
    </object>
  </object>
  <object name="Building2">
    <inherit name="editor_object" />
    <object name="Room2">
      <inherit name="TheRoom" />
      <enter type="script">
        Room2.alias = "Room 2"
      </enter>
      <exit alias="north" to="Room3">
        <inherit name="northdirection" />
      </exit>
      <exit alias="west" to="Room1">
        <inherit name="westdirection" />
      </exit>
    </object>
  </object>
  <object name="Building3">
    <inherit name="editor_object" />
    <object name="Room3">
      <inherit name="TheRoom" />
      <enter type="script">
        Room3.alias = "Room\' 3"
      </enter>
      <exit alias="south" to="Room2">
        <inherit name="southdirection" />
      </exit>
      <exit alias="southwest" to="Room1">
        <inherit name="southwestdirection" />
      </exit>
    </object>
  </object>
  
  <type name="TheRoom">
    <inherit name="editor_room" />
	<SpecialRoom type="boolean">true</SpecialRoom>
  </type>  
  
</asl>

K.V.
21 Sept 2017, 19:23

image


K.V.
21 Sept 2017, 19:26
//  I set up a listalias attribute for Room3.
if (HasAttribute(this, "listalias")) {     
  JS.eval ("$('#roomalias-span').html('" + this.listalias + "');") 
 }
else {
   JS.eval ("$('#roomalias-span').html('" + this.alias + "');")
}
<object name="Room3">
  <inherit name="TheRoom" />
  <enter type="script"><![CDATA[  
    // I made this section CDATA
    Room3.alias = "Room' 3"
// This sets the listalias attribute, which shows up in the pane.  &#39; is UTF-8 for '
    Room3.listalias = "Room&#39; 3"  
  ]]></enter>
  <exit alias="south" to="Room2">
     <inherit name="southdirection" />
  </exit>
  <exit alias="southwest" to="Room1">
    <inherit name="southwestdirection" />
  </exit>
</object>

https://www.w3schools.com/charsets/ref_utf_basic_latin.asp


mrangel
21 Sept 2017, 19:38

First up, names of characters. A hyphen is -. You mean an apostrophe, ' (or a single quote).

In that room, the actual javascript command that you're trying to execute on the client side is:

$('#roomalias-span').html('Room' 3');

I believe that when you've put

Room3.alias = "Room\' 3"

Quest already interprets a backslash (within a quoted string) as an instruction to take the next character literally; so \' puts a literal apostrophe into your room's alias.
If you put

Room3.alias = "Room\\\' 3"

then your room's alias would be Room\' 3 with a slash in, so the browser would be interpreting the command:

$('#roomalias-span').html('Room\' 3');

so the argument to the html() function is Room' 3. But that means your room has a backslash in the alias, and probably isn't ideal.

First suggestion:
Do you really need a literal ' apostrophe? My solution is normally to use curly quotes, and reserve the plain quotes ' and " for programming.
For example, I can avoid escaping quotes by doing something like
msg ("“This,” the programmer yells, “is a very, very silly example!”")
because to both Quest and Javascript, curly quotes are just text characters to display to the user.

Method 2:

              if (Contains (this, player)) {
                escaped_alias = Replace(this.alias, "'", "\\'")
                JS.eval ("$('#roomalias-span').html('" + escaped_alias + "');")
              }

(sorry if there's errors in there, I can't get at Quest here so I'm answering off the top of my head)


mrangel
21 Sept 2017, 19:39

Ah, ninja'd :p


K.V.
21 Sept 2017, 19:55

Yep, mrangel's way is easier:

<enter type="script">
  //Lose the backslash
   Room3.alias = "Room' 3"
</enter>
<start type="script"><![CDATA[
   foreach (room, AllObjects()) {
    if (room.name <> "Start") {
      if (HasAttribute (room, "SpecialRoom")) {
        room.changedalias => {
          // When a room's alias is changed, we change the status pane only if the player is in that room
          // Whether the if() line is necessary will depend on your gameplay, but it does no harm to include it
          if (Contains (this, player)) {
            escaped_alias = Replace(this.alias, "'", "\\'")
            JS.eval ("$('#roomalias-span').html('" + escaped_alias + "');")
          }
        }
      }
    }
    room.alias = "A Room"
  }
]]></start>

image


NOTE: It displays Room' 3 in the pane every time you enter that room, but it says A Room in the text the first time, just like the other room does.


ShadowsEdge19
21 Sept 2017, 20:03

Great! Both methods work, and yes I realised I needed to keep the name separate from the true room alias attribute for good reason.


Doctor Agon
21 Sept 2017, 20:27

How, or should it be which, keys do you press for curly quotes. I feel such a fool for even asking such a basic question, but there we are 'FOOL'. (I'd've written that in curly quotes if I could find the #£*$%!#* key.)


jmnevil54
21 Sept 2017, 20:44

jkl;'
Shift apostrophe. ' "


Doctor Agon
21 Sept 2017, 20:50
msg ("“This,” the programmer yells, “is a very, very silly example!”")

Those curly quotes. I know how to ' "


mrangel
21 Sept 2017, 21:25

Sorry, I can't advise on how to type odd characters in Windows. That's one of the reasons I switched to using linux full-time a few years ago.


K.V.
21 Sept 2017, 21:44

How, or should it be which, keys do you press for curly quotes. I feel such a fool for even asking such a basic question, but there we are 'FOOL'.

I was wondering this too, but didn't ask for the same reason.

https://practicaltypography.com/straight-and-curly-quotes.html

Using the ALT key:

"“”"

" &#0147; &#0148; "
" “ ” "

# " &#0147; &#0148; "

" “ ” "


Huh...

The last two show up correctly in the preview, but not after I post.


Doctor Agon
21 Sept 2017, 22:01

ok. thanks


jmnevil54
21 Sept 2017, 22:06

K.V.
"“”" works fine. The later parts don't.
I don't know why you want to use those cursed quotation marks anyways...


K.V.
21 Sept 2017, 22:24

jmnevil54,

Yeah, it works in some places, but not others. (I would say that's strange, but it's really par for the course.)

And I don't want to use them. I just wanted to know how to use them. (I'm a knowledge junkie.)


hegemonkhan
21 Sept 2017, 23:24

(filler to get my edited post, updated/posted)


it depends on the computer/keyboard... as to what characters/symbols you got...

some keyboards/computers don't have the non-curly apostrophies (like my own keyboard, lol).

usually though, there is a way to do most characters/symbols, as usually they're built into modern computers, but it's some weird command like using 'hold ALT + combination/sequence of keyboard keys' (see html and/or other ascii:originally_american+some_international and/or unicode:international, command patterns: http://www.asciitable.com or http://unicode.org/charts/ ), as KV showed already, or you have to go into the computer's keyboard controls/options/window/menu to get at the weird and/or international (other countries') keys/symbols, when you got a keyboard that doesn't have them as physical keys to press on it.


for my keyboard (apple laptop), I just have to hold down the 'OPTION/ALT' key, and here's the results of pressing various keys:

normal key: `1234567890-=
shift + key: ~!@#$%^&*()_+
option/alt + key: `¡™£¢∞§¶•ªº–≠

normal key: qwertyuiop[]\
shift + key: QWERTYUIOP{}|
option/alt + key: œ∑´®†¥¨ˆøπ“‘«

normal key: asdfghjkl;'
shift + key: ASDFGHJKL:"
option/alt + key: åß∂ƒ©˙∆˚¬…æ

normal key: zxcvbnm,./
shift + key: ZXCVBNM<>?
option/alt + key: Ω≈ç√∫˜µ≤≥÷