dmitry_k
/
compendium-browser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Items + restyle

pull/12/head
Matheus Clemente 2024-04-01 20:01:27 -03:00
parent e515bc23a6
commit dc08ae7ea5
6 changed files with 130 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/styles/compendium-browser.less
View File

@ -305,31 +305,31 @@
} }
} }
} }
.npc-browser { .browser {
.npc { li:hover {
cursor: default; .line {
vertical-align: middle; h4 {
line-height: 64px; text-shadow: 0 0 8px var(--color-shadow-primary);
margin: 4px 0; }
.npc-image { }
max-width: 64px; }
height: 64px;
.image {
max-width: 32px;
height: 32px;
img { img {
width: 64px; width: 32px;
height: 64px; height: 32px;
border: none; border: none;
object-fit: contain; object-fit: contain;
} }
} }
.npc-line {
line-height: 25px;
padding: 9px 0 5px 5px;
.npc-name { .line {
font-weight: bold; line-height: 25px;
font-size: 16px; margin: auto 0 auto 8px;
}
.npc-tags { .tags {
.bold { .bold {
font-weight: bold; font-weight: bold;
} }
@ -337,13 +337,42 @@
flex: 2; flex: 2;
} }
} }
} }
&:hover { .item {
.npc-line { cursor: default;
.npc-name { vertical-align: middle;
text-shadow: 0 0 8px var(--color-shadow-primary); line-height: 16px;
margin: 2px 0;
height: 32px;
.feat-tags {
text-align: right;
margin-right: 3px;
margin-left: 3px;
text-transform: capitalize;
height: 32px;
} }
.item-tags {
text-align: right;
margin-right: 3px;
margin-left: 3px;
text-transform: capitalize;
height: 32px;
}
}
.actor {
cursor: default;
vertical-align: middle;
line-height: 64px;
margin: 4px 0;
.image {
max-width: 64px;
height: 64px;
img {
width: 64px;
height: 64px;
} }
} }
} }

7
src/vue/CompendiumBrowser.vue
View File

