This is extremely minor, but I'm curious to know if there is a way to change the yellow circle player icon on the map to, say, a white square with a black border.

Changing the colours is easy enough. If you open the core function Grid_DrawPlayer you will see that it looks something like this:

  <function name="Grid_DrawPlayerInRoom" parameters="room">
    if (room.grid_render) {
      Grid_DrawRoom (room, false, game.pov)

      player_x = Grid_GetGridCoordinateForPlayer(game.pov, room, "x") + room.grid_width/2.0
      player_y = Grid_GetGridCoordinateForPlayer(game.pov, room, "y") + room.grid_length/2.0
      player_z = Grid_GetGridCoordinateForPlayer(game.pov, room, "z")

      // Grid_DrawPlayer(x, y, z, radius, border, borderWidth, fill)
      JS.Grid_DrawPlayer(player_x, player_y, player_z, 5, "black", 2, "yellow")
    }
  </function>

If you're on the desktop editor, you can just change the highlighted line and get a different colour dot.

Changing the shape will require some javascript editing.

The underlying function is gridApi.drawPlayer, which looks like this:

gridApi.drawPlayer = function(x, y, z, radius, border, borderWidth, fill) {
    activateLayer(z);
    if (!player) {
        player = new Path.Circle(gridPoint(x, y), radius);
        player.strokeColor = border;
        player.strokeWidth = borderWidth;
        player.fillColor = fill;
        player.fillColor = fill;
        allPaths.push(player);

        var playerPositionAbsolute = player.position - offset;
        var offsetDestinationX = paper.view.center.x - playerPositionAbsolute.x;
        var offsetDestinationY = paper.view.center.y - playerPositionAbsolute.y;

        offsetDestination = new Point(offsetDestinationX, offsetDestinationY);
        offsetVector = (offsetDestination - offset);
    } else {
        playerDestination = gridPoint(x, y);
        playerVector = (playerDestination - player.position) / 10;
        // move player to the end of the activeLayer so it gets drawn on top
        project.activeLayer.addChild(player);
    }
};

That looks like it would be simple to modify; but functions such as activateLayer are local and only accessible from within that frame.

For example, if you changed that code then instead of activateLayer(z); you would have to do paper.project.layers[7+z].activate();. It's more complex than just editing the existing function. And you don't have access to the context variables allPaths or player.

So… you can't easily alter the function drawPlayer, because as well as actually drawing the player (which you could do using the methods exposed by Paper itself), you will need to change the variables playerVector and playerDestination, which aren't exposed as far as I can tell.

The best guess I can come up with now is to call the original function, and then render your own dot on top of it. But the original dot would animate with the grid, while yours wouldn't. It seems crazy that the grip API doesn't expose these values; but a lot of the code here seems to have been written specifically to stop players messing around with it.

Thanks! I was able to change the color. I don't mind not being able to easily change the shape, I'm just surprised there's no simple way to do it.

The reason I asked this was because I'm trying to make an adventure with the look of a retro text adventure, but with the functionalities of a modern quest game (game panes, compass, etc.). I think it's looking pretty good so far:

