rpg-cards/generator/js/card.ts

module rpgcards {

    function normalizeTag(tag: string): string {
        return tag.trim().toLowerCase();
    }

    function splitParams(value: string): string[] {
        return value.split("|").map(function (str) { return str.trim(); });
    }

    export class Options {
        foreground_color: string;
        background_color: string;
        empty_color: string;
        default_color: string;
        default_icon: string;
        default_title_size: string;
        page_size: string;
        page_rows: number;
        page_columns: number;
        card_arrangement: string;
        card_size: string;
        card_count: number;
        icon_inline: boolean;

        constructor() {
            this.foreground_color = "white";
            this.background_color = "white";
            this.empty_color = "white";
            this.default_color = "black";
            this.default_icon = "ace";
            this.default_title_size = "13pt";
            this.page_size = "A4";
            this.page_rows = 3;
            this.page_columns = 3;
            this.card_arrangement = "doublesided";
            this.card_size = "25x35";
            this.card_count = null;
            this.icon_inline = true;
        }
    }

    export class Card {
        count: number;
        title: string;
        title_size: string;
        color: string;
        color_front: string;
        color_back: string;
        icon: string;
        icon_front: string;
        icon_back: string;
        contents: string[];
        tags: string[];

        constructor() {
            this.count = 1;
            this.title = "New card";
            this.title_size = null;
            this.color = null;
            this.color_front = null;
            this.color_back = null;
            this.icon = null;
            this.icon_front = null;
            this.icon_back = null;
            this.contents = [];
            this.tags = [];
        }

        static fromJSON(json: any): Card {
            var result = new Card;
            result.count = json.count || 1;
            result.title = json.title || "";
            result.title_size = json.title_size || null;
            result.color = json.color || null;
            result.color_front = json.color_front || null;
            result.color_back = json.color_back || null;
            result.icon = json.icon || null;
            result.icon_front = json.icon_front || null;
            result.icon_back = json.icon_back || null;
            result.contents = json.contents || [];
            result.tags = json.tags || [];
            return result;
        }

        public toJSON(): any {
            return {
                count: this.count,
                title: this.title,
                title_size: this.title_size,
                color: this.color,
                color_front: this.color_front,
                color_back: this.color_back,
                icon: this.icon,
                icon_front: this.icon_front,
                icon_back: this.icon_back,
                contents: this.contents.slice(),
                tags: this.tags.slice()
            }
        }

        public duplicate(): Card {
            return Card.fromJSON(this.toJSON());
        }

        public hasTag(tag: string): boolean {
            var index = this.tags.indexOf(normalizeTag(tag));
            return index > -1;
        }

        public addTag(tag: string): void {
            if (!this.hasTag(tag)) {
                this.tags.push(normalizeTag(tag));
            }
        }

        public removeTag(tag: string): void {
            var ntag = normalizeTag(tag);
            this.tags = this.tags.filter(function (t) {
                return ntag != t;
            });
        }

        public getTitle(options: Options): string {
            return this.title || "";
        }
        public getTitleSize(options: Options): string {
            return this.title_size || options.default_title_size || "13pt";
        }
        public getColorFront(options: Options): string {
            return this.color_front || this.color || options.default_color || "black";
        }
        public getColorBack(options: Options): string {
            return this.color_back || this.color || options.default_color || "black";
        }
        public getIconFront(options: Options): string {
            return this.icon_front || this.icon || options.default_icon || "ace";
        }
        public getIconBack(options: Options): string {
            return this.icon_back || this.icon || options.default_icon || "ace";
        }
    };

    type ContentGeneratorFunction = (params: string[], card: Card, options: Options, ind: string, ind0: string) => string;
    type CardGeneratorFunction = (card: Card, options: Options, ind: string, ind0: string) => string;

    export class CardHtmlGenerator {
        constructor() {
        }

        private  _icon(src: string, ind: string, ind0: string): string {
            return ind + '<card-icon src="/icons/' + src + '.svg"></card-icon>\n';
        }

        private  _subtitle(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var text = params[0] || "";
            return ind + '<card-subtitle>' + text + '</card-subtitle>\n';
        }

        private  _ruler(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            return ind + '<card-rule></card-rule>\n';
        }

        private  _boxes(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var count = params[0] || 1;
            var size = params[1] || 3;
            return ind + '<card-boxes size="' + size + '" count="' + count + '"></card-boxes>\n';
        }

        private  _property(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var header = params[0] || "";
            var text = params[1] || "";
            var result = "";
            result += ind + '<card-property>\n';
            result += ind + ind0 + '<h4>' + header + '</h4>\n';
            result += ind + ind0 + '<p>' + text + '</p>\n';
            result += ind + '</card-property>\n';
            return result;
        }

