Change color of map grid labels?

Dcoder

13 Aug 2017, 01:59

I use a black background. The map grid labels are also in black though. So I tried changing their colors to white with these:

Garden.grid_label = {color:White:Garden}
Garden.grid_label = {=color:White:Garden}
Garden.grid_label = {evalcolor:White:Garden}
Garden.grid_label = {eval:color:White:Garden}

Get error messages. Any other ideas welcome.

DarkLizerd

13 Aug 2017, 02:03

Check your second line...

Dcoder

13 Aug 2017, 02:06

Quest doesn't like my second line:

Error running script: Error compiling expression '=color:White:Garden': SyntaxError: Unexpected token "="; expected one of "NOT", "-", <INTEGER>, <REAL>, <STRING_LITERAL>, "True", "False", <HEX_LITERAL>, <CHAR_LITERAL>, "null", <DATETIME>, <TIMESPAN>, "(", <IDENTIFIER>, "if", or "cast"Line: 1, Column: 1

DarkLizerd

13 Aug 2017, 02:12

Well, mine was a good guess, but actually, I'm not sure what you are trying to do...
(I'm rather new with Quest)
Does your first line work?

Dcoder

13 Aug 2017, 02:15

The first line does nothing, doesn't even print out "Garden". No error message though.

I'm trying to change the color of the map grid labels (like "Garden") to another color like white because you can't see them against a black background.

DarkLizerd

13 Aug 2017, 03:00

How did you get the black background?

Dcoder

13 Aug 2017, 08:28

I just changed the background color under the game object --> Display --> Background. The map color becomes the same as the background color. I'm not sure if that is what you're asking...

DarkLizerd

13 Aug 2017, 16:00

Neat tricks...
That is what I was asking for...

DarkLizerd

13 Aug 2017, 16:18

I don't think thee is a way to change that.
sorry.

The Pixie

14 Aug 2017, 07:53

There is probably a HTML class that sets it. It migjt even be called grid_label. If it is you could set the colour like this:

JS.setCss(".grid_label", "color:yellow")

I cannot check but that might point you (or others) in the right direction.

Dcoder

14 Aug 2017, 20:28

I tried the Pixie's code with no success. It looks like there might be a typo "." in front of "grid_label". So I also tried:

JS.setCss("grid_label", "color:yellow")
JS.setCss("grid_label", "color=yellow")
JS.setCss("grid_label", "yellow")

No luck though. Thanks for trying Lizerd and Pix.

Dcoder

14 Aug 2017, 21:04

I just ended up doing a workaround by changing the map background color so that you can read the grid labels:

JS.eval ("$('#gridPanel').css('background-color', 'Gray')")

The Pixie

14 Aug 2017, 21:45

The dot is because i eas guessing it was a class rather than an id. However classes can ne tricky for things that have not be displayed yet. If you can wait s couple of weeks i will have a proper look.

Dcoder

15 Aug 2017, 00:17

Thanks Pix, it's certainly not urgent. Enjoy your time off!

K.V.

15 Aug 2017, 03:48

I'm just guessing here (actually, I think I read this somewhere, but can't find it...), but doesn't the map have something to do with on-the-fly SVG rendering (or something like that)?

There's barely any code in the CSS...

Is this where the magic lies? (only a guess)

gridApi.drawLabel = function(x, y, z, text) {
    activateLayer(z);
    var pointText = new PointText(gridPoint(x, y));
    pointText.justification = "center";
    pointText.fillColor = "black";
    pointText.content = text;
    allPaths.push(pointText);
};

Click here to view ui.html (code)

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="res://local/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="res://local/jquery-ui.min.js"></script>
    <script type="text/javascript" src="res://local/jquery.multi-open-accordion-1.5.3.js"></script>
    <script type="text/javascript" src="res://local/playercore.js"></script>
    <script type="text/javascript" src="res://local/desktopplayer.js"></script>
	<script type="text/javascript" src="res://local/paper.js"></script>
	<script type="text/paperscript" canvas="gridCanvas">
        var scale, gridX, gridY, player,
    playerVector, playerDestination,
    offsetVector, offsetDestination,
    allPaths = [],
    customLayerPaths = [],
    customLayerObjects = {},
    customLayerSvg = {},
    customLayerImages = {},
    layers = [],
    maxLayer = 7,
    currentLayer = 0,
    offset = new Point(0, 0),
    symbols = {},
    newShapePoints = [];

