I want to add buttons to the sidebar, so that the player can check their quest log, hints, other stats etc. However, I would like these to open up in a way that doesn’t require using the back button to return to the current passage. Like opening up an overlay for example that doesn’t affect the play. What I have is this in the StoryCaption:
Hints and Achievements are the only relevant part of this menu, I included the rest just in case someone needed to see what else was added.
and this in the StoryMenu:
[[Inventory]]
[[Quests]]
[[Secret Stats]]
These all work in that they open the appropriate passage, but I have to click Back in order to get back to the game. This is messy and could easily cause problems if multiple clicks on the back button occur.
What I am hoping for is either a button command that will allow the player to return to the previous actual game play passage, or maybe simply close the Quest, Hint etc passage.
I am still relatively new to Twine, but have some limited HTML5 experience.
Is there any possiblity of an overlay type of page? One that appears over the top of the existing passage but can be closed without causing any effect?
Alternatively, can a sidebar link only be seen or accessed from a certain other passage, ie ‘home’?
One further question, based on your previous answer.
One of my StoryCaption overlays is a map button.
It simply displays the overview map of the countryside with the largest of the locations marked.
I don’t intend to run links from the map, it is just there for the player to use to orientate themselves. The travelling will be done from buttons on each passage, so I can control the time taken to travel. (There is probably a better way to do this, but baby steps for me)
So the overview map is just an image. What I would like to do is have a series of maps, the overview, and several maps specific to their relative areas, which the player can only view from within the StoryCaption overlay.
I could add extra buttons to the StoryCaption, like this one:
I want the player to be able to view all maps within the StoryCaption overlay, but by selecting one map at a time, so it doesn’t interrupt the gameplay and can be closed at any point. In effect, a slideshow, I guess would be the best way of describing it.
Is this possible, or is my imagination getting the better of me? I hope I have explained this fully enough.
The replace macro is useful here. First create a passage called SidebarMap, tag it with nobr and enter this code.
You will need to update this with links to your images, ideally relative links. Refer to this page if you are not familiar with relative vs. absolute links.
Just below it, add this code. It does two things: gives the replace macro a target to replace (with id=“map”) and ensures that the displayed map remains the same even after the player navigates to a new passage.
Note that mapA.png is listed twice; the one after else makes it show up by default. You could use mapB or mapC there instead, if you like.
Just below that, add this code to ensure that the maps fit the sidebar.
<style>img {width:100%}</style>
You probably noticed I did not tell you to put this code in StoryCaption itself. That’s because it would take up a lot of room and get muddled with your other code. So the last thing we have to do is put this in your StoryCaption passage to embed it:
I tried creating the SidebarMap passage, but it appear in the sidebar as extra lines of text, which was what I was trying to avoid.
I had another one of these called Map:
<<link "Map">>
<<script>>
Dialog.setup("you cannot travel via this map yet, maybe later");
Dialog.wiki(Story.get("Map").processText());
Dialog.open();
<</script>>
<</link>>
and I pasted your code in here. It works fine except for one small thing:
When I first click on the mapB, or MapC, they first appear smaller than the first map, but if I click the name a second time, they become their proper size. They do this each time on click on a different map name, even the original one.
I can live with this however, as it still gives me what I was after.
One other issue I have just found. I have created a few items based on your code. I only show two of them here (Quest and Maps) as they all look the same: I added Quest here, so you can see what I have done with the code from the original.
But the one labelled “Map” is the only one that has this particular issue. When I click on it, any passage that has an image in it (except for background images), the image suddenly becomes a large blurry image behind the newly opened window. It disappears as soon as I close the window, and doesn’t cause any issues, but it does look odd.
I added some more to your initial code that you supplied for this, so maybe I’ve caused this myself, but I can’t find any self-inflicted error.