@ -21,8 +21,7 @@
</Tab> </Tab>
<Tab group="primary" :tab="tabs.primary.items" classes="container container--bottom flexrow"> <Tab group="primary" :tab="tabs.primary.items" classes="container container--bottom flexrow">
<Stub>Items</Stub> <CompendiumBrowserItems v-if="tabs.primary.items.active || tabs.primary.items.opened" :tab="tabs.primary.items"/>
<!-- <CompendiumBrowserItems v-if="tabs.primary.items.active || tabs.primary.items.opened" :tab="tabs.primary.items"/> -->
</Tab> </Tab>
</section> </section>
@ -35,7 +34,7 @@ import Tabs from '@/components/parts/Tabs.vue';
import Tab from '@/components/parts/Tab.vue'; import Tab from '@/components/parts/Tab.vue';
import CompendiumBrowserCreatures from '@/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue'; import CompendiumBrowserCreatures from '@/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue';
// import CompendiumBrowserPowers from '@/components/dialogs/compendium-browser/CompendiumBrowserPowers.vue'; // import CompendiumBrowserPowers from '@/components/dialogs/compendium-browser/CompendiumBrowserPowers.vue';
// import CompendiumBrowserItems from '@/components/dialogs/compendium-browser/CompendiumBrowserItems.vue'; import CompendiumBrowserItems from '@/components/dialogs/compendium-browser/CompendiumBrowserItems.vue';
// Stub is an example component and should be removed once the others are all working. // Stub is an example component and should be removed once the others are all working.
import Stub from '@/components/dialogs/compendium-browser/Stub.vue'; import Stub from '@/components/dialogs/compendium-browser/Stub.vue';
@ -49,7 +48,7 @@ export default {
Stub, Stub,
CompendiumBrowserCreatures, CompendiumBrowserCreatures,
// CompendiumBrowserPowers, // CompendiumBrowserPowers,
// CompendiumBrowserItems CompendiumBrowserItems
}, },
setup() { setup() {
return { return {

20
src/vue/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue
View File

@ -9,14 +9,14 @@
</div> </div>
<!-- Sort --> <!-- Sort -->
<dl class="sorter"> <div class="form-group">
<dt>{{ game.i18n.localize('Sort by:') }}</dt> <label>{{ game.i18n.localize('Sort by:') }}</label>
<dd> <div class="form-fields">
<select class="sort" name="sortorder" v-model="sortBy"> <select class="sort" name="sortorder" v-model="sortBy">
<option v-for="(option, index) in sortOptions" :key="index" :value="option.value">{{ option.label }}</option> <option v-for="(option, index) in sortOptions" :key="index" :value="option.value">{{ option.label }}</option>
</select> </select>
</dd> </div>
</dl> </div>
</div> </div>
<div class="filtercontainer"> <div class="filtercontainer">
@ -146,17 +146,17 @@
<!-- <section class="section section--npcs section--main flexcol"> --> <!-- <section class="section section--npcs section--main flexcol"> -->
<ul v-if="loaded" class="compendium-browser-results compendium-browser-npcs"> <ul v-if="loaded" class="compendium-browser-results compendium-browser-npcs">
<!-- Individual creature entries. --> <!-- Individual creature entries. -->
<li v-for="(entry, entryKey) in entries" :key="entryKey" :class="`npc flexrow draggable compendium-browser-row${entryKey >= pager.lastIndex - 1 && entryKey < pager.totalRows - 1 ? ' compendium-browser-row-observe': ''} document actor`" :data-document-id="entry._id" @click="openDocument(entry.uuid)" @dragstart="startDrag($event, entry, 'Actor')" draggable="true"> <li v-for="(entry, entryKey) in entries" :key="entryKey" :class="`flexrow draggable compendium-browser-row${entryKey >= pager.lastIndex - 1 && entryKey < pager.totalRows - 1 ? ' compendium-browser-row-observe': ''} document actor`" :data-document-id="entry._id" @click="openDocument(entry.uuid)" @dragstart="startDrag($event, entry, 'Actor')" draggable="true">
<!-- Both the image and title have drag events. These are primarily separated so that --> <!-- Both the image and title have drag events. These are primarily separated so that -->
<!-- if a user drags the token, it will only show the token as their drag preview. --> <!-- if a user drags the token, it will only show the token as their drag preview. -->
<div class="npc-image"> <div class="image">
<img :src="entry.img ?? 'icons/svg/mystery-man.svg'"/> <img :src="entry.img ?? 'icons/svg/mystery-man.svg'"/>
</div> </div>
<div class="npc-line"> <div class="line">
<!-- First row is the title. --> <!-- First row is the title. -->
<div class="npc-name">[{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}] {{ entry.name }}</div> <h4 class="name">[{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}] {{ entry.name }}</h4>
<!-- Second row is supplemental info. --> <!-- Second row is supplemental info. -->
<div class="npc-tags flexrow"> <div class="tags flexrow">
<div class="numbers flexrow"> <div class="numbers flexrow">
<!-- <span class="cr" :data-tooltip="game.i18n.localize('Challenge rating')">CR {{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}</span> --> <!-- <span class="cr" :data-tooltip="game.i18n.localize('Challenge rating')">CR {{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}</span> -->
<span class="hp"><span class="bold">HP:</span> {{ entry.system.attributes.hp.max }}</span> <span class="hp"><span class="bold">HP:</span> {{ entry.system.attributes.hp.max }}</span>

163
src/vue/components/dialogs/compendium-browser/CompendiumBrowserItems.vue
View File

@ -1,107 +1,68 @@
<template> <template>
<section class="section section--sidebar flexcol filters"> <div class="item-browser browser flexrow">
<section class="control-area flexcol">
<!-- Sort. --> <div class="controls">
<div class="unit unit--input"> <div class="filtercontainer">
<label for="compendiumBrowser.sort" class="unit-title">{{ localize('ARCHMAGE.sort') }}</label> <!-- Name filter. -->
<select class="sort" name="compendiumBrowser.sort" v-model="sortBy"> <div class="filter">
<input type="text" name="compendiumBrowser.name" v-model="name" :placeholder="game.i18n.localize('Name')" />
</div>
<!-- Sort -->
<div class="form-group">
<label>{{ game.i18n.localize('Sort by:') }}</label>
<div class="form-fields">
<select class="sort" name="sortorder" v-model="sortBy">
<option v-for="(option, index) in sortOptions" :key="index" :value="option.value">{{ option.label }}</option> <option v-for="(option, index) in sortOptions" :key="index" :value="option.value">{{ option.label }}</option>
</select> </select>
</div> </div>
<!-- Name filter. -->
<div class="unit unit--input">
<label class="unit-title" for="compendiumBrowser.itemName">{{ localize('ARCHMAGE.name') }}</label>
<input type="text" name="compendiumBrowser.itemName" v-model="name" placeholder="Sword"/>
</div> </div>
<!-- Chakra filter. -->
<div class="unit unit--input">
<label class="unit-title" for="compendiumBrowser.chakra">{{ localize('ARCHMAGE.chakra') }}</label>
<Multiselect
v-model="chakra"
mode="tags"
:searchable="false"
:create-option="false"
:options="chakraSlots"
/>
</div> </div>
<!-- Bonuses filter. -->
<div class="unit unit--input">
<h2 class="unit-title" for="compendiumBrowser.bonuses">{{ localize('ARCHMAGE.bonus') }}</h2>
<Multiselect
v-model="bonuses"
mode="tags"
:searchable="false"
:create-option="false"
:options="bonusOptions"
/>
</div> </div>
<footer>
<!-- Recharge filter. -->
<div class="unit unit--input">
<h2 class="unit-title" for="compendiumBrowser.recharge">{{ localize('ARCHMAGE.recharge') }}</h2>
<Multiselect
v-model="recharge"
mode="tags"
:searchable="false"
:create-option="false"
:options="rechargeOptions"
/>
</div>
<!-- Usage filter. -->
<div class="unit unit--input">
<label class="unit-title" for="compendiumBrowser.powerUsage">{{ localize('ARCHMAGE.GROUPS.powerUsage') }}</label>
<Multiselect
v-model="powerUsage"
mode="tags"
:searchable="false"
:create-option="false"
:options="CONFIG.ARCHMAGE.powerUsages"
/>
</div>
<!-- Reset. --> <!-- Reset. -->
<div class="unit unit--input flexrow"> <button type="reset" @click="resetFilters()">{{ game.i18n.localize('Reset Filters') }}</button>
<button type="reset" @click="resetFilters()">{{ localize('Reset') }}</button> </footer>
</div>
</section> </section>
<section class="section section--no-overflow"> <section class="list-area flexcol">
<!-- Items results. --> <!-- Items results. -->
<section class="section section--main section--inventory flexcol">
<ul v-if="loaded" class="compendium-browser-results compendium-browser-items"> <ul v-if="loaded" class="compendium-browser-results compendium-browser-items">
<!-- Individual items entries. --> <!-- Individual items entries. -->
<li v-for="(equipment, equipmentKey) in entries" :key="equipmentKey" :class="`equipment-summary equipment compendium-browser-row${equipmentKey >= pager.lastIndex - 1 && equipmentKey < pager.totalRows - 1 ? ' compendium-browser-row-observe': ''} flexrow document item equipment-item`" :data-document-id="equipment._id" @click="openDocument(equipment.uuid, 'Item')"> <li v-for="(equipment, equipmentKey) in entries" :key="equipmentKey" :class="`flexrow draggable compendium-browser-row${equipmentKey >= pager.lastIndex - 1 && equipmentKey < pager.totalRows - 1 ? ' compendium-browser-row-observe': ''} document item`" :data-document-id="equipment._id" @click="openDocument(equipment.uuid, 'Item')" @dragstart="startDrag($event, entry, 'Actor')" draggable="true">
<!-- Both the image and title have drag events. These are primarily separated so that --> <!-- Both the image and title have drag events. These are primarily separated so that -->
<!-- if a user drags the token, it will only show the token as their drag preview. --> <!-- if a user drags the token, it will only show the token as their drag preview. -->
<img :src="equipment.img" class="equipment-image" @dragstart="startDrag($event, equipment, 'Item')" draggable="true"/> <div class="image">
<div class="flexcol equipment-contents" @dragstart="startDrag($event, equipment, 'Item')" draggable="true"> <img :src="equipment.img" />
<!-- First row is the title. -->
<div class="equipment-title-wrapper">
<strong class="equipment-title unit-subtitle">{{equipment.name}}</strong>
</div> </div>
<div class="line">
<!-- First row is the title. -->
<h4 class="name">{{ equipment.name }}</h4>
<!-- Second row is supplemental info. --> <!-- Second row is supplemental info. -->
<div class="grid equipment-grid"> <div class="grid equipment-grid">
<div class="equipment-bonus flexrow" :data-tooltip="localize('ARCHMAGE.bonuses')" data-tooltip-direction="RIGHT" v-if="equipment.system.attributes"> <div class="equipment-bonus flexrow" :data-tooltip="game.i18n.localize('ARCHMAGE.bonuses')" data-tooltip-direction="RIGHT" v-if="equipment.system.attributes">
<span class="bonus" v-for="(bonus, bonusProp) in getBonuses(equipment)" :key="bonusProp"> <span class="bonus" v-for="(bonus, bonusProp) in getBonuses(equipment)" :key="bonusProp">
<span class="bonus-label">{{localizeEquipmentBonus(bonusProp)}} </span> <span class="bonus-label">{{localizeEquipmentBonus(bonusProp)}} </span>
<span class="bonus-value">{{numberFormat(bonus, 0, true)}}</span> <span class="bonus-value">{{numberFormat(bonus, 0, true)}}</span>
</span> </span>
</div> </div>
<div class="equipment-usage" v-if="equipment.system?.powerUsage?.value" :data-tooltip="localize('ARCHMAGE.GROUPS.powerUsage')">{{ CONFIG.ARCHMAGE.powerUsages[equipment.system?.powerUsage?.value ?? ''] ?? '' }}</div> <div class="equipment-usage" v-if="equipment.system?.powerUsage?.value" :data-tooltip="game.i18n.localize('ARCHMAGE.GROUPS.powerUsage')">
<div class="equipment-chakra" :data-tooltip="localize('ARCHMAGE.chakra')" v-if="equipment.system.chackra">{{localize(`ARCHMAGE.CHAKRA.${equipment.system.chackra}Label`)}}</div> {{ '' }}
<div class="equipment-recharge" :data-tooltip="localize('ARCHMAGE.recharge')">{{ `${equipment.system?.recharge?.value > 0 ? Number(equipment.system.recharge.value) + '+' : ''}`}}</div> </div>
<div class="equipment-chakra" :data-tooltip="game.i18n.localize('ARCHMAGE.chakra')" v-if="equipment.system.chackra">
{{localize(`ARCHMAGE.CHAKRA.${equipment.system.chackra}Label`)}}
</div>
<div class="equipment-recharge" :data-tooltip="game.i18n.localize('ARCHMAGE.recharge')">
{{ `${equipment.system?.recharge?.value > 0 ? Number(equipment.system.recharge.value) + '+' : ''}`}}
</div>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
<div v-else class="compendium-browser-loading"><p><i class="fas fa-circle-notch fa-spin"></i>Please wait, loading...</p></div> <div v-else class="compendium-browser-loading"><p><i class="fas fa-circle-notch fa-spin"></i>Please wait, loading...</p></div>
</section> </section>
</section> </div>
</template> </template>
<script> <script>
@ -113,8 +74,8 @@ import Multiselect from '@vueform/multiselect';
// Helper methods. // Helper methods.
import { import {
getPackIndex, getPackIndex,
localize, // localize,
localizeEquipmentBonus, // localizeEquipmentBonus,
numberFormat, numberFormat,
openDocument, openDocument,
startDrag startDrag
@ -131,8 +92,8 @@ export default {
setup() { setup() {
return { return {
// Imported methods that need to be available in the <template> // Imported methods that need to be available in the <template>
localize, // localize,
localizeEquipmentBonus, // localizeEquipmentBonus,
numberFormat, numberFormat,
openDocument, openDocument,
startDrag, startDrag,
@ -157,10 +118,8 @@ export default {
// Sorting. // Sorting.
sortBy: 'name', sortBy: 'name',
sortOptions: [ sortOptions: [
{ value: 'name', label: game.i18n.localize('ARCHMAGE.name') }, { value: 'name', label: game.i18n.localize('Name') },
{ value: 'chakra', label: game.i18n.localize('ARCHMAGE.chakra') }, { value: 'type', label: game.i18n.localize('Type') },
{ value: 'recharge', label: game.i18n.localize('ARCHMAGE.recharge') },
{ value: 'usage', label: game.i18n.localize('ARCHMAGE.GROUPS.powerUsage') },
], ],
// Our list of pseudo documents returned from the compendium. // Our list of pseudo documents returned from the compendium.
packIndex: [], packIndex: [],
@ -305,9 +264,6 @@ export default {
}, },
chakraSlots() { chakraSlots() {
const result = {}; const result = {};
for (let [k,v] of Object.entries(CONFIG.ARCHMAGE.chakraSlots)) {
result[k] = this.game.i18n.localize(`${v}Label`);
}
return result; return result;
}, },
nightmode() { nightmode() {
@ -412,37 +368,14 @@ export default {
// Load the pack index with the fields we need. // Load the pack index with the fields we need.
getPackIndex([ getPackIndex([
'archmage.srd-magic-items-armors', 'dnd5e.items',
'archmage.srd-magic-items-arrows',
'archmage.srd-magic-items-belts',
'archmage.srd-magic-items-books',
'archmage.srd-magic-items-boots',
'archmage.srd-magic-items-chuul-symbiotes',
'archmage.srd-magic-items-cloaks',
'archmage.srd-magic-items-consumables',
'archmage.srd-magic-items-cursed',
'archmage.srd-magic-items-gloves',
'archmage.srd-magic-items-helmets',
'archmage.srd-magic-items-necklaces',
'archmage.srd-magic-items-rings',
'archmage.srd-magic-items-shields',
'archmage.srd-magic-items-staffs',
'archmage.srd-magic-items-symbols',
'archmage.srd-magic-items-wands',
'archmage.srd-magic-items-weapons',
'archmage.srd-magic-items-wondrous-items',
], [ ], [
'system.chackra', 'system.activation.type',
'system.recharge.value', 'system.armor.type',
'system.powerUsage.value', 'system.damage',
'system.attributes.attack', 'system.rarity',
'system.attributes.ac', 'system.source.book',
'system.attributes.md', 'system.type'
'system.attributes.pd',
'system.attributes.hp',
'system.attributes.recoveries',
'system.attributes.save',
'system.attributes.disengage',
]).then(packIndex => { ]).then(packIndex => {
this.packIndex = packIndex; this.packIndex = packIndex;
this.loaded = true; this.loaded = true;

2
src/vue/components/parts/Tabs.vue
View File

@ -40,7 +40,7 @@ export default {
} }
}, },
getTabClass(tab, index) { getTabClass(tab, index) {
return `tab-link tab-link--${index}${tab.active ? ' active': ''}`; return `item tab-link tab-link--${index}${tab.active ? ' active': ''}`;
} }
}, },
async mounted() { async mounted() {

3
src/vue/methods/Helpers.js
View File

@ -54,8 +54,7 @@ export function getActorModuleArt(actor) {
* @returns Combined entries from the queried compendiums. * @returns Combined entries from the queried compendiums.
*/ */
export async function getPackIndex(packNames = [], fields = []) { export async function getPackIndex(packNames = [], fields = []) {
if (!packNames) return; if (!packNames || !fields || fields.length < 1) return [];
if (!fields || fields.length < 1) return;
let packs = []; let packs = [];