npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

if-script-core

v0.5.19

Published

An extremely simple syntax for writing interactive fiction that can be embedded in any website.

Downloads

23

Readme

IF-SCRIPT

An extremely simple syntax for writing interactive fiction that can be embedded in any website.

Make interactive fiction with variables, timers, conditions, music and statistics. The story is parsed into plain HTML, CSS and JavaScript.

Try it!

You can use Markdown to format your story. Markdown cheat-sheet for reference.

Dependencies

Nearley for parsing. Showdown for markdown rendering.

A Regular Expression based parser is on the if-script-regex branch.

Embedding

Sure, you can use the parser on node, but the interpreter will need the DOM to work

  1. Import the library
import { parser, interpreter } from 'if-script-core'
  1. Parse text into a story instance
const myStoryText = '/* my story */'
const story = parser.parseText(myStory)
  1. Load the story instance into the DOM
interpreter.loadStory(story)

The indentation does not matter.

Comments

A comment is a text block that is not integrated into the final model of the story. Comments exist to help write cleaner stories. For example, by pointing out purposes of certain portions of the story.

/* A
 multi-line
 comment */

Variables

Variables truly create dynamic stories. You can use variables to store a lot of things like character names, inventory items, visited scenes, number of things and many others. You can then display the values of these variables anywhere like so:

Your name is ${name}.

Obviously, here, variable name was used to store the name of a character. The variables can also be used in conditional logic to determine which choices and (in a future release) what paragraphs of a section's text should be visible to the reader. You can find more about this under the choices heading.

You can assign variables beforehand inside story settings.

${name='Felicity'}

It is recommended (albeit not required) to keep the titlevariable set as the title of the story.

Story Settings

Story settings allow you to customise the overall experiance of the story. All of the settings are optional. The available settings are:

  • @startAt decides the starting section of a story. (Default: 1)
  • @referrable decides if the older sections remain visible once the reader moves to a new section. (Default: false)
  • @fullTimer decides the amount of time alloted for completing a story. (Default: none)
settings>
   @startAt
   @referrable
   @fullTimer
<settings

Scenes

Scenes are collections of sections

scene>
   @first section_number (optional)
   @music link (optional)
   @sections space_seperated_section_numbers
   @name custom_name_for_scene
 <scene

Sections

Sections are independent locations/situations in a story. These can be reached through choices. Each section can have its own set of settings that allow it to have separate timers that send the reader to a separate section if they do not choose within specified time, and its own music. These features are particularly helpful in dramatic situations.

ss>
   tt> Section Title <tt
   Section text.
   In paragraphs.
   You can use variables here.
   /*
     You can write choices about now.
     Read on to find out how to create them.
   */
<ss

Choices

Choice are the sole method to navigate a story by reaching sections or scenes. To send to a section:

ch>
   You are named five [[5]]
<ch

To send to the beginning of a scene:

ch>
   You are named five [[scene:5]]
<ch

Choices can assign variables.

ch>
   Choose 'Felicity' as your name ${__name} [[5]]
 <ch

Choices can also have input boxes. These input boxes can be used to take in custom values from the user and then stored in variables for later use.

ch>
   Type in your name here: __input ${__name} [[5]]
<ch

Choices can have conditions. Only if these conditions are met is the choice displayed. Available operators are:

  • var1 == var2 Both are equal
  • var1 != var2 Both are inequal
  • var1 >= var2 First is greater than or equal to second
  • var1 <= var2 Second is greater than or equal to first
  • var1 > var2 First is greater than second
  • var1 < var2 Second is greater than first
ch>
   ${__if name == "" || namePower <= 0}
     Type in your name here __input ${__name} [[5]]
<ch

Choices can also do actions like addition (+), subtraction (-), multiplication (*) and division (/) on variables.

  • ${__var1 = var2} Assignment
  • ${__var1 + var2} Addition
  • ${__var1 - var2} Subtraction
  • ${__var1 * var2} Multiplication
  • ${__var1 / var2} Division

In each of these, the first variable is assigned values that result from the operation.

ch>
   The power of your name goes up 10 units and your health 
    is multiplied \${namePower} times.
   ${__namePower + 10} ${__health * namePower} [[5]]
<ch