JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

HTML

<h1>Yann's Story Game</h1>

<span id="intro">
    What is your age?
    <input type="text"></input>
    <button button="button">OK</button>
</span>

<span id="youngPlayer">
You can continue playing but we take no responsibility
<button button="button" data-go="firstScene">OK</button>
</span>

<span id="oldPlayer">
Play on my friend,I hope you a winner!
<button button="button"  data-go="firstScene">OK</button>
</span>

<span id="firstScene">
<part>A high elfe and a dwarf were hanging out at the merchant, waiting to go to the shops.</part>
<part>There was a sale on and both needed some new equipment for their kingdom.</part>
<part>You've never really liked dwarfes. You walk up to him.</part>
<part>The dwarf glares at you.");</part>
<part><b>-You-</b> <i>Step out of the line dwarf, the high elfe goes first!</i></part>
<part><b>-Dwarf-</b> <i>Are you feeling lucky,punk?</i></part>
<part><button button="button"  data-go="dwarfWins">Yes</button></part>
<part><button button="button"  data-go="chest1">No</button></part>
</span>    

<span id="dwarfWins">
  The dwarf uppercuts you and then knees you in the stomach and slaugthers you with his axe.
  <button button="button"  data-go="firstScene">Try again</button>
</span>

<span id="chest1">
  <part>The dwarf knudges you but the high elfe says thank you.</part>
  <part>
  The high elfe hops on the buse then you spy a huge chest on the side of the merchant house
  do you open it yes or no?
  <button button="button"  data-go="todo">Yes</button>
  <button button="button"  data-go="todo">No</button>  
  </part>
</span>

<span id="todo">
  The amazing adventures written by Yann Demuyt end here for now, come back later for more!!!
</span>

CSS

h1 { display:none }
span { display:none; white-space:pre-line }
part { display:none }

JavaScript

//This is the intro
//Fade in the intro, the title (h1)  and give the input box focus
$("#intro").fadeIn(1500);
$("h1").fadeIn(1500);
$("input").focus();


//Silly fiddle, ignore this Yann
window.showPage = function( page )
{
  //Fade out existing page
  $("span:visible").fadeOut(750 , function()
  {
    //Fade in the new page
    $("#"+page).fadeIn(1500, function()
    {
      //Give focus to whatever is appropriate
      if( $("input:visible").length )
        $("input:visible").focus();    
      //else if( $("select:visible").length )
      //  $("select:visible").focus();
      //else
      //  $("button").focus();
      //Unfold the story
      $("#"+page+" part").each( function( i , e ){ $(e).fadeIn( i*600 ) } );
    });
      $("#"+page+" part").each( function( i , e ){ $(e).fadeIn( i*600 ) } );      
  });
}

//Some pure magic to connect buttons and inputboxes to the right function
//Ignore this Yann
$("button").live("click", function(e)
{
  var value;
  //Was there an input box ?
  if( $("input:visible").length )
    value = $("input:visible").val();
  else if( this.dataset.go )
    return showPage( this.dataset.go )    
  else
    value = this.innerText;
  console.log(this, this.parentNode.id,value);
  window[this.parentNode.id]( value );  
});

$("input").live("keypress", function(e)
{
    if( e.charCode == 13 )
        $("button:visible").click();
});


//This is linked to <span id="intro">
window.intro = function( age )
{
  if( age < 18 )
    showPage( "youngPlayer" )
  else
    showPage( "oldPlayer" );
}