Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Welovesvg #37

Merged
merged 12 commits into from
Dec 2, 2017
Merged

Welovesvg #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4edb1c8
Starting to add prettify option
Nov 24, 2017
f8949bf
Revert "Starting to add prettify option"
Nov 24, 2017
92a3e4d
Merge branch 'dev' of https://github.com/invicticide/fractive into dev
Nov 24, 2017
942d991
External link icon
Dec 1, 2017
636c3f4
External link icon can be customized in fractive.json
Dec 1, 2017
d168d33
Removing holdover Webicon script tag
Dec 1, 2017
9badb43
Don't do data-attrs transformation in RewriteLinkNode
Dec 1, 2017
09a295e
define tags for external, inline, and section links
Dec 1, 2017
6002ab6
Fourth link type
Dec 1, 2017
71a479f
All links can be tagged
Dec 1, 2017
349741c
Wrote an example for link tags
Dec 1, 2017
c40988f
Basic examples don't need all link tags
Dec 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
*.DS_STORE
.local/
.vscode/
lib/**
Expand Down
28 changes: 15 additions & 13 deletions examples/basic/build/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
#__history {
color: silver !important;
Expand Down Expand Up @@ -305,7 +306,7 @@ <h1>Welcome!</h1>
then present one or more choices to the player; each choice takes the story to a different section, and in a different direction.</p>
<p>In Markdown, you declare the beginning of a new section by enclosing the section name (which must be unique!) in double curly braces. The section you're reading right now is called <code>{{Start}}</code> which is a special section name that indicates
where the story begins.</p>
<p><a href="#" title="{@AnotherSection}" data-goto-section="AnotherSection">Link to another section</a></p>
<p><a title="{@AnotherSection}" href="#" data-goto-section="AnotherSection">Link to another section</a></p>
</div>
<div id="AnotherSection" class="section" hidden="true">
<p>You just clicked a link that took you to another section! You create section links just like any ol' Markdown link, but in place of the URL you put a special <em>macro</em> enclosed in single curly braces. There are three types of macros, each
Expand All @@ -317,11 +318,11 @@ <h1>Welcome!</h1>
</ul>
<p>So if you set the URL to <code>{@Start}</code> you'd have created a link back to the section called <code>Start</code>. If on the other hand you'd put <code>{#Start}</code> you'd have created a link that would call a Javascript function called
<code>Start</code>.</p>
<p><a href="#" title="{#FunctionLink}" data-call-function="FunctionLink">What does it look like when a link calls a Javascript function?</a><br/><a href="#" title="{#VariableLink}" data-call-function="VariableLink">What happens if I set the link URL to a variable macro?</a><br/>
<p><a title="{#FunctionLink}" href="#" data-call-function="FunctionLink">What does it look like when a link calls a Javascript function?</a><br/><a title="{#VariableLink}" href="#" data-call-function="VariableLink">What happens if I set the link URL to a variable macro?</a><br/>
<a
href="#" title="{@InlineMacros}" data-goto-section="InlineMacros">What else can I use macros for?</a>
title="{@InlineMacros}" href="#" data-goto-section="InlineMacros">What else can I use macros for?</a>
</p>
<p>(P.S. Notice that the first section is still displayed above. That's because we keep track of your play history in a scrollback. You can <a href="#" title="{#HideHistory}" data-call-function="HideHistory">hide the history</a> if you like. The
<p>(P.S. Notice that the first section is still displayed above. That's because we keep track of your play history in a scrollback. You can <a title="{#HideHistory}" href="#" data-call-function="HideHistory">hide the history</a> if you like. The
UX for this is still going to need some work.)</p>
</div>
<div id="InlineMacros" class="section" hidden="true">
Expand All @@ -336,10 +337,11 @@ <h1>Welcome!</h1>
</blockquote>
<p>The inlined function and section above are indented, but that's only because I prefaced them with the Markdown blockquote indicator for clarity. Inlines don't inherently get any special styling, so you can inline things totally seamlessly and
your players will never know the difference.</p>
<p>Finally, you can create links which expand to text in-place, which is commonly used in e.g. <a href="https://twinery.org/2/">Twine</a> games for artistic effect. You can link to a <a href="#" id="_inline-0" title="{$InlineExpansionVariable:inline}"
data-replace-with="$InlineExpansionVariable">variable</a>, or to the return value of a <a href="#" id="_inline-1" title="{#InlineExpansionFunction:inline}" data-replace-with="#InlineExpansionFunction">function</a>, and they'll expand in-place.</p>
<p><a href="#" id="_inline-2" title="{@InlineExpansionSection:inline}" data-replace-with="@InlineExpansionSection">You can also do this with a section</a></p>
<p><a href="#" title="{@AboutFormatting}" data-goto-section="AboutFormatting">Can I use Markdown styling?</a></p>
<p>Finally, you can create links which expand to text in-place, which is commonly used in e.g. <a title="https://twinery.org/2/" target="_blank" href="https://twinery.org/2/">Twine&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a> games
for artistic effect. You can link to a <a title="{$InlineExpansionVariable:inline}" href="#" data-replace-with="$InlineExpansionVariable" id="_inline-0">variable</a>, or to the return value of a <a title="{#InlineExpansionFunction:inline}"
href="#" data-replace-with="#InlineExpansionFunction" id="_inline-1">function</a>, and they'll expand in-place.</p>
<p><a title="{@InlineExpansionSection:inline}" href="#" data-replace-with="@InlineExpansionSection" id="_inline-2">You can also do this with a section</a></p>
<p><a title="{@AboutFormatting}" href="#" data-goto-section="AboutFormatting">Can I use Markdown styling?</a></p>
</div>
<div id="InlineSection" class="section" hidden="true">
<p>This paragraph was written in an entirely different section, but it appears as part of the section you're already reading. This might be useful if you have some boilerplate text that needs to follow the player around from place to place; you could
Expand All @@ -348,7 +350,7 @@ <h1>Welcome!</h1>
<div id="InlineExpansionSection" class="section" hidden="true">
<p>Sections are kind of special though, in that they don't actually appear inline <em>per se</em>, because they're block-level elements (i.e. their own paragraphs) which means they'll put a paragraph break where they appear. They still replace their
:inline macro link though, just like with variables and functions. When inline-expanding a section, you can still have paragraph breaks, <em>additional</em> <strong>formatting</strong>, and so on. And you can even inline sections which themselves
contain <a href="#" title="{#RaiseAlert}" data-call-function="RaiseAlert">macros</a>!</p>
contain <a title="{#RaiseAlert}" href="#" data-call-function="RaiseAlert">macros</a>!</p>
</div>
<div id="AboutFormatting" class="section" hidden="true">
<p>Story text is written in Markdown, which means we have access to <em>all kinds</em> of <strong>formatting</strong>, including:</p>
Expand All @@ -357,12 +359,12 @@ <h2>Sub-headers</h2>
<ul>
<li>Unordered lists (like this one)</li>
<li>Ordered lists (1, 2, 3, 4...)</li>
<li>Links can also <a href="#" title="{#RaiseAlert}" data-call-function="RaiseAlert"><em>contain</em> <strong>formatting</strong></a></li>
<li>Links can also <a title="{#RaiseAlert}" href="#" data-call-function="RaiseAlert"><em>contain</em> <strong>formatting</strong></a></li>
</ul>
<p>Basically, anything Markdown can do, you can do in your story text! You can even inline <span style="color:#ff0000">raw HTML</span> which means you could do video embeds, HTML5 canvas, and all kinds of other fancy stuff.</p>
<p>And of course, because fractive games are ultimately HTML in the end, you can create your own HTML template with whatever layout you want, and style it with CSS. For example, you could surround your game with a header and footer, or create a sidebar
which (along with some custom Javascript) tracks your player's inventory and stats as they move through the story.</p>
<p><a href="#" title="{@LongStories}" data-goto-section="LongStories">How does fractive handle long/complicated stories?</a></p>
<p><a title="{@LongStories}" href="#" data-goto-section="LongStories">How does fractive handle long/complicated stories?</a></p>
</div>
<div id="LongStories" class="section" hidden="true">
<p>Fractive's main goal is to be the best tool for writing complex, dynamic hypertext fiction that has lots of branches and genuinely consequential choices. What you're reading right now is produced by a <em>very</em> eary version of the tool, so
Expand All @@ -373,9 +375,9 @@ <h2>Sub-headers</h2>
<p>In the future I'll be exploring additional tools and visualizations to help authors understand, trace, and debug the complexity of large, deeply-branching narratives. Those tools and visualizers will likely be the most experimental, and pivotal,
aspects of fractive's development.</p>
<p>Anything you'd like to review?</p>
<p><a href="#" title="{#FunctionLink}" data-call-function="FunctionLink">What does it look like when a link calls a Javascript function?</a><br/><a href="#" title="{#VariableLink}" data-call-function="VariableLink">What happens if I set the link URL to a variable macro?</a><br/>
<p><a title="{#FunctionLink}" href="#" data-call-function="FunctionLink">What does it look like when a link calls a Javascript function?</a><br/><a title="{#VariableLink}" href="#" data-call-function="VariableLink">What happens if I set the link URL to a variable macro?</a><br/>
<a
href="#" title="{@InlineMacros}" data-goto-section="InlineMacros">What else can I use macros for?</a><br/><a href="#" title="{@AboutFormatting}" data-goto-section="AboutFormatting">Can I use Markdown styling?</a></p>
title="{@InlineMacros}" href="#" data-goto-section="InlineMacros">What else can I use macros for?</a><br/><a title="{@AboutFormatting}" href="#" data-goto-section="AboutFormatting">Can I use Markdown styling?</a></p>
</div>

<div id="__history"></div>
Expand Down
5 changes: 4 additions & 1 deletion examples/basic/fractive.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
{
"title": "basic",
"template": "../../templates/basic.html",
"linkTooltips": true
"linkTooltips": true,
"linkTags": {
"external": "&nbsp;<i class=\"fa fa-external-link\" aria-hidden=\"true\"></i>"
}
}
8 changes: 6 additions & 2 deletions examples/macros/build/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
#__history {
color: silver !important;
Expand Down Expand Up @@ -302,8 +303,11 @@ <h1>Aliases</h1>
<p>Aliases are awesome!</p>
<p>Aliases can enable <span style='color:#ff8888'>clean inline styling</span>!</p>
<h1>Links</h1>
<p><a href="#" title="{@TestSection}" data-goto-section="TestSection">Link to a section</a><br/><a href="#" title="{#LinkedFunction}" data-call-function="LinkedFunction">Link to a function</a></p>
<p><a href="#">Link with a section in the label: <span data-expand-macro="@TestSection"></span></a><br/><a href="#">Link with a function in the label: <span data-expand-macro="#TestFunction"></span></a><br/><a href="#">Link with a variable in the label: <span data-expand-macro="$TestVariable"></span></a></p>
<p><a title="{@TestSection}" href="#" data-goto-section="TestSection">Link to a section</a><br/><a title="{#LinkedFunction}" href="#" data-call-function="LinkedFunction">Link to a function</a></p>
<p><a title="#" target="_blank" href="#">Link with a section in the label: <span data-expand-macro="@TestSection"></span>&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a><br/><a title="#" target="_blank" href="#">Link with a function in the label: <span data-expand-macro="#TestFunction"></span>&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a><br/>
<a
title="#" target="_blank" href="#">Link with a variable in the label: <span data-expand-macro="$TestVariable"></span>&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
</p>
<h1>Images</h1>
<p><img src="assets/avatar.png" alt="Image with a direct url" title="Image with a direct url"><br/><img data-image-source-macro="#ImageFunction" src="#" alt="Image with a function url" title="Image with a function url"><br/><img data-image-source-macro="$ImageVariable"
src="#" alt="Image with a variable url" title="Image with a variable url"></p>
Expand Down
5 changes: 4 additions & 1 deletion examples/macros/fractive.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,8 @@
{ "alias": "red", "replaceWith": "<span style='color:#ff8888'>", "end": "</span>" }
],
"template": "../../templates/basic.html",
"linkTooltips": true
"linkTooltips": true,
"linkTags": {
"external": "&nbsp;<i class=\"fa fa-external-link\" aria-hidden=\"true\"></i>"
}
}
Loading