Litten RPG Code Example

by Sam Fereday

HTML

<div class="pure-g">
    <div class="content pure-u-1 pure-u-md-3-4">
        <h5>Story Output:</h5>
        <div id="output"></div>
    </div>
    <div class="content pure-u-1 pure-u-md-3-4">
        <h5>Options:</h5>
        <div id="options"></div>
    </div>
    <div class="content pure-u-1 pure-u-md-3-4">
        <h5>Choose Action:</h5>
        <input id="user-entry" />
        <button id="enter">Enter</button>
    </div>
</div>

CSS

/*!
Pure v0.6.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v^3.0 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html...

JavaScript

// Now to export this lot to Unity! :D

// Accessible API methods thus far:
// - doOutput - Outputs strings to a target.
// - clearOutput - Clears the output target of all strings (may yet remove)
// - start - Starts the component
// - quit - Quits the component, but as mentioned above, this may be removed as ideally quitting would be handled outside this

// To be added:
// - bindData - Binds both a content map and level data json to the components memory

// This object houses all the possible strings throughout. Potentially we could have use of the same strings again. No strings are related, but constructed in an order that makes sense. This is determined by the sentence / event factory.
var contentMap = [{
    "id": "1",
    "str": "You awaken from your slumber...",
    "type": "choice",
    "children": [{
        "id": "1a",
        "destinationId": "2",
        "str": "Sit up in bed."
    }, {
        "id": "1b",
        "destinationId": "3",
        "str": "Try to go back to sleep."
    }, {
        "id": "1c",
        "destinationId": "3",
        "str": "This option shouldn't appear."
    }]
}, {
    "id": "2",
    "str": "The air is cold, there's a window open. You still feel quite sleepy...",
    "type": "choice",
    "children": [{
        "id": "2a",
        "destinationId": "3",
        "str": "Turn on the light."
    }, {
        "id": "2b",
        "destinationId": "3",
        "str": "Check the time on your alarm clock."
    }, {
        "id": "2c",
        "destinationId": "3",
        "str": "Lay back down and try not to think about it."
    }]
}, {
    "id": "3",
    "str": "That's all for now. You fall asleep wherever you are.",
    "type": "levelEnd"
}];

// This is our initial listing of id's that we need in a particular level. We can bind our content to these objects and create the packets that could potentiall be used by our player throughout, or the event system. So if you want the event in your level, it HAS to exist in here right...