Hi,
I recently converted to Quest 5.8 and what I thought worked previously has decided it doesn't like what I've scripted for the game start script, when I change to Code View on the Desktop editor I get red.
https://imgur.com/LsLIXza
I basically use HTML spans to display the user's chosen alias on the display panel on the right and if they change it then it gets reflected there immediately due to the JS.
Any ideas what I'm doing wrong with this code block?
player.changedalias => {
JS.eval ("$('#playeralias-span').html('" + player.alias + "');")
}
Edit: It shows this when I try to run the game:
Failed to load game.
The following errors occurred:
Error: Error adding script attribute 'start' to element 'game': Missing quote character in player.changedalias => {
JS.eval ("$('#playeralias-span').html('" + player.alias + "');")
}
That works fine for me, pasted in exactly as you entered it.
Have you copied and pasted the code directly? The only thing I can think of that might be causing an error is if you've got a typo somewhere, maybe got the ' and " the wrong way around before or after the alias, or there's a smart quote crept in somewhere.
So apparently doing this doesn't work
player.changedStatus => {
JS.eval ("$('#status-span').html('" + player.Status + "%"');")
}
But this does:
player.changedStatus => {
JS.eval ("$('#status-span').html('" + player.Status + "%" + "');")
}
So it appears to be problem solved.
Your first one has an extra " after the % sign.
JS.eval ("$('#status-span').html('" + player.Status + "%');")
would be the usual way to write this.
What about what's wrong with this?
JS.setCustomStatus (".button { color: blue; border: 1px solid red; text-align:center; width:\"100%\"}"
It just shows as
.button { color: blue; border: 1px solid red; text-align:center; width:"100%"}
and not as an actual button.
JS.setCustomStatus takes a parameter which is the text you want to display.
If you want an actual button, you probably want something like:
JS.setCustomStatus ("<span class=\"button\" style=\"color: blue; border: 1px solid red; text-align:center; width:100%\">Label goes here</span>")
Actually it was just meant to be a button class used by multiple buttons of the same type listed in a table structure below the definition.
s = s + "<span class=\"button\" style=\"color: blue; border: 1px solid red; text-align:center; width:100%\"></span>"
s = s + "<table style=\"border-collapse: separate;\" width=\"100%\">"
s = s + "<tr><td style=\"text-align:center; text-decoration: underline;\" width=\"100%\"><p>Attacks</p></td></tr>"
s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" style=\";cursor:pointer;\" title=\"Attack\">Attack</a></td></tr>"
s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Defend');\" style=\";cursor:pointer;\" title=\"Defend\">Defend</a></td></tr>"
s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Item');\" style=\";cursor:pointer;\" title=\"Item\">Item</a></td></tr>"
JS.setCustomStatus(s)
All this shows me is a single red cursor above the actual table where the buttons are meant to appear.
OK, in that case it would be:
s = "<style>.button { color: blue; border: 1px solid red; text-align:center; width:100%}</style>"
s = s + "<table style=\"border-collapse: separate;\" width=\"100%\">"
s = s + "<tr><td style=\"text-align:center; text-decoration: underline;\" width=\"100%\"><p>Attacks</p></td></tr>"
s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" style=\";cursor:pointer;\" title=\"Attack\">Attack</a></td></tr>"
s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Defend');\" style=\";cursor:pointer;\" title=\"Defend\">Defend</a></td></tr>"
s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Item');\" style=\";cursor:pointer;\" title=\"Item\">Item</a></td></tr>"
s = s + "</table>"
JS.setCustomStatus(s)
So that works to a point but I have no control over the text colour at all, it just stays the default Quest panel text colour!
https://imgur.com/a/DTyeLFd
s ="<style>.button {background-color: #e7e7e7; color: black; border: 1px solid red; text-align:center; width:100%}</style>"
I'm also restricted to clicking on the word in the button itself for the onclick event to work, is there a way to change that to click on anywhere in the button?
I would have thought it makes more sense to make the <a> a button, rather than the <td>. But there's a few different ways you could do it.
I'm not much of a layout guy, but these are the first few versions I'd try:
s = "<style>.button { color: blue; border: 1px solid red; text-align:center; width:100%; cursor:pointer}</style>"
s = s + "<table style=\"border-collapse: separate;\" width=\"100%\">"
s = s + "<tr><td style=\"text-align:center; text-decoration: underline;\" width=\"100%\"><p>Attacks</p></td></tr>"
s = s + "<tr><td><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" class=\"button\" title=\"Attack\">Attack</a></td></tr>"
s = s + "<tr><td><a onclick=\"ASLEvent('StatusLinkAttacks', 'Defend');\" class=\"button\" title=\"Defend\">Defend</a></td></tr>"
s = s + "<tr><td><a onclick=\"ASLEvent('StatusLinkAttacks', 'Item');\" class=\"button\" title=\"Item\">Item</a></td></tr>"
s = s + "</table>"
JS.setCustomStatus(s)
or
s = "<style>.button { color: blue; border: 1px solid red; text-align:center; width:100%}</style>"
s = s + "<table style=\"border-collapse: separate;\" width=\"100%\">"
s = s + "<tr><td style=\"text-align:center; text-decoration: underline;\" width=\"100%\"><p>Attacks</p></td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" style=\";cursor:pointer;\"><a title=\"Attack\">Attack</a></td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Defend');\" style=\";cursor:pointer;\"><a title=\"Defend\">Defend</a></td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Item');\" style=\";cursor:pointer;\"><a title=\"Item\">Item</a></td></tr>"
s = s + "</table>"
or even:
s = "<style>.button {display: block; color: blue; border: 1px solid red; text-align:center; width:100%; cursor:pointer}</style>"
s = s + "<p style=\"text-align:center; text-decoration: underline;\" width=\"100%\">Attacks</p>"
s = s + "<a class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" title=\"Attack\">Attack</a>"
s = s + "<a class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Defend');\" title=\"Defend\">Defend</a>"
s = s + "<a class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Item');\" title=\"Item\">Item</a>"
JS.setCustomStatus(s)
So option 2 fixed the issue with the click not being over the whole button but the text colour still eludes me.
https://imgur.com/a/UEPErJ2
I'm not sure where that's coming from. It's hard to debug something like this without being able to look at the game in the browser.
I'm not sure how to upload a game to the site yet, but here's a basic example game with the problem.
<!--Saved by Quest 5.8.6836.13983-->
<asl version="580">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="RPG Battle Engine Test">
<gameid>9606deb8-fcbe-4076-bbf4-de25c7066f4b</gameid>
<version>1.0</version>
<firstpublished>2019</firstpublished>
<customstatuspane />
<feature_advancedscripts />
<statusandcompassattop type="boolean">false</statusandcompassattop>
<commandpane type="boolean">false</commandpane>
<roomenter type="script"><![CDATA[
// Attacks
s = "<style>.button {background-color: red; color: white; padding: 10px 32px; border: 1px solid black; text-align: center; font-size: 14px; width:100%}</style>"
s = s + "<table style=\"border-collapse: separate;\" width=\"100%\">"
s = s + "<tr><td style=\"text-align:center; text-decoration: underline;\" width=\"100%\"><p>Attacks</p></td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" style=\";cursor:pointer;\"><a title=\"Attack\">Attack</a></td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Defend');\" style=\";cursor:pointer;\"><a title=\"Defend\">Defend</a></td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Item');\" style=\";cursor:pointer;\"><a title=\"Item\">Item</a></td></tr>"
s = s + "</table>"
JS.setCustomStatus (s)
]]>
</roomenter>
</game>
<object name="room">
<inherit name="editor_room" />
<isroom />
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
</object>
<function name="StatusLinkAttacks" parameters="AttackName"><![CDATA[
AttackTheEnemy(player, AttackName)
]]>
</function>
<function name="AttackTheEnemy" parameters="player, attack" type="boolean">
<![CDATA[
ClearScreen
switch (attack) {
case ("Attack") {
msg ("The Player attacks")
}
case ("Defend") {
msg ("The Player defends")
}
case ("Item") {
msg ("The Player uses an item")
}
}
]]>
</function>
</asl>
OK; that orange colour is being set by a rule that targets .ui-state-active a (any <a> element inside an active pane).
So to override it you have a few options (I think any of these should work):
Remove the <a> (which isn't really needed)
So each button looks like:
s = s + "s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" style=\";cursor:pointer;\" title=\"Attack\">Attack</td></tr>"
Apply your class to the <a> element directly, overriding the less-specific rule
So each button looks like:
s = s + "s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" style=\";cursor:pointer;\"><a class=\"button\" title=\"Attack\">Attack</a></td></tr>"
Make your style rule apply to the <a> as well as the table cell
by modifying the <style> line
s = "<style>.button {background-color: red; padding: 10px 32px; border: 1px solid black; text-align: center; font-size: 14px; width:100%} .button a { color:white }</style>"
Manually set the color on the <a>
So each button looks like:
s = s + "s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" style=\";cursor:pointer;\"><a style=\"color: white\" title=\"Attack\">Attack</a></td></tr>"
Okay so I applied those 4 suggestions to 4 buttons and here is the result
https://imgur.com/a/aEkZYgn
So in terms of what I'd like to achieve both 1) and 4) did what I'd hoped and produced a solid red button with white text.
Thanks for your help once again!
Here's the test game once again with the different button setups.
<!--Saved by Quest 5.8.6836.13983-->
<asl version="580">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="RPG Battle Engine Test">
<gameid>9606deb8-fcbe-4076-bbf4-de25c7066f4b</gameid>
<version>1.0</version>
<firstpublished>2019</firstpublished>
<customstatuspane />
<feature_advancedscripts />
<statusandcompassattop type="boolean">false</statusandcompassattop>
<commandpane type="boolean">false</commandpane>
<roomenter type="script"><![CDATA[
// Attacks
s = "<style>.button {background-color: red; color: white; padding: 10px 32px; border: 1px solid black; text-align: center; font-size: 14px; width:100%}</style>"
s = s + "<style>.button2 {background-color: red; padding: 10px 32px; border: 1px solid black; text-align: center; font-size: 14px; width:100%} .button2 a { color:white }</style>"
s = s + "<table style=\"border-collapse: separate;\" width=\"100%\">"
s = s + "<tr><td style=\"text-align:center; text-decoration: underline;\" width=\"100%\"><p>Attacks</p></td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Attack');\" style=\";cursor:pointer;\" title=\"Attack\">Attack</td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Defend');\" style=\";cursor:pointer;\"><a class=\"button\" title=\"Defend\">Defend</a></td></tr>"
s = s + "<tr><td class=\"button2\" onclick=\"ASLEvent('StatusLinkAttacks', 'Item');\" style=\";cursor:pointer;\" title=\"Item\">Item</td></tr>"
s = s + "<tr><td class=\"button\" onclick=\"ASLEvent('StatusLinkAttacks', 'Flee');\" style=\";cursor:pointer;\"><a style=\"color: white\" title=\"Flee\">Flee</a></td></tr>"
s = s + "</table>"
JS.setCustomStatus (s)
]]></roomenter>
<start type="script">
</start>
</game>
<object name="room">
<inherit name="editor_room" />
<isroom />
<enter type="script"/>
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
</object>
<function name="StatusLinkAttacks" parameters="AttackName">
AttackTheEnemy (player, AttackName)
</function>
<function name="AttackTheEnemy" parameters="player, attack" type="boolean">
ClearScreen
switch (attack) {
case ("Attack") {
msg ("The Player attacks")
}
case ("Defend") {
msg ("The Player defends")
}
case ("Item") {
msg ("The Player uses an item")
}
case ("Flee") {
msg ("You fled the battle")
}
}
</function>
</asl>
Follow us on Facebook
Follow @TextAdv on Twitter