JSFiddle - React, Tailwind, and code Playground

by somekittens

HTML

<div id="ongoingStory">
    <p>You're standing in a place. There are whatever items here and one or more exits.</p>
    <p>Do you want to take <span id="action1">action 1</span> or <span id="action2">action 2</span>?</p>
</div>

JavaScript

var oneResult = "<p>You take action 1, and some stuff happens.  You can then take <span id=\"action3\">action 3</span> or <span id=\"action4\">action 4</span>.</p>";
var anotherResult = "<p>You take action 2, and other stuff happens.  You can then take <span id=\"action5\">action 5</span> or <span id=\"action6\">action 6</span>.</p>";

var root;
var branch;

function addToStory(root, branch) {
    $("#" + root).addClass("disabled");
    $(branch).appendTo("#ongoingStory").hide().fadeIn(1000);
}

document.getElementById("ongoingStory").addEventListener("click", moveAlong, false);

function moveAlong(e) {
    console.log(e);
    if (e.target !== e.currentTarget) {
        switch (e.target.id) {
            case 'action1':
                addToStory('action1', oneResult);
                break;
            case 'action2':
                addToStory('action2', anotherResult);
                break;
        };
    };
    e.stopPropagation();
}