Skip to content

Commit

Permalink
Merge pull request #37 from Tmktahu/tk-update-item-type-filters
Browse files Browse the repository at this point in the history 
Update Item Type Filter UI
  • Loading branch information
@Tmktahu
Tmktahu authored Oct 28, 2023
2 parents d1f35d2 + 81397e5 commit 4adc9b2
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 77 deletions.
182 changes: 153 additions & 29 deletions src/components/ItemFilters.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,13 @@
<p-button class="filter-button" label="Reset Filters" @click="onResetFilters" />
</div>

<div class="flex gap-2">
<div class="checkmarks-container flex gap-2">
<div class="rarity-container mt-2">
<div class="mb-1">Rarities</div>
<div class="flex align-items-center mb-1">
<p-button class="filter-button item-filter-action" label="All" @click="onSelectAllRarities" />
<div class="mx-2">Rarities</div>
<p-button class="filter-button item-filter-action" label="None" @click="onClearAllRarities" />
</div>
<div class="rarity-button-wrapper">
<template v-for="rarity in rarityFilters" :key="rarity.id">
<tippy duration="0">
Expand All @@ -38,33 +42,114 @@
</div>

<div class="item-types-container mt-2">
<div class="flex align-items-center mb-1">
<p-button class="filter-button item-filter-action" label="Select All" @click="onSelectAllItemTypes" />
<div class="flex align-items-center justify-content-center mb-1 w-full">
<p-button class="filter-button item-filter-action" label="All" @click="onSelectAllItemTypes" />
<div class="mx-2">Item Types</div>
<p-button class="filter-button item-filter-action" label="Clear All" @click="onClearAllItemTypes" />
<tippy>
<p-checkbox v-model="showAdvancedFilters" class="mr-2" :binary="true" />

<template v-slot:content>
<div class="simple-tooltip">Show All Filters</div>
</template>
</tippy>
<p-button class="filter-button item-filter-action" label="None" @click="onClearAllItemTypes" />
</div>
<div class="item-types-button-wrapper">
<template v-for="itemType in itemTypeFilters" :key="itemType.id">
<tippy duration="0">
<p-checkbox v-model="itemType.checked" :binary="true" class="item-type-checkbox" @change="updateFilters">
<template v-slot:icon="slotProps">
<div class="flex justify-content-center align-items-center">
<p-image
:class="{ disabled: !slotProps.checked }"
:src="`https://tmktahu.github.io/WakfuAssets/itemTypes/${itemType.rawId}.png`"
image-style="width: 16px;"
/>
<div class="filter-category-wrapper">
<template v-for="itemType in itemTypeFilters.filter((entry) => entry.category === 'armor')" :key="itemType.id">
<tippy v-if="!itemType.advanced || showAdvancedFilters" duration="0">
<p-checkbox v-model="itemType.checked" :binary="true" class="item-type-checkbox" @change="updateFilters">
<template v-slot:icon="slotProps">
<div class="flex justify-content-center align-items-center">
<p-image
v-if="itemType.rawId"
:class="{ disabled: !slotProps.checked }"
:src="`https://tmktahu.github.io/WakfuAssets/itemTypes/${itemType.rawId}.png`"
image-style="width: 16px;"
/>

<p-image
v-else
:class="{ disabled: !slotProps.checked }"
:src="`https://tmktahu.github.io/WakfuAssets/itemTypes/${itemType.rawIds[0]}.png`"
image-style="width: 16px;"
/>
</div>
</template>
</p-checkbox>

<template v-slot:content>
<div class="simple-tooltip">
{{ itemType.name }}
</div>
</template>
</p-checkbox>

<template v-slot:content>
<div class="simple-tooltip">
{{ itemType.name }}
</div>
</template>
</tippy>
</template>
</tippy>
</template>
</div>

