You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.5 KiB
108 lines
3.5 KiB
{{#*inline "tokenListItem"}}
|
|
<label data-token-id="{{this.token.id}}" data-actor-name="{{this.actor.name}}" data-xp-amount="{{this.actor.data.data.details.xp.value}}">
|
|
<input type="checkbox" name="{{this.token.id}}" {{#if isChecked}}checked="checked"{{/if}}>
|
|
<div class="give-xp--actor-icon" style="background-image: url({{this.img}})"></div>
|
|
<span class="give-xp--actor-xp">+0 XP</span>
|
|
</label>
|
|
{{/inline}}
|
|
|
|
<form>
|
|
<h2>{{ localize "WORDS.Configuration" }}</h2>
|
|
<div class="form-group">
|
|
<label for="xp-modifier">{{ localize "GIVE_XP.DistributeForm.XPModifier" }}</label>
|
|
<input id="xp-modifier" type="number" value="{{xpModifier}}">
|
|
</div>
|
|
|
|
<nav class="tabs">
|
|
<a class="item active" data-tab="friendlies">
|
|
<i class="fas fa-users"></i>
|
|
{{ localize "GIVE_XP.DistributeForm.Friendlies" }}
|
|
</a>
|
|
<a class="item" data-tab="hostiles">
|
|
<i class="fas fa-skull"></i>
|
|
{{ localize "GIVE_XP.DistributeForm.Hostiles" }}
|
|
</a>
|
|
</nav>
|
|
|
|
<section id="actor-select-tabs">
|
|
<div data-tab="friendlies">
|
|
<p class="notes">{{ localize "GIVE_XP.DistributeForm.SelectFriendlies" }}</p>
|
|
<div id="friendly-actor-list" class="give-xp--actor-list">
|
|
{{#each friendlies}}
|
|
{{> tokenListItem isChecked=(lookup ../defaultSelectedFriendlies @index)}}
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
|
|
<div data-tab="hostiles" style="display: none;">
|
|
<p class="notes">{{ localize "GIVE_XP.DistributeForm.SelectHostiles" }}</p>
|
|
<div id="hostile-actor-list" class="give-xp--actor-list">
|
|
{{#each hostiles}}
|
|
{{> tokenListItem isChecked=true}}
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<p id="hovered-creature" style="text-align: center;"> </p>
|
|
|
|
<h2>{{ localize "GIVE_XP.DistributeForm.Distribution" }}</h2>
|
|
<div class="form-group">
|
|
<label>{{ localize "GIVE_XP.DistributeForm.TotalXp" }}</label>
|
|
<span id="total-xp">-</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{ localize "GIVE_XP.DistributeForm.CreaturesReceiving" }}</label>
|
|
<span id="friend-receive-count">-</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{ localize "GIVE_XP.DistributeForm.XpPerCreature" }}</label>
|
|
<span id="divisor-xp">-</span>
|
|
</div>
|
|
</form>
|
|
|
|
<style>
|
|
.give-xp--actor-list {
|
|
display: flex;
|
|
height: 276px;
|
|
flex-wrap: wrap;
|
|
overflow-y: scroll;
|
|
margin-top: 6px;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.give-xp--actor-list label {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.give-xp--actor-list .give-xp--actor-icon {
|
|
display: block;
|
|
width: 82px;
|
|
height: 82px;
|
|
margin: 5px;
|
|
border: 2px solid transparent;
|
|
border-radius: 2px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.give-xp--actor-list :checked + .give-xp--actor-icon {
|
|
background-color: #3CF23C55;
|
|
box-shadow: 0 0 2px 2px #3CF23C;
|
|
}
|
|
|
|
.give-xp--actor-list input {
|
|
display: none;
|
|
}
|
|
|
|
.give-xp--actor-list .give-xp--actor-xp {
|
|
color: #FFFFFF;
|
|
text-shadow: 0 0 3px black;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 4px;
|
|
left: 50%;
|
|
max-width: 95%;
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|