I put a script in the after entering room where the player starts in beginning of game. It is an into of who, what, where and when. I added a button instead of a command link.
<center><button type="button" onclick="ClearTurn">Start Game</button></center>
EDIT: I tried ClearTurn() as well. Also the command I used before was (Done) which worked fine.
the button appears and click but nothing happens. The clear turn is a function(which I thought had to go in the button script) but the function is not called. ClearTurn should clear the screen and ShowRoomDescription.
I have seen a few button threads but the answers were always to put in a command link and the poster was happy with that.
How about a tutorial on buttons? After I get an answer here...Ha
Like a charm, Baby! I'll be putting buttons everywhere now...
I clicked you -- could you feel it? I need to make some yes/no buttons for that.
Make a link look like a button:
<a style="text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
cursor: pointer;"
href = "#top"
onclick = "alert('Hello!');"
title="CLICK ME!!!">CLICK ME</a>
<a style="text-decoration: none;
background-color: green;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
cursor: pointer;"
onclick = "$(this).text('Thank you!!!');"
title="NOW CLICK ME!!!">NOW CLICK ME</a>
<button type="button" onclick="ASLEvent('ShowRoomNew', '')">Start Game</button>
How can I position this button anywhere in game panel. I want to make a Skip Intro button. but it need to be at the bottom of the page. I can't place it in the script because I would have to put it in last and it won" show til the intro has run, (It has a lot of 'run script after so many seconds' in it.)
I have tried using divs but after a day of defeat I've come crawling here.
You want it bottom-center of divOutput?
This creates the button and everything with JS:
var btn = document.createElement("button");
btn.id = "start-button";
btn.type = "button";
document.getElementById('divOutput').appendChild(btn);
$("#start-button").on("click", function(){ASLEvent("ShowRoomNew","");$(this).remove();});
$("#start-button").html("Start Game");
$("#start-button").css({"position":"fixed","bottom":"1%","box-shadow":"1px 1px black","padding":"4px","margin-left":"25%"});
I'd do something like…
<button type="button" onclick="ASLEvent('ShowRoomNew', '')" style="position: fixed; bottom: 5px; right: 10px; z-index: 99;">Start Game</button>
High "z-index" makes it appear in front of other objects; "fixed" means that the 'bottom' and 'right' parameters position it a fixed distance from the edge of the window so you don't have to worry about scrolling.
(actually, I'd do something more like $('<button>', {type: 'button', role: 'button', id: 'skip-intro-button'}).css({position: 'fixed', bottom: 10, right: 10, zIndex: 99}).on("click", function() {ASLEvent('ShowRoomNew', '')}).text('Skip Intro').appendTo("body"); … but that's pretty much the same thing)
(gave it an 'id' so you can delete it after the intro is done)
This is the set up. I have a intoScreen.js added to the JavaScript in Game.
function introScreen(url) {
$("#gameBorder").hide()
$("<div/>", {
id: "introScreen"
}).css({
position: "fixed",
top: 340,
left: 220,
width: "100%",
height: "100%",
overflow: "hidden",
"text-align": "center",
display: "block",
}).appendTo("body")
.html("<img id=\"introScreenImg\" style=\"max-width:17%;max-height:19%;\" src=\"" + url + "\"/>");
$("#introScreenImg").load(function() {
$("#introScreen").fadeIn(2000);
setTimeout(function() {
finishIntroScreen();
}, 8000);
});
}
function introButton(url) {
$('<button>', {type: 'button', role: 'button', id: 'skip-intro-button'}).css({position: 'fixed', bottom: 10, right: 10, zIndex: 99}).on("click", function() {ASLEvent('ShowRoomNew', '')}).text('Skip Intro').appendTo("body");
setTimeout(function() {
finishIntrobutton();
}, 8000);
});
}
function finishIntroScreen() {
$("#gameBorder").show();
$("#introScreen").fadeOut(12000, function() {
$("#introScreen").remove();
});
}
function introButton() {
$("#introButton").fadeOut(12000, function() {
$("#introButton").remove();
});
}
I use this in the Start Script.
JS.introScreen ("https://bobslifeblog.files.wordpress.com/2018/02/0040.gif")
This is stuff I barely understand but managed to get it working.
So where do I put:
$('<button>', {type: 'button', role: 'button', id: 'skip-intro-button'}).css({position: 'fixed', bottom: 10, right: 10, zIndex: 99}).on("click", function() {ASLEvent('ShowRoomNew', '')}).text('Skip Intro').appendTo("body");
and how do I remove it?
I put it in the second line of the JS and it appeared but it had no JS function called ShowRoomNew because I could not write a JS function called ShowRoomNew.
Sayin'
I just realized that the JS script is an attempt at making it work. The one above is not the original.
This is:
function introScreen(url) {
$("#gameBorder").hide()
$("<div/>", {
id: "introScreen"
}).css({
position: "fixed",
top: 340,
left: 220,
width: "100%",
height: "100%",
overflow: "hidden",
"text-align": "center",
display: "block",
}).appendTo("body")
.html("<img id=\"introScreenImg\" style=\"max-width:17%;max-height:19%;\" src=\"" + url + "\"/>");
$("#introScreenImg").load(function() {
$("#introScreen").fadeIn(2000);
setTimeout(function() {
finishIntroScreen();
}, 8000);
});
}
function finishIntroScreen() {
$("#gameBorder").show();
$("#introScreen").fadeOut(12000, function() {
$("#introScreen").remove();
});
}
Tried adding this to the other script in 'roomEnter'.
JS.eval ("$('<button>', {type: 'button', role: 'button', id: 'skip-intro-button'}).css({position: 'fixed', bottom: 10, right: 10, zIndex: 99}).on("click", function() {ASLEvent('ShowRoomNew', '')}).text('Skip Intro').appendTo("body");")
But it errors about the use of 'click'
After entering room script. it allows me to add text and other graphics/images while the JS is running.
ClearScreen
JS.eval ("$('<button>', {type: 'button', role: 'button', id: 'skip-intro-button'}).css({position: 'fixed', bottom: 10, right: 10, zIndex: 99}).on("click", function() {ASLEvent('ShowRoomNew', '')}).text('Skip Intro').appendTo("body");")
play sound ("VanAllen Background Music.wav", false, false)
SetTimeout (5) {
msg ("<center><h1>The Karukian Cave</h1></center>")
}
SetTimeout (7) {
msg ("<center><h4>by</h4></center><br/>")
}
SetTimeout (9) {
msg ("<center><h2>Forgewright</h2></center><br/>")
}
SetTimeout (11) {
msg ("<center>Version {game.version}</center><br/><center>Copyright 2018 (not really, use any part as you see fit). Enjoy</center><br/>")
}
SetTimeout (13) {
msg ("<center>Loading Game")
msg ("<img src=\"https://bobslifeblog.files.wordpress.com/2018/02/loading_icon.gif" + "\" style=\"display: block; margin-left: auto; margin-right: auto; width:80px; \"/>")
}
SetTimeout (20) {
player.parent = room_start_entrance
request (Show, "Command")
request (Show, "Panes")
stop sound
}
No dice
I think you want to have the function that adds the intro screen also create the button; and the function that removes the intro screen also remove the button.
ShowRoomNew in your example is the name of a Quest function. I assumed you'd already written that. ASLEvent allows javascript to send a command back to Quest.
Changing my javascript to be formatted more like yours, it becomes…
function introScreen(url) {
$("#gameBorder").hide()
$("<div/>", {
id: "introScreen"
}).css({
position: "fixed",
top: 340,
left: 220,
width: "100%",
height: "100%",
overflow: "hidden",
"text-align": "center",
display: "block",
}).appendTo("body")
.html("<img id=\"introScreenImg\" style=\"max-width:17%;max-height:19%;\" src=\"" + url + "\"/>");
$("<button/>", {
id: "introButton",
type: "button"
}).css({
position: "fixed",
right: 10,
bottom: 10,
'z-index': 99
}).appendTo("#introScreen")
.text("Skip intro")
.on("click", introFinished);
$("#introScreenImg").load(function() {
$("#introScreen").fadeIn(2000);
setTimeout(finishIntroScreen, 8000);
});
}
function finishIntroScreen() {
$("#gameBorder").show();
$("#introScreen").fadeOut(12000, introFinished);
}
function introFinished() {
$("#gameBorder").show();
$("#introScreen").remove();
ASLEvent('IntroFinished', '');
}
Then you have a function in Quest, IntroFinished, that does whatever it needs to do (like displaying the description of the first room, or anything else like that). If you don't need to do anything, then you can remove the ASLEvent('IntroFinished', ''); line.
Can't test it now, but try:
JS.eval ("$('<button>', {type: 'button', role: 'button', id: 'skip-intro-button'}).css({position: 'fixed', bottom: 10, right: 10, zIndex: 99}).on('click', function() {ASLEvent('ShowRoomNew', '')}).text('Skip Intro').appendTo('body');")
NOTE: I posted this seconds after mrangel's last post. The two do not go together, and his last method looks better.
Oh, just saw your last post. I think you're making this more complex by having Quest timers and Javascript timers running at the same time, to trigger different parts of the intro.
Sorry, ignore what I said before.
Kv. The button appears but nothing happens.
mrangel. The script is working, but only removes the JS scripting- Images and such.
The room enter scripts keep running.
<function name="IntroFinished">
ClearScreen
MoveObject (player, room_start_entrance)
</function>
How would I stop it in this function?
BTW Thank you both for helping!
EDIT: I see, I'll delete the timers. not really necessary. Plus I'm a total hack at this stuff...
Wait. If I added a flag to the room... say-
start_room.end = false
Then added an "if" to each timer...
if (start_room.end= false) {
SetTimeout (5) {
msg ("<center><h1>The Karukian Cave</h1></center>")
}
else if (start_room.end= true) {
ClearScreen
player.parent = new_room
Then I'll figure a way to change the flag. Hack, Hack, Hack
I'll see
A warning: for players playing online, your sets of timers might get out of sync.
In your quest code, try naming the timers. So instead of:
SetTimeout (5) {
msg ("<center><h1>The Karukian Cave</h1></center>")
}
you could put
SetTimeoutID (5, "intro_timer_1") {
msg ("<center><h1>The Karukian Cave</h1></center>")
}
and then something like:
<function name="IntroFinished">
foreach (timer_name, Split("intro_timer_1;intro_timer_2;intro_timer_3")) {
timeout = GetTimer(timer_name)
if (not timeout = null) {
timeout.enabled = false
}
}
ClearScreen
MoveObject (player, room_start_entrance)
</function>
(If you wanted the intro text to appear immediately when you press the skip button, you would replace timeout.enabled = false with timeout.trigger = game.timeelapsed + 1)
That's good stuff, mrangel!
Especially timeout.trigger = game.timeelapsed + 1.
(I didn't know that was an attribute which we could manipulate.)
Hehehe
SetTimeoutID (1, "one") {
msg ("ONE")
}
SetTimeoutID (2, "two") {
msg ("TWO")
}
SetTimeoutID (3, "three") {
msg ("THREE")
}
SetTimeoutID (4, "four") {
msg ("FOUR")
}
SetTimeoutID (5, "five") {
msg ("FIVE")
}
five.trigger = 4
four.trigger = 5
Mrangel, Next level stuff right there. Well for me anyway.
Seems I could call the texts from the same JS that calls the images instead of calling the texts from Quest 'Room Enter'. The JS would feed everything together and since the button click calls the introFinished in Quest to remove the images it could remove the text as well. I could fade the text in and out like the images too unless/until the click happens.
I'll have to put on my big boy britches to do it, but that's my task for the day/week/bucket list...
I sure appreciate all the help folks.
More soliciting to come, I'm sure!
Follow us on Facebook
Follow @TextAdv on Twitter