Merge pull request #60 from Eldritch-Oliver/feature/embedded-item-creation

Add a way to create items from within the Hero sheet directly

assets/_credit.txt

@@ -16,6 +16,9 @@ ARISO:
 Abdulloh Fauzan:
 	- icons/info-circle.svg (https://thenounproject.com/icon/information-4176576/) : Rights Purchased
 
+hanifmuhammad:
+	- icons/plus.svg (https://thenounproject.com/icon/plus-7363257/) : Rights Purchased
+
 QOLBIN SALIIM:
 	- icons/arrow-left.svg (https://thenounproject.com/icon/arrow-1933583/) : Rights Purchased
 	- icons/arrow-right.svg (https://thenounproject.com/icon/arrow-1933581/) : Rights Purchased

assets/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+	<path d="m83.59 16.41c-18.547-18.547-48.633-18.547-67.18 0s-18.547 48.633 0 67.18 48.633 18.547 67.18 0 18.547-48.633 0-67.18zm-6.3438 39.922h-20.914v20.91c0 3.5039-2.8398 6.332-6.332 6.332s-6.332-2.8281-6.332-6.332v-20.91h-20.914c-3.5039 0-6.332-2.8398-6.332-6.332s2.8281-6.332 6.332-6.332h20.914v-20.914c0-3.5039 2.8398-6.332 6.332-6.332s6.332 2.8281 6.332 6.332v20.91h20.91c3.5039 0 6.332 2.8398 6.332 6.332 0.003906 3.4961-2.8242 6.3359-6.3281 6.3359z"/>
+</svg>

langs/en-ca.json

@@ -206,6 +206,7 @@
 			"shield-bonus": "Shield Bonus: {value}",
 			"set-fate-to": "Set Fate to {ordinal}",
 			"current-tour": "Current Delve Tour",
+			"create-new-item": "Create new item",
 			"next-tour": "Next Delve Tour",
 			"prev-tour": "Previous Delve Tour",
 			"auras": {

module/Apps/utils.mjs

@@ -11,7 +11,7 @@ export async function createItemFromElement(target, { parent } = {}) {
 	const type = data.defaultItemType;
 	await Item.createDialog(
 		{ type },
-		{ parent },
+		{ parent, showEquipPrompt: false },
 		{
 			types,
 			folders: [],

templates/Apps/SkillsCardV1/content.hbs

@@ -1,6 +1,19 @@
 <div class="SkillsCardV1">
 	<div class="label col-header list-header gait-skills-header">
 		<span>{{ rc-i18n "RipCrypt.Apps.grit-skills" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="skill"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
 	</div>
 	<ol class="num-before skill-list even grit-skills">
 		{{#each skills.grit as | skill |}}
@@ -23,6 +36,19 @@
 
 	<div class="label col-header list-header gait-skills-header">
 		<span>{{ rc-i18n "RipCrypt.Apps.gait-skills" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="skill"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
 	</div>
 	<ol class="num-before skill-list even gait-skills">
 		{{#each skills.gait as | skill |}}
@@ -45,6 +71,19 @@
 
 	<div class="label col-header list-header grip-skills-header">
 		<span>{{ rc-i18n "RipCrypt.Apps.grip-skills" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="skill"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
 	</div>
 	<ol class="num-before skill-list odd grip-skills">
 		{{#each skills.grip as | skill |}}
@@ -67,6 +106,19 @@
 
 	<div class="label col-header list-header glim-skills-header">
 		<span>{{ rc-i18n "RipCrypt.Apps.glim-skills" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="skill"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
 	</div>
 	<ol class="num-before skill-list odd glim-skills">
 		{{#each skills.glim as | skill |}}
@@ -89,6 +141,21 @@
 
 	<div class="label col-header list-header">
 		<span>{{ rc-i18n "RipCrypt.common.gear" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="ammo,armour,good,shield,weapon"
+			data-default-item-type="good"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
+		<div class="grow"></div>
 		<span class="small">{{ rc-i18n "RipCrypt.common.slot" }}</span>
 	</div>
 	<ol class="num-after gear-list">

templates/Apps/SkillsCardV1/style.css

@@ -34,7 +34,7 @@
 
 	.list-header {
 		display: flex;
-		justify-content: space-between;
+		gap: 4px;
 		align-items: center;
 		border-radius: 999px;
 	}

templates/Apps/StatsCardV1/content.hbs

@@ -205,7 +205,23 @@
 	<table class="weapons">
 		<thead>
 			<tr>
-				<th class="label col-header left-pill">{{ rc-i18n "RipCrypt.common.weapon.singular" }}</th>
+				<th class="label col-header left-pill">
+					{{ rc-i18n "RipCrypt.common.weapon.singular" }}
+					<button
+						class="transparent"
+						data-action="createItem"
+						data-item-types="weapon,ammo"
+						data-default-item-type="weapon"
+						data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+						aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+					>
+						<rc-icon
+							name="icons/plus"
+							var:size="16px"
+							var:fill="var(--accent-3)"
+						></rc-icon>
+					</button>
+				</th>
 				<th class="label col-header">{{ rc-i18n "RipCrypt.Apps.traits-range" }}</th>
 				<th class="label col-header">{{ rc-i18n "RipCrypt.common.wear" }}</th>
 				<th class="label col-header right-pill">{{ rc-i18n "RipCrypt.common.damage" }}</th>

templates/Apps/StatsCardV1/style.css

@@ -12,6 +12,10 @@
 	color: var(--base-text);
 
 	.col-header {
+		display: flex;
+		flex-direction: row;
+		gap: 4px;
+		align-items: center;
 		background: var(--section-header-background);
 		color: var(--section-header-text);
 	}

templates/css/elements/generic.css

@@ -4,4 +4,6 @@
 	.left-pill { border-radius: 999px 0 0 999px; }
 	.right-pill { border-radius: 0 999px 999px 0; }
 	.full-pill { border-radius: 999px; }
+
+	.grow { flex-grow: 1; }
 }