enyllion.html

<input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" title="PJ" /><span></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="PNJ" /><span></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" title="Ennemi" /><span></span>

<div class="logo">
    <img src="https://i.ibb.co/gMzcSHr1/logo-enyllion.png" style="width: 105px; height: auto;"/>
</div>
<div class="title-sheet">
    <span class="title-sheet">Les Chroniques d'Enyllion</span>
</div>

<div class="sheet-tab-content sheet-tab1">
    <input type="hidden" class="tabstoggle" name="attr_sheetTab"  value="PC_principal"/>
    <div class="part-of-sheet-buttons-wrapper">
        <div class="buttons">
            <button type="action" name="act_PC_principal" class="part-of-sheet-buttons">Principal</button>
            <button type="action" name="act_PC_equipment" class="part-of-sheet-buttons">Equipement</button>
            <button type="action" name="act_PC_grimoire" class="part-of-sheet-buttons">Grimoire et familiers</button>
            <button type="action" name="act_PC_necromancy" class="part-of-sheet-buttons">Nécromancie</button>
            <button type="action" name="act_PC_notes" class="part-of-sheet-buttons">Notes</button>
        </div>
    </div>
    <div class="pc-principal">
        <div class="perso areas" style="margin-top: 15px;">
            <div class="section-title">Infos personnage</div>
            <span class="char-textbox-label" style="margin-left: 80px;">Nom :</span><input type="text" class="char-textbox" name="attr_character_name" style="margin-left: 5px;"/>
            <span class="char-textbox-label" style="margin-left: 12px;">Sexe :</span><input class="char-textbox" type="text" name="attr_character_sex" style="margin-left: 5px;"/>
            <span class="char-textbox-label" style="margin-left: 33px;">Race :</span>
            <select class="char-textbox" name="attr_character_race" id="character_race" style="margin-left: 5px;">
                <option value="0">-Choisir-</option>
                <option value="1">Humain</option>
                <option value="2">Nain</option>
                <option value="3">Elfe</option>
                <option value="4">Demi-Elfe</option>
                <option value="5">Saurien</option>
                <option value="6">Demi-Ork</option>
                <option value="7">Felika</option>
                <option value="8">Vampire</option>
                <option value="9">Lycan</option>
                <option value="10">Succube</option>
                <option value="11">Animorphe</option>
            </select>
            <br>
            <span class="char-textbox-label" style="margin-left: 70px;">Ethnie :</span><input class="char-textbox" type="text" name="attr_character_ethnie" style="margin-left: 5px;"/>
            <span class="char-textbox-label" style="margin-left: 15px;">Age :</span><input class="char-textbox" type="text" name="attr_character_age" style="margin-left: 5px;"/>
            <span class="char-textbox-label" style="margin-left: 21px;">Classe :</span>
            <select class="char-textbox" name="attr_character_class" style="margin-left: 5px;">
                <option value="0">-Choisir-</option>
                <option value="1">Aventurier</option>
                <option value="2">Barbare</option>
                <option value="3">Marchand</option>
                <option value="4">Chevalier</option>
                <option value="5">Sentinelle de la lumière</option>
                <option value="6">Druide</option>
                <option value="7">Dévot</option>
                <option value="8">Mage</option>
                <option value="9">Roublard</option>
                <option value="10">Spadassin</option>
            </select>
            <br>
            <span class="char-textbox-label" style="margin-left: 4px;">Lieu de naissance :</span><input class="char-textbox" type="text" name="attr_character_bornPlace" style="margin-left: 5px;"/>
            <span class="char-textbox-label" style="margin-left: 5px;">Poids :</span><input class="char-textbox" type="text" name="attr_character_weigth" style="margin-left: 5px;"/>
            <span class="char-textbox-label" style="margin-left: 5px;">Spécialité :</span><input class="char-textbox" type="text" name="attr_character_speciality" style="margin-left: 5px;"/>
            <br>
            <span class="char-textbox-label" style="margin-left: 63px;">Divinité :</span><input class="char-textbox" type="text" name="attr_character_divinity" style="margin-left: 5px;"/>
            <span class="char-textbox-label" style="margin-left: 9px;">Taille :</span><input class="char-textbox" type="text" name="attr_character_height" style="margin-left: 5px;"/>
            <span class="char-textbox-label" style="margin-left: 22px;">Guilde :</span><input class="char-textbox" type="text" name="attr_character_guild" style="margin-left: 5px;"/>
            <br>
            <span class="char-textbox-label" style="margin-left: 27px;">Classe sociale :</span><input class="char-textbox" type="text" name="attr_character_socialClass" style="margin-left: 5px;"/>
        </div>
        <div class="carac areas" style="margin-top: 15px;">
            <div class="section-title">Caractéristiques</div>
            <div class="perso-char">
                <span class="textbox-label" style="margin-left: 30px; margin-top:10px;">FO</span>
                <span class="textbox-label" style="margin-left: 40px;">DEX</span>
                <span class="textbox-label" style="margin-left: 32px;">CON</span>
                <span class="textbox-label" style="margin-left: 38px;">PE</span>
                <br>
                <input class="textbox-stat" type="number" value="0" name="attr_FO"/>
                <input class="textbox-stat" type="number" value="0" name="attr_DEX"/>
                <input class="textbox-stat" type="number" value="0" name="attr_CON"/>
                <input class="textbox-stat" type="number" value="0" name="attr_PE"/>
                <br>
                <button type="roll" class="sheet-d100-dice" style="margin-left:30px;" title="Force" name="roll_FO" value="&{template:enyllion} {{perso=@{Name&#125; }} {{name=Force}} {{Carac=[[@{FO}+?{Modificateur|0}]]}}  {{Roll=[[1D100]]}}"></button>
                <button type="roll" class="sheet-d100-dice" style="margin-left:45px;" title="Dexterité" name="roll_DEX" value="&{template:enyllion} {{perso=@{Name&#125; }} {{name=Dexterité}} {{Carac=[[@{DEX}+?{Modificateur|0}]]}}  {{Roll=[[1D100]]}}"></button>
                <button type="roll" class="sheet-d100-dice" style="margin-left:47px;" title="Constitution" name="roll_CON" value="&{template:enyllion} {{perso=@{Name&#125; }} {{name=Constitution}} {{Carac=[[@{CON}+?{Modificateur|0}]]}}  {{Roll=[[1D100]]}}"></button>
                <button type="roll" class="sheet-d100-dice" style="margin-left:49px;" title="Perception" name="roll_PE" value="&{template:enyllion} {{perso=@{Name&#125; }} {{name=Perception}} {{Carac=[[@{PE}+?{Modificateur|0}]]}}  {{Roll=[[1D100]]}}"></button>
                <br>
                <span class="textbox-label" style="margin-left: 30px;">ED</span>
                <span class="textbox-label" style="margin-left: 45px;">CH</span>
                <span class="textbox-label" style="margin-left: 47px;">PO</span>
                <span class="textbox-label" style="margin-left: 50px;">SF</span>
                <br>
                <input class="textbox-stat" type="number" value="0" name="attr_ED"/>
                <input class="textbox-stat" type="number" value="0" name="attr_CH"/>
                <input class="textbox-stat" type="number" value="0" name="attr_PO"/>
                <input class="textbox-stat" type="number" value="0" name="attr_SF"/>
                <br>
                <button type="roll" class="sheet-d100-dice" style="margin-left:30px;"title="Education" name="roll_ED" value="&{template:enyllion} {{perso=@{Name&#125; }} {{name=Education}} {{Carac=[[@{ED}+?{Modificateur|0}]]}}  {{Roll=[[1D100]]}}"></button>
                <button type="roll" class="sheet-d100-dice" style="margin-left:45px;"title="Charisme" name="roll_CH" value="&{template:enyllion} {{perso=@{Name&#125; }} {{name=Charisme}} {{Carac=[[@{CH}+?{Modificateur|0}]]}}  {{Roll=[[1D100]]}}"></button>
                <button type="roll" class="sheet-d100-dice" style="margin-left:47px;"title="Pouvoir/Chance" name="roll_PO" value="&{template:enyllion} {{perso=@{Name&#125; }} {{name=Pouvoir/Chance}} {{Carac=[[@{PO}+?{Modificateur|0}]]}}  {{Roll=[[1D100]]}}"></button>
                <button type="roll" class="sheet-d100-dice" style="margin-left:49px;"title="Sang-Froid" name="roll_SF" value="&{template:enyllion} {{perso=@{Name&#125; }} {{name=Sang-Froid}} {{Carac=[[@{SF}+?{Modificateur|0}]]}}  {{Roll=[[1D100]]}}"></button>
            </div>
        </div>
        <div class="health areas" style="margin-top: 15px;">
            <div class="section-title">Santé</div>
        </div>
    </div>
    <div class="pc-equipment">
        <span>Equipment</span>
    </div>
    <div class="pc-grimoire">
        <span>Grimoire</span>
    </div>
    <div class="pc-necromancy">
        <span>Necromancy</span>
    </div>
    <div class="pc-notes">
        <span>Notes</span>
    </div>