for (var i = -maxLayer; i <= maxLayer; i++) {
    var layer = new Layer();
    layers.push(project.activeLayer);
}

var customLayer = new Layer(),
    customLayerOffset = new Point(0, 0);

customLayer.visible = false;

function activateLayer(index) {
    showCustomLayer(false);
    layers[getLayerIndex(index)].activate();
    layers[getLayerIndex(index)].opacity = 1;
    if (currentLayer != index) {
        layers[getLayerIndex(currentLayer)].opacity = 0.2;
        currentLayer = index;
    }
}

function getLayerIndex(index) {
    if (index < -maxLayer || index > maxLayer) {
        alert("Layer out of bounds. Current layer range: -" + maxLayer + " to " + maxLayer);
    }
    // layers array represents z-indexes from -maxLayer to maxLayer
    return index + maxLayer;
}

activateLayer(currentLayer);

gridApi.setScale = function(newScale) {
    scale = newScale;
    gridX = new Point(scale, 0);
    gridY = new Point(0, scale);
};

gridApi.setZoom = function(zoom) {
    paper.view.zoom = zoom;
};

gridApi.zoomIn = function(amount) {
    paper.view.zoom = paper.view.zoom * (Math.pow(1.1, amount));
};

function onMouseDrag(event) {
    updateOffset(event.delta);
}

function onMouseUp(event) {
    var x = getGridSquareX(event.point);
    var y = getGridSquareY(event.point);
    ASLEvent("JS_GridSquareClick", x + ";" + y);
}

function updateOffset(delta) {
    setOffset(getOffset() + delta);
    var paths;
    if (project.activeLayer == customLayer) {
        paths = customLayerPaths;
    }
    else {
        paths = allPaths;
    }
    for (var i = 0; i < paths.length; i++) {
        paths[i].position += delta;
    }
    if (playerDestination && project.activeLayer != customLayer) {
        playerDestination += delta;
    }
}

function getOffset() {
    if (project.activeLayer == customLayer) {
        return customLayerOffset;
    }
    return offset;
}

function setOffset(value) {
    if (project.activeLayer == customLayer) {
        customLayerOffset = value;
    }
    else {
        offset = value;
    }
}

function onFrame(event) {
    if (playerVector) {
        var distance = player.position - playerDestination;
        if (distance.length > playerVector.length) {
            player.position += playerVector;
        }
        else {
            player.position = playerDestination;
            playerVector = null;
            playerDestination = null;

            var playerPositionAbsolute = player.position - offset;
            offsetDestination = paper.view.center - playerPositionAbsolute;

            offsetVector = (offsetDestination-offset) / 10;
        }
    }
    if (offsetVector) {
        var distance = offset - offsetDestination;
        if (distance.length > offsetVector.length) {
            updateOffset(offsetVector);
        }
        else {
            updateOffset(offsetDestination-offset);
            offsetVector = null;
            offsetDestination = null;
        }
    }
}

gridApi.drawGrid = function(minX, minY, maxX, maxY, border) {

    function gridLine(start, end) {
        var path = new Path();
        path.strokeColor = border;
        path.add(start, end);
        addPathToCurrentLayerList(path);
    }

    // draw the vertical lines
    for (var x = minX; x <= maxX; x++) {
        var start = gridPoint(x, minY);
        var end = gridPoint(x, maxY);
        gridLine(start, end);
    }

    // draw the horizontal lines
    for (var y = minY; y <= maxY; y++) {
        var start = gridPoint(minX, y);
        var end = gridPoint(maxX, y);
        gridLine(start, end);
    }
};

function gridPoint(x, y) {
    return (gridX * x) + (gridY * y) + getOffset();
}

