Stagehand

Example 4: Sharing scenes, sharing stages, nesting, and special keywords

You can assign multiple stages and scenes to actors (separated by commas), and you can nest scenes and stages to your heart's content; hey, whether the resulting states make any sense is up to you.

There are three special keywords in Stagehand: toggle, all, and !.

Sometimes, instead of switching between actors, you might want to toggle a single actor (or group of actors). If an actor has a scene of toggle, its stage is given two scenes, 'toggle on' and 'toggle off'.

If an actor has a scene of all, it's visible for all scenes of a stage, and that stage is also given a scene option of 'none' in the toolbar (which toggles every associated actor off),

If you need to have an actor show for everything except a particular scene (or scenes), start the scene name with !, e.g. !pants.

Example output

(Click on the Stagehand icon in the upper left to toggle the toolbar)

Source code

<div data-stage='toggletown' data-scene='toggle'>
  You can toggle me on and off.
</div>

<div data-stage='hammertime, hammerpants' data-scene='all'>
  I'm visible for all scenes of 'hammertime' and 'hammerpants'.
</div>

<div data-stage='hammertime' data-scene='stop, collaborate, listen'>
  <span data-stage='hammertime' data-scene='stop' data-scene-class='highlighted'>
    Stop
  </span>
  <span data-stage='hammertime' data-scene='collaborate' data-scene-class='highlighted'>
    Collaborate
  </span>
  and
  <span data-stage='hammertime' data-scene='listen' data-scene-class='highlighted'>
    Listen
  </span>
</div>

<div data-stage='hammertime' data-scene='!stop'>
  I'm visible for all scenes of 'hammertime' EXCEPT 'stop'.
</div>

<div data-stage='hammerpants' data-scene='sparkly'>
  I'm scene 'sparkly' of 'hammerpants'.
</div>