</div>

<div class="sheet-tab-content sheet-tab2">
    <input type="hidden" class="tabstoggle" name="attr_PNJ_sheetTab"  value="NPC_principal"/>
    <div class="part-of-sheet-buttons-wrapper">
        <div class="buttons">
            <button type="action" name="act_NPC_principal" class="part-of-sheet-buttons">Principal</button>
            <button type="action" name="act_NPC_equipment" class="part-of-sheet-buttons">Equipement</button>
            <button type="action" name="act_NPC_grimoire" class="part-of-sheet-buttons">Grimoire et familiers</button>
        </div>
    </div>
    <div class="npc-principal">

    </div>
    <div class="npc-equipment">

    </div>
    <div class="npc-grimoire">

    </div>
</div>

<div class="sheet-tab-content sheet-tab3">
    <input type="hidden" class="tabstoggle" name="attr_ennemi_sheetTab"  value="monster"/>
    <div class="part-of-sheet-buttons-wrapper">
        <div class="buttons">
            <button type="action" name="act_monster" class="part-of-sheet-buttons">Monstre</button>
            <button type="action" name="act_dragon" class="part-of-sheet-buttons">Dragon</button>
            <button type="action" name="act_demon" class="part-of-sheet-buttons">Démon</button>
            <button type="action" name="act_ennemi" class="part-of-sheet-buttons">Ennemi</button>
        </div>
    </div>
    <div class="monster">

    </div>
    <div class="dragon">

    </div>
    <div class="demon">

    </div>
    <div class="ennemi">

    </div>
</div>
<!--Début scripts-->
<script type="text/worker">
    const buttonlist = ["PC_principal","PC_equipment","PC_grimoire", "PC_necromancy", "PC_notes"];
    buttonlist.forEach(button => {
        on(`clicked:${button}`, function() {
            setAttrs({
                sheetTab: button
            });
        });
    });

    const buttonlist2 = ["NPC_principal","NPC_equipment","NPC_grimoire"];
    buttonlist2.forEach(button => {
        on(`clicked:${button}`, function() {
            setAttrs({
                PNJ_sheetTab: button
            });
        });
    });

    const buttonlist3 = ["monster","dragon","demon", "ennemi"];
    buttonlist3.forEach(button => {
        on(`clicked:${button}`, function() {
            setAttrs({
                ennemi_sheetTab: button
            });
        });
    });
</script>