roll20-character-sheets/FACES (French)/FACES_HTML.html

<div class=container>
<!-- TABS
   ============================= -->
<input class="type" name="attr_sheet_type" type="hidden" value="character">
<input class="display_string" name="attr_character_settings" type="hidden" value="character">

<!-- TABS & LOGO
   ============================= -->
<div class="tabs">
    <input type="hidden" name="attr_talent_buttons" value="0">
    <input type="hidden" name="attr_melee_buttons" value="0">
    <input type="hidden" name="attr_distance_buttons" value="0">
    <input type='hidden' name='attr_3value_checkbox' class="customcheck">
    <div class="custom">
        <button type="roll" name="roll_minisheet2" title="%{selected ou nom du personnage|minisheet2}" value="/w @{character_name} &{template:minisheet2} {{name=@{character_name}}} {{value1=@{hp}}} {{value1_max=@{hp|max}}} {{value2=@{nrj}}} {{value2_max=@{nrj|max}}} {{value3_name=@{custom_name}}} {{value3=@{custom}}} {{value3_max=@{custom|max}}} {{buttons_name=Attributs}} {{buttons=[Force](~force}) [Agilité](~agilite}) [Caractère](~caractere}) [Esprit](~esprit}) [Sens](~sens})}} {{buttons2_name=Talents}} {{buttons2=@{talent_buttons}}} {{buttons3_name=Mêlée}} {{buttons3=@{melee_buttons}}} {{buttons4_name=Distance}} {{buttons4=@{distance_buttons}}}" style="font-family: Pictos; font-size: 20px; float:right">N</button>
    </div>
    <div class="nocustom">
        <button type="roll" name="roll_minisheet" title="%{selected ou nom du personnage|minisheet}" value="/w @{character_name} &{template:minisheet} {{name=@{character_name}}} {{value1=@{hp}}} {{value1_max=@{hp|max}}} {{value2=@{nrj}}} {{value2_max=@{nrj|max}}} {{buttons_name=Attributs}} {{buttons=[Force](~force}) [Agilité](~agilite}) [Caractère](~caractere}) [Esprit](~esprit}) [Sens](~sens})}} {{buttons2_name=Talents}} {{buttons2=@{talent_buttons}}} {{buttons3_name=Mêlée}} {{buttons3=@{melee_buttons}}} {{buttons4_name=Distance}} {{buttons4=@{distance_buttons}}}" style="font-family: Pictos; font-size: 20px; float:right">N</button>
    </div>
    <div class="flex logo-flex">
        <img alt="logo" src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/FACES%20(French)/Faces_logo.png">
    </div>
    <div class="flex info-flex">
        <div class="grid grid-tab-inputs">
            <!-- INFO INPUTS -->
            <span data-i18n="character name">character name</span>
            <label title="character name">
                <input data-i18n-placeholder="c11e" name="attr_character_name" placeholder="character name" title="@{character_name}" type="text" value="" />
            </label>
        </div>
        <div class="grid grid-tab-buttons">
            <!-- CHARACTER SHEETS -->
            <button data-i18n="pc" name="act_toggle_character" title="player character button" type="action">pc</button>
            <button data-i18n="notes" name="act_toggle_notes" title="notes button" type="action">notes</button>
            <button data-i18n="config" name="act_toggle_config" title="config button" type="action">config</button>
        </div>
    </div>
</div>

<!-- CONFIG SHEET
   ============================= -->
<div class="config">
    <span>Activer 3e jauge ?</span>
    <input type='checkbox' name='attr_3value_checkbox' value='1' checked='false' class="customcheck">
    <span>Nom de la 3e jauge</span>
    <input type="text" name="attr_custom_name" placeholder="Jauge">
</div>

<!-- PC SHEET
   ============================= -->
<div class="pc">
    <div class="flex container-flex">
    <!-- 1e COL -->
    <div class="flex" style="width:28%">
        <!-- HP -->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 title="HP">Points de vie</h1>
            </div>
            <input type="number" name="attr_hp" title="@{hp}">
            <span style="font-weight:bold; font-size: 25px; padding:5px">/</span>
            <input type="number" name="attr_hp_max" title="@{hp|max}">
            <span style="font-weight:bold; font-size: 20px; padding:5px">PV/2</span>
            <input type="number" name="attr_wound" value="0">
        </div>
        <!-- NRJ -->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 title="NRJ">Energie</h1>
            </div>
            <input type="number" name="attr_nrj" title="@{nrj}">
            <span style="font-weight:bold; font-size: 25px; padding:5px">/</span>
            <input type="number" name="attr_nrj_max" title="@{nrj|max}">
        </div>
        <!-- CUSTOM -->
        <input type='hidden' name='attr_3value_checkbox' class="customcheck">
        <div class="flex pc-flex custom" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 title="CUSTOM"><span name="attr_custom_name"></span></h1>
            </div>
            <input type="number" name="attr_custom" title="@{custom}">
            <span style="font-weight:bold; font-size: 25px; padding:5px">/</span>
            <input type="number" name="attr_custom_max" title="@{custom|max}">
        </div>
        <!-- PROTECTION-->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 data-i18n="Protection" data-i18-title="Protection" title="header 1">Protection</h1>
            </div>
            <fieldset class="repeating_protection">
                <input type="text" name="attr_protection_name" placeholder="nom de la protection" style="width:230px">
                <input type="text" name="attr_protection_value" placeholder="PRO" style="width:45px">
                <div class="sheet-auto-expand">
                    <span name="attr_protection_special"></span>
                    <textarea name="attr_protection_special" placeholder="special" spellcheck="false"></textarea>
                </div>
            </fiedlset>
        </div>
        <!-- ATOUTS -->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 title="Assets">Atouts</h1>
            </div>
            <fieldset class="repeating_atout">
                <input type="text" name="attr_atout_name" placeholder="nom">
                <div class="sheet-auto-expand">
                    <span name="attr_atout"></span>
                    <textarea name="attr_atout" placeholder="texte" spellcheck="false"></textarea>
                </div>
            </fiedlset>
        </div>
    </div>
    <!-- 2e COL -->
    <div class="flex pc-flex" style="width: 42%; padding-bottom: 4px">
            <!-- ATTRIBUTES -->
    <div style="width:50%">
        <div class="grid grid-header">
            <h1 data-i18n="attributes" data-i18-title="attributes" title="attributes">attributes</h1>
        </div>
        <div class="flex attribute-flex">
        <div class="flex-item">
        <div class="grid grid-pc-attributes">
            <!-- FORCE -->
            <button name="roll_force" type="roll" value="&{template:face} {{name=@{character_name}}} {{rollname=force}} {{roll=[[@{force}]]}} {{reroll=force}}">
                <h2 data-i18n="force">force</h2>
                <span type="number" name="attr_force" class="attrmod" title="@{force}"></span>
            </button>
            <label title="force input">
                <span>Dé</span>
                <select name="attr_force" type="text" placeholder="1D4" style="width: 6em"> 
                        <option value="1D4">1D4</option>
                        <option value="1D6">1D6</option>
                        <option value="1D8">1D8</option>
                        <option value="1D10">1D10</option>
                        <option value="1D12">1D12</option>
                        <option value="1D14">1D14</option>
                        <option value="1D16">1D16</option>
                        <option value="1D18">1D18</option>
                        <option value="1D20">1D20</option>
                </select>
            </label>
        </div>
        </div>
        <div class="flex-item">
        <div class="grid grid-pc-attributes">
            <!-- AGILITE -->
            <button name="roll_agilite" type="roll" value="&{template:face} {{name=@{character_name}}} {{rollname=agilité}} {{roll=[[@{agilite}]]}} {{reroll=agilite}}">
                <h2 data-i18n="agilite">agilite</h2>
                <span type="number" name="attr_agilite" class="attrmod" title="@{agilite}"></span>
            </button>
            <label title="agilite input">
                <span>Dé</span>
                <select name="attr_agilite" type="text" placeholder="1D4" style="width: 6em"> 
                        <option value="1D4">1D4</option>
                        <option value="1D6">1D6</option>
                        <option value="1D8">1D8</option>
                        <option value="1D10">1D10</option>
                        <option value="1D12">1D12</option>
                        <option value="1D14">1D14</option>
                        <option value="1D16">1D16</option>
                        <option value="1D18">1D18</option>
                        <option value="1D20">1D20</option>
                </select>
            </label>
        </div>
        </div>
        <div class="flex-item">
        <div class="grid grid-pc-attributes">
            <!-- CARACTERE -->
            <button name="roll_caractere" type="roll" value="&{template:face} {{name=@{character_name}}} {{rollname=caractère}} {{roll=[[@{caractere}]]}} {{reroll=caractere}}">
                <h2 data-i18n="caractere">caractere</h2>
                <span type="number" name="attr_caractere" class="attrmod" title="@{caractere}"></span>
            </button>
            <label title="caractere input">
                <span>Dé</span>
                <select name="attr_caractere" type="text" placeholder="1D4" style="width: 6em"> 
                        <option value="1D4">1D4</option>
                        <option value="1D6">1D6</option>
                        <option value="1D8">1D8</option>
                        <option value="1D10">1D10</option>
                        <option value="1D12">1D12</option>
                        <option value="1D14">1D14</option>
                        <option value="1D16">1D16</option>
                        <option value="1D18">1D18</option>
                        <option value="1D20">1D20</option>
                </select>
            </label>
        </div>
        </div>
        <div class="flex-item">
        <div class="grid grid-pc-attributes">
            <!-- ESPRIT -->
            <button name="roll_esprit" type="roll" value="&{template:face} {{name=@{character_name}}} {{rollname=esprit}} {{roll=[[@{esprit}]]}} {{reroll=esprit}}">
                <h2 data-i18n="esprit">esprit</h2>
                <span type="number" name="attr_esprit" class="attrmod" title="@{esprit}"></span>
            </button>
            <label title="esprit input">
                <span>Dé</span>
                <select name="attr_esprit" type="text" placeholder="1D4" style="width: 6em"> 
                        <option value="1D4">1D4</option>
                        <option value="1D6">1D6</option>
                        <option value="1D8">1D8</option>
                        <option value="1D10">1D10</option>
                        <option value="1D12">1D12</option>
                        <option value="1D14">1D14</option>
                        <option value="1D16">1D16</option>
                        <option value="1D18">1D18</option>
                        <option value="1D20">1D20</option>
                </select>
            </label>
        </div>
        </div>
        <div class="flex-item">
        <div class="grid grid-pc-attributes">
            <!-- SENS -->
            <button name="roll_sens" type="roll" value="&{template:face} {{name=@{character_name}}} {{rollname=sens}} {{roll=[[@{sens}]]}} {{reroll=sens}}">
                <h2 data-i18n="sens">sens</h2>
                <span type="number" name="attr_sens" class="attrmod" title="@{sens}"></span>
            </button>
            <label title="sens input">
                <span>Dé</span>
                <select name="attr_sens" type="text" placeholder="1D4" style="width: 6em"> 
                        <option value="1D4">1D4</option>
                        <option value="1D6">1D6</option>
                        <option value="1D8">1D8</option>
                        <option value="1D10">1D10</option>
                        <option value="1D12">1D12</option>
                        <option value="1D14">1D14</option>
                        <option value="1D16">1D16</option>
                        <option value="1D18">1D18</option>
                        <option value="1D20">1D20</option>
                </select>
            </label>
        </div>
        </div>
        </div>
        </div>
        <div style="width:50%">
        <!-- TALENTS-->
        <div class="grid grid-header">
            <h1 title="Talents">Talents</h1>
        </div>
        <div>
            <fieldset class="repeating_talents">
            <label>
                <input type="text" name="attr_talent_name" placeholder="nom du talent" class="talent">
            </label>
            <div class="grid grid-pc-attributes2" style="margin-bottom: 5px;">
                <button name="roll_talent_throw" type="roll" value="&{template:face} {{name=@{character_name}}} {{rollname=@{talent_name}}} {{roll=[[@{talent_dice}]]}} {{reroll=@{talent_row}}}">
                <h2><span type="text" name="attr_talent_name"></span></h2>
                <input type="hidden" name="attr_talent_row" value="0">
                <span type="number" name="attr_talent_dice" class="attrmod"></span>
                </button>
            <label>
                <span>Dé</span>
                <select name="attr_talent_dice" type="text" placeholder="1D4" style="width: 6em"> 
                        <option value="0D0"></option>
                        <option value="1D4">1D4</option>
                        <option value="1D6">1D6</option>
                        <option value="1D8">1D8</option>
                        <option value="1D10">1D10</option>
                        <option value="1D12">1D12</option>
                        <option value="1D14">1D14</option>
                        <option value="1D16">1D16</option>
                        <option value="1D18">1D18</option>
                        <option value="1D20">1D20</option>
                </select>
            </label>
            </div>
            </fieldset>
        </div>
    </div>
    </div>
    <!-- 3e COL-->
    <div class="flex" style="width: 28%">
        <!-- MELEE-->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 data-i18n="Melee" data-i18-title="Melee" title="header 1">Melee</h1>
            </div>
            <fieldset class="repeating_melee">
                <button name="roll_melee" type="roll" value="&{template:damage} {{name=@{character_name}}} {{rollname=@{melee_name}}} {{roll=[[@{melee_dice}]]}}" style="width:30px"><span style="font-family:Pictos Custom; font-size: 20px">t</span></button>
                <input type="text" name="attr_melee_name" placeholder="nom de l'arme" style="width:200px">
                <input type="text" name="attr_melee_dice" placeholder="DG" style="width:50px" title="@{melee_dice} ex:1D6">
                <div class="sheet-auto-expand">
                    <span name="attr_melee_special"></span>
                    <textarea name="attr_melee_special" placeholder="special" spellcheck="false"></textarea>
                </div>
            </fiedlset>
        </div>
    <!-- DISTANCE-->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 data-i18n="Distance" data-i18-title="Distance" title="header 1">Distance</h1>
            </div>
            <fieldset class="repeating_distance">
                <button name="roll_distance" type="roll" value="&{template:damage} {{name=@{character_name}}} {{rollname=@{distance_name}}} {{roll=[[@{distance_dice}]] (Portée: @{distance_range})}}" style="width:30px"><span style="font-family:Pictos Custom; font-size: 20px">[</span></button>
                <input type="text" name="attr_distance_name" placeholder="nom de l'arme" style="width:142px">
                <input type="text" name="attr_distance_dice" placeholder="DG" style="width:50px" title="@{distance_dice} ex:1D6">
                <input type="text" name="attr_distance_range" placeholder="Portée" style="width:50px">
                <div class="sheet-auto-expand">
                    <span name="attr_distance_special"></span>
                    <textarea name="attr_distance_special" placeholder="special" spellcheck="false"></textarea>
                </div>
            </fiedlset>
        </div>
    <!-- TRAVERS-->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 data-i18n="Travers" data-i18-title="Travers" title="header 1">Travers</h1>
            </div>
            <fieldset class="repeating_travers">
                <input type="text" name="attr_travers_name" placeholder="Nom">
                <div class="sheet-auto-expand">
                    <span name="attr_travers"></span>                
                    <textarea name="attr_travers" placeholder="texte" spellcheck="false"></textarea>
                </div>
            </fiedlset>
        </div>
    </div>
    </div>
</div>

<!-- NOTES SHEET
   ============================= -->
<div class="notes">
    <div class="grid grid-note">
        <!-- DESCRIPTION-->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 data-i18n="Description" data-i18-title="Description" title="header 1">Description</h1>
            </div>
            <fieldset class="repeating_desc">
                <input type="text" name="attr_desc_name" placeholder="Nom">
                <div class="sheet-auto-expand">
                    <span name="attr_desc"></span>                
                    <textarea name="attr_desc" placeholder="texte" spellcheck="false"></textarea>
                </div>
            </fiedlset>
        </div>
        <!-- EQUIPMENT-->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 data-i18n="Equipment" data-i18-title="Equipment" title="header 1">Equipment</h1>
            </div>
            <fieldset class="repeating_equipment">
                <input type="text" name="attr_equipment_name" placeholder="Nom">
                <div class="sheet-auto-expand">
                    <span name="attr_equipment"></span>                
                    <textarea name="attr_equipment" placeholder="texte" spellcheck="false"></textarea>
                </div>
            </fiedlset>
        </div>
        <!-- CURRENCY-->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 data-i18n="Money" data-i18-title="Money" title="header 1">Money</h1>
            </div>
            <fieldset class="repeating_money">
                <input type="text" name="attr_money_name" placeholder="Nom">
                <div class="sheet-auto-expand">
                    <span name="attr_money"></span>                
                    <textarea name="attr_money" placeholder="texte" spellcheck="false"></textarea>
                </div>
            </fiedlset>
        </div>
        <!-- NOTES-->
        <div class="flex pc-flex" style="margin-bottom:5px">
            <div class="grid grid-header">
                <h1 data-i18n="Notes" data-i18-title="Notes" title="header 1">Notes</h1>
            </div>
            <div class="sheet-auto-expand">
                <span name="attr_notes"></span>                
                <textarea name="attr_notes" placeholder="texte" spellcheck="false"></textarea>
            </div>
        </div>
    </div>
</div>

<!-- END OF SHEET
   ============================= -->
</div>

<!-- ROLL TEMPLATE
   ============================= -->

<rolltemplate class="sheet-rolltemplate-face">
    <div class="face_container">
        <div class="face_header">
            <h3 style="color: #F8F8FF">{{name}}</h3>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{rollname}}</h3>
            {{roll}}
        </div>
        <div style="text-align: center;">
            {{#rollWasCrit() roll}} [Relancer?](~{{name}}|{{reroll}}) {{/rollWasCrit() roll}}
        </div>
    </div>
</rolltemplate>

<rolltemplate class="sheet-rolltemplate-damage">
    <div class="face_container">
        <div class="face_header">
            <h3 style="color: #F8F8FF">{{name}}</h3>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{rollname}}</h3>
            {{roll}}
        </div>
    </div>
</rolltemplate>

<rolltemplate class="sheet-rolltemplate-minisheet">
    <div class="face_container">
        <div class="face_header">
            <h3 style="color: #F8F8FF">{{name}}</h3>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline"><span style="font-family: Pictos">k</span></h3>
            {{value1}} / {{value1_max}}
            <h3 style="display:inline"><span style="font-family: Pictos">e</span></h3>
            {{value2}} / {{value2_max}}
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{buttons_name}}</h3>
            <div>{{buttons}}</div>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{buttons2_name}}</h3>
            <div>{{buttons2}}</div>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{buttons3_name}}</h3>
            <div>{{buttons3}}</div>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{buttons4_name}}</h3>
            <div>{{buttons4}}</div>
        </div>
    </div>
