add nicknames, links sections to entity detail pages; show recruits in weapon metadata
This commit is contained in:
parent
4fdc859941
commit
afb81e0f55
5 changed files with 326 additions and 0 deletions
|
|
@ -65,6 +65,24 @@ export interface Weapon {
|
||||||
name: Record<string, string>
|
name: Record<string, string>
|
||||||
level: number
|
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>
|
name: Record<string, string>
|
||||||
level: number
|
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
|
auraDescription?: string
|
||||||
subAuraName?: string
|
subAuraName?: string
|
||||||
subAuraDescription?: string
|
subAuraDescription?: string
|
||||||
|
nicknames?: {
|
||||||
|
en?: string[]
|
||||||
|
ja?: string[]
|
||||||
|
}
|
||||||
|
links?: {
|
||||||
|
wikiEn?: string
|
||||||
|
wikiJa?: string
|
||||||
|
gamewith?: string
|
||||||
|
kamigame?: string
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
|
import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
|
||||||
import CopyableText from '$lib/components/ui/CopyableText.svelte'
|
import CopyableText from '$lib/components/ui/CopyableText.svelte'
|
||||||
import { getRarityLabel, getRarityOptions } from '$lib/utils/rarity'
|
import { getRarityLabel, getRarityOptions } from '$lib/utils/rarity'
|
||||||
|
import { getCharacterImage } from '$lib/utils/images'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
weapon: any
|
weapon: any
|
||||||
|
|
@ -64,6 +65,53 @@
|
||||||
—
|
—
|
||||||
{/if}
|
{/if}
|
||||||
</DetailItem>
|
</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}
|
{/if}
|
||||||
</DetailsContainer>
|
</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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -169,6 +169,30 @@
|
||||||
{#if currentTab === 'info'}
|
{#if currentTab === 'info'}
|
||||||
<section class="details">
|
<section class="details">
|
||||||
<CharacterMetadataSection {character} />
|
<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} />
|
<CharacterUncapSection {character} />
|
||||||
<CharacterTaxonomySection {character} />
|
<CharacterTaxonomySection {character} />
|
||||||
<CharacterStatsSection {character} />
|
<CharacterStatsSection {character} />
|
||||||
|
|
@ -187,6 +211,39 @@
|
||||||
</DetailsContainer>
|
</DetailsContainer>
|
||||||
{/if}
|
{/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}
|
{#if relatedQuery.data?.length}
|
||||||
<DetailsContainer title="Related Units">
|
<DetailsContainer title="Related Units">
|
||||||
<div class="related-units">
|
<div class="related-units">
|
||||||
|
|
@ -304,4 +361,27 @@
|
||||||
font-size: typography.$font-small;
|
font-size: typography.$font-small;
|
||||||
text-align: center;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -169,6 +169,30 @@
|
||||||
{#if currentTab === 'info'}
|
{#if currentTab === 'info'}
|
||||||
<section class="details">
|
<section class="details">
|
||||||
<SummonMetadataSection {summon} />
|
<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} />
|
<SummonUncapSection {summon} />
|
||||||
<SummonTaxonomySection {summon} />
|
<SummonTaxonomySection {summon} />
|
||||||
<SummonStatsSection {summon} />
|
<SummonStatsSection {summon} />
|
||||||
|
|
@ -190,6 +214,39 @@
|
||||||
</DetailsContainer>
|
</DetailsContainer>
|
||||||
{/if}
|
{/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">
|
<div class="summon-abilities">
|
||||||
<h3>Call Effect</h3>
|
<h3>Call Effect</h3>
|
||||||
<div class="abilities-section">
|
<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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -162,6 +162,30 @@
|
||||||
{#if currentTab === 'info'}
|
{#if currentTab === 'info'}
|
||||||
<section class="details">
|
<section class="details">
|
||||||
<WeaponMetadataSection {weapon} />
|
<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} />
|
<WeaponUncapSection {weapon} />
|
||||||
<WeaponTaxonomySection {weapon} />
|
<WeaponTaxonomySection {weapon} />
|
||||||
<WeaponStatsSection {weapon} />
|
<WeaponStatsSection {weapon} />
|
||||||
|
|
@ -183,6 +207,39 @@
|
||||||
</DetailsContainer>
|
</DetailsContainer>
|
||||||
{/if}
|
{/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">
|
<div class="weapon-skills">
|
||||||
<h3>Skills</h3>
|
<h3>Skills</h3>
|
||||||
<div class="skills-grid">
|
<div class="skills-grid">
|
||||||
|
|
@ -323,4 +380,27 @@
|
||||||
grid-template-columns: 1fr;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue