Quester

by Sam Fereday

HTML

<h3>Quests</h3>
<p>Quests can be seen as a todo list. They can also be invisible to the user and be integrated throughout the story. This is settled upon designing UI and dynamics though.</p>
<div id="quests"></div>

CSS

.completed {
    color: #999;
    text-decoration: line-through;
}
.completed span {
    color: #000;
    text-decoration: none;
}
.active {
    color: #ff0000;
}
span span {
    display: block;
    padding-left: 1em;
}

JavaScript

// Quester.js
var container = document.getElementById('quests');
var allQuests = [];

var Quest = function(id, title, nextSibling){
    this.create.call(this, id, title, nextSibling);
};

Quest.prototype = {
    id: null,
    failed: false,
    complete: false,
    prevSibling: null,
    nextSibling: null,
    chainIndex: 0,
    title: "",
    description: "",
    conditions: [],
    subTasks: [],
    create: function(id, title, nextSibling){
        this.id = id;
        this.title = title;
        allQuests.push(this);
        this.el = document.createElement('span');
        this.el.innerHTML = this.title + "<br />";
        container.appendChild(this.el);
    },
    setNextSibling: function(obj) {
        this.nextSibling = obj;
        this.nextSibling.setPrevSibling(this);
    },
    setPrevSibling: function(obj) {
        this.prevSibling = obj;  
    },
    setParent: function(obj) {
        this.parent = obj;
        this.subTask = true;
    },
    setSubTask: function(obj) {
       obj.setParent(this);
       this.subTasks.push(obj);
       this.el.appendChild(obj.el);
    },
    setComplete: function() {
        this.failed = false;
        this.complete = true;
        if(this.nextSibling) {
            this.nextSibling.setActive();
        }        
        this.el.className = 'completed';
    },
    setFailed: function() {
        this.failed = true;
        this.complete = false;
    },
    setActive: function() {
        this.active = true;
        this.el.className = 'active';
    },
    setConditions: function(str) {
        //        
    },
    checkConditions: function() {
        var complete = true;
        for(var i = 0; i < this.conditions.length; i+=1) {
            if(!this.conditions[i].done) {
                complete = false;
            }
        }
    }
}

// Gets a quest from cache
function getQuest(id) {
    for(var i = 0; i < allQuests.length; i+=1) {
        if(id === allQuests[i].id) {
            return allQuests[i];
       ...