Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Pop-up menus and real-time mechanics?

Hi,

I recently found Twine and I'm impressed with its simplicity and extensibility--it seems that anything that can be done in JavaScript can be done in Twine, via JavaScript.

I thought I'd ask about a particular feature, in case anyone has done it already: a menu that pops up when a link is clicked, itself listing one or more links. For example, if I click on a link "door" in the middle of a passage, several options pop up: "examine", "open", "kick down", etc., instead of displaying these in the normal way as "Examine the door", "Open the door", etc.

I'm also interested in real-time game-ey mechanics. Has anyone, for example, implemented features of MUDs with Twine? I mean something like a real-time text adventure, with NPCs  acting over time, or random events happening once in a while.

Thanks!

Comments

  • Are you asking about Twine 1.x or 2.x?
    I ask because a solution to either of your questions that works in one version of Twine may not work in the other unless you were using story format that is common to both versions. (eg. SugarCube or Snowman)
  • greyelf wrote:

    Are you asking about Twine 1.x or 2.x?

    2.x, unless there's a good reason I should use 1.x.
  • 1. Popup menu that contains links to other passages.
    Both Harlowe and SugarCube have a goto macro which can be used to programmatically send the Reader to another passage the same way a standard link does.

    The issue your going to have to solve is the displaying of the popup menu, though there a many examples on the internet showing how to use CSS and/or javascript to do this that should also work in a twine passage. Depending on which method you choose there there may be some issues with dynamically calling javascript if your using the Harlowe story format.

    2. MUD like: Both of the following may give you ideas.

    a. Sharpe's Example Turn-Based RPG (Pre-Alpha v. 0.4) has a SurgaCube version which may work in 2.x

    b. guy231's JRPG-like combat system in Twine 2
  • Thanks! I'll look into Sugarcube's goto macro. The real-time/MUD-like framework seems like it would have to be from scratch.
  • I use popups in my game. I recommend SugarCube since it has much of the popup mechanics already in place with its menu system. You then just need javascript and css that makes a new type of popup.

    To do this in SugarCube, the javascript is:

    macros.add("popup", {
    version: { major: 1, minor: 0, revision: 0 },
    handler: function ()
    {
    if (this.args.length < 2)
    {
    var errors = [];
    if (this.args.length < 1) { errors.push("link text"); }
    if (this.args.length < 2) { errors.push("passage name"); }
    return this.error("no " + errors.join(" or ") + " specified");
    }

    var el = document.createElement("a");
    el.innerHTML = this.args[0];
    el.className = "link-internal link-popup";
    el.setAttribute("data-passage", this.args[1]);
    UISystem.addClickHandler(el, null, function(evt) {
    var dialog = document.getElementById("ui-body");
    $(dialog)
    .empty()
    .addClass("dialog popup");
    new Wikifier(dialog, tale.get(evt.target.getAttribute("data-passage")).processText().trim());
    return true;
    });
    this.output.appendChild(el);
    }
    });
    Then you need css to define the popup and the popup link (this is just css that works for my game):

    #ui-body.popup
    {
    padding: 40px;
    border-radius: 15px;
    border-color: #000;
    font-style: italic;
    color: #111;
    background-color: #f1efef;
    max-width: 600px;
    box-shadow: inset 0 0 2em black, 0 0 2em black, 0 0 5em rgba(0,0,0,0.3);
    line-height: 1.5;
    -webkit-transition: none;
    transition: none;
    }

    /* Links in the main passage */
    .link-popup
    {
    color: #8A0808;
    }
    Use it in sugarcube with:

    <<popup "link text to display" "passage title to popup">>

    You can then just list links in the popup passage as normal.

    As is, this probably won't be exactly what you're after, but you should be able to play around with the CSS to get it displaying where you want.
  • Thanks a bunch, Claretta! You saved me many hours of possibly fruitless tinkering. I'll give it a spin as soon as I can.
  • I found the popup code in this thread and think it's great. Thanks to Claretta for posting it. I have a follow-up question. I'm working in Twine 1.4.2, Sugarcube 1.0.23. What is the appropriate code to close one of these popups from within Twine?

    Here's why I ask: I would like the (hyper)text inside a popup window to have a "Close" link at the end. Granted, there's already the X in the upper right-hand corner, but I think a link with text would add some user-friendliness. (Side note: On my PC, I'm also able to close the popup by clicking outside of the popup, but that technique seems not to work on my iOS device. So I'm looking for an alternative to the X that works on all devices.) Also--although I don't think I need this on my current project--it would be nice if I could put a passage link inside one of these popups and have the popup vanish when the passage link is clicked. As it is, clicking a passage link navigates to the passage but leaves the popup front-and-center.

    Apologies if this question is already answered someplace on the forum. I did some looking but didn't find an answer. Thanks in advance for any comments!
  • edited May 2015
    Any of the following should work.

    Via macros:
    /* Creates a link that closes the dialog (and maybe other things) */
    <<click "Close">><<script>>UISystem.close()<</script>><</click>>
    
    /* Creates a button that closes the dialog (and maybe other things) */
    <<button "Close">><<script>>UISystem.close()<</script>><</button>>
    
    Via HTML:
    /* Creates a link that closes the dialog */
    <a class="link-internal ui-close">Close</a>
    
    /* Creates a link that closes the dialog */
    <button class="ui-close">Close</button>
    
    The first two allow you do close the dialog and do other things, the latter two just close the dialog.
  • greyelf wrote: »
    a. Sharpe's Example Turn-Based RPG (Pre-Alpha v. 0.4) has a SurgaCube version which may work in 2.x<br />
    <br />
    b. guy231’s JRPG-like combat system in Twine 2
    @greyelf, these links aren’t working for me.

    While it’s not a MUD, you can check out my own "Three Dragons" for a real-time battle mechanic:

    http://samoff.com/twine/threeDragons

    Inherently, the term MUD means "Multi-User Dungeon," which I haven’t seen done in Twine before. On the other hand, Dan Cox did a great tutorial about creating a dungeon crawl style game on YouTube… Here’s the first segment:

    https://youtu.be/5_gbzdRVdAc
  • timsamoff wrote: »
    @greyelf, these links aren’t working for me.
    Those links were from the old version of this forum, to convert an old link you just take it's topic number an add it to the end of http://twinery.org/forum/discussion/

    So the links are now:

    a. Sharpe's Example Turn-Based RPG (Pre-Alpha v. 0.4)

    b. guy231's JRPG-like combat system in Twine 2
  • edited May 2015
    EDIT: NVM, didn't read properly. :P
  • timsamoff wrote: »
    Inherently, the term MUD means "Multi-User Dungeon"
    Which is not to be confused with a MOO or a MUSH. lol

  • I tried out the popup code, but it doesn't seem to work. Where my menu should be, it says:
    No macro or passage called "popup"

    Don't know if I'm just being silly but I can't get it to work...
  • edited June 2015
    It works fine as written in my story. You must be doing something wrong, but I cannot tell you what with such little information.

    Regarding the question in your other thread that led here, please note you won't get popups on hover with this code. To do that, you need to use the autopopup code inside a "hover" macro.

    This is autopopup:
    macros.add("autopopup", {
    	version : { major : 1, minor : 0, revision : 0 },
    	handler : function () {
    		if (this.args.length === 0) {
    			return this.error("no passage name specified");
    		}
    
    		var dialog = UISystem.setup("popup2");
    		new Wikifier(dialog, tale.get(this.args[0]).processText().trim());
    		UISystem.open();
    	}
    });
    

    Where you need to define it in your css as for example:
    #ui-body.popup2
    {
    	padding: 40px; 
    	border-radius: 15px; 
    	border-color: #000;
    	font-style: italic; 
    	color: #111;
    	background-color: #f1efef;
    	max-width: 600px; 
    	line-height: 1.5;
      -webkit-transition: none;
      transition: none;
    } 
    

    And then place <<autopopup "passage name">> in an "on hover do something" macro, that you'll need to find somewhere else.
  • Thank you, I'll try that out! :)
  • I still can't seem to get it to work, sorry for being a bother. D: Thank you for helping with the hover thing, I'll look into that later but right now I'm just trying to understand this.

    When I start my story, I get this error message:

    d2Llqfj.png

    Is this information enough? I just copied the code from this page so I don't know what the issue could be.
  • edited June 2015
    Where are you trying to add it?

    And did you copy and paste the code exactly as I wrote it above?
  • I'm trying to add it just in a passage for now, just to test it out.

    And yeah, I copied and pasted the code exactly into a script passage.
  • Post your HTML file.
  • edited June 2015
    Script passage?

    If you're using 2.0 you don't use script passages but the inbuilt javascript passage.

    Sounds like you want to be using 1.4.2. ;)
  • Which story format are you using? The code Claretta gave is only for SugarCube 1.x (not to be confused with Sugarcane or, the upcoming, SugarCube 2.x).
  • Ah, yep, I'm using Sugarcane. Sorry for the confusion >-<
  • Yes as I wrote in the post containing the code, it is only for SugarCube.
  • Any of the following should work. ...

    They do seem to work. Thank you!
Sign In or Register to comment.