        private  _description(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var header = params[0] || "";
            var text = params[1] || "";
            var result = "";
            result += ind + '<card-description>\n';
            result += ind + ind0 + '<h4>' + header + '</h4>\n';
            result += ind + ind0 + '<p>' + text + '</p>\n';
            result += ind + '</card-description>\n';
            return result;
        }

        private  _text(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var text = params[0] || "";
            var result = "";
            result += ind + '<card-description>\n';
            result += ind + ind0 + '<p>' + text + '</p>\n';
            result += ind + '</card-description>\n';
            return result;
        }

        private  _dndstats(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var stats = ["str", "dex", "con", "int", "wis", "cha"];
            var result = "";
            result += ind + '<card-dndstats';
            for (var i = 0; i < stats.length; ++i) {
                var value = parseInt(params[0], 10) || "";
                var stat = stats[i];
                result += ' ' + stat + '="' + value + '"';
            }
            result += '></card-dndstats>\n';
            return result;
        }

        private  _bullet(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var text = params[0] || "";
            return ind + '<card-bullet>' + text + '</card-bullet>\n';
        }

        private  _section(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var text = params[0] || "";
            return ind + '<card-section>' + text + '</card-section>\n';
        }

        private  _fill(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var size = params[0] || "1";
            return ind + '<card-fill size="' + size + '"></card-fill>\n';
        }

        private  _unknown(params: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var text = params.join(' | ');
            return ind + '<card-description><p>' + text + '</p></card-description>\n';
        }

        private  _empty(params: string[], card: Card, options: Options, ind: string, ind0: string) {
            return '';
        }

        private  _contents(contents: string[], card: Card, options: Options, ind: string, ind0: string): string {
            var result = "";
            result += ind + '<card-contents>\n';
            result += contents.map(function (value) {
                var parts = splitParams(value);
                var name = parts[0];
                var params = parts.splice(1);
                var generator: ContentGeneratorFunction = null;
                switch (name) {
                    case "subtitle": generator = this._subtitle; break;
                    case "property": generator = this._property; break;
                    case "rule": generator = this._ruler; break;
                    case "ruler": generator = this._ruler; break;
                    case "boxes": generator = this._boxes; break;
                    case "description": generator = this._description; break;
                    case "dndstats": generator = this._dndstats; break;
                    case "text": generator = this._text; break;
                    case "bullet": generator = this._bullet; break;
                    case "fill": generator = this._fill; break;
                    case "section": generator = this._section; break;
                    case "disabled": generator = this._empty; break;
                    case "": generator = this._empty; break;
                    default: return this._unknown(parts, card, options, ind, ind0);
                }

                return generator(params, card, options, ind + ind0, ind);
            }).join("\n");
            result += ind + '</card-contents>\n';
            return result;
        }

        private  _title(card: Card, options: Options, ind: string, ind0: string): string {
            var title = card.getTitle(options);
            var title_size = card.getTitleSize(options)
            var icon = card.getIconFront(options);
            var result = "";
            result += ind + '<card-title size="' + title_size + '">\n';
            result += ind + ind0 + '<h1>' + title + '</h1>\n';
            result += ind + ind0 + '<h2>' + "" + '</h2>\n';
            result += this._icon(icon, ind + ind0, ind0);
            result += ind + '</card-title>\n';
            return result;
        }

        private  _card_front(card: Card, options: Options, ind: string, ind0: string): string {
            var result = "";
            result += this._title(card, options, ind + ind0, ind0);
            result += this._contents(card.contents, card, options, ind + ind0, ind0);
            return result;
        }

        private  _card_back(card: Card, options: Options, ind: string, ind0: string): string {
            var icon = card.getIconBack(options);
            var result = "";
            result += ind + '<card-back>\n';
            result += this._icon(icon, ind + ind0, ind);
            result += ind + '</card-back>\n';
            return result;
        }

        private  _card_empty(options: Options, ind: string, ind0: string): string {
            return '';
        }

        private  _card(options: Options, ind: string, ind0: string, content: string, color: string): string {
            var size = options.card_size || "25x35";
            var result = "";
            result += ind + '<rpg-card color="' + color + '" size="' + size + '">\n';
            result += content;
            result += ind + '</rpg-card>\n';
            return result;
        }

        /** Generates HTML for the front side of the given card */
        public  card_front(card: Card, options: Options, indent: string): string {
            var content = this._card_front(card, options, "", indent);
            return this._card(options, "", indent, content, card.getColorFront(options));
        }

        /** Generates HTML for the back side of the given card */
        public  card_back(card: Card, options: Options, indent: string): string {
            var content = this._card_back(card, options, "", indent);
            return this._card(options, "", indent, content, card.getColorBack(options));
        }

        /** Generates HTML for an empty given card */
        public  card_empty(options: Options, indent: string): string {
            var content = this._card_empty(options, "", indent);
            return this._card(options, "", indent, content, options.empty_color);
        }
    }

    class CardPage<T> {
        rows: number;
        cols: number;
        cards: T[];

        constructor(rows: number, cols: number) {
            this.rows = rows;
            this.cols = cols;
            this.cards = [];
        }

        /** Returns an empty page with the same dimensions */
        public newPage(): CardPage<T> {
            return new CardPage<T>(this.rows, this.cols);
        }

        private _posToIndex(row: number, col: number): number {
            return row * this.cols + col;
        }

        /** Adds one card to the page */
        public addCard(card: T): void {
            if (this.capacity() === 0) {
                throw new Error("This page is full.");
            }
            this.cards.push(card);
        }

        /** 
            Adds several copies of a card to the page.
            Returns the number of copies that did not fit on the page.
        */
        public addCards(card: T, count: number): number {
            while (this.capacity() > 0 && count > 0) {
                this.addCard(card);
                --count;
            }
            return count;
        }

        /** Fills all remaining slots on the current row with the given card */
        public fillRow(card: T): void {
            while (this.capacityRow() > 0) {
                this.addCard(card);
            }
        }

        /** Fills all remaining slots on the page with empty cards */
        public fillPage(card: T): void {
            while (this.capacity() > 0) {
                this.addCard(card);
            }
        }

        /** Empty slots on the page */
        public capacity(): number {
            return this.cards.length - this.rows * this.cols;
        }

        /** Empty slots on the current line */
        public capacityRow(): number {
            return this.capacity() % this.cols;
        }

        /** Flip card slots horizontally */
        public flipH() {
            if (this.capacity() > 0) {
                throw new Error("Cannot perform this operation while the page is not full");
            }

            for (var r = 0; r < Math.floor(this.rows / 2); ++r) {
                for (var c = 0; c < this.cols; ++c) {
                    var indexL = this._posToIndex(r, c);
                    var indexR = this._posToIndex(this.rows - r - 1, c);
                    var cardL = this.cards[indexL];
                    var cardR = this.cards[indexR];
                    this.cards[indexL] = cardR;
                    this.cards[indexR] = cardL;
                }
            }
        }
    }

    class CardPageSet<T> {
        rows: number;
        cols: number;
        pages: CardPage<T>[];

        constructor(rows: number, cols: number) {
            this.rows = rows;
            this.cols = cols;
            this.pages = [];
        }

        public lastPage(): CardPage<T> {
            if (this.pages.length === 0) {
                return null;
            } else {
                return this.pages[this.pages.length - 1];
            }
        }

        public addPage(): CardPage<T> {
            var newPage = new CardPage<T>(this.rows, this.cols);
            this.pages.push(newPage);
            return newPage;
        }

        /**
            Adds one card to the last page.
            Adds a new pages if necessary.
        */
        public addCard(card: T): void {
            var page = this.lastPage();
            if (page === null || page.capacity() === 0) {
                page = this.addPage();
            }
            page.addCard(card);
        }

        /** 
            Adds several copies of a card to the last page.
            Adds new pages if necessary.
        */
        public addCards(card: T, count: number): void {
            for (let i = 0; i < count; ++i) {
                this.addCard(card);
            }
        }

        public forEach(fn: (page: CardPage<T>)=>void) {
            this.pages.forEach(fn);
        }

        public merge(other: CardPageSet<T>): CardPageSet<T> {
            if (this.pages.length !== other.pages.length) {
                throw new Error("This function is only for merging two equally sized page sets");
            }
            var result = new CardPageSet<T>(this.rows, this.cols);
            for (var i = 0; i < this.pages.length; ++i) {
                result.pages.push(this.pages[i]);
                result.pages.push(other.pages[i]);
            }
            return result;
        }
    }

    export class PageHtmlGenerator {
        indent: string;

        constructor() {
            this.indent = "  ";
        }

        private  _pageColor(page: number, options: Options): string {
            if ((options.card_arrangement == "doublesided") && (page % 2 == 1)) {
                return options.background_color;
            } else {
                return options.foreground_color;
            }
        }

        private _wrap(pageSet: CardPageSet<string>, options: Options) {
            var size = options.page_size || "A4";
            var result = "";
            for (var i = 0; i < pageSet.pages.length; ++i) {
                var page = pageSet.pages[i];
                var style = 'style="background-color:' + this._pageColor(i, options) + '"';
                result += '<page class="page page-preview" size="' + size + '" ' + style + '>\n';
                result += page.cards.join("");
                result += '</page>\n';
            }
            return result;
        }

