granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add skill, element, proficiency filters to artifact collection

Browse source
This commit is contained in:
Justin Edmund 2025-12-19 00:40:15 -08:00
parent 856e5017ea
commit b4f58aa5af
2 changed files with 200 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/lib/api/adapters/artifact.adapter.ts
View file

@ -44,6 +44,11 @@ export interface CollectionArtifactListParams {
artifactId?: string
proficiency?: number
rarity?: 'standard' | 'quirk'
// Skill filters - each slot accepts array of modifier IDs (OR logic within slot, AND across slots)
skill1?: number[]
skill2?: number[]
skill3?: number[]
skill4?: number[]
}
/**
@ -260,6 +265,22 @@ export class ArtifactAdapter extends BaseAdapter {
})
}
/**
* Deletes multiple collection artifacts in a single batch request
*/
async deleteCollectionArtifactsBatch(ids: string[]): Promise<{ deleted: number }> {
if (ids.length === 0) return { deleted: 0 }
const response = await this.request<{
meta: { deleted: number }
}>('/collection/artifacts/batch_destroy', {
method: 'DELETE',
body: { ids }
})
return response.meta
}
// ============================================
// Grid Artifacts (Equipped on Characters)
// ============================================

204
src/routes/(app)/[username]/collection/artifacts/+page.svelte
View file

