Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

Dark Ages: Inquisitor - Pooled Backgrounds (V20)

Author: izzyjuan

Slug: dark_ages_inqusitior_v20_pooled_backgrounds

Type: GameCharacter

System: World of Darkness

DST Source Code

HTML Template

<div class="clg-container margin-bottom-24">
    <div class="clg-container-main width100">
        <h2 class="width100 text-left border-bottom margin-top-0">Inquisitor (V20) - Pooled Backgrounds</h2>
        <div class="clg-row-between margin-bottom-4">
            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>Council Name</div>
                <div>
                    <span class="dsf dsf_name"></span>
                </div>
            </div>

            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>Chronicle</div>
                <div>
                    <span class="dsf dsf_campaign"></span>
                </div>
            </div>
            
            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>Player</div>
                <div>
                    <span class="dsf dsf_player"></span>
                </div>
            </div>
        </div>

        <h4>Members</h4>

        <div class="clg-row-between margin-bottom-4">
            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_1">None</span>
                </div>
            </div>

            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_2"></span>
                </div>
            </div>
            
            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_3"></span>
                </div>
            </div>
        </div>

        <div class="clg-row-between margin-bottom-4">
            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_4"></span>
                </div>
            </div>

            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_5"></span>
                </div>
            </div>
            
            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_6"></span>
                </div>
            </div>
        </div>

        <div class="clg-row-between margin-bottom-4">
            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_7"></span>
                </div>
            </div>

            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_8"></span>
                </div>
            </div>
            
            <div class="clg-col-3 clg-row-between margin-bottom-0">
                <div>
                    <span class="dsf dsf_player_9"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="clg-container-toggle width100">
        <div class="clg-container-menu width100">
            <div class="clg-container-menu-item clg-active" data-target='clg-container-backgrounds'>
                <a class="clg-toggle-menu" data-target='clg-container-background'>
                    backgrounds
                </a>
            </div>

            <div class="clg-container-menu-item" data-target='clg-container-history'>
                <a class="clg-toggle-menu" data-target='clg-container-background'>
                    history
                </a>
            </div>

            <div class="clg-container-menu-item" data-target='clg-container-chapter-house'>
                <a class="clg-toggle-menu" data-target='clg-container-chapter-house'>
                    chapter-house
                </a>
            </div>

            <div class="clg-container-menu-item" data-target='clg-container-notes'>
                <a class="clg-toggle-menu" data-target='clg-container-notes'>
                    notes
                </a>
            </div>
        </div>

        <div class="clg-container-item clg-container-backgrounds clg-active">
            <h3 class="width100 text-left border-bottom margin-top-16">Backgrounds</h3>
            <div class="clg-row-between margin-bottom-8" style="align-items: flex-start;">
                <div class="clg-col-3 clg-col clg-backgrounds-pooled-1"></div>
                <div class="clg-col-3 clg-col clg-backgrounds-pooled-2"></div>
                <div class="clg-col-3 clg-col clg-backgrounds-pooled-3"></div>
            </div>
        </div>

        <div class="clg-container-item clg-container-chapter-house">
            <h3 class="width100 text-left border-bottom margin-top-16">Chapter-House</h3>
            <div class="clg-col width100 margin-bottom-8">
                <h4 class="width100">Details</h4>
                <div class="clg-row-between width100">
                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">Leader:</div>
                            <div>
                                <span class="dsf dsf_ch-leader">n/a</span>        
                            </div>
                        </div> 
                    </div>

                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">Master-at-Arms:</div>
                            <div>
                                <span class="dsf dsf_ch-master-at-arms">n/a</span>        
                            </div>
                        </div>                    
                    </div>

                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">Affiliation</div>
                            <div>
                                <span class="dsf dsf_ch-affiliation">n/a</span>        
                            </div>
                        </div>                    
                    </div>
                </div>            

                <div class="clg-row-between">
                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">Size:</div>
                            <div>
                                <span class="dsf dsf_ch-size">0</span>        
                            </div>
                        </div> 
                    </div>

                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">Security:</div>
                            <div>
                                <span class="dsf dsf_ch-security">0</span>        
                            </div>
                        </div>                    
                    </div>


                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">Holy Ground:</div>
                            <div>
                                <span class="dsf dsf_ch-holy-ground">0</span>        
                            </div>
                        </div>                    
                    </div>
                </div>   

                <div class="clg-row-between">
                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">Interrogation Room:</div>
                            <div>
                                <span class="dsf dsf_ch-holdings">0</span>        
                            </div>
                        </div> 
                    </div>

                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">&nbsp;</div>
                        </div>                    
                    </div>

                    <div class="clg-col clg-col-3">
                        <div class="clg-row-between">
                            <div class="text-bold">&nbsp;</div>
                        </div>                    
                    </div>
                </div>
            </div>
        </div>
        
        <div class="clg-container-item clg-container-history">
            <h3 class="width100 text-left border-bottom margin-top-16">History</h3>
            <div class="margin-bottom-16 clg-row-between">
                <div class='clg-col-80'>
                    <span class="dsf dsf_bio"></span>
                </div>

                <div class="clg-col-5 clg-img-container">
                    <span class="dsf dsf_avatar_image"></span>
                </div>
            </div>
        </div>

        <div class="clg-container-item clg-container-notes">
            <h3 class="width100 text-left border-bottom margin-top-16">Notes</h3>
            <div class="clg-col">
                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes0"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes1"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes2"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes3"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes4"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes5"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes6"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes7"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes8"></span>
                </div>

                <div class="margin-bottom-8">
                    <span class="dsf dsf_notes9"></span>
                </div>
            </div>
        </div>
    </div>

    <h3 class="width100">&nbsp;</h3>

    <div class="clg-row-between margin-bottom-24 margin-top-24">
        <div>
            Author: <span class="dsf dsf_dst_author">Izzy Juan</span>        
        </div>
    </div>
