DiceCloud/rpg-docs/client/views/character/features/features.html

<template name="features">
	<div class="features">
		<div class="column-container animation-slider">
			<!--expertiseDice-->
			{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
			<!--ki-->
			{{>resource name="ki" title="Ki Points" color="teal" char=this}}
			<!--rages-->
			{{>resource name="rages" title="Rages" color="teal" char=this}}
			<!--sorceryPoints-->
			{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
			<!--superiorityDice-->
			{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}

			<!--Attacks-->
			<div>
				<paper-material class="card">
					<div class="top white">
						Attacks
					</div>
					<div class="bottom list">
						{{#each attack in attacks}}
							{{>attackListItem attack=attack charId=_id}}
						{{/each}}
					</div>
				</paper-material>
			</div>

			<!--Proficiencies-->
			<div>
				<paper-material class="card">
					<div class="white top">
						Proficiencies
					</div>
					<div flex class="bottom list">
						{{#if weaponProfs.length}}
							<div class="paper-font-subhead">Weapons</div>
						{{/if}}
						{{#each weaponProfs}}
							{{> proficiencyListItem}}
						{{/each}}
						{{#if armorProfs.length}}
							<div class="paper-font-subhead">Armor</div>
						{{/if}}
						{{#each armorProfs}}
							{{> proficiencyListItem}}
						{{/each}}
						{{#if toolProfs.length}}
							<div class="paper-font-subhead">Tools</div>
						{{/if}}
						{{#each toolProfs}}
							{{> proficiencyListItem}}
						{{/each}}
					</div>
				</paper-material>
			</div>

			<!--features-->
			{{#each features}}
				<div>
					<paper-material class="card featureCard" data-id={{_id}}>
						<div class="top {{colorClass}} paper-font-subhead layout horizontal">
							<div class="flex">
								{{name}}
							</div>
							{{#if hasUses}}
								<div style="margin-right: 8px">
									{{usesLeft}}/{{usesValue}}
								</div>
							{{/if}}
							{{#if canEnable}}
								<div>
									<paper-checkbox class="enabledCheckbox"
													checked={{enabled}}
													disabled={{#unless canEditCharacter charId}}true{{/unless}}>
									</paper-checkbox>
									{{#simpleTooltip}}Feature enabled{{/simpleTooltip}}
								</div>
							{{/if}}
						</div>
						{{#if hasCharacters (evaluateShortString charId description)}}
							<div class="bottom flex">
								{{#markdown}}{{evaluateShortString charId description}}{{/markdown}}
								{{> customBuffViewList charId=charId parentId=_id}}
							</div>
						{{/if}}
						{{#if hasUses}}
							<div class="layout horizontal center end-justified">
								<paper-button class="useFeature"
											  disabled={{noUsesLeft}}>
									Use
								</paper-button>
								<paper-button class="resetFeature"
											  disabled={{usesFull}}>
									Reset
								</paper-button>
							</div>
						{{/if}}
					</paper-material>
				</div>
			{{/each}}
		</div>
		{{#if canEditCharacter _id}}
			<div class="floatyButton">
				<paper-fab id="addFeature"
					class="{{#if shouldFloatyButtonBounce}}bounce{{/if}}"
					icon="add">
				</paper-fab>
				{{#simpleTooltip}}Add Feature{{/simpleTooltip}}
			</div>
		{{/if}}
	</div>
</template>

<template name="resource">
	{{#if characterCalculate "attributeBase" char._id name}}
	<div>
		<paper-material class="card layout horizontal">
			<div class="left {{getColor}} paper-font-display1 white-text layout horizontal center">
				<div style="margin-right: 8px;">
					<paper-icon-button class="resourceUp"
									   icon="arrow-drop-up"
									   disabled={{cantIncrement}}>
					</paper-icon-button>
					<paper-icon-button class="resourceDown"
									   icon="arrow-drop-down"
									   disabled={{cantDecrement}}>
					</paper-icon-button>
				</div>
				<div>{{characterCalculate "attributeValue" char._id name}}</div>
				<!--<div>/{{char.attributeBase name}}</div>-->
			</div>
			<div class="right clickable flex layout horizontal center">
				{{title}}
			</div>
			<div class="layout horizontal center">
				<div class="layout vertical">
					<paper-button class="resourceResetMax" disabled={{cantIncrement}}>Reset</paper-button>
					<paper-button class="resourceResetZero" disabled={{cantDecrement}}>Clear</paper-button>
				</div>
			</div>
		</paper-material>
	</div>
	{{/if}}
</template>

<template name="attackListItem">
	<div class="item-slot">
		<div class="flexible attack item">
			<div class="layout horizontal">
				<div class="paper-font-headline layout horizontal center"
					 style="margin-right: 16px;">
					{{evaluateAttackBonus charId attack}}
				</div>
				<div class="flex layout vertical">
					<div class="paper-font-body2">
						{{attack.name}}
					</div>
					<div>
						{{evaluateDamage charId attack}}&nbsp;{{attack.damageType}}
					</div>
					{{#if attack.details}}
						<div>
							{{attack.details}}
						</div>
					{{/if}}
				</div>
			</div>
		</div>
	</div>
</template>