The only things bothering me about it at this point are the compass and the white arrow bars next to the panes to collapse them (I don't know what they are called).

So, follow-up questions:

1. Is there a way to customize the look of the compass? I like having the arrows in the boxes like in the classic color scheme for panes (I had to change it to Midnight so the words would be visible against the black background, and when I used text = "color:white;font-family:'Lucida Console', Monaco, monospace" in the interface script, it only changed the titles) If there is a way to put images into the compass direction squares, I can make my own arrows as images and put them in there.

2. Is there a way to customize the look of, or completely get rid of the white arrow collapsing bars next to the panes? If I remember correctly they are not even there if you used the web editor, but I'm using the desktop editor.

Thanks
Remember - It's okay if I can't as this really doesn't matter all that much, and I'm pretty satisfied with how it looks as it is.

Is there a way to customize the look of the compass?

There are a bunch of CSS classes you can apply style rules to.

• .compassbutton - all buttons
• #compassTable .ui-button and #compassTable .ui-button-disabled (used to set the colours of active and inactive directions)
• .ui-icon-arrowthick-1-nw - the class which applies the icon to the northwest button (similar names for all the others). Up and down are .ui-icon-triangle-1-n and .ui-icon-triangle-1-s

To change a button to a different icon class, you could use:

JS.eval("$('#cmdCompassNW').button('option', 'icon', 'classname');")

Where 'classname' is the name of an icon class from this list, or a class of your own that you want to use to style the button.

Is there a way to customize the look of, or completely get rid of the white arrow collapsing bars next to the panes?

That's down to the .elementList CSS class; which by default has the style overflow-y: scroll applied. You could set overflow-y to auto (display a scroll bar only if needed).

You can also use CSS to change the colour of the scroll bar:

In Chromium and related browsers (including Quest desktop player)

You can set the colour, size, etc of the scroll bar using the classes:

• .elementList::-webkit-scrollbar - the scrollbar itself
• .elementList::-webkit-scrollbar-track - the main part of the scroll bar
• .elementList::-webkit-scrollbar-button - the arrows at the top and bottom
• .elementList::-webkit-scrollbar-thumb - the bit you drag up and down
• .elementList::-webkit-scrollbar-track-piece - the space above and below the thumb

In IE, recent versions of Firefox, and latest Chrome:
You can apply the scrollbar-width and scrollbar-color properties to .elementList. Note that scrollbar-color takes two colours: first the thumb colour, then the track colour. For example:

.elementList {
  scrollbar-color: darkgreen black;
}

Thanks! You're compass explanation worked for me, but I do not fully understand your scrollbar explanation.

That's down to the .elementList CSS class; which by default has the style overflow-y: scroll applied. You could set overflow-y to auto (display a scroll bar only if needed).

I'm sorry, how do I access the .elementList CSS class so I can edit it? I have no experience with CSS, so I will need you (or anybody) to walk me through how to do this.

There are two ways to apply CSS fules in Quest.

The simple one only works with elements that are already on the page. For example:

JS.setCss (".elementList", "overflow-y: auto")

That works in this case, but there are some cases where it won't.

The other is slightly more complex, but also works for visual elements that might be created and destroyed:

JS.eval("getCSSRule('.elementList').style['overflow-y'] = 'auto';")

If you're using either of the JS methods, you will probably need to put them in your UI Initialisation script (on the "Advanced Scripts" tab), so that they will run again when loading a saved game.

There might be easier ways to do this if you're on the desktop editor; you'd have to ask someone who uses it.

Thanks, that didn't do anything though. I'm not sure we are talking about the same thing. The thing I'm talking about is the white bar with the arrows at the top and bottom that shows up next to the Inventory an Places and Objects pane when there are objects in them. When you click on the arrows it collapses the panes, you can see it in the image I posted. Is this the same thing as the scrollbar you are referring to? The bar I'm talking about doesn't even show up if you use the web editor (at least not automatically)

Sorry, I thought you meant the scroll bars; they caught my attention as the only light elements in that screenshot.

The arrows to collapse the panes?
I don't actually see them in your screenshot, but to remove them you would do JS.eval("$('.ui-accordion-header .ui-icon').remove();") or JS.setCss(".ui-accordion-header .ui-icon", "visibility: hidden")

Thanks! That worked. Sorry to bother you with even more questions but...

1.) Is there a way to change the arrows on the compass to make them white? (they're currently light blue)

2.) The arrows seem kind of misaligned. I know that it's always like that, but is there any way to fix it?

3.) Can you change the font of the objects under the panes. I used text = "color:white;font-family:'Lucida Console', Monaco, monospace" in the interface script but, as you can see in the screenshot, that only changed the titles.

That should be all my questions. Thank You for all your help thus far!

For the alignment, I'd have to play around with it.

Changing the font, you probably want:

JS.eval("getCSSRule('.elementList li').style.fontFamily = '\'Lucida Console\', Monaco, monospace';")

If not, I'll poke it in the morning.

I added your code to my Interface Script, but it didn't seem to do anything.

Thanks again for all the help, I hope I'm not too annoying to work with. Never feel that you have to stay up late to help me because we are in different time zones, I can always wait.