        private  _generatePagesDoublesided(cards: Card[], options: Options, rows: number, cols: number, generator: CardHtmlGenerator): CardPageSet<string> {
            var front_pages: CardPageSet<string> = new CardPageSet<string>(rows, cols);
            var back_pages: CardPageSet<string> = new CardPageSet<string>(rows, cols);
            var empty = generator.card_empty(options, this.indent);

            // Fill pages with cards
            for (let i = 0; i < cards.length; ++i) {
                var card = cards[i];
                var front = generator.card_front(card, options, this.indent);
                var back = generator.card_back(card, options, this.indent);
                front_pages.addCards(front, card.count);
                back_pages.addCards(back, card.count);
            }

            // Fill empty slots
            front_pages.forEach((page) => page.fillPage(empty));
            back_pages.forEach((page) => page.fillPage(empty));

            // Shuffle back cards so that they line up with their corresponding front cards
            back_pages.forEach((page) => page.flipH());

            // Interleave front and back pages so that we can print double-sided
            return front_pages.merge(back_pages);
        }

        private _generatePagesFrontOnly(cards: Card[], options: Options, rows: number, cols: number, generator: CardHtmlGenerator): CardPageSet<string> {
            var pages: CardPageSet<string> = new CardPageSet<string>(rows, cols);
            var empty = generator.card_empty(options, this.indent);

            // Fill pages with cards
            for (let i = 0; i < cards.length; ++i) {
                var card = cards[i];
                var front = generator.card_front(card, options, this.indent);
                pages.addCards(front, card.count);
            }

            return pages;
        }

        private _generatePagesSideBySide(cards: Card[], options: Options, rows: number, cols: number, generator: CardHtmlGenerator): CardPageSet<string> {
            if (cols < 2) {
                throw new Error("Need at least two columns for side-by-side");
            }
            var pages: CardPageSet<string> = new CardPageSet<string>(rows, cols);
            var empty = generator.card_empty(options, this.indent);

            // Fill pages with cards (two at a time)
            for (let i = 0; i < cards.length; ++i) {
                var card = cards[i];
                var front = generator.card_front(card, options, this.indent);
                var back = generator.card_back(card, options, this.indent);
                if (pages.lastPage().capacityRow() < 2) {
                    pages.lastPage().fillRow(empty);
                }
                pages.addCards(front, card.count);
                pages.addCards(back, card.count);
            }

            return pages;
        }

        private _generatePages(cards: Card[], options: Options, rows: number, cols: number, generator: CardHtmlGenerator): CardPageSet<string> {
            switch (options.card_arrangement) {
                case "doublesided": return this._generatePagesDoublesided(cards, options, rows, cols, generator);
                case "front_only": return this._generatePagesFrontOnly(cards, options, rows, cols, generator);
                case "side_by_side": return this._generatePagesSideBySide(cards, options, rows, cols, generator);
                default: throw new Error("Unknown card arrangement");
            }
        }

        private _generateStyle(options) {
            var size = "a4";
            switch (options.page_size) {
                case "A3": size = "A3 portrait"; break;
                case "A4": size = "210mm 297mm"; break;
                case "A5": size = "A5 portrait"; break;
                case "Letter": size = "letter portrait"; break;
                case "25x35": size = "2.5in 3.5in"; break;
                default: size = "auto";
            }

            var result = "";
            result += "<style>\n";
            result += "@page {\n";
            result += "    margin: 0;\n";
            result += "    size:" + size + ";\n";
            result += "    -webkit-print-color-adjust: exact;\n";
            result += "}\n";
            result += "</style>\n";
            return result;
        }

        public generateHtml(cards: Card[], options: Options) {
            options = options || new Options();
            var rows = options.page_rows || 3;
            var cols = options.page_columns || 3;

            // Generate the HTML for each card
            var generator = new CardHtmlGenerator();
            var pages: CardPageSet<string> = this._generatePages(cards, options, rows, cols, generator);

            // Wrap all pages in a <page> element
            var document = this._wrap(pages, options);

            // Generate the HTML for the page layout
            var style = this._generateStyle(options);

            // Wrap all pages in a <page> element and add CSS for the page size
            var result = "";
            result += style
            result += document;
            return result;
        }

        public insertInto(cards: Card[], options: Options, container: HTMLElement) {

            // Clear the previous content of the document
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }

            // Insert the HTML
            var html = this.generateHtml(cards, options);
            container.innerHTML = html;
        }
    }
}