Say and Character Macro Set

README.md

<<character name imageSrc>> / setup.addCharacter(name, imageSrc)

Add character names to associate with image sources (as URLs). Must be done in StoryInit or the Story JavaScript area. Character names become macros later.

<<say name imageSrc>>...<</say>> / setup.say(outputElement, characterName, text, imageSrc)

Create a speech box with the given character name and image, which says the indicated text content.

Character Name Macros

Characters added via <<character>> / setup.addCharacter() are added as macros, e.g. <<lisa>>...<</lisa>> that can be used as shortcuts for the <<say>> macro. These macros are case-sensitive: <<character 'Lisa' 'assets/portraits/lisa.png'>> would yield the macro <<Lisa>>, while <<character 'lisa' 'assets/portraits/lisa.png'>> would yield the macro <<lisa>>. The name is capitalized by default in the output, so lisa or Lisa becomes Lisa.

Styling Options

Output elements are contained within a <div> element with the class say and a class based on the slugified character name. The portrait image is .say img, the character name area is .say p:first-of-type, and the text content area is .say p:last-of-type.

say.css

.say {
    border: 1px solid #eee;
    overflow: auto;
}

.say img {
    max-width: 20%;
    float: left;
    margin-right: 1em;
}

.say p:first-of-type {
    font-weight: bold;
    margin: 0.2em 0;
    border-bottom: 1px solid #eee;
}

.say p:last-of-type {
    padding: 0.5em;
    margin: 0;
}

say.js

var characters = new Map();

function addCharacter (name, icon) {
    if (State.length) {
        throw new Error('addCharacter() -> must be called before story starts');
    }
    if (!name || !icon) {
        console.error('addCharacter() -> invalid arguments');
        return;
    }
    if (characters.has(name)) {
        console.error('addCharacter() -> overwriting character "' + name + '"');
    }
    characters.set(name, icon);
}

function say (output, character, text, imgSrc) {
    return $(document.createElement('div'))
        .addClass(Util.slugify(character) + ' say')
        .append($(document.createElement('img'))
            .attr('src', imgSrc || characters.get(character) || ''))
        .append($(document.createElement('p'))
            .wiki(character.toUpperFirst()))
        .append($(document.createElement('p'))
            .wiki(text))
        .appendTo($(output));
}

setup.say = say;
setup.addCharacter = addCharacter;

Macro.add('character', {
    handler : function () {
        addCharacter(this.args[0], this.args[1]);
    }
});

$(document).one(':passagestart', function () {
    var names = Array.from(characters.keys());
    names.push('say');
    Macro.add(names, {
        tags : null,
        handler : function () {
            if (this.name !== 'say') {
                say(this.output, this.name, this.payload[0].contents);
            } else {
                say(this.output, this.args[0], this.payload[0].contents, this.args[1]);
            }
        }
    });
});