<div class="filter-category-wrapper">
<template v-for="itemType in itemTypeFilters.filter((entry) => entry.category === 'weapons')" :key="itemType.id">
<tippy v-if="!itemType.advanced || showAdvancedFilters" duration="0">
<p-checkbox v-model="itemType.checked" :binary="true" class="item-type-checkbox" @change="updateFilters(itemType)">
<template v-slot:icon="slotProps">
<div class="flex justify-content-center align-items-center">
<p-image
v-if="itemType.rawId"
:class="{ disabled: !slotProps.checked }"
:src="`https://tmktahu.github.io/WakfuAssets/itemTypes/${itemType.rawId}.png`"
image-style="width: 16px;"
/>

<p-image
v-else
:class="{ disabled: !slotProps.checked }"
:src="`https://tmktahu.github.io/WakfuAssets/itemTypes/${itemType.rawIds[0]}.png`"
image-style="width: 16px;"
/>
</div>
</template>
</p-checkbox>

<template v-slot:content>
<div class="simple-tooltip">
{{ itemType.name }}
</div>
</template>
</tippy>
</template>
</div>

<div class="filter-category-wrapper">
<template v-for="itemType in itemTypeFilters.filter((entry) => entry.category === 'miscellaneous')" :key="itemType.id">
<tippy v-if="!itemType.advanced || showAdvancedFilters" duration="0">
<p-checkbox v-model="itemType.checked" :binary="true" class="item-type-checkbox" @change="updateFilters">
<template v-slot:icon="slotProps">
<div class="flex justify-content-center align-items-center">
<p-image
v-if="itemType.rawId"
:class="{ disabled: !slotProps.checked }"
:src="`https://tmktahu.github.io/WakfuAssets/itemTypes/${itemType.rawId}.png`"
image-style="width: 16px;"
/>

<p-image
v-else
:class="{ disabled: !slotProps.checked }"
:src="`https://tmktahu.github.io/WakfuAssets/itemTypes/${itemType.rawIds[0]}.png`"
image-style="width: 16px;"
/>
</div>
</template>
</p-checkbox>

<template v-slot:content>
<div class="simple-tooltip">
{{ itemType.name }}
</div>
</template>
</tippy>
</template>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -167,6 +252,7 @@ const levelRange = ref([itemFilters.startLevel, itemFilters.endLevel]);
const effectFilters = ref([]);
const rarityFilters = ref(itemFilters.rarityFilters);
const itemTypeFilters = ref(itemFilters.itemTypeFilters);
const showAdvancedFilters = ref(false);
const onSearchInput = () => {
updateFilters();
Expand All @@ -180,13 +266,25 @@ const onLevelRangeChange = () => {
updateFilters();
};
const updateFilters = () => {
const updateFilters = (itemTypeFilter) => {
itemFilters.searchTerm = searchTerm.value;
itemFilters.startLevel = levelRange.value[0];
itemFilters.endLevel = levelRange.value[1];
itemFilters.effectFilters = effectFilters.value;
itemFilters.rarityFilters = rarityFilters.value;
itemFilters.itemFilters = itemFilters.value;
if (itemTypeFilter && itemTypeFilter.rawIds?.length) {
handleGroupItemTypeFilter(itemTypeFilter);
} else {
itemFilters.itemTypeFilters = itemTypeFilters.value;
}
};
const handleGroupItemTypeFilter = (itemTypeFilter) => {
itemTypeFilter.rawIds.forEach((targetFilterRawId) => {
let targetFilter = itemTypeFilters.value.find((filter) => filter.rawId === targetFilterRawId);
targetFilter.checked = itemTypeFilter.checked;
});
};
const onAddFilter = () => {
Expand Down Expand Up @@ -216,6 +314,20 @@ const onResetFilters = () => {
itemTypeFilters.value = itemFilters.itemTypeFilters;
};
const onSelectAllRarities = () => {
itemFilters.rarityFilters.forEach((filter) => {
filter.checked = true;
});
updateFilters();
};
const onClearAllRarities = () => {
itemFilters.rarityFilters.forEach((filter) => {
filter.checked = false;
});
updateFilters();
};
const onSelectAllItemTypes = () => {
itemFilters.itemTypeFilters.forEach((filter) => {
filter.checked = true;
Expand Down Expand Up @@ -363,10 +475,16 @@ const onClearAllItemTypes = () => {
.item-types-button-wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
}
.filter-category-wrapper {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
border: 1px solid var(--bonta-blue-40);
border-radius: 8px;
padding: 6px 6px;
}
}
Expand Down Expand Up @@ -404,4 +522,10 @@ const onClearAllItemTypes = () => {
margin-right: 0px;
}
}
@media (max-width: 1024px) {
.checkmarks-container {
flex-direction: column;
}
}
</style>
41 changes: 41 additions & 0 deletions src/models/useConstants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,47 @@ export const ITEM_TYPE_DATA = [
{ id: 'costumes', rawId: 647, name: 'Costumes', validSlots: [] },
];

export const ITEM_TYPE_FILTERS = [
{ id: 'helmet', rawId: 134, name: 'Helmet', category: 'armor', advanced: false, validSlots: [ITEM_SLOT_DATA.HEAD] },
{ id: 'amulet', rawId: 120, name: 'Amulet', category: 'armor', advanced: false, validSlots: [ITEM_SLOT_DATA.NECK] },
{ id: 'epaulettes', rawId: 138, name: 'Epaulettes', category: 'armor', advanced: false, validSlots: [ITEM_SLOT_DATA.SHOULDERS] },
{ id: 'breastplate', rawId: 136, name: 'Breastplate', category: 'armor', advanced: false, validSlots: [ITEM_SLOT_DATA.CHEST] },
{ id: 'cloak', rawId: 132, name: 'Cloak', category: 'armor', advanced: false, validSlots: [ITEM_SLOT_DATA.BACK] },
{ id: 'belt', rawId: 133, name: 'Belt', category: 'armor', advanced: false, validSlots: [ITEM_SLOT_DATA.BELT] },
{ id: 'boots', rawId: 119, name: 'Boots', category: 'armor', advanced: false, validSlots: [ITEM_SLOT_DATA.LEGS] },
{ id: 'ring', rawId: 103, name: 'Ring', category: 'armor', advanced: false, validSlots: [ITEM_SLOT_DATA.RIGHT_HAND, ITEM_SLOT_DATA.LEFT_HAND] },

// eslint-disable-next-line prettier/prettier
{ id: 'oneHandedWeapons', rawIds: [108, 110, 113, 115, 254], name: 'One Handed Weapons', category: 'weapons', advanced: false, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
// eslint-disable-next-line prettier/prettier
{ id: 'twoHandedWeapons', rawIds: [223, 101, 253, 114, 117, 111], name: 'Two Handed Weapons', category: 'weapons', advanced: false, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },

{ id: 'wand', rawId: 108, name: 'Wand (One Hand)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'sword', rawId: 110, name: 'Sword (One Hand)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'staff', rawId: 113, name: 'Staff (One Hand)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'clockHand', rawId: 115, name: 'Clock Hand (One Hand)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'cards', rawId: 254, name: 'Cards (One Hand)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },

{ id: 'twoHandedSword', rawId: 223, name: 'Sword (Two Handed)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'twoHandedAxe', rawId: 101, name: 'Axe (Two Handed)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'twoHandedStaff', rawId: 253, name: 'Staff (Two Handed)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'hammer', rawId: 114, name: 'Hammer (Two Handed)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'bow', rawId: 117, name: 'Bow (Two Handed)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },
{ id: 'shovel', rawId: 111, name: 'Shovel (Two Handed)', category: 'weapons', advanced: true, validSlots: [ITEM_SLOT_DATA.FIRST_WEAPON] },

{ id: 'dagger', rawId: 112, name: 'Dagger (Secondary Weapon)', category: 'weapons', advanced: false, validSlots: [ITEM_SLOT_DATA.SECOND_WEAPON] },
{ id: 'shield', rawId: 189, name: 'Shield (Secondary Weapon)', category: 'weapons', advanced: false, validSlots: [ITEM_SLOT_DATA.SECOND_WEAPON] },

{ id: 'emblem', rawId: 646, name: 'Emblem', category: 'miscellaneous', advanced: false, validSlots: [ITEM_SLOT_DATA.ACCESSORY] },
{ id: 'pets', rawId: 582, name: 'Pets', category: 'miscellaneous', advanced: false, validSlots: [ITEM_SLOT_DATA.PET] },
{ id: 'mounts', rawId: 611, name: 'Mounts', category: 'miscellaneous', advanced: false, validSlots: [ITEM_SLOT_DATA.MOUNT] },
{ id: 'tool', rawId: 537, name: 'Tool', category: 'miscellaneous', advanced: true, validSlots: [] },
{ id: 'torches', rawId: 480, name: 'Torches', category: 'miscellaneous', advanced: true, validSlots: [] },
{ id: 'costumes', rawId: 647, name: 'Costumes', category: 'miscellaneous', advanced: true, validSlots: [] },
{ id: 'sublimationScroll', rawId: 812, name: 'Sublimation Scroll', category: 'miscellaneous', advanced: true, validSlots: [] },
{ id: 'enchantement', rawId: 811, name: 'Enchantement', category: 'miscellaneous', advanced: true, validSlots: [] },
];

export const EFFECT_TYPE_DATA = {
// skipped 1
healthPoints: {
Expand Down
54 changes: 6 additions & 48 deletions src/models/useItems.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,6 @@
import { computed, reactive } from 'vue';
import { computed, reactive, watch } from 'vue';
import itemData from './item_data.json';
import { EFFECT_TYPE_DATA, ITEM_RARITY_DATA, ITEM_TYPE_DATA } from '@/models/useConstants';

const ITEM_TYPE_FILTERS_ID_LIST = [
'helmet',
'amulet',
'epaulettes',
'breastplate',
'cloak',
'belt',
'boots',
'ring',
'emblem',
'pets',
'mounts',
'wand',
'sword',
'dagger',
'staff',
'hammer',
'clockHand',
'cards',
'bow',
'shovel',
'twoHandedSword',
'twoHandedAxe',
'twoHandedStaff',
'shield',
'tool',
'torches',
'costumes',
'sublimationScroll',
'enchantement',
];
import { EFFECT_TYPE_DATA, ITEM_RARITY_DATA, ITEM_TYPE_FILTERS } from '@/models/useConstants';

const itemFilters = reactive({
searchTerm: '',
Expand All @@ -45,13 +13,8 @@ const itemFilters = reactive({
checked: true,
};
}),
itemTypeFilters: ITEM_TYPE_DATA.filter((entry) => {
return ITEM_TYPE_FILTERS_ID_LIST.includes(entry.id);
}).map((itemTypeEntry) => {
return {
...itemTypeEntry,
checked: true,
};
itemTypeFilters: ITEM_TYPE_FILTERS.map((entry) => {
return { ...entry, checked: true };
}),
resetFilters() {
this.searchTerm = '';
Expand All @@ -64,13 +27,8 @@ const itemFilters = reactive({
checked: true,
};
});
this.itemTypeFilters = ITEM_TYPE_DATA.filter((entry) => {
return ITEM_TYPE_FILTERS_ID_LIST.includes(entry.id);
}).map((itemTypeEntry) => {
return {
...itemTypeEntry,
checked: true,
};
this.itemTypeFilters = ITEM_TYPE_FILTERS.map((entry) => {
return { ...entry, checked: true };
});
},
});
Expand Down

0 comments on commit 4adc9b2

Please sign in to comment.