@ -1,32 +1,121 @@
<script lang="ts">
import type { PageData } from './$types'
import type { CollectionArtifact } from '$lib/types/api/artifact'
import { createInfiniteQuery } from '@tanstack/svelte-query'
import { getContext } from 'svelte'
import { createInfiniteQuery, createQuery } from '@tanstack/svelte-query'
import { artifactQueries } from '$lib/api/queries/artifact.queries'
import CollectionArtifactDetailPane from '$lib/components/collection/CollectionArtifactDetailPane.svelte'
import CollectionArtifactCard from '$lib/components/collection/CollectionArtifactCard.svelte'
import CollectionArtifactRow from '$lib/components/collection/CollectionArtifactRow.svelte'
import SelectableCollectionCard from '$lib/components/collection/SelectableCollectionCard.svelte'
import SelectableCollectionRow from '$lib/components/collection/SelectableCollectionRow.svelte'
import Icon from '$lib/components/Icon.svelte'
import ViewModeToggle from '$lib/components/ui/ViewModeToggle.svelte'
import MultiSelect from '$lib/components/ui/MultiSelect.svelte'
import { IsInViewport } from 'runed'
import { sidebar } from '$lib/stores/sidebar.svelte'
import { viewMode, type ViewMode } from '$lib/stores/viewMode.svelte'
import Select from '$lib/components/ui/Select.svelte'
import { getArtifactImage } from '$lib/utils/images'
import { LOADED_IDS_KEY, type LoadedIdsContext } from '$lib/stores/selectionMode.svelte'
const { data }: { data: PageData } = $props()
// Get loaded IDs context from layout
const loadedIdsContext = getContext<LoadedIdsContext | undefined>(LOADED_IDS_KEY)
// Filter state
let elementFilters = $state<number[]>([])
let proficiencyFilters = $state<number[]>([])
let rarityFilter = $state<'all' | 'standard' | 'quirk'>('all')
// Skill filter state - array of modifier IDs per slot
let slot1Filters = $state<number[]>([])
let slot2Filters = $state<number[]>([])
let slot3Filters = $state<number[]>([])
let slot4Filters = $state<number[]>([])
// Element options for MultiSelect
const elementOptions = [
{ value: 1, label: 'Wind' },
{ value: 2, label: 'Fire' },
{ value: 3, label: 'Water' },
{ value: 4, label: 'Earth' },
{ value: 5, label: 'Dark' },
{ value: 6, label: 'Light' }
]
// Proficiency options for MultiSelect
const proficiencyOptions = [
{ value: 1, label: 'Sabre' },
{ value: 2, label: 'Dagger' },
{ value: 3, label: 'Axe' },
{ value: 4, label: 'Spear' },
{ value: 5, label: 'Bow' },
{ value: 6, label: 'Staff' },
{ value: 7, label: 'Melee' },
{ value: 8, label: 'Harp' },
{ value: 9, label: 'Gun' },
{ value: 10, label: 'Katana' }
]
// Query for artifact skills (cached 1 hour)
const skillsQuery = createQuery(() => artifactQueries.skills())
// Build options for each slot's MultiSelect
// Slots 1-2: group_i, Slot 3: group_ii, Slot 4: group_iii
const slot1Options = $derived(
(skillsQuery.data ?? [])
.filter((s) => s.skillGroup === 'group_i')
.map((s) => ({ value: s.modifier, label: s.name.en }))
)
const slot2Options = $derived(
(skillsQuery.data ?? [])
.filter((s) => s.skillGroup === 'group_i')
.map((s) => ({ value: s.modifier, label: s.name.en }))
)
const slot3Options = $derived(
(skillsQuery.data ?? [])
.filter((s) => s.skillGroup === 'group_ii')
.map((s) => ({ value: s.modifier, label: s.name.en }))
)
const slot4Options = $derived(
(skillsQuery.data ?? [])
.filter((s) => s.skillGroup === 'group_iii')
.map((s) => ({ value: s.modifier, label: s.name.en }))
)
// Check if any filters are active (for clear button)
const hasActiveFilters = $derived(
elementFilters.length > 0 ||
proficiencyFilters.length > 0 ||
slot1Filters.length > 0 ||
slot2Filters.length > 0 ||
slot3Filters.length > 0 ||
slot4Filters.length > 0
)
function clearAllFilters() {
elementFilters = []
proficiencyFilters = []
slot1Filters = []
slot2Filters = []
slot3Filters = []
slot4Filters = []
}
// Sentinel for infinite scroll
let sentinelEl = $state<HTMLElement>()
// Build filters for query
const queryFilters = $derived({
element: elementFilters.length > 0 ? elementFilters : undefined,
rarity: rarityFilter !== 'all' ? rarityFilter : undefined
proficiency: proficiencyFilters.length > 0 ? proficiencyFilters[0] : undefined,
rarity: rarityFilter !== 'all' ? rarityFilter : undefined,
skill1: slot1Filters.length > 0 ? slot1Filters : undefined,
skill2: slot2Filters.length > 0 ? slot2Filters : undefined,
skill3: slot3Filters.length > 0 ? slot3Filters : undefined,
skill4: slot4Filters.length > 0 ? slot4Filters : undefined
})
// Query for artifacts collection
@ -44,6 +133,12 @@
return collectionQuery.data.pages.flatMap((page) => page.results ?? [])
})
// Provide loaded IDs to layout for "Select all"
$effect(() => {
const ids = allArtifacts.map((a) => a.id)
loadedIdsContext?.setIds(ids)
})
// Infinite scroll
const inViewport = new IsInViewport(() => sentinelEl, {
rootMargin: '200px'
@ -95,22 +190,62 @@
<div class="collection-page">
<!-- Filters bar -->
<div class="filters-bar">
<Select
value={rarityFilter}
onValueChange={(v) => (rarityFilter = v as 'all' | 'standard' | 'quirk')}
options={[
{ value: 'all', label: 'All' },
{ value: 'standard', label: 'Standard' },
{ value: 'quirk', label: 'Quirk' }
]}
size="small"
/>
<div class="filter-group">
<Select
value={rarityFilter}
onValueChange={(v) => (rarityFilter = v as 'all' | 'standard' | 'quirk')}
options={[
{ value: 'all', label: 'All' },
{ value: 'standard', label: 'Standard' },
{ value: 'quirk', label: 'Quirk' }
]}
size="small"
/>
<ViewModeToggle
value={currentViewMode}
onValueChange={handleViewModeChange}
neutral={true}
/>
<MultiSelect
options={elementOptions}
bind:value={elementFilters}
placeholder="Element"
size="small"
/>
<MultiSelect
options={proficiencyOptions}
bind:value={proficiencyFilters}
placeholder="Proficiency"
size="small"
/>
<MultiSelect
options={slot1Options}
bind:value={slot1Filters}
placeholder="Slot 1"
size="small"
/>
<MultiSelect
options={slot2Options}
bind:value={slot2Filters}
placeholder="Slot 2"
size="small"
/>
<MultiSelect
options={slot3Options}
bind:value={slot3Filters}
placeholder="Slot 3"
size="small"
/>
<MultiSelect
options={slot4Options}
bind:value={slot4Filters}
placeholder="Slot 4"
size="small"
/>
{#if hasActiveFilters}
<button class="clear-filters-btn" onclick={clearAllFilters}>Clear</button>
{/if}
</div>
<ViewModeToggle value={currentViewMode} onValueChange={handleViewModeChange} neutral={true} />
</div>
<!-- Collection grid -->
@ -134,19 +269,17 @@
{:else if currentViewMode === 'grid'}
<div class="artifact-grid">
{#each allArtifacts as artifact (artifact.id)}
<CollectionArtifactCard
{artifact}
onClick={() => openArtifactDetails(artifact)}
/>
<SelectableCollectionCard id={artifact.id} onClick={() => openArtifactDetails(artifact)}>
<CollectionArtifactCard {artifact} />
</SelectableCollectionCard>
{/each}
</div>
{:else}
<div class="artifact-list">
{#each allArtifacts as artifact (artifact.id)}
<CollectionArtifactRow
{artifact}
onClick={() => openArtifactDetails(artifact)}
/>
<SelectableCollectionRow id={artifact.id} onClick={() => openArtifactDetails(artifact)}>
<CollectionArtifactRow {artifact} />
</SelectableCollectionRow>
{/each}
</div>
{/if}
@ -195,6 +328,27 @@
gap: $unit-2x;
}
.filter-group {
display: flex;
align-items: center;
gap: $unit;
flex-wrap: wrap;
}
.clear-filters-btn {
background: none;
border: none;
padding: $unit-half $unit;
font-size: $font-small;
font-weight: $medium;
color: var(--accent-color);
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
.grid-area {
min-height: 400px;
}