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

add nicknames, links sections to entity detail pages; show recruits in weapon metadata

Browse source
This commit is contained in:
Justin Edmund 2025-12-02 02:15:03 -08:00
parent 4fdc859941
commit afb81e0f55
5 changed files with 326 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/lib/api/adapters/entity.adapter.ts
View file

@ -65,6 +65,24 @@ export interface Weapon {
name: Record<string, string>
level: number
}>
nicknames?: {
en?: string[]
ja?: string[]
}
links?: {
wikiEn?: string
wikiJa?: string
gamewith?: string
kamigame?: string
}
recruits?: {
id: string
granblueId: string
name: {
en?: string
ja?: string
}
}
}
/**
@ -108,6 +126,16 @@ export interface Character {
name: Record<string, string>
level: number
}>
nicknames?: {
en?: string[]
ja?: string[]
}
links?: {
wikiEn?: string
wikiJa?: string
gamewith?: string
kamigame?: string
}
}
/**
@ -186,6 +214,16 @@ export interface Summon {
auraDescription?: string
subAuraName?: string
subAuraDescription?: string
nicknames?: {
en?: string[]
ja?: string[]
}
links?: {
wikiEn?: string
wikiJa?: string
gamewith?: string
kamigame?: string
}
}
/**

48
src/lib/features/database/weapons/sections/WeaponMetadataSection.svelte
View file

@ -7,6 +7,7 @@
import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
import CopyableText from '$lib/components/ui/CopyableText.svelte'
import { getRarityLabel, getRarityOptions } from '$lib/utils/rarity'
import { getCharacterImage } from '$lib/utils/images'
interface Props {
weapon: any
@ -64,6 +65,53 @@
—
{/if}
</DetailItem>
{#if weapon.recruits}
<DetailItem label="Recruits">
<a href="/database/characters/{weapon.recruits.id}" class="recruits-link">
<img
src={getCharacterImage(weapon.recruits.granblueId, 'square', '01')}
alt={weapon.recruits.name.en || 'Recruited character'}
class="recruits-image"
/>
<span class="recruits-name">{weapon.recruits.name.en}</span>
</a>
</DetailItem>
{/if}
{/if}
</DetailsContainer>
<style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography;
@use '$src/themes/layout' as layout;
.recruits-link {
display: flex;
align-items: center;
gap: spacing.$unit;
text-decoration: none;
color: colors.$grey-30;
&:hover .recruits-image {
transform: scale(1.05);
}
&:hover .recruits-name {
color: colors.$blue;
}
}
.recruits-image {
width: 32px;
height: 32px;
border-radius: layout.$item-corner-small;
transition: transform 0.2s ease;
}
.recruits-name {
font-size: typography.$font-regular;
transition: color 0.2s ease;
}
</style>

80
src/routes/(app)/database/characters/[id]/+page.svelte
View file

@ -169,6 +169,30 @@
{#if currentTab === 'info'}
<section class="details">
<CharacterMetadataSection {character} />
{#if character.nicknames?.en?.length || character.nicknames?.ja?.length}
<DetailsContainer title="Nicknames">
{#if character.nicknames?.en?.length}
<DetailItem label="English">
<div class="nickname-tags">
{#each character.nicknames.en as nickname}
<span class="nickname-tag">{nickname}</span>
{/each}
</div>
</DetailItem>
{/if}
{#if character.nicknames?.ja?.length}
<DetailItem label="Japanese">
<div class="nickname-tags">
{#each character.nicknames.ja as nickname}
<span class="nickname-tag">{nickname}</span>
{/each}
</div>
</DetailItem>
{/if}
</DetailsContainer>
{/if}
<CharacterUncapSection {character} />
<CharacterTaxonomySection {character} />
<CharacterStatsSection {character} />
@ -187,6 +211,39 @@
</DetailsContainer>
{/if}
{#if character.links?.wikiEn || character.links?.wikiJa || character.links?.gamewith || character.links?.kamigame}
<DetailsContainer title="Links">
{#if character.links?.wikiEn}
<DetailItem label="Wiki (EN)">
<a href={character.links.wikiEn} target="_blank" rel="noopener noreferrer" class="external-link">
{character.links.wikiEn}
</a>
</DetailItem>
{/if}
{#if character.links?.wikiJa}
<DetailItem label="Wiki (JP)">
<a href={character.links.wikiJa} target="_blank" rel="noopener noreferrer" class="external-link">
{character.links.wikiJa}
</a>
</DetailItem>
{/if}
{#if character.links?.gamewith}
<DetailItem label="Gamewith">
<a href={character.links.gamewith} target="_blank" rel="noopener noreferrer" class="external-link">
{character.links.gamewith}
</a>
</DetailItem>
{/if}
{#if character.links?.kamigame}
<DetailItem label="Kamigame">
<a href={character.links.kamigame} target="_blank" rel="noopener noreferrer" class="external-link">
{character.links.kamigame}
</a>
</DetailItem>
{/if}
</DetailsContainer>
{/if}
{#if relatedQuery.data?.length}
<DetailsContainer title="Related Units">
<div class="related-units">
@ -304,4 +361,27 @@
font-size: typography.$font-small;
text-align: center;
}
.nickname-tags {
display: flex;
flex-wrap: wrap;
gap: spacing.$unit;
}
.nickname-tag {
background: colors.$grey-90;
padding: spacing.$unit-half spacing.$unit;
border-radius: layout.$item-corner-small;
font-size: typography.$font-small;
}
.external-link {
color: colors.$blue;
text-decoration: none;
word-break: break-all;
&:hover {
text-decoration: underline;
}
}
</style>

80
src/routes/(app)/database/summons/[id]/+page.svelte
View file

@ -169,6 +169,30 @@
{#if currentTab === 'info'}
<section class="details">
<SummonMetadataSection {summon} />
{#if summon.nicknames?.en?.length || summon.nicknames?.ja?.length}
<DetailsContainer title="Nicknames">
{#if summon.nicknames?.en?.length}
<DetailItem label="English">
<div class="nickname-tags">
{#each summon.nicknames.en as nickname}
<span class="nickname-tag">{nickname}</span>
{/each}
</div>
</DetailItem>
{/if}
{#if summon.nicknames?.ja?.length}
<DetailItem label="Japanese">
<div class="nickname-tags">
{#each summon.nicknames.ja as nickname}
<span class="nickname-tag">{nickname}</span>
{/each}
</div>
</DetailItem>
{/if}
</DetailsContainer>
{/if}
<SummonUncapSection {summon} />
<SummonTaxonomySection {summon} />
<SummonStatsSection {summon} />
@ -190,6 +214,39 @@
</DetailsContainer>
{/if}
{#if summon.links?.wikiEn || summon.links?.wikiJa || summon.links?.gamewith || summon.links?.kamigame}
<DetailsContainer title="Links">
{#if summon.links?.wikiEn}
<DetailItem label="Wiki (EN)">
<a href={summon.links.wikiEn} target="_blank" rel="noopener noreferrer" class="external-link">
{summon.links.wikiEn}
</a>
</DetailItem>
{/if}
{#if summon.links?.wikiJa}
<DetailItem label="Wiki (JP)">
<a href={summon.links.wikiJa} target="_blank" rel="noopener noreferrer" class="external-link">
{summon.links.wikiJa}
</a>
</DetailItem>
{/if}
{#if summon.links?.gamewith}
<DetailItem label="Gamewith">
<a href={summon.links.gamewith} target="_blank" rel="noopener noreferrer" class="external-link">
{summon.links.gamewith}
</a>
</DetailItem>
{/if}
{#if summon.links?.kamigame}
<DetailItem label="Kamigame">
<a href={summon.links.kamigame} target="_blank" rel="noopener noreferrer" class="external-link">
{summon.links.kamigame}
</a>
</DetailItem>
{/if}
</DetailsContainer>
{/if}
<div class="summon-abilities">
<h3>Call Effect</h3>
<div class="abilities-section">
@ -350,4 +407,27 @@
}
}
}
.nickname-tags {
display: flex;
flex-wrap: wrap;
gap: spacing.$unit;
}
.nickname-tag {
background: colors.$grey-90;
padding: spacing.$unit-half spacing.$unit;
border-radius: layout.$item-corner-small;
font-size: typography.$font-small;
}
.external-link {
color: colors.$blue;
text-decoration: none;
word-break: break-all;
&:hover {
text-decoration: underline;
}
}
</style>

80
src/routes/(app)/database/weapons/[id]/+page.svelte
View file

@ -162,6 +162,30 @@
{#if currentTab === 'info'}
<section class="details">
<WeaponMetadataSection {weapon} />
{#if weapon.nicknames?.en?.length || weapon.nicknames?.ja?.length}
<DetailsContainer title="Nicknames">
{#if weapon.nicknames?.en?.length}
<DetailItem label="English">
<div class="nickname-tags">
{#each weapon.nicknames.en as nickname}
<span class="nickname-tag">{nickname}</span>
{/each}
</div>
</DetailItem>
{/if}
{#if weapon.nicknames?.ja?.length}
<DetailItem label="Japanese">
<div class="nickname-tags">
{#each weapon.nicknames.ja as nickname}
<span class="nickname-tag">{nickname}</span>
{/each}
</div>
</DetailItem>
{/if}
</DetailsContainer>
{/if}
<WeaponUncapSection {weapon} />
<WeaponTaxonomySection {weapon} />
<WeaponStatsSection {weapon} />
@ -183,6 +207,39 @@
</DetailsContainer>
{/if}
{#if weapon.links?.wikiEn || weapon.links?.wikiJa || weapon.links?.gamewith || weapon.links?.kamigame}
<DetailsContainer title="Links">
{#if weapon.links?.wikiEn}
<DetailItem label="Wiki (EN)">
<a href={weapon.links.wikiEn} target="_blank" rel="noopener noreferrer" class="external-link">
{weapon.links.wikiEn}
</a>
</DetailItem>
{/if}
{#if weapon.links?.wikiJa}
<DetailItem label="Wiki (JP)">
<a href={weapon.links.wikiJa} target="_blank" rel="noopener noreferrer" class="external-link">
{weapon.links.wikiJa}
</a>
</DetailItem>
{/if}
{#if weapon.links?.gamewith}
<DetailItem label="Gamewith">
<a href={weapon.links.gamewith} target="_blank" rel="noopener noreferrer" class="external-link">
{weapon.links.gamewith}
</a>
</DetailItem>
{/if}
{#if weapon.links?.kamigame}
<DetailItem label="Kamigame">
<a href={weapon.links.kamigame} target="_blank" rel="noopener noreferrer" class="external-link">
{weapon.links.kamigame}
</a>
</DetailItem>
{/if}
</DetailsContainer>
{/if}
<div class="weapon-skills">
<h3>Skills</h3>
<div class="skills-grid">
@ -323,4 +380,27 @@
grid-template-columns: 1fr;
}
}
.nickname-tags {
display: flex;
flex-wrap: wrap;
gap: spacing.$unit;
}
.nickname-tag {
background: colors.$grey-90;
padding: spacing.$unit-half spacing.$unit;
border-radius: layout.$item-corner-small;
font-size: typography.$font-small;
}
.external-link {
color: colors.$blue;
text-decoration: none;
word-break: break-all;
&:hover {
text-decoration: underline;
}
}
</style>