feat(chat item-card): added item-card to display item info on chat

SouOWendel · Jul 9, 2024 · 04dc2d3 · 04dc2d3
1 parent fc029e7
commit 04dc2d3
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 3 deletions.
diff --git a/module/documents/item.mjs b/module/documents/item.mjs
@@ -30,6 +30,31 @@ export class ShinobiItem extends Item {
     return rollData;
   }
 
+	/**
+	 * Prepare an object of chat data used to display a card for the Item in the chat log.
+	 * @param {object} htmlOptions    Options used by the TextEditor.enrichHTML function.
+	 * @returns {object}              An object of chat data to render.
+	 */
+	async getChatData(htmlOptions = {}) {
+		const data = this.toObject().system;
+
+		// Rich text description
+		data.description = await TextEditor.enrichHTML(data.description, {
+			relativeTo: this,
+			rollData: this.getRollData(),
+			...htmlOptions,
+		});
+
+		// Type specific properties
+		// data.properties = [
+		//   ...this.system.chatProperties ?? [],
+		//   ...this.system.equippableItemChatProperties ?? [],
+		//   ...this.system.activatedEffectChatProperties ?? []
+		// ].filter(p => p);
+
+		return data;
+	}
+
   /**
    * Handle clickable rolls.
    * @param {Event} event   The originating click event
@@ -41,15 +66,26 @@ export class ShinobiItem extends Item {
     // Initialize chat data.
     const speaker = ChatMessage.getSpeaker({ actor: this.actor });
     const rollMode = game.settings.get('core', 'rollMode');
-    const label = `[${item.type}] ${item.name}`;
+    // const label = `[${item.type}] ${item.name}`;
+		const token = this.actor.token;
+
+		const templateData = {
+			actor: this.actor,
+			tokenId: token?.uuid || null,
+			item: this,
+			data: await this.getChatData(),
+			labels: this.labels,
+			system: [],
+			info: [],
+		};
 
     // If there's no roll data, send a chat message.
     if (!this.system.formula) {
       ChatMessage.create({
         speaker: speaker,
         rollMode: rollMode,
-        flavor: label,
-        content: item.system.description ?? '',
+        // flavor: label,
+        content: await renderTemplate('systems/shinobiNoSho/templates/chat/item-card.hbs', templateData),
       });
     }
     // Otherwise, create a roll and send a chat message from it.

diff --git a/src/scss/components/_itemcard.scss b/src/scss/components/_itemcard.scss
@@ -0,0 +1,44 @@
+&.item-card {
+	h2 { border: 0; margin: 0; }
+}
+
+.header {
+	display: flex;
+	padding-bottom: 5px;
+	margin-bottom: 5px;
+	align-items: center;
+	height: 100%;
+	.item-name {
+		padding-left: 5px;
+		width: 100%;
+	}
+	span {
+		width: 30px;
+		height: 100%;
+		text-align: center;
+	}
+	img {
+		border-radius: 4px;
+		border: 1px solid #949494
+	}
+}
+
+main {
+	.info {
+		span {
+			font-weight: bold;
+			color: #000000d5;
+		}
+	}
+}
+
+.descricao-chat-card,
+.caracteristicas-chat-card {
+	transition: 0.3s;
+	summary { padding-left: 5px; }
+}
+
+.descricao-chat-card:hover,
+.caracteristicas-chat-card:hover {
+	background-color: #c0c0c0;
+}
diff --git a/src/scss/shinobiNoSho.scss b/src/scss/shinobiNoSho.scss
@@ -18,4 +18,7 @@
   @import 'components/resource';
   @import 'components/items';
   @import 'components/effects';
+
+	/* Chat */
+	@import 'components/itemcard';
 }
diff --git a/templates/chat/item-card.hbs b/templates/chat/item-card.hbs
@@ -0,0 +1,103 @@
+<div class="shinobiNoSho chat-card item-card" data-actor-id="{{actor._id}}" data-item-id="{{item._id}}">
+	<div class="header container">
+		<img src="{{item.img}}" title="{{item.name}}" width="36px" height="36px" style="float: left;" />
+		<div class="item-name">
+			<h2>{{item.name}}</h2>
+		</div>
+		{{#if item.system.detalhes.custoChakra}}
+			<span class="container" data-tooltip="Custo de Chakra">{{item.system.detalhes.custoChakra}}</span>
+		{{/if}}
+	</div>
+	<h4 class="descricao-chat-card">
+		<details class="container">
+			<summary>Descrição</summary>
+			{{{item.system.descricao}}}
+		</details>
+	</h4>
+	{{#ifEquals item.type "aptidoes"}}
+	<h4 class="caracteristicas-chat-card">
+		<details class="container">
+			<summary>Características</summary>
+			{{{item.system.caracteristicas}}}
+		</details>
+	</h4>
+	{{/ifEquals}}
+	{{log item.system}}
+	<main class="container">
+		<ul class="info">
+			{{#ifEquals item.type "aptidoes"}}
+				<li><span>Nível de Aptidão: </span>{{item.system.nivelAptidao}}</li>
+				<li>
+					<span>Tipo de Aptidão: </span>
+					{{localize (concat "shinobiNoSho.ITEMS.aptidoes.tipoAptidao." item.system.tipoAptidao)}}
+				</li>
+				<li><span>Pré-requisito: </span>{{item.system.preRequisito}}</li>
+			{{/ifEquals}}
+
+			{{#ifEquals item.type "poderes"}}
+				<li><span>Nível de Poder: </span>{{item.system.nivelPoder}}</li>
+				<li><span>Pré-requisito: </span>{{item.system.preRequisito}}</li>
+			{{/ifEquals}}
+
+			{{#ifEquals item.type "tecnicas"}}
+				{{#if item.system.origem}} <li>
+					<span>Origem: </span>
+					{{localize (concat "shinobiNoSho.ITEMS.tecnicas.origem." item.system.origem)}}
+				</li> {{/if}}
+				{{#if item.system.combate.acao}} <li>
+					<span>Ação: </span>
+					{{localize (concat "shinobiNoSho.ITEMS.generico.acao." item.system.combate.acao)}}
+				</li>{{/if}}
+				{{#if item.system.combate.alcance.tipo}} <li>
+					<span>Alcance: </span>
+					{{localize (concat "shinobiNoSho.ITEMS.generico.alcance." item.system.combate.alcance.tipo)}}
+				</li>{{/if}}
+				{{#if item.system.combate.alvo}} <li><span>Alvo: </span>{{item.system.combate.alvo}}</li>{{/if}}
+				{{#if item.system.combate.areaEfeito.tipo}} <li>
+					<span>Área de Efeito: </span>
+					{{item.system.combate.areaEfeito.tipo}}
+					{{localize (concat "shinobiNoSho.ITEMS.tecnicas.areaEfeito." item.system.combate.areaEfeito.tipo)}}
+				</li> {{/if}}
+				{{#if item.system.combate.dano.value}} <li><span>Dano: </span>{{item.system.combate.dano.value}}</li>{{/if}}
+				{{#if item.system.combate.dano.tipo}} <li><span>Tipo de Dano: </span>{{item.system.combate.dano.tipo}}</li>{{/if}}
+				{{#if item.system.combate.duracao}} <li>
+					<span>Duração: </span>
+					{{localize (concat "shinobiNoSho.ITEMS.tecnicas.duracao." item.system.combate.duracao)}}
+				</li> {{/if}}
+				{{#if item.system.combate.efeitosOuAptidoes}} <li><span>Efeitos ou Aptidões: </span>{{item.system.combate.efeitosOuAptidoes}}</li>{{/if}}
+				{{#if item.system.combate.testeResistencia}} <li><span>Teste de Resistência: </span>{{item.system.combate.testeResistencia}}</li>{{/if}}
+			{{/ifEquals}}
+
+			{{#ifEquals item.type "armas"}}
+				{{#if item.system.combate.alcance.tipo}} <li>
+					<span>Alcance: </span>
+					{{localize (concat "shinobiNoSho.ITEMS.generico.alcance." item.system.combate.alcance.tipo)}}
+				</li>{{/if}}
+				{{#if item.system.combate.ataque.habilidadeCombate}}<li>
+					<span>Habilidade de Combate: </span><br>
+					{{localize (concat "shinobiNoSho.combatAbilities." item.system.combate.ataque.habilidadeCombate)}} 
+					({{item.actor.system.abilities.combate.CC.value}})
+				</li>{{/if}}
+				{{#if item.system.detalhes.tamanho}}<li><span>Tamanho: </span>{{item.system.detalhes.tamanho}}</li>{{/if}}
+			{{/ifEquals}}
+
+			{{#ifEquals item.type "armaduras"}}
+				<li><span>Bônus de Absorção: </span>{{item.system.bonusAbsorcao}}</li>
+				<li><span>Penalidade: </span>{{item.system.penalidade}}</li>
+				{{#if item.system.tipo}}<li>
+					<span>Tipo: </span>
+					{{localize (concat "shinobiNoSho.ITEMS.armaduras.tipo." item.system.tipo)}} 
+				</li>{{/if}}
+			{{/ifEquals}}
+
+			{{#ifEquals item.type "gerais"}}
+				<li><span>Preço: </span>{{item.system.preco}} ryos</li>
+				{{#if item.system.tipo}}<li>
+					<span>Tipo: </span>
+					{{localize (concat "shinobiNoSho.ITEMS.geral.tipo." item.system.tipo)}} 
+				</li>{{/if}}
+				<li><span>Quantidade: </span>{{item.system.quantidade}}</li>
+			{{/ifEquals}}
+		</ul>
+	</main>
+</div>