</rolltemplate>

<rolltemplate class="sheet-rolltemplate-minisheet2">
    <div class="face_container">
        <div class="face_header">
            <h3 style="color: #F8F8FF">{{name}}</h3>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline"><span style="font-family: Pictos">k</span></h3>
            {{value1}} / {{value1_max}}
            <h3 style="display:inline"><span style="font-family: Pictos">e</span></h3>
            {{value2}} / {{value2_max}}
            <h3 style="display:inline"><span>{{value3_name}}</span></h3>
            {{value3}} / {{value3_max}}
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{buttons_name}}</h3>
            <div>{{buttons}}</div>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{buttons2_name}}</h3>
            <div>{{buttons2}}</div>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{buttons3_name}}</h3>
            <div>{{buttons3}}</div>
        </div>
        <div class="face_rowcolor1">
            <h3 style="display:inline">{{buttons4_name}}</h3>
            <div>{{buttons4}}</div>
        </div>
    </div>
</rolltemplate>

<!-- SCRIPTS
   ============================= -->
<script type="text/worker">

const setAttributes = (update, silent) => { 
    (silent === true) ? setAttrs(update, {silent:true}) : setAttrs(update); 
};

// === ATTRIBUTE ARRAYS
    const arrays = {
        attributes: ['strength','dexterity','constitution','intelligence','wisdom','charisma'],
        repeating_settings: [],
        sheets: ["character", "config", "notes"],
        toggles: ["attributes"]
    };