</div>

CSS

.ds_dark_ages_inqusitior_v20_pooled_backgrounds {
    font-family: Papyrus, fantasy, sarif;
    font-size: 16px; 
    color: #313131;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds input {
    min-width: 125px !important;
    word-wrap: wrap !important;
    max-height: 20vh !important;
    padding: 4px !important;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds div,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds ul,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds ol {
    font-family: Papyrus, fantasy, sarif;
    font-size: 0.9em; 
    color: #313131;
    font-weight: 700;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds p {
    font-family: Papyrus, fantasy, sarif;
    font-size: 0.9em; 
    color: #313131;
    font-weight: 500;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds div span,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds p span,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds ul span,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds ol span{
    font-family: sans-sarif;
    font-weight: 400;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .dsf { font-family: Papyrus, fantasy, sarif !important; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds h1, 
.ds_dark_ages_inqusitior_v20_pooled_backgrounds h2, 
.ds_dark_ages_inqusitior_v20_pooled_backgrounds h3 {
    font-family: cursive, fantasy, sarif; 
    font-weight: 700;
    text-transform: uppercase;
    color: #202020;
    margin: 16px 0 8px;
    border-bottom: 1px solid; 
    padding: 0 0 8px;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds h4, 
.ds_dark_ages_inqusitior_v20_pooled_backgrounds h5, 
.ds_dark_ages_inqusitior_v20_pooled_backgrounds h6 {
    font-family: cursive, fantasy, sarif; 
    font-weight: 400;
    text-transform: capitalize;;
    color: #202020;
    margin: 8px 0;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds h6 {
    border-bottom: 1px solid; 
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds table {
    width: 100%;
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.24);
    overflow: hidden;
    border-spacing: 0px;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds table tr { width: 100%; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds table tr th {
    font-family: cursive, fantasy, sarif;
    font-weight: 700;
    font-size: 0.95em;
    padding: 4px 8px;
    text-align: left;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds table tr td {
    font-weight: 500;
    font-size: 0.9em;
    padding: 4px 8px;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds table tr td span {
    font-family: sans-serif;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds table tbody tr:nth-of-type(odd) {
    background-color: #fff;
    color: #313131;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds table tbody tr:nth-of-type(even) {
    background-color: #e9e9e9;
    color: #313131;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-select-box {
    width: 100%;
    padding: 4px 2px;
    font-size: 1em;
    font-family: Papyrus, fantasy, sarif !important;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container {
    width: calc(100% - 48px);
    max-width: 724px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.24);
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.16);
    background-color: #f1f3f5;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-row-between {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between !important;
    align-items: center;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-row-between.flex-center {
    align-items: center !important;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-dots,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-sqaures {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% - 32px) !important;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-dots > div {
    margin-left: 2px;
    height: 0.85em;
    width: 0.85em;
    border: 1px solid #313131;
    background-color: transparent; 
    border-radius: 50%;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-sqaures > div {
    margin-left: 2px;
    height: 0.85em;
    width: 0.85em;
    border: 1px solid #313131;
    background-color: transparent; 
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-dots > div.clg-active {   
    border: 1px solid #313131;
    background-color: #313131; 
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-col > div {
    width: 100%;
    /*margin: 0 0 4px 0 !important;*/
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-hr { 
    border-bottom: 1px solid rgba(0,0,0,0.24); 
    height: 1px; 
    width: 100%; 
    margin: 8px 0;

}


.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-col-80 { width: calc(80% - 4px); }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-col-75 { width: calc(75% - 8px); }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-col-5 { width: calc(20% - 4px); }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-col-4 { width: calc(25% - 8px); }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-col-3 { width: calc(33% - 8px); }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-col-2 { width: calc(50% - 16px); }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-img-container {
    /*width: 100%;*/
    height: auto;
    min-height: 5em;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.24);
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-img-container > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .text-center { text-align: center; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .text-left { text-align: left; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .text-right { text-align: right; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .text-dark { font-weight: 700; font-size: 1.25em; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-other-abilities { 
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; 
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-hidden { display: none; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-hidden.clg-show-edit { display: flex !important; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-show-edit.clg-other-abilities { 
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; 
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-show-edit.clg-other-abilities h1,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-show-edit.clg-other-abilities h2,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-show-edit.clg-other-abilities h3,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-show-edit.clg-other-abilities h4,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-show-edit.clg-other-abilities h5,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-show-edit.clg-other-abilities h6 { width: 100%; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-bottom-0 { margin-bottom: 0px; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-bottom-4 { margin-bottom: 4px; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-bottom-8 { margin-bottom: 8px; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-bottom-16 { margin-bottom: 16px; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-bottom-24 { margin-bottom: 24px; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-top-0 { margin-top: 0px; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-top-4 { margin-top: 4px; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-top-8 { margin-top: 8px; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-top-16 { margin-top: 16px; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .margin-top-24 { margin-top: 24px; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .width100 { width: 100%; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-anchor { position: relative; }
.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-icon {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
} 

.ds_dark_ages_inqusitior_v20_pooled_backgrounds.editable .clg-add-class {
    cursor: pointer;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-main,
.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-toggle { width: 100%; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    margin: 24px 0;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-menu .clg-container-menu-item {
    padding: 8px 16px;
    background-color: #f1f3f5;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-menu .clg-container-menu-item.clg-active {
    background-color: #fff;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-menu .clg-container-menu-item a { 
    color: #313131; 
    text-transform: capitalize;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-menu .clg-container-menu-item a:hover { 
    color: #130947;
}

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-item { display: none; }

.ds_dark_ages_inqusitior_v20_pooled_backgrounds .clg-container-item.clg-active { display: block; width: 100%;}

Javascript

const BACKGROUNDS_1 = [
    {
        title: 'Allies',
        text: 'allies'
    }, {
        title: 'Arcane',
        text: 'arcane'
    }, {
        title: 'Armory',
        text: 'armory'
    }, {
        title: 'Chapter-House',
        text: 'chapterhouse'
    }, {
        title: 'Contacts',
        text: 'contacts'
    }, {
        title: 'Destiny',
        text: 'destiny'
    }
];

const BACKGROUNDS_2 = [
    {
        title: 'Domain',
        text: 'domain'
    }, {
        title: 'Exposure',
        text: 'exposure'
    }, {
        title: 'Flock',
        text: 'flock'
    }, {
        title: 'Holy Relic',
        text: 'holyrelic'
    }, {
        title: 'Influence',
        text: 'Influence'
    }, {
        title: 'Library',
        text: 'library'
    },
];

const BACKGROUNDS_3 = [
    {
        title: 'Mentor',
        text: 'mentor'
    }, {
        title: 'Rank',
        text: 'rank'
    }, {
        title: 'Resources',
        text: 'resources'
    }, {
        title: 'Retainers',
        text: 'retainers'
    }, {
        title: 'Status',
        text: 'status'
    }
];

let clg_mf_arr = {
    merits: [],
    flaws: []
}

const ds_dark_ages_inquisitor_v20_toggleDot = (str) => {
    let r = 0;
    if ($(str).hasClass('clg-active')) {
        $(str).removeClass('clg-active');
        r = -1;
    } else {
        $(str).addClass('clg-active');
    }

    return r;
}

const setCombatTable = (arr) => {
    let html = '';
    for (const item of arr) {
        html += `<tr>
            <td>${item.weapon}</td>
            <td>${item.difficulty}</td>
            <td>${item.damage}</td>
            <td>${item.range}</td>
            <td>${item.rate}</td>
            <td>${item.clip}</td>
            <td>${item.conceal}</td>
        </tr>`;
    }

    $('.clg-combat-table').prepend(html);

    return null;
}

const setSelectBox = (arr, target) => {
    for (const item of arr) {
        // console.log('item: ', item);

        let html = `<option value='${item}'>${item}</option>`;

        $(target).append(html);
    }    
}

const setAbility = (str, title, type, value) => {
    str = str.toLowerCase();
    if (typeof title === 'undefined') { title = 'not listed'; }
    if (typeof type === 'undefined') { type = 'skills'; }
    if (typeof value === 'undefined') { value = 0; }

    let classes = 'cta-dot';

    if (value) { classes += ' clg-active'; }

    let html = `<div class="clg-row-between margin-bottom-4 flex-center">
            <div>${title}</div>
            <div class='clg-dots clg-dots-${str}'>
                <div class="${classes} clg-dsf_${str}-1" data-value='1' data-class='dsf_${str}'></div>
                <div class="cta-dot clg-dsf_${str}-2" data-value='2' data-class='dsf_${str}'></div>
                <div class="cta-dot clg-dsf_${str}-3" data-value='3' data-class='dsf_${str}'></div>
                <div class="cta-dot clg-dsf_${str}-4" data-value='4' data-class='dsf_${str}'></div>
                <div class="cta-dot clg-dsf_${str}-5" data-value='5' data-class='dsf_${str}'></div>
                <span class="dsf dsf_${str} clg-hidden">${value}</span>
            </div>
        </div>`;

    let target = `.clg-${type}`;

    $(target).append(html);
}

const set10Dot = (str, title, type, value, temp) => {
    str = str.toLowerCase();
    if (typeof title === 'undefined') { title = 'not listed'; }
    if (typeof type === 'undefined') { title = 'skills'; }
    if (typeof value === 'undefined') { value = 0; }

    let html = `<div class="clg-col margin-bottom-4">
        <div class="margin-bottom-4 text-left text-dark">${title}</div>
        <div class="margin-bottom-8 clg-row-between clg-dots clg-dots-${str}">
            <div class="cta-dot clg-dsf_${str}-1" data-value='1' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-2" data-value='2' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-3" data-value='3' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-4" data-value='4' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-5" data-value='5' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-6" data-value='6' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-7" data-value='7' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-8" data-value='8' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-9" data-value='9' data-class='dsf_${str}' data-len='10'></div>
            <div class="cta-dot clg-dsf_${str}-10" data-value='10' data-class='dsf_${str}' data-len='10'></div>
            <span class="dsf dsf_${str} clg-hidden">${value}</span>
        </div>
    </div>`;

    let target = `.clg-${type}`;

    $(target).append(html);
}

const updateFields = () => {
}

const setPage = async () => {
    for (const item of BACKGROUNDS_1) {
        set10Dot(item.text, item.title, 'backgrounds-pooled-1')
    }

    for (const item of BACKGROUNDS_2) {
        set10Dot(item.text, item.title, 'backgrounds-pooled-2')
    }

    for (const item of BACKGROUNDS_3) {
        set10Dot(item.text, item.title, 'backgrounds-pooled-3')
    }
}

const ds_dark_ages_inquisitor_v20_dataPreLoad = (opts) => {
    // console.log('\n dataPreLoad opts: ', opts);
}

const ds_dark_ages_inquisitor_v20_dataPostLoad = (opts) => {
    // console.log('\n dataPostLoad opts: ', opts);
}

const ds_dark_ages_inquisitor_v20_dataChange = (opts) => {
    // console.log('\n dataChange opts: ', opts);   
}

const ds_dark_ages_inquisitor_v20_dataPreSave = (opts) => {
    // console.log('\n dataPreSave opts: ', opts);   
}

const clg_setValue = (obj) => {

    // return null;

    for (const [key, value] of Object.entries(obj)) {
        // console.log(`key: ${key} | value: ${value}`)
        if (
            !key.includes('_') &&
            !Number.isNaN(Number(value))
        ) { 
            for (let i = 1; i <= Number(value); i++ ) {
                let target = `.clg-dsf_${key}-${i}`;
                let span = `.dsf.dsf_${key}`
                $(target).addClass('clg-active');
                $(span).html(value);
            }
        } else if (
            key.includes('_order_') &&
            (!key.includes('_end') && !key.includes('_cur' && !key.includes('_aff')))
        ) {
            // console.log('value: ', value);
            let target = `.clg-dsf_${key}-box`;
            $(target).val(value);
        } else if (
            key.includes('_filler-')
        ) {
            let _tv = value;

            if (!key.includes('-text')) {
                if (Number.isNaN(_tv)) { _tv = 0; } else { _tv = Number(_tv) }

                console.log('_tv: ', _tv);
                console.log(`key: ${key}\nvalue:${value}`)

                for (let i = 1; i <= value; i++ ) {
                    if ($('.clg-other-abilities').hasClass('clg-hidden')) {
                        $('.clg-other-abilities').removeClass('clg-hidden').addClass('width100');
                        console.log('Hello World');
                    }

                    let target = `.clg-dsf_${key}-${i}`;
                    let span = `.dsf.dsf_${key}`;
                    let _a = key.replace('dsf_', '');
                    let temp = `.${_a}`;

                    console.log(`OTHER ABILITIES\ntarget: ${target}, \nspan: ${span}, \ntemp: ${temp}`);

                    $(target).addClass('clg-active');
                    $(span).html(_tv);
                    $(temp).removeClass('clg-hidden');
                }
            }            
        } else if (key.includes('ritual_')) {

        }
    }
};

const setSelectValue = (val) => {
    let select = `select.clg-select-box.clg-`;
    if (CURSES.includes(val)) {
        select += 'dsf_order_curses-box';
        $('.dsf.dsf_order_curses').html(val);
        $(select).val(val);
        return null;
    }

    if (ENDOWMENTS.includes(val)) {
        select += 'dsf_order_endowments-box';
        $('.dsf.dsf_order_benefit').html(val);
        $(select).val(val);
        return null;
    }

    if (AFFILATIONS.includes(val)) {
        select += 'dsf_order_affiliation-box';
        $('.dsf.dsf_order_affiliation').html(val);
        $(select).val(val);
        return null;
    }
}

$('document').ready(function async () {
    const addValue = (key, value, index) => {
        dynamic_sheet_attrs[key + '_' + index] = val
    }

    setPage();

    if (typeof dynamic_sheet_attrs !== 'undefined') {
        console.log('dynamic_sheet_attrs: ', dynamic_sheet_attrs);

        clg_setValue(dynamic_sheet_attrs);
    }

    $('.clg-container-menu-item').on('click', function () {
        let _t = '.' + $(this).data('target');

        console.log($(this));
        console.log(_t);

        $('.clg-container-menu-item').each(function () {
            $(this).removeClass('clg-active');
        });

        $(this).addClass('clg-active');

        $('.clg-container-item').each(function () {
            $(this).removeClass('clg-active');
        });

        $(_t).addClass('clg-active');
    })

    $('.editable .cta-dot').on('click', function () {        
        let data = $(this).data();
        let target = '.clg-' + data.class + '-';
        let cnt = Number(data.value);
        let len = 5;
        let val = '.dsf.' + data.class;
        let _t = null;

        if (typeof data.len !== 'undefined') { len = data.len; }

        for (let i = 1; i <= len; i++) {
            if (i > cnt) {
                $(target + i).removeClass('clg-active');
            } else if (i < cnt) {
                $(target + i).addClass('clg-active');
            } else {
                _t = ds_dark_ages_inquisitor_v20_toggleDot(target + i);

                console.log('new value: ', data.value + " + " + _t + " = " + Number(data.value) +  _t );

                data.value = Number(data.value) +  _t;
                data.value = data.value.toString();
            }
        }

        $(val).html(data.value);
    });

    $('.editable .clg-add-class').on('click', () => {
        clg_addToWeaponList();
    });
});

Back

Dark Ages: Inquisitor - Pooled Backgrounds (V20)

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account