function getGridSquareX(point) {
    return Math.floor(((point - getOffset()) / gridX).x);
}

function getGridSquareY(point) {
    return Math.floor(((point - getOffset()) / gridY).y);
}

function gridPointNudge(x, y, nudgeX, nudgeY) {
    var result = gridPoint(x, y);
    result.x += nudgeX;
    result.y += nudgeY;
    return result;
}

var firstBox = true;

gridApi.drawBox = function(x, y, z, width, height, border, borderWidth, fill, sides) {
    activateLayer(z);
    // if this is the very first room, centre the canvas by updating the offset
    if (firstBox) {
        var centrePoint = gridPoint(x + width / 2, y + height / 2);
        var offsetX = paper.view.center.x - centrePoint.x;
        var offsetY = paper.view.center.y - centrePoint.y;
        updateOffset(new Point(offsetX, offsetY));
        firstBox = false;
    }
    var path = null;
    var points = [gridPoint(x, y), gridPoint(x + width, y), gridPoint(x + width, y + height), gridPoint(x, y + height)];
    // sides is encoded with bits to represent NESW
    var draw = [sides & 8, sides & 4, sides & 2, sides & 1];
    for (var i = 0; i < 4; i++) {
        var next = (i + 1) % 4;
        if (draw[i]) {
            if (path == null) {
                path = new Path();
                allPaths.push(path);
                if (borderWidth > 0) {
                    path.strokeColor = border;
                    path.strokeWidth = borderWidth;
                }
                path.add(points[i]);
            }
            path.add(points[next]);
        } else {
            path = null;
        }
    }
    var fillPath;
    if (sides == 15) {
        fillPath = path;
    } else {
        fillPath = new Path();
        fillPath.add(points[0], points[1], points[2], points[3]);
        allPaths.push(fillPath);
    }
    fillPath.fillColor = fill;
    fillPath.closed = true;
};

gridApi.drawLine = function(x1, y1, x2, y2, border, borderWidth) {
    var path = new Path;
    path.strokeColor = border;
    path.strokeWidth = borderWidth;
    path.add(gridPoint(x1, y1));
    path.add(gridPoint(x2, y2));
    addPathToCurrentLayerList(path);
};

gridApi.drawArrow = function (id, x1, y1, x2, y2, border, borderWidth) {
    clearExistingObject(id);
    
    var linePath = new Path;
    var start = gridPoint(x1, y1);
    var end = gridPoint(x2, y2);
    linePath.strokeColor = border;
    linePath.strokeWidth = borderWidth;
    linePath.add(start);
    linePath.add(end);
    addPathToCurrentLayerList(linePath);

    var vector = end - start;
    var arrowVector = vector.normalize(10);
    var arrowheadPath = new Path([
        end + arrowVector.rotate(150),
        end,
        end + arrowVector.rotate(-150)
    ]);
    arrowheadPath.strokeColor = border;
    arrowheadPath.strokeWidth = borderWidth;
    addPathToCurrentLayerList(arrowheadPath);

    customLayerObjects[id] = [linePath, arrowheadPath];
};

function addPathToCurrentLayerList(path) {
    if (project.activeLayer == customLayer) {
        customLayerPaths.push(path);
    }
    else {
        allPaths.push(path);
    }
}

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);
    }
};

gridApi.drawLabel = function(x, y, z, text) {
    activateLayer(z);
    var pointText = new PointText(gridPoint(x, y));
    pointText.justification = "center";
    pointText.fillColor = "black";
    pointText.content = text;
    allPaths.push(pointText);
};

function showCustomLayer(visible) {
    if (visible != customLayer.visible) {
        customLayer.visible = visible;
        for (var idx = 0; idx < layers.length; idx++) {
            layers[idx].visible = !visible;
        }
        if (visible) {
            customLayer.activate();
        }
        else {
            layers[getLayerIndex(currentLayer)].activate();
        }
    }
}

gridApi.showCustomLayer = function(visible) {
    showCustomLayer(visible);
};