// === SETTINGS TOGGLES
    //Switch between sheet types.
    arrays["sheets"].forEach(attr => {
        on(`clicked:toggle_${attr}`, (eventinfo) => {
            setAttributes({sheet_type: `${attr}`}, true);
        });
    });

// === TOGGLE INPUT SETTINGS
    arrays["toggles"].forEach(attr => {
        on(`clicked:toggle_${attr}`, () => {
            getAttrs(["toggles"], (v) => {
                let string = toggleBuilder(attr, v["toggles"]);
                setAttributes({toggles: string}, true);
            });
        });
    });

// === UPDATE TOGGLE STRING
    const toggleBuilder = (attr, oldString) => {
        let newString = (oldString.includes(`${attr}`)) ? oldString.replace(`${attr},`, "") : `${oldString}${attr},`;
        return newString
    };

// === UPDATE WOUND
on("change:hp_max", function() {
   getAttrs(["hp_max"], function(values) {
      setAttrs({
          wound: Math.floor(values.hp_max / 2)
      });
   });
});

// === REROLL TALENT ROW ID VALUE
on("change:repeating_talents", function() {
    getSectionIDs("repeating_talents", function(idArray) {
 var rollvalues = {};
        for(var i=0; i < idArray.length; i++) {
 rollvalues["repeating_talents_" + idArray[i] + "_talent_row"] =  "repeating_talents_" + idArray[i] + "_talent_throw";
        }
 setAttrs(rollvalues);
    });
});

