Hello I want to make a popup using the style sheet and Java script that displays the code below and make it look really professional and I want it to display whenever the player clicks the button. I also want the popup to close whenever the player clicks the red X button and the popup button will go under a super depressing looking footer.
Heres the stats
(align:"===><===")[Game Stats]
---
(align:"===><===")[Games Played: (print: $full_games_played)]
---
(align:"===><===")[Games lost: (print: $Loses)]
---
(align:"===><===")[Money high score: (print: $Moneyscore)]
note: Harlowe’s dialog implementation doesn’t include a title-bar, like you may normally find on a frame or dialog-box of a Desktop Operating System, so it also doesn’t have the Frame Control buttons (min, max, close) you may normally find in that title-bar.
The (display:)
macro can be used to include the contents of a child Passage, the (dialog:)
macro can be used to show content in a dialog box, the (link-repeat:)
macro can be used to display a link that can be selected more than once per Passage Transition, the (button:)
macro can be used to make a link look like a “button”, and the special footer Passage Tag can be used to show the contents of a child Passage at the end of the Passage being visited.
The following Twee Notation based example uses the above features to partly achieve the outcome you asked for.
:: Start
Welcome to the Story
:: Game Stats
Game Stats
---
Games Played: (print: $full_games_played)
---
Games lost: (print: $Loses)
---
Money high score: (print: $Moneyscore)
:: PassageFooter [footer]
(link-repeat: "Game Stats", (button:))[
(dialog: [(display: "Game Stats")], "Close")
]
:: StoryStartup [startup]
(set: $full_games_played to 10)
(set: $Loses to 2)
(set: $Moneyscore to 123)
Adding the following CSS to the project’s Story Stylesheet area will cause the content of the footer tagged Passage to appear below that of the visited Passage, and the dialog box’s textual content to be centred.
tw-include[type="footer"] {
display: block;
}
tw-dialog {
text-align: center;
}
1 Like