Ask a Question

A lot of questions

0 votes
by (880 points)
edited by

I need help, I am trying to use buttons to connect my passages. I copy pasted from the  http://www.motoslave.net/sugarcube/2/docs/#macros-macro-button

<<button linkText [passageName]>> … <</button>>

I want the name of the button to be "Next" and it links to the passage [[It Begins]]

kinda like this https://www.w3schools.com/howto/howto_css_next_prev.asp

or like this https://www.w3schools.com/howto/howto_css_alert_buttons.asp

Nothing I do is working, i cant deck out the buttons.

Is there any tutorials, i have found tutorials on twine with sugarcube but they don't really help me.

Also how would i do button spacing? like <button>     <button>      <button>

How do I create a map that doesnt use the

# # # # # # # # # # #
# P . . # . . . . . #
# # # . # # # # # . #
# . # . . . . . # . #
# . # # # # # . # . #
# . . . . . . . # . #
# # # # # # # . # . #
# . # . . . . . . . #
# . # . # # # . # # #
# . . . # . . . . E #
# # # # # # # # # # #
 but is instead actual Squares with lines that connect the rooms and shades where the players location is?

.....I need a lot of help :(

 

1 Answer

0 votes
by (159k points)
selected by
 
Best answer

I want the name of the button to be "Next" and it links to the passage [[It Begins]] 

The following TwineScript shows two of the ways you can use the <<button>> macro to achieve what you want.

<<button "Next" "It Begins">> ... <</button>>

<<button [[Next|It Begins]]>> ... <</button>>

Also how would i do button spacing?

There are a number of methods you could use to achieve the desired effect, like using a CSS margin on each button to create the gap, but the simplest method is to add one or more non-break-space characters between the buttons.

<<button "Option 1">> ... <</button>>&nbsp;&nbsp;<<button "Option 2">> ... <</button>>

 

by (880 points)
Thank you but im still having problems customizing the button. Im trying to do this

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
    background-color: #ddd;
    border: none;
    color: black;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
}

.button:hover {
    background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Pill Buttons</h2>

<button class="button">Pill Button 1</button>
<button class="button">Pill Button 2</button>

</body>
</html>

 

also any help with the map question?
by (159k points)

If you place the following within a passage and then Play it.

<<button "Pill Button 1" "Target Passage">> ... <</button>>\
<<button "Pill Button 2" "Target Passage">> ... <</button>>

...you can then use the Web Developer Tools built into your web-browser to Inspect the HTML generated for the two buttons.

<button data-passage="Target Passage" class="link-internal macro-button" type="button" tabindex="0">Pill Button 1</button>
<button data-passage="Target Passage" class="link-internal macro-button" type="button" tabindex="0">Pill Button 2</button>

... you will see that the <<button>> macro assigns a macro-button CSS class to each HTML button it creates.

If you target the macro-button class instead of of the button class should end up with the result you want, as shown by this slightly modified version of your previous example which I have added a left margin to.

.macro-button {
	background-color: #ddd;
	color: black;
	border: none;
	border-radius: 16px;
	padding: 10px 20px;
	text-align: center;
	margin-right: 1em;
}
.macro-button:hover {
    background-color: #f1f1f1;
}

... and you can use CSS like the following to remove that left margin from the last macro-button on the page.

.macro-button:last-child {
	margin-right: 0;
}

 

by (880 points)
edited by 
<<button "Option 1">> ... <</button>>&nbsp;&nbsp;<<button "Option 2">> ... <</button>>
<<button Human [Human]>> ... <</button>> ... <<button Cannid [Cannid]>> ... <</button>> ... <<button Feelid [Feelid]>> ... <</button>>
<<button Raccan [Raccan]>> ... <</button>> ... <<button Bosian [Bosian]>> ... <</button>> ... <<button Cervinian [Cervinian]>>...<</button>>

the buttons will show the  ... next to them. And why are they splitting into two lines, 3 buttons on top line and 3 on bottom, they should  all fit on the same line. Maybe margins will get them to fit or would position work better?

I know i need a world map, possibly like this and it has an icon for the player that moves, im not sure if its on a hex map:http://www.micabytes.com/wiki/pirates/index.php/Main_Game_Interface

but im debating on either having the town also be mapped where youll be able to click on where to go ex: Steve Jackson's SORCERY! games.

or its just a layout map of squares connected with a thin line that use descriptions to "flesh out the squares. I cant paste a picture but it would be like going in PAINT on your computer, selecting the rectangle shape, then making two squares out of the rectangle shape, then filling those squares with a dark color(lets say a dark violet) then connect the two squares together with a Line shape with the same color. Then when a player moves into a square it will be indicated by the room turning into a lighter color(lighter violet) and when they leave that room (room 1)for another room(room 2), room 1 turns back to the darker violet color and room 2 goes to a lighter violet.. Each room will have a short blurb to say what it looks like like a cell or a bedroom, or a cave.

or i just make buttons that pretty much do what twine does and make passages for places the player can go to and leave from.

Edit the button is broken, for some reason it doesnt become a button if a lot of text is above it. It links with another passage but for some reason its not linking nor does it show up as a button. Outside of debug mode its blank space, and in debug mode its <<button>></button>> and thats it. It should work the same if i past in int another passage,its the same code with a next or continue name but it should always link to the passage i send it.


	<<button "Continue" "it beginstwo">> ... <</button>>\

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.macro-button {
	background-color: #ddd;
	color: black;
	border: none;
	border-radius: 7px;
	padding: 10px 20px;
	text-align: center;
	margin-right: 1em;
 	position: fixed;
}
.macro-button:hover {
    background-color: #f1f1f1;
}
.button:hover {
    background-color: #f1f1f1;
}
</style>
</head>

 

I think i broke twine, its not even picking up sentences, and wont let me press tab. Is the engine ok? did i break the 4th wall in twine and now its going crazy?Can it not handle what im doing?Can twine handle multiple instances of HTML/CSS?

Thank you greyelf for answering my other questions, i'm sorry about giving you more questions.

by (880 points)

Its been fixed but now i cant get the button to work again, im using what was posted. here is the code from the story stylesheet.


<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.macro-button {
    background-color: royal_blue; 
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 8px;
}
.macro-button:hover {
    background-color: #f1f1f1;
}
.button:hover {
    background-color: #f1f1f1;
}
</style>
</head>

<head>
<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 10px;
    width: 900px;
    height: 650px;	
    overflow: auto;
    border: 1px solid #ccc;
}
</style>
</head>

 

Snow Theme by Q2A Market
Powered by Question2Answer
...