// === BUTTON TALENT ROW ID VALUE
on("change:repeating_talents", function() {
    getSectionIDs("repeating_talents", function(idArray) {
 var rollbuttons = {};
        for(var i=0; i < 1; i++) {
 rollbuttons["talent_buttons"] =  "[@{repeating_talents_" + idArray[i] + "_talent_name}](~repeating_talents_" + idArray[i] + "_talent_throw)";
        }
        for(var i=1; i < idArray.length; i++) {
 rollbuttons["talent_buttons"] =  rollbuttons["talent_buttons"] + " [@{repeating_talents_" + idArray[i] + "_talent_name}](~repeating_talents_" + idArray[i] + "_talent_throw)";
        }
 setAttrs(rollbuttons);
    });
});

// === BUTTON MELEE ROW ID VALUE
on("change:repeating_melee", function() {
    getSectionIDs("repeating_melee", function(idArray) {
 var rollbuttons = {};
        for(var i=0; i < 1; i++) {
 rollbuttons["melee_buttons"] =  "[@{repeating_melee_" + idArray[i] + "_melee_name}](~repeating_melee_" + idArray[i] + "_melee)";
        }
        for(var i=1; i < idArray.length; i++) {
 rollbuttons["melee_buttons"] =  rollbuttons["melee_buttons"] + " [@{repeating_melee_" + idArray[i] + "_melee_name}](~repeating_melee_" + idArray[i] + "_melee)";
        }
 setAttrs(rollbuttons);
    });
});

// === BUTTON DISTANCE ROW ID VALUE
on("change:repeating_distance", function() {
    getSectionIDs("repeating_distance", function(idArray) {
 var rollbuttons = {};
        for(var i=0; i < 1; i++) {
 rollbuttons["distance_buttons"] =  "[@{repeating_distance_" + idArray[i] + "_distance_name}](~repeating_distance_" + idArray[i] + "_distance)";
        }
        for(var i=1; i < idArray.length; i++) {
 rollbuttons["distance_buttons"] =  rollbuttons["distance_buttons"] + " [@{repeating_distance_" + idArray[i] + "_distance_name}](~repeating_distance_" + idArray[i] + "_distance)";
        }
 setAttrs(rollbuttons);
    });
});

</script>