Howdy, Stranger!

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

SugarCube releases

1246710

Comments

  • Announcing SugarCube v1.0.16 ( Twine 1.x: http://www.motoslave.net/sugarcube/ )( Twine 2.x: It's a built-in option from v2.0.2+. )

    Changelog highlights: This is something of an emergency release.  If you've noticed wiki links failing bizarrely since v1.0.11, this release should clear that up.
  • Announcing SugarCube v1.0.17 ( Twine 1.x: http://www.motoslave.net/sugarcube/ )( Twine 2.x: It's a built-in option from v2.0.2+. )

    Changelog highlights:
    • Fixed an issue with UISystem dialogs whereby all unordered lists were given button bar styling.  Now, the lists must add the buttons class to receive the styling.
    • Fixed an instance of StoryTitle still being used within the Twine 2 version of SugarCube.
    • Fixed a few edge case issues in internal methods.
    • Added the resizeOnImagesLoaded boolean property to the UISystem options object, which enables the automatic resizing of the dialog when all images are loaded.
    • Made a few style updates.
    • Other improvements.
    Also, updated the Bleached style, though I believe the last version should continue to work without issue.
  • Announcing SugarCube v1.0.18 ( Twine 1.x: http://www.motoslave.net/sugarcube/ )( Twine 2.x: It's a built-in option from v2.0.2+. )

    Changelog highlights:
    • Updated the custom style formatter (@@@@) to skip the leading and, if it exists, trailing newlines when used as a block.
    • Made a few style updates (includes the addition of cursor styling to <area> elements).
    • Reordered segments of the script pipeline.
    • Added CSS minification to the build system.
    In all likelihood, this will be the last 1.x release before I push out the 2.x series.
  • Announcing SugarCube v1.0.19 ( Twine 1.x: http://www.motoslave.net/sugarcube/ )( Twine 2.x: It's a built-in option from v2.0.2+. )

    Changelog highlights:
  • Announcing SugarCube v1.0.21 ( Twine 1.x: http://www.motoslave.net/sugarcube/ )( Twine 2.x: It's a built-in option from v2.0.2+. )

    Changelog highlights: (for both 1.0.20 & 1.0.21)
    • The init-screen now inherits its foreground/background colors and font family from the <body> element styling.
    • Audio macro updates:
      • Fixed an issue where if <<setplaylist>> was called during playlist playback the currently playing track would keep playing until completion.
      • Fixed an issue where when <<setplaylist>> was called some previous settings were erroneously retained.
      • Added muting to <<audio>> and <<playlist>>.
  • The first usable snapshot of SugarCube v2.0.0-alpha.6 is available for testing and critique.

    Downloads: Documentation:
    • Pending, but not likely until the first beta (other than breaking changes, it's all the same as v1 anyway)
    Highlights of most of the breaking changes:
    • Complete UI overhaul (HTML and CSS), which does include the main passage display area.  See the new structure below for details.
    • The config option config.passageTransitionOut no longer accepts a boolean value, which has been replaced by the name of the animating property (necessitated by changes to browser handling of transition animations).
    • The UISystem.setup() method's parameters have changed from ([classNames]) to ([title [, classNames]]).
    • The <<optiontoggle>> macro no longer accepts a toggle_text argument.  This isn't, actually, a breaking change (if one is given, it will simply be silently ignored), but you shouldn't include one anymore.
    • Most links which should only be able to be clicked once have been limited to one click (multi-click prevention).  This shouldn't, actually, be a breaking change, however, if you do happen to notice a link stop working, which obviously shouldn't, let me know.
    New HTML structure:

    <body class="">
    <div id="init-screen"></div>
    <div id="ui-bar">
    <div id="ui-bar-toggle" title="Toggle the UI bar"><a></a></div>
    <div id="ui-bar-body">
    <header id="title" role="banner">
    <div id="story-banner"></div>
    <h1 id="story-title"></h1>
    <div id="story-subtitle"></div>
    <div id="story-title-separator"></div> <!-- Unused -->
    <p id="story-author"></p>
    </header>
    <div id="story-caption"></div>
    <nav id="menu" role="navigation">
    <ul id="menu-story"><ul> <!-- Exists only if used -->
    <ul id="menu-core">
    <li id="menu-saves"><a>Saves</a></li>
    <li id="menu-rewind"><a>Rewind</a></li> <!-- Exists only if used -->
    <li id="menu-restart"><a>Restart</a></li>
    <li id="menu-options"><a>Options</a></li> <!-- Exists only if used -->
    <li id="menu-share"><a>Share</a></li> <!-- Exists only if used -->
    </ul>
    </nav>
    <footer role="contentinfo">
    <p id="credits"><!-- Basic "Made with" info --></p>
    <p id="version"><!-- SugarCube version info --></p>
    </footer>
    </div>
    </div>
    <div id="ui-overlay" class="ui-close"></div>
    <div id="ui-dialog">
    <h1 id="ui-dialog-title"></h1>
    <button id="ui-dialog-close" class="ui-close"></button>
    <div id="ui-dialog-body"></div>
    </div>
    <div id="story" role="main">
    <div id="passages">
    <section class="passage " id="" data-passage="">
    <!-- The active passage content -->
    </section>
    </div>
    </div>
    <div id="store-area" data-size="" hidden></div>
    <script id="script-sugarcube" type="text/javascript"><!-- The main SugarCube module --></script>
    </body>
  • is there any possibility of syntax highlighting feature in every passage in the next update?
    Now it's just a syntax support for javascript and css, and even then only in Story Javascript and Story Stylesheet

    This would make my life so much easier if there's syntax highlight for SugarCube in every passage  :-* especially for SugarCuba syntax, is this possible ?
  • Syntax highlighting of SugarCube markup would require support within Twine 2 and, as far as I know, no such support currently exists.
  • Will there be an easy way to revert the UI changes to the old SugarCube?

    I think they're good for the default Twine look, but I've put a lot of work into getting my story the way I want it. I'm worried that Twine 2 will autodownload the new format and I'll need to fix the UI to get it back the way it was.
  • SugarCube 2.x will not auto-replace 1.x.
  • Concerned I'll still miss out on future code updates if I don't update though.

    Oh well, I suppose it's probably something simple like telling it not to display certain parts to avoid the big arrow thingy appearing.
  • Well, yes, you would miss out on any new features added to SugarCube 2.x if you stuck with 1.x.  That said, if the project you're working on now is done (or largely so) by that point, then it's a moot point really (since there's no pressing need to upgrade a finished project).  Beyond that, I'm not entirely sure when the first general release SugarCube 2.x will be.  Not only do I still have cleanup that I want to do before it's released, but Twine 2 also needs to have better support for multiple versions of story formats baked in (which is being hashed out right now).

    Still, as is (largely) the case for 1.x releases now, when 2.x is released there will be upgrade instructions (and I'll be around to answer questions as well) for those wanting to upgrade from 1.x to 2.x.

    Also, to which "big arrow thingy" are you referring?  The 2.x UI bar's stow/unstow button?
  • Yeah, pretty much. :p

    I don't actually use the UI bar anyway. I make the whole thing invisible and then craft my own UI bar with story-caption.

    So what I'd mostly be into doing is getting rid of the stow/unstow button.
  • Claretta wrote:

    So what I'd mostly be into doing is getting rid of the stow/unstow button.


    Easily enough done.
  • Announcing SugarCube v1.0.22:
    Changelog highlights:
    • Removed a non-debug-build console logging call (which could cause issues in IE9).
    • Added a forced dollar sign formatter and a naked $variable formatter.
    • Swapped the order of the predisplay task object and the PassageReady special passage code, so that predisplay is processed first.
    • Added a new task object prehistory, which is processed during passage display before the state history is modified.
    • Added a className parameter to UISystem.isOpen(), which enables checking if a specific dialog is open (by class name).

    With the naked $variable formatter, you should now simply be able to put $variables into your text without having to use <<print>>. For example:
    /* Using <<print>> (still works) */
    Well hello there, <<print $playerName>>.
    
    /* Using the naked $variable formatter */
    Well hello there, $playerName.
    
    /* Assuming $playerName is set to "Mr. Freeman", both should yield the following */
    Well hello there, Mr. Freeman.
    
  • Announcing SugarCube v1.0.23:
    Changelog highlights:
    • Fixed a few minor issues with the naked $variable formatter.
    • Fixed an invalid reference error (which only affected older browsers).
    • Other improvements.
  • edited May 2015
    Quick question: Is there a technical reason why the fadeto instruction is available for the play audio macro, but not playlist?

    In my story I use this for playlist to simulate the command:
    <<widget "fade">><<playlist volume 0.99>><<timedcontinue 100ms>><<playlist volume 0.98>><<timedcontinue 100ms>><<playlist volume 0.97>><<timedcontinue 100ms>><<playlist volume 0.96>><<timedcontinue 100ms>><<playlist volume 0.95>><<timedcontinue 100ms>><<playlist volume 0.94>><<timedcontinue 100ms>><<playlist volume 0.93>><<timedcontinue 100ms>><<playlist volume 0.92>><<timedcontinue 100ms>><<playlist volume 0.91>><<timedcontinue 100ms>><<playlist volume 0.9>><<timedcontinue 100ms>><<playlist volume 0.89>><<timedcontinue 100ms>><<playlist volume 0.88>><<timedcontinue 100ms>><<playlist volume 0.87>><<timedcontinue 100ms>><<playlist volume 0.86>><<timedcontinue 100ms>><<playlist volume 0.85>><<timedcontinue 100ms>><<playlist volume 0.84>><<timedcontinue 100ms>><<playlist volume 0.83>><<timedcontinue 100ms>><<playlist volume 0.82>><<timedcontinue 100ms>><<playlist volume 0.81>><<timedcontinue 100ms>><<playlist volume 0.80>><</widget>>
    

    Which works, but am just wondering if there is a reason why fadeto isn't available.
  • Claretta wrote: »
    Quick question: Is there a technical reason why the fadeto instruction is available for the play audio macro, but not playlist?
    IIRC, I thought about it, but it would have been kind of a pain to do and I simply didn't think anyone would want to actually fade a playlist. It's something I could add, if desired.
  • The second usable snapshot of SugarCube v2.0.0 (2.0.0-alpha.7) is available for testing and critique.

    Downloads & documentation for all Twine versions: http://www.motoslave.net/sugarcube/2/

    General changes:
    • Some bug fixes.
    • More HTML & CSS changes.
    • Added a forced dollar sign formatter and a naked $variable formatter (has already been backported to 1.x).
    • Added the prehistory task object, which is processed before the state history is modified (has already been backported to 1.x).
    • Added the time() story function, which returns the number of milliseconds that have passed since the current passage was rendered.
    • Added the variables() story function, which returns a reference to the active story variable store (i.e. state.active.variables).
    • Added many new entries to the strings object. This update should cover most user-facing strings within SugarCube, sans fatal errors (since they tend to be both technical and unrecoverable).
    • Replaced the ungainly <<(back|return)::linktext "…">> syntax with strings object properties (strings.macros.back.text and strings.macros.return.text).
    • Various console globals are now polyfilled with no-ops to keep badly behaving third-party code from exploding when they don't exist (usually in older versions of IE when the dev tools are closed).
    • Added some ES6 native object method polyfills (via es6-shim).
    • Updated jQuery to v2.1.4.
    • Updated normalize.css to v3.0.3.
    General accessibility changes:
    • Added the addAccessibleClickHandler() utility function, which should ensure broad accessibility for all clickables.
    • Switched virtually all click handling to use the addAccessibleClickHandler() function.
    • Added some post-processing to the #story element for accessibility and other things.
    • Added a *:focus CSS ruleset for accessibility.
    UI system changes:
    • Renamed the UISystem module/object to simply UI.
    • Updated most user-facing strings to use the associated properties of the string object. This also required tweaks to the order of operations, so that script passages have time to modify the strings object.
    • Updated the UI.addClickHandler() now uses the addAccessibleClickHandler() function and returns the jQuery-wrapped targets.
    • Updated the UI.isOpen() method to add a classNames parameter, which enables checking if a specific dialog is open (by class name).
    • Updated the UI.open() and UI.close() methods to focus the dialog upon opening it and to attempt to restore focus to the element which previously had it upon close (an accessibility boon, if somewhat ugly).
    • Updated the UI.open() and UI.close() methods to attempt to hide all non-dialog elements from tabbing/screen readers while the dialog is open (unsure about the latter).
    • The Saves dialog import button ("Load from Disk") now attempts to trigger the browser/OS's Open File dialog directly.
    • Provisionally removed the Rewind menu & dialog. If I get a lot of pushback on this, I might consider restoring it (though my default response is going to be to use saves).
    Save system changes:
    • Renamed the SaveSystem module/object to simply Save.
    • Categorized and renamed exported methods for consistency with other APIs.
    Setting (formerly Option) system changes:
    • Renamed the options object to settings and the Options dialog to Settings (choosing the commonly used parameter name options in the first place was an unfortunate choice).
    • Added the new Setting module/object, which manages both the settings object and Settings dialog. The module obviates the need for most of the boilerplate which was required by the old system.
    • Removed the MenuOptions special passage and the various options macros (both made obsolete by the Setting module).
    Macro system changes:
    • Rewrote Macros as a static module, since it really didn't need to be instantiable, and renamed it to simply Macro.
    • Renamed Macro exported methods for consistency with other APIs.
    • Rewrote MacrosContext so that instead of many parameters it now takes a single object and renamed it to simply MacroContext.
    KeyValueStore system changes:
    • Renamed exported methods for consistency with other APIs.
  • edited May 2015
    Claretta wrote: »
    Quick question: Is there a technical reason why the fadeto instruction is available for the play audio macro, but not playlist?
    IIRC, I thought about it, but it would have been kind of a pain to do and I simply didn't think anyone would want to actually fade a playlist. It's something I could add, if desired.

    Well my current widget works fine if it's a pain, even if it looks monstrous.

    I use it to momentarily fade the music to better mix in voice acting. That's a pretty niche case since I've never come across any other Twine with voice acting.
  • Accessibility Feedback:

    Notes: Screen reader being used is VoiceOver on OS X.

    1. This is probably a silly question, but where is addAccessibleClickHandler() documented? I couldn't find it but I probably just missed it.

    2. Thank you for adding the ability in 2.0 to break things automatically into paragraphs. :) Sorry I jumped the gun on you in 1.0.x. This allows screen readers better granularity when going through a passage, which is much appreciated.

    3. Can you add a way to skip to the passage content for screen readers? It's very tiring to navigate through every single piece of text in the sidebar to reach the story text. I can of course add this myself but this seems to be something that should be common enough to add.

    4. Thank you for adding tabIndex explicitly to links. This helps a lot with keyboard navigation.

    5. When a passage changes, I've set up a "postdisplay" hook to (1) create a "dummy" first paragraph in the passage section with a   in it, and (2) set focus on it. This allows keyboard focus to reset within the story text on screen rather than outside of it on a passage change. The dummy first paragraph also allows screen readers to reset to read the passage from the top again.

    Automating this functionality might be something to look into. The method I've presented is not perfect, but it does help a lot, given the way that passages fade into and out of the same DOM element.

    6. The save dialog is now navigable through both keyboard focus and the VoiceOver screen reader. Thank you!

    7. Question: is there any reason the postdisplay hooks (and the other assorted task objects) don't execute on initial page load, even though the first passage is being rendered at this point?

    Thanks so much for your hard work!
  • edited May 2015
    Is there a mobile-friendly version of SugarCube? Because it looks like anything made with SugarCube will need customized CSS in order to be submittable to places that require phone-compatability, which SugarCube right now is definitely not out of the box.

    Never mind, I just changed some of the CSS and added Javascript such that the UI bar is stowed on open, and slides over the text rather than squishing the text. Thanks.
  • AvaJarvis wrote: »
    1. This is probably a silly question, but where is addAccessibleClickHandler() documented? I couldn't find it but I probably just missed it.
    It's not documented, actually, like most internal non-story functions (especially, the low-level ones like it). The only reason to need it would be if you're creating clickables directly yourself, rather than using any of the normal creation methods within the story format (which pretty much all use addAccessibleClickHandler() at this point). Specifically, you should not use it to create any passage links, there are methods for that.

    That said, it's not like it's a secret or anything, I'm just wondering why you need it.

    Regardless, its API is as follows:
    /**
    	Returns the jQuery-wrapped target element(s) after making them accessible clickables (ARIA compatibility)
    */
    function addAccessibleClickHandler(targets , handler [, once [, namespace]]) : jQuery object
    	targets   : jQuery-style selector set | jQuery object wrapping HTMLElement(s) | HTMLElement object
    	handler   : Function to handle the event
    	once      : (optional) Whether the event handler is single use
    	namespace : (optional) jQuery-style event namespace(s) (i.e. ".my-ns.anotherNS.onemore")
    

    AvaJarvis wrote: »
    3. Can you add a way to skip to the passage content for screen readers? It's very tiring to navigate through every single piece of text in the sidebar to reach the story text. I can of course add this myself but this seems to be something that should be common enough to add.
    Other than auto-focusing the first element of an incoming passage (your #5; which is a good idea, so thanks), I'm unsure exactly what you're thinking of. Did you have something specific in mind?

    Note: You can stow the UI bar, which should remove it from both the tabindex and screen-reader view.

    AvaJarvis wrote: »
    5. […]
    Seems like a good idea. Consider it done.

    AvaJarvis wrote: »
    6. The save dialog is now navigable through both keyboard focus and the VoiceOver screen reader. Thank you!
    Great. BTW, are dialog titles being read? I added what should be the appropriate ARIA attributes to make that happen, but I have no real way to test it (I installed JAWS, briefly, but that thing is a hateful mess).

    AvaJarvis wrote: »
    7. Question: is there any reason the postdisplay hooks (and the other assorted task objects) don't execute on initial page load, even though the first passage is being rendered at this point?
    The task object callback functions are called on the normal display of every passage, including the first. The only caveat is that they have to exist by that point, naturally. Are you, perhaps, creating them in the starting passage or something? Regardless, what seems to be the problem?
  • AvaJarvis wrote: »
    Never mind, I just changed some of the CSS and added Javascript such that the UI bar is stowed on open, and slides over the text rather than squishing the text. Thanks.
    I could make the UI bar's initial state a configuration option easily enough (it's something I've thought about once or twice).

    As to the UI bar sliding over vs. pushing over the passage area, I suppose I could change the rulesets of the current viewport size media queries to address that (since, yes, side-mounted bars/panels sliding over the main display area is a fairly common mobile UI paradigm). Mind sharing the CSS you came up with?

    RANT: Okay. Not being able to escape the @-symbol in posts is annoying.
  • That said, it's not like it's a secret or anything, I'm just wondering why you need it.

    I was just curious. >_> Sorry, haven't a need for it yet. :)
    Other than auto-focusing the first element of an incoming passage (your #5; which is a good idea, so thanks), I'm unsure exactly what you're thinking of. Did you have something specific in mind?

    Note: You can stow the UI bar, which should remove it from both the tabindex and screen-reader view.

    The stow does remove it from tabindex/screen reader, thanks. It's mostly an artifact of how screen readers navigate to a webpage from the rest of the screen.

    For instance, in VoiceOver, when I pull open a web page, I won't be interacting with the content of the page directly because VoiceOver doesn't know if I want to interact with other windows or even other tabs yet. I have to explicitly tell VoiceOver (through some key presses) to "enter" the web content to interact with it, an act which ignores auto-focus. After I'm interacting with the content, changing focus works fine to redirect VoiceOver automatically. Too bad there's no "screen reader has entered web page" event. :(

    It's hard to explain. I'm tempted to do a VoiceOver YouTube demo so folks can see what is going on. :)
    Great. BTW, are dialog titles being read? I added what should be the appropriate ARIA attributes to make that happen, but I have no real way to test it (I installed JAWS, briefly, but that thing is a hateful mess).

    Yeah, I've heard horror stories about JAWS. VoiceOver has a 50-screen tutorial that helped a lot. The dialog titles are being read, btw, so it works. And the "dimmed" button stuff is helpful to notify screen readers when a button is disabled.
    The task object callback functions are called on the normal display of every passage, including the first. The only caveat is that they have to exist by that point, naturally. Are you, perhaps, creating them in the starting passage or something? Regardless, what seems to be the problem?

    I think it is just late and I was seeing things lol. Not a problem. It's working.
  • I could make the UI bar's initial state a configuration option easily enough (it's something I've thought about once or twice).

    Oh, that would be nice!
    As to the UI bar sliding over vs. pushing over the passage area, I suppose I could change the rulesets of the current viewport size media queries to address that (since, yes, side-mounted bars/panels sliding over the main display area is a fairly common mobile UI paradigm). Mind sharing the CSS you came up with?

    Oh, it's very little, just this:
    #story {
    	margin-left: 4.5em;
    	font-size: 20px;
    	line-height: 1.5em;
    }
    

    Ordering matters a lot more than it ideally should but such is the way of 'em' versus 'rem'. This sets the left margin to always be 4.5em, rather than 20em when the UI bar is unstowed. The font size and line height settings would appear to be about right for most finger sizes on a mobile device.
  • Well, I'm inclined to keep the RHS/LHS margins balanced (though, maybe there's an argument that I've made them too small), so I'll probably add something like the following to SugarCube's media queries:
    @media screen and (max-width: 768px) {
    	#story {
    		margin-left: 3.5em;
    	}
    }
    
    Not entirely sure about the value of the query's max-width constraint though.

    Additionally, I am going to add a config setting for the UI bar's initial stowed state.
  • edited June 2015
    Announcing SugarCube v2.0.0-beta.1:

    Downloads & documentation for all Twine versions: http://www.motoslave.net/sugarcube/2/

    Changelog highlights (since 2.0.0-alpha.7):
    • Some cleanup and a few minor bug fixes.
    • Added the config.ui.stowBarInitially config property which controls whether the UI bar starts in the stowed (shut) state initially.
    • Changed the config.startPassage config property to config.startingPassage.
    • Changed the <<if>> macro to, optionally, return an error if the = assignment operator is used (default: enabled). Configured via the config.macros.disableIfAssignmentError config property.
    • The UI will now attempt to keep outlines during keyboard usage, while hiding them during mouse usage.
    • At narrow viewport widths, the unstowed UI bar will now slide over top of the story display area, rather than shoving it over.
    • Updated the Save system's behavior so that it no longer stores an empty saves object (i.e. autosave and all slots are empty).
    This is a general release, so have at it.

    Not done in this release but on my TODO list:
    • Auto-focusing the first element of an incoming passage.
    • Fading for playlists.
  • Thank you for the 2.0

    I swear I can't think of anything else you would need to add to SugarCube. What else is even needed?! Awesome work. Thank you.

    One question, I was using a pop-up macro and now in 2.0 it doesn't work. The only thing I changed was switching to 2.0. (which... yes, I understand is a MAJOR change...)

    Macros.add is not a function and macro <<popup does not exist>>
  • Okay, I fixed that by changing Macros.add to Macro.add (notice the 's' now missing)

    But now it says UISystem is not defined.

    I know this is a problem of the specific macro and not a SugarCube problem, but it was working before so I am wondering if there was a syntax change?
Sign In or Register to comment.