gridApi.clearCustomLayer = function() {
    customLayer.removeChildren();
};

gridApi.clearAllLayers = function () {
    player = null;
    $.each(layers, function(idx, layer) {
        layer.removeChildren();
    });
};

gridApi.setCentre = function(x, y) {
    var centrePoint = gridPoint(x, y);
    var offsetX = paper.view.center.x - centrePoint.x;
    var offsetY = paper.view.center.y - centrePoint.y;
    var curOffset = getOffset();
    updateOffset(new Point(offsetX, offsetY));
};

gridApi.drawCustomLayerSquare = function(id, x, y, width, height, text, fill) {
    var points = [];
    points.push(gridPointNudge(x, y, 1, 1));
    points.push(gridPointNudge(x + width, y, -1, 1));
    points.push(gridPointNudge(x + width, y + height, -1, -1));
    points.push(gridPointNudge(x, y + height, 1, -1));

    var textPoint = gridPoint(x + width / 2, y + height / 2);
    gridApi.drawCustomLayerObject(id, points, text, textPoint, fill, fill);
};

function clearExistingObject(id) {
    var existing = customLayerObjects[id];
    if (existing) {
        for (var idx in existing) {
            var path = existing[idx];
            // TO DO: Should remove path from layer and layerlist array
            path.visible = false;
        }
    }
}

gridApi.drawCustomLayerObject = function (id, points, text, textPoint, border, fill, opacity) {
    clearExistingObject(id);

    var paths = new Array();
    path = new Path();
    path.strokeColor = border;
    $.each(points, function(index, value) {
        path.add(value);
    });
    path.fillColor = fill;
    path.closed = true;
    if (typeof opacity != "undefined") {
        path.opacity = opacity;
    }
    addPathToCurrentLayerList(path);
    paths.push(path);

    if (text) {
        var pointText = new PointText(textPoint);
        pointText.justification = "center";
        pointText.fillColor = "black";
        pointText.content = text;
        if (typeof opacity != "undefined") {
            pointText.opacity = opacity;
        }
        addPathToCurrentLayerList(pointText);
        paths.push(pointText);
    }

    customLayerObjects[id] = paths;
};

gridApi.loadSvg = function (data, id) {
    var svg = paper.project.importSVG(data);
    if (svg) {
        symbols[id] = new Symbol(svg);
    }
};

gridApi.drawCustomLayerSvg = function (id, symbolId, x, y, width, height) {
    if (symbolId in symbols) {
        var existing = customLayerSvg[id];
        var placedSymbol = existing ? existing : symbols[symbolId].place();
        placedSymbol.scale(gridX.x * width / placedSymbol.bounds.width, gridY.y * height / placedSymbol.bounds.height);
        placedSymbol.position = gridPoint(x, y) + placedSymbol.bounds.size / 2;
        if (!existing) addPathToCurrentLayerList(placedSymbol);
        customLayerSvg[id] = placedSymbol;
    } else {
        console.log("No symbol loaded with id '" + symbolId + "'");
    }
};

gridApi.drawCustomLayerImage = function(id, url, x, y, width, height) {
    var existing = customLayerImages[id];
    var raster = existing ? existing : new Raster(url);
    var resizeRaster = function() {
        raster.scale(gridX.x * width / raster.bounds.width, gridY.y * height / raster.bounds.height);
        raster.position = gridPoint(x, y) + raster.bounds.size / 2;
    };
    if (existing) {
        resizeRaster();
    } else {
        raster.onLoad = resizeRaster;
        addPathToCurrentLayerList(raster);
        customLayerImages[id] = raster;
    }    
}

gridApi.addNewShapePoint = function (x, y) {
    newShapePoints.push([x, y]);
};

gridApi.drawShape = function (id, border, fill, opacity) {
    var points = [];
    for (var idx in newShapePoints) {
        var xy = newShapePoints[idx];
        points.push(gridPoint(xy[0], xy[1]));
    }
    gridApi.drawCustomLayerObject(id, points, null, null, border, fill, opacity);
    newShapePoints = [];
};

gridApi.onLoad();

	</script>
    
    <link rel="Stylesheet" type="text/css" href="res://local/jquery-ui.min.css" />
    <link rel="Stylesheet" type="text/css" href="res://local/playercore.css" />
    <link rel="Stylesheet" type="text/css" href="res://local/desktopplayer.css" />
    
    <title></title>
</head>
<body>
    <div id="gameBorder">
    <div id="status" class="ui-widget-header">
        <div id="controlButtons">
            <button type="button" id="cmdExitFullScreen" style="display: none">Exit Full Screen</button>
            <button type="button" id="cmdSave" style="display: none">Save</button>
        </div>
        <div id="location">
        </div>
    </div>
    <div id="gamePanes" style="background:transparent;">
        <div id="gamePanesRunning">
            <h3 id="inventoryLabel"><span class="accordion-header-text">Inventory</span></h3>
            <div id="inventoryAccordion">
                <div id="inventoryWrapper" class="elementListWrapper">
                    <ol id="lstInventory" class="elementList">
                    </ol>
                </div>
                <div class="verbButtons">
                    <button id="cmdInventory1" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory2" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory3" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory4" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory5" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory6" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory7" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory8" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory9" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                </div>
            </div>
            <h3 id="statusVarsLabel"><span class="accordion-header-text">Status</span></h3>
            <div id="statusVarsAccordion">
                <div id="statusVars">
                </div>
            </div>
            <h3 id="placesObjectsLabel"><span class="accordion-header-text">Places and Objects</span></h3>
            <div id="placesObjectsAccordion">
                <div id="placesObjectsWrapper" class="elementListWrapper">
                    <ol id="lstPlacesObjects" class="elementList">
                    </ol>
                </div>
                <div id="placesObjectsButtons" class="verbButtons">
                    <button id="cmdPlacesObjects1" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects2" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects3" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects4" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects5" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects6" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects7" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects8" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects9" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                </div>
            </div>
            <div id="commandPane"      class="ui-helper-reset ui-widget ui-state-active" style="border-radius: 5px;text-align:center;display:none;padding:2px;min-height: 25px;margin-top:10px; border-top:1px solid rgb(121, 183, 231)">
                <h3 id="commandPaneHeading"><span class="accordion-header-text">Commands</span></h3>
            </div>
            <div id="customStatusPane" class="ui-helper-reset ui-widget ui-state-active" style="border-radius: 5px;text-align:center;display:none;padding:2px;min-height: 25px;margin-top:10px; border-top:1px solid rgb(121, 183, 231)">
                <h3><span class="accordion-header-text">Status</span></h3>
            </div>
            <h3 id="compassLabel"><span class="accordion-header-text">Compass</span></h3>
            <div id="compassAccordion">
                <table id="compassTable">
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <button id="cmdCompassNW" class="compassbutton" type="button" title="go northwest"
                                            onclick="compassClick(_compassDirs[0]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassN" class="compassbutton" type="button" title="go north"
                                            onclick="compassClick(_compassDirs[1]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassNE" class="compassbutton" type="button" title="go northeast"
                                            onclick="compassClick(_compassDirs[2]);"></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button id="cmdCompassW" class="compassbutton" type="button" title="go west"
                                            onclick="compassClick(_compassDirs[3]);"></button>
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <button id="cmdCompassE" class="compassbutton" type="button" title="go east"
                                            onclick="compassClick(_compassDirs[4]);"></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button id="cmdCompassSW" class="compassbutton" type="button" title="go southwest"
                                            onclick="compassClick(_compassDirs[5]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassS" class="compassbutton" type="button" title="go south"
                                            onclick="compassClick(_compassDirs[6]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassSE" class="compassbutton" type="button" title="go southeast"
                                            onclick="compassClick(_compassDirs[7]);"></button>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <button id="cmdCompassU" class="compassbutton" type="button" title="go up"
                                            onclick="compassClick(_compassDirs[8]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassIn" class="compassbutton" type="button" title="go in"
                                            onclick="compassClick(_compassDirs[10]);">in</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button id="cmdCompassD" class="compassbutton" type="button" title="go down"
                                            onclick="compassClick(_compassDirs[9]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassOut" class="compassbutton" type="button" title="go out"
                                            onclick="compassClick(_compassDirs[11]);">out</button>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="gamePanesFinished">
            <h2>Game Over</h2>
            <p>This game has finished.</p>
        </div>
    </div>
    <div id="gamePanel"></div>
    <div id="gridPanel">
        <canvas id="gridCanvas" width="700" height="300" keepalive="true">
            <p><b>The graphical map cannot be displayed</b></p>
            <p>Your web browser does not support the graphical map. To see the map, please upgrade to Chrome, Safari, Firefox or Internet Explorer 9.</p>
        </canvas>
    </div>
    <div id="gameContent">
        <div id="gamePanelSpacer"></div>
        <div id="divOutput">
            <div id="outputData" style="display: none" data-divcount="0"></div>
            <h1 id="gameTitle">
                Loading...</h1>
        </div>
        <div id="txtCommandSpacer"></div>
        <div id="txtCommandDiv">
            <span id="txtCommandPrompt"></span>
            <input type="text" x-webkit-speech id="txtCommand" onkeydown="return commandKey(event);" placeholder="Type here..."
                autofocus />
            <a id="endWaitLink" onclick="endWait();" class="cmdlink" style="display: none">Continue...</a>
        </div>
    </div>
