@@ -46,6 +92,7 @@ export function renderCard(card: UserCard, baseUrl: string = '/card', count?: nu
`
}
@@ -109,13 +156,9 @@ export function renderCardPage(
}
}
- // Sort by unique first, then rarity (desc), then by id
+ // Sort by id
const sortedGroups = Array.from(cardGroups.values())
- .sort((a, b) => {
- if (a.card.unique !== b.card.unique) return a.card.unique ? -1 : 1
- if (b.card.rare !== a.card.rare) return b.card.rare - a.card.rare
- return a.card.id - b.card.id
- })
+ .sort((a, b) => a.card.id - b.card.id)
const cardsHtml = sortedGroups.map(({ card, count }) => {
return renderCard(card, '/card', count)
diff --git a/src/web/components/rse.ts b/src/web/components/rse.ts
index 7842816..c487102 100644
--- a/src/web/components/rse.ts
+++ b/src/web/components/rse.ts
@@ -1,4 +1,15 @@
// RSE display component for ai.syui.rse.user collection
+import { renderCard, type UserCard, type CardAdminEntry, type CardAdminData } from './card'
+
+export interface RseAdminItem {
+ id: number
+ name: string
+ text: { ja: string; en: string }
+}
+
+export interface RseAdminData {
+ item: RseAdminItem[]
+}
export interface RseItem {
id: number
@@ -14,31 +25,135 @@ export interface RseCollection {
updatedAt: string
}
+// Get current language
+function getLang(): string {
+ return localStorage.getItem('preferredLang') || 'ja'
+}
+
+// Get localized text
+function getLocalizedText(obj: { ja: string; en: string } | undefined): string {
+ if (!obj) return ''
+ const lang = getLang()
+ return obj[lang as 'ja' | 'en'] || obj.ja || obj.en || ''
+}
+
// Get rarity class from unique flag
function getRarityClass(item: RseItem): string {
if (item.unique) return 'unique'
return ''
}
-// Render single item/character
-function renderRseItem(item: RseItem, type: 'item' | 'character'): string {
+// Get cards for a character (character 0 = cards 0-99, character 1 = cards 100-199, etc.)
+function getCardsForCharacter(
+ characterId: number,
+ userCards: UserCard[],
+ adminData: CardAdminData | null
+): { card: UserCard; adminEntry?: CardAdminEntry }[] {
+ const minId = characterId * 100
+ const maxId = minId + 99
+
+ // Build admin lookup map
+ const adminMap = new Map
${card.cp}
+ ${infoHtml}
+
+ `
+}
+
+// Render single item
+function renderRseItem(item: RseItem, rseAdminData: RseAdminData | null): string {
+ const rarityClass = getRarityClass(item)
+ const effectsHtml = rarityClass ? `
+
+
+ ` : ''
+
+ // Get admin entry for this item
+ const adminEntry = rseAdminData?.item?.find(i => i.id === item.id)
+ const name = adminEntry?.name || ''
+ const text = adminEntry ? getLocalizedText(adminEntry.text) : ''
+
+ const infoHtml = (name || text) ? `
+
+
+ ${characterCards.length > 0 ? `
+
+
+
+
+
+ 
+
+ ${effectsHtml}
+
+
+ ${item.cp}
+
+ ${cardsHtml}
+ ` : ''}
+
+
+ ` : ''
+
return `
+ ${name}
+
+ ${text ? `${text}
` : ''}
+
- 
+ 
${effectsHtml}
+
${item.cp}
+ ${infoHtml}
@@ -107,7 +220,7 @@ export function renderRsePage(
${charsHtml ? `
Characters
-${charsHtml}
+ ${charsHtml}
` : ''}
${itemsHtml ? `
Items
diff --git a/src/web/lib/api.ts b/src/web/lib/api.ts index b6e3752..94efc3d 100644 --- a/src/web/lib/api.ts +++ b/src/web/lib/api.ts @@ -679,6 +679,105 @@ export interface LinkCollection { updatedAt?: string } +// Card admin data types +export interface CardAdminEntry { + id: number + character: number + name: { ja: string; en: string } + text: { ja: string; en: string } + cp: string + effect: string + key?: string | null +} + +export interface CardAdminData { + gacha: { pickup: number; rate: { rare: number; pickup: number } } + card: CardAdminEntry[] +} + +// Get card admin data (ai.syui.card.admin) +export async function getCardAdmin(did: string): Promise${renderRsePage(rseData, handle)}
`
+ // RSE page with character cards
+ const cardCollection = config.cardCollection || 'ai.syui.card.user'
+ const adminDid = config.bot?.did || config.did || did
+ const [rseData, cards, adminData, rseAdminData] = await Promise.all([
+ getRse(did),
+ getCards(did, cardCollection),
+ getCardAdmin(adminDid),
+ getRseAdmin(adminDid)
+ ])
+ const userCards = cards?.card || []
+ html += `${renderRsePage(rseData, handle, userCards, adminData, rseAdminData)}
`
html += ``
} else if (route.type === 'link') {
diff --git a/src/web/styles/card.css b/src/web/styles/card.css
index 0cd61ed..31ea6c0 100644
--- a/src/web/styles/card.css
+++ b/src/web/styles/card.css
@@ -522,3 +522,133 @@
color: var(--text-secondary, #aaa);
}
}
+
+/* RSE section title */
+.rse-section-title {
+ margin: 24px 0 12px;
+ font-size: 1.1em;
+ color: var(--text-primary, #333);
+}
+
+/* RSE character sections */
+.rse-characters {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 100%;
+}
+
+.rse-character-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ width: 100%;
+}
+
+.rse-character-main {
+ display: flex;
+ justify-content: center;
+}
+
+.rse-character-main .card-wrapper {
+ width: 250px;
+ max-width: 250px;
+}
+
+/* RSE card grid (cards below character) */
+.rse-card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 20px;
+ width: 100%;
+ padding: 20px;
+ background: rgba(128, 128, 128, 0.08);
+ border-radius: 12px;
+}
+
+.rse-card-grid .card-wrapper {
+ max-width: 180px;
+}
+
+.rse-card-grid .card-info-name {
+ font-size: 11px;
+}
+
+.rse-card-grid .card-info-text {
+ font-size: 12px;
+}
+
+.rse-card-grid .card-key-btn {
+ font-size: 9px;
+ padding: 2px 8px;
+}
+
+/* Card info (below card) */
+.card-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ margin-top: 8px;
+ text-align: center;
+}
+
+.card-info-header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ width: 100%;
+ position: relative;
+}
+
+.card-info-name {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary, #333);
+}
+
+.card-info-header .card-key-btn {
+ position: absolute;
+ right: 0;
+}
+
+.card-info-text {
+ font-size: 11px;
+ color: var(--text-secondary, #666);
+ line-height: 1.5;
+}
+
+.card-key-btn {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border: none;
+ color: white;
+ padding: 3px 10px;
+ border-radius: 10px;
+ font-size: 10px;
+ font-weight: 600;
+ cursor: default;
+ box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+/* Dark mode for RSE */
+@media (prefers-color-scheme: dark) {
+ .rse-section-title {
+ color: var(--text-primary, #eee);
+ }
+
+ .rse-card-grid {
+ background: rgba(255, 255, 255, 0.05);
+ }
+
+ .card-info-name {
+ color: var(--text-primary, #eee);
+ }
+
+ .card-info-text {
+ color: var(--text-secondary, #aaa);
+ }
+}