Dynamic Cursor [Solved]
StallKross
31 Mar 2018, 20:25So, I'm totally new to all this and at the moment I'm playing around with the program trying out random stuff.
Something I've tried to do was to change the command cursor during the game depending on the situation.
I wanted it sometimes to be blank (when I use a "wait for a key press" script, for example) or have a string like "What do you do?" or "What do you say?".
I've tried to make it work by using the "set an object's attribute" script to change the commandcursor attribute on the game object, but since the object list for that script on the GUI editor doesn't include the game object I opened the code view and put it like that:
set (game, "commandcursor", What do you do?)
But it gives me an error for unexpected character.
I probably did everything wrong, but how can I make it work?

K.V.
01 Apr 2018, 03:05To change 'Continue...' to 'Blah', for example, do this:
JS.eval("$('#endWaitLink.cmdlink').html('Blah');")

Dcoder
01 Apr 2018, 03:37@StallKross -
It sounds like what you're looking for is under the game tab Interface
, in the section Command bar
.
If you want to get fancy, check out this link (scroll to "Command bar"):
http://docs.textadventures.co.uk/quest/ui-style.html
mrangel
01 Apr 2018, 09:39The line in your first post is just missing quotes:
set (game, "commandcursor", "What do you do?")
StallKross
01 Apr 2018, 11:06@K.V. not really what I was looking for, but it will help with other things I wanted to do. (:
@Dcoder I already know how to change the command cursor and command bar on the interface tab, what I wanted was to make it change during the game, so while the player change rooms or interact with different objects it would show different messages.
It would look like this:
When you get in the room: https://i.imgur.com/ceEMw8f.jpg
When you interact with a caracter: https://i.imgur.com/sXD1uHA.jpg
@mrangel adding the quotes I don't get the error, but the code still doesn't do what I wanted, maybe the problem is the game
object, I think the script isn't reconizing it as a valid object to change it's attribute.

Dcoder
01 Apr 2018, 11:50To change in-game, try:
request (SetInterfaceString, "TypeHereLabel=whatever you want to say")
StallKross
01 Apr 2018, 12:05@Dcoder It works, though it's not exactly the same as changing the commandcursor
attribute and the font color doesn't match the rest of the text: https://i.imgur.com/njrUrDn.jpg
I'll settle with it for now, but if anyone has another idea for a solution I'll be eager to hear.
Thanks a lot Dcoder and everyone else, I'm very grateful for you to try and help me solve that.

Dcoder
01 Apr 2018, 13:37I tried playing around with this (scroll down to "Awkward Attributes (The Command Bar)"):
http://docs.textadventures.co.uk/quest/ui-javascript2.html
Tried to change the text and color, but couldn't get it to work. The command bar seems to be particularly tamper-resistant : (
mrangel
01 Apr 2018, 13:50Ah ... the prompt is sent to the browser at the start, and then not changed.
So you want:
JS.eval("$('#txtCommandPrompt').text('What do you do? ');")
or similar.

Dcoder
01 Apr 2018, 14:08Only thing you need is a no-line-break so that the cursor doesn't appear on the next line.
StallKross
01 Apr 2018, 14:09@mrangel I was almost there, I was reading an old post by @K.V. and using it as reference I came up with this:
game.commandcursor = "Test"
JS.eval ("$('#txtCommandPrompt').html('" + game.commandcursor + "')")
It had the same result, though your code is simpler.
The only problem is that it only work with a limited width for the text, if the word you put on text( )
or in my case game.commandcursor = ""
is too big or if you put more than one word the line breaks and the keyboard input goes under the text you set for the cursor.

K.V.
01 Apr 2018, 15:00Oh, I see. I thought you wanted to changed the 'Continue' link.
JS.setInterfaceString("TypeHereLabel", "What would you like to do?")
I usually use a string list attribute on the game and a turn script to display random messages in the command prompt.
Each item in the string list is a command prompt message:
game.cmdprompts = Split("What would you like to do?:Type here...;This game is dumb!;Enter a command...")
Turn script:
s = PickOneString(game.cmdprompts)
JS.setInterfaceString("TypeHereLabel", s)
This game has that going on:
http://textadventures.co.uk/games/view/8yjd4mgqheeans5_dw_bpq/easter-eggs
I think I figured out how to change the color before, but I can't find it now. Be right back!

K.V.
01 Apr 2018, 15:22setCommandBarStyle()
is the Javascript function that runs every turn.
JS.setCommandBarStyle("font-family: Georgia, serif; color: red !important; font-size: 12pt; width: 655px; background: yellow;outline: 1px solid blue")
That code changes everything EXCEPT the font color.
It has to be set on a turn script, unless you get tricky and alter the script for setCommandBarStyle()
.

K.V.
01 Apr 2018, 15:41Ha!
To change the placeholder text's color:
JS.eval ("$('#txtCommand').addClass('txt-command');")
msg ("<style>.txt-command::-moz-placeholder{ color:white;}.txt-command:-ms-input-placeholder{ color:white;}.txt-command::-webkit-input-placeholder{ color:white;}</style>")

K.V.
01 Apr 2018, 15:45Entire example:
// Version 2.1 (added a note)
JS.setInterfaceString ("TypeHereLabel", "What would you like to do?")
JS.eval ("$('#txtCommand').addClass('txt-command');")
msg ("<style>.txt-command::-moz-placeholder{ color:white;}.txt-command:-ms-input-placeholder{ color:white;}.txt-command::-webkit-input-placeholder{ color:white;}</style>")
JS.eval("$('input#txtCommand').css({'color':'white','background':'black','outline':'1px solid blue'});")
// This last line makes the settings sticky by removing the script from setCommandBarStyle(), negating the need of a turn script.
JS.eval("var setCommandBarStyleBak = setCommandBarStyle;setCommandBarStyle=function(){};")
You can change it back to default by doing:
JS.eval("setCommandBarStyle = setCommandBarStyleBak;")
mrangel
01 Apr 2018, 18:34(a little off topic, following on more from KV's comments than the original question)
EDIT: Don't need to mess around with the command bar's width, because you're not using .attr() to set style information.
@KV
I'd comment that could be a little inefficient if you wanted to change it more than once, as you'd be adding quite a lot of <style>
blocks.
Here's some JS that comes to mind:
addStyleRule = function (id, rules) {
var element = $("#style"+id);
if (!element.length) {
element = $("<style/>", {id: "style"+id}).appendTo("head");
}
element.text(rules);
};
setCommandBarStyle = function (style) {
addStyleRule ("commandBarDefault", "#txtCommand {"+style+"}");
};
setCommandBarStyle("");
This still outputs a <style>
block, but puts it at the end of the <head>
element rather than in the middle of the output text; and also gives it an ID (something like "commandbarcolor" would be good) so that if you change the command bar to blue one turn and then red the next, it's not creating multiple style elements that the browser has to iterate over to find the latest every time it redraws the element.
I modified the setCommandBarStyle function to use addStyleRule, and then called it immediately, forcing the style element to be created.
You should then be able to do something like JS.addStyleRule("CommandBarOverride", "#txtCommand { color: red}")
, which will override the ones set by setCommandBarStyle because the element is later in the document; but you can go straight back to the default by calling JS.addStyleRule("CommandBarOverride", "")
. (It might be a little weird to wrap your head around; but using these functions, the priority of conflicting styles will be determined by the order in which the ids are first used)