</div>
<div id="dialog" title="Menu">
    <p id="dialogCaption">
    </p>
    <select id="dialogOptions" size="3">
    </select>
</div>
<div id="msgbox" title="Question">
    <p id="msgboxCaption">
    </p>
</div>
</body>
</html>

K.V.

15 Aug 2017, 04:02

C:\Program Files (x86)\Quest 5\grid.js

I made a back-up of the original file, then modified one line: pointText.fillColor = "green";

Begins at line 389:

gridApi.drawLabel = function(x, y, z, text) {
    activateLayer(z);
    var pointText = new PointText(gridPoint(x, y));
    pointText.justification = "center";
    pointText.fillColor = "green";
    pointText.content = text;
    allPaths.push(pointText);
};

NOTE: I don't know why I chose to use green rather than yellow in the example...

Dcoder

15 Aug 2017, 04:05

I was just about to ask you where you found the code while you were doing your second post!

Awesome KV! Great detective work! I'm experimenting with it now. You can't change it in-game, so trying to find a grid label color that is just right. Thanks!

K.V.

15 Aug 2017, 04:23

grep -r "gridApi.drawLabel" *

I've got a BASH! shell. Bwahahaha!

But I found it in the HTML Tools before I knew what to search for:

The first two pictures (in the above post) were steps 1 & 2.

Then, I clicked 'sources' and found this:

From there, grep saved the day!

NOTE: I tried using JS.set with all sorts of different things before altering the file in the program's directory, but to no avail.

Dcoder

15 Aug 2017, 05:02

I'm learning a lot from you, KV, as well as Pix and everyone else. Thanks again!

K.V.

15 Aug 2017, 06:46

No way!

~~It is I who is learning from you.~~

(Wait, is that 'whom'? Let's see... I think that would mean I'd have to say, 'it is me whom is...' ...nah... It is I who is learning from the Dcoder whom posed the inquiry. (Wait, is that 'who'? Let's see... yep. 'The Dcoder, from whom the inquiry originated'...))

It is I who is learning from you, the Dcoder from whom the inquiry originated!

There has to be another clue...

How is this checking to see if we have set up a custom border color?

Therein, I believe, lies the key to being able to set this within the game.

Dcoder

15 Aug 2017, 07:00

Haha! You just keep running with it!

The Pixie

30 Aug 2017, 10:05

I do not think that will work, I am afraid. The grid.js file will not be included when you publish your game, so changes too it will not be present when others play it. It will need a change in Quest itself; it will be pretty trivial but not sure when the next update will be.