Compare commits
3 Commits
ac0a04e71f
...
4d6e1dc5b2
| Author | SHA1 | Date | |
|---|---|---|---|
| 4d6e1dc5b2 | |||
| aee28cd7a1 | |||
| 3dbc3f35ba |
@@ -1,11 +1,11 @@
|
||||
---
|
||||
# nuzlocke-tracker-532i
|
||||
title: 'UX: Make level field optional in boss defeat modal'
|
||||
status: todo
|
||||
status: completed
|
||||
type: feature
|
||||
priority: normal
|
||||
created_at: 2026-03-21T21:50:48Z
|
||||
updated_at: 2026-03-21T22:04:08Z
|
||||
updated_at: 2026-03-22T09:16:12Z
|
||||
---
|
||||
|
||||
## Problem
|
||||
@@ -22,8 +22,17 @@ When recording which team members beat a boss, users must manually enter a level
|
||||
|
||||
Remove the level field entirely from the UI and make it optional in the backend:
|
||||
|
||||
- [ ] Remove level input from `BossDefeatModal.tsx`
|
||||
- [ ] Make `level` column nullable in the database (alembic migration)
|
||||
- [ ] Update the API schema to make level optional (default to null)
|
||||
- [ ] Update any backend validation that requires level
|
||||
- [ ] Verify boss result display still works without level data
|
||||
- [x] Remove level input from `BossDefeatModal.tsx`
|
||||
- [x] Make `level` column nullable in the database (alembic migration)
|
||||
- [x] Update the API schema to make level optional (default to null)
|
||||
- [x] Update any backend validation that requires level
|
||||
- [x] Verify boss result display still works without level data
|
||||
|
||||
|
||||
## Summary of Changes
|
||||
|
||||
- Removed level input field from BossDefeatModal.tsx, simplifying team selection to just checkboxes
|
||||
- Created alembic migration to make boss_result_team.level column nullable
|
||||
- Updated SQLAlchemy model and Pydantic schemas to make level optional (defaults to null)
|
||||
- Updated RunEncounters.tsx to conditionally render level only when present
|
||||
- Updated frontend TypeScript types for BossResultTeamMember and BossResultTeamMemberInput
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
# nuzlocke-tracker-lkro
|
||||
title: 'UX: Make team section a floating sidebar on desktop'
|
||||
status: todo
|
||||
status: completed
|
||||
type: feature
|
||||
priority: normal
|
||||
created_at: 2026-03-21T21:50:48Z
|
||||
updated_at: 2026-03-22T08:08:13Z
|
||||
updated_at: 2026-03-22T09:11:58Z
|
||||
---
|
||||
|
||||
## Problem
|
||||
@@ -28,9 +28,31 @@ Alternative: A floating action button (FAB) that opens the team in a slide-over
|
||||
|
||||
## Checklist
|
||||
|
||||
- [ ] Add responsive 2-column layout to RunEncounters page (desktop only)
|
||||
- [ ] Move team section into a sticky sidebar column
|
||||
- [ ] Ensure sidebar scrolls independently if team is taller than viewport
|
||||
- [ ] Keep current stacked layout on mobile/tablet
|
||||
- [ ] Test with various team sizes (0-6 pokemon)
|
||||
- [ ] Test evolution/nickname editing still works from sidebar
|
||||
- [x] Add responsive 2-column layout to RunEncounters page (desktop only)
|
||||
- [x] Move team section into a sticky sidebar column
|
||||
- [x] Ensure sidebar scrolls independently if team is taller than viewport
|
||||
- [x] Keep current stacked layout on mobile/tablet
|
||||
- [x] Test with various team sizes (0-6 pokemon)
|
||||
- [x] Test evolution/nickname editing still works from sidebar
|
||||
|
||||
## Summary of Changes
|
||||
|
||||
Implemented a responsive 2-column layout for the RunEncounters page:
|
||||
|
||||
**Desktop (lg, ≥1024px):**
|
||||
- Encounters list on the left in a flex column
|
||||
- Team section in a 256px sticky sidebar on the right
|
||||
- Sidebar stays visible while scrolling through routes and bosses
|
||||
- Independent scrolling for sidebar when team is taller than viewport (max-h-[calc(100vh-6rem)] overflow-y-auto)
|
||||
- 2-column grid for pokemon cards in sidebar
|
||||
|
||||
**Mobile/Tablet (<1024px):**
|
||||
- Original stacked layout preserved (team above encounters)
|
||||
- Collapsible team section with expand/collapse toggle
|
||||
|
||||
**Technical changes:**
|
||||
- Page container widened from max-w-4xl to lg:max-w-6xl
|
||||
- Added lg:flex lg:gap-6 wrapper for 2-column layout
|
||||
- Mobile team section hidden on lg with lg:hidden
|
||||
- Desktop sidebar hidden below lg with hidden lg:block
|
||||
- Sidebar styled with bg-surface-1 border and rounded corners
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
"""make_boss_result_team_level_nullable
|
||||
|
||||
Revision ID: 903e0cdbfe5a
|
||||
Revises: p7e8f9a0b1c2
|
||||
Create Date: 2026-03-22 10:13:41.828406
|
||||
|
||||
"""
|
||||
|
||||
from collections.abc import Sequence
|
||||
|
||||
import sqlalchemy as sa
|
||||
from alembic import op
|
||||
|
||||
# revision identifiers, used by Alembic.
|
||||
revision: str = "903e0cdbfe5a"
|
||||
down_revision: str | Sequence[str] | None = "p7e8f9a0b1c2"
|
||||
branch_labels: str | Sequence[str] | None = None
|
||||
depends_on: str | Sequence[str] | None = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.alter_column(
|
||||
"boss_result_team",
|
||||
"level",
|
||||
existing_type=sa.SmallInteger(),
|
||||
nullable=True,
|
||||
)
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.execute("UPDATE boss_result_team SET level = 1 WHERE level IS NULL")
|
||||
op.alter_column(
|
||||
"boss_result_team",
|
||||
"level",
|
||||
existing_type=sa.SmallInteger(),
|
||||
nullable=False,
|
||||
)
|
||||
@@ -14,7 +14,7 @@ class BossResultTeam(Base):
|
||||
encounter_id: Mapped[int] = mapped_column(
|
||||
ForeignKey("encounters.id", ondelete="CASCADE"), index=True
|
||||
)
|
||||
level: Mapped[int] = mapped_column(SmallInteger)
|
||||
level: Mapped[int | None] = mapped_column(SmallInteger, nullable=True)
|
||||
|
||||
boss_result: Mapped[BossResult] = relationship(back_populates="team")
|
||||
encounter: Mapped[Encounter] = relationship()
|
||||
|
||||
@@ -57,7 +57,7 @@ class BossBattleResponse(CamelModel):
|
||||
class BossResultTeamMemberResponse(CamelModel):
|
||||
id: int
|
||||
encounter_id: int
|
||||
level: int
|
||||
level: int | None
|
||||
|
||||
|
||||
class BossResultResponse(CamelModel):
|
||||
@@ -120,7 +120,7 @@ class BossPokemonInput(CamelModel):
|
||||
|
||||
class BossResultTeamMemberInput(CamelModel):
|
||||
encounter_id: int
|
||||
level: int
|
||||
level: int | None = None
|
||||
|
||||
|
||||
class BossResultCreate(CamelModel):
|
||||
|
||||
@@ -23,10 +23,7 @@ function matchVariant(labels: string[], starterName?: string | null): string | n
|
||||
return matches.length === 1 ? (matches[0] ?? null) : null
|
||||
}
|
||||
|
||||
interface TeamSelection {
|
||||
encounterId: number
|
||||
level: number
|
||||
}
|
||||
type TeamSelection = number
|
||||
|
||||
export function BossDefeatModal({
|
||||
boss,
|
||||
@@ -36,26 +33,15 @@ export function BossDefeatModal({
|
||||
isPending,
|
||||
starterName,
|
||||
}: BossDefeatModalProps) {
|
||||
const [selectedTeam, setSelectedTeam] = useState<Map<number, TeamSelection>>(new Map())
|
||||
const [selectedTeam, setSelectedTeam] = useState<Set<TeamSelection>>(new Set())
|
||||
|
||||
const toggleTeamMember = (enc: EncounterDetail) => {
|
||||
const toggleTeamMember = (encounterId: number) => {
|
||||
setSelectedTeam((prev) => {
|
||||
const next = new Map(prev)
|
||||
if (next.has(enc.id)) {
|
||||
next.delete(enc.id)
|
||||
const next = new Set(prev)
|
||||
if (next.has(encounterId)) {
|
||||
next.delete(encounterId)
|
||||
} else {
|
||||
next.set(enc.id, { encounterId: enc.id, level: enc.catchLevel ?? 1 })
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const updateLevel = (encounterId: number, level: number) => {
|
||||
setSelectedTeam((prev) => {
|
||||
const next = new Map(prev)
|
||||
const existing = next.get(encounterId)
|
||||
if (existing) {
|
||||
next.set(encounterId, { ...existing, level })
|
||||
next.add(encounterId)
|
||||
}
|
||||
return next
|
||||
})
|
||||
@@ -87,7 +73,9 @@ export function BossDefeatModal({
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault()
|
||||
const team: BossResultTeamMemberInput[] = Array.from(selectedTeam.values())
|
||||
const team: BossResultTeamMemberInput[] = Array.from(selectedTeam).map((encounterId) => ({
|
||||
encounterId,
|
||||
}))
|
||||
onSubmit({
|
||||
bossBattleId: boss.id,
|
||||
result: 'won',
|
||||
@@ -134,11 +122,17 @@ export function BossDefeatModal({
|
||||
return (
|
||||
<div key={bp.id} className="flex flex-col items-center">
|
||||
{bp.pokemon.spriteUrl ? (
|
||||
<img src={bp.pokemon.spriteUrl} alt={bp.pokemon.name} className="w-10 h-10" />
|
||||
<img
|
||||
src={bp.pokemon.spriteUrl}
|
||||
alt={bp.pokemon.name}
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 bg-surface-3 rounded-full" />
|
||||
)}
|
||||
<span className="text-xs text-text-tertiary capitalize">{bp.pokemon.name}</span>
|
||||
<span className="text-xs text-text-tertiary capitalize">
|
||||
{bp.pokemon.name}
|
||||
</span>
|
||||
<span className="text-xs font-medium text-text-secondary">Lv.{bp.level}</span>
|
||||
<ConditionBadge condition={bp.conditionLabel} size="xs" />
|
||||
{bp.ability && (
|
||||
@@ -166,7 +160,6 @@ export function BossDefeatModal({
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-48 overflow-y-auto">
|
||||
{aliveEncounters.map((enc) => {
|
||||
const isSelected = selectedTeam.has(enc.id)
|
||||
const selection = selectedTeam.get(enc.id)
|
||||
const displayPokemon = enc.currentPokemon ?? enc.pokemon
|
||||
return (
|
||||
<div
|
||||
@@ -176,12 +169,12 @@ export function BossDefeatModal({
|
||||
? 'border-accent-500 bg-accent-500/10'
|
||||
: 'border-border-default hover:bg-surface-2'
|
||||
}`}
|
||||
onClick={() => toggleTeamMember(enc)}
|
||||
onClick={() => toggleTeamMember(enc.id)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => toggleTeamMember(enc)}
|
||||
onChange={() => toggleTeamMember(enc.id)}
|
||||
className="sr-only"
|
||||
/>
|
||||
{displayPokemon.spriteUrl ? (
|
||||
@@ -193,26 +186,9 @@ export function BossDefeatModal({
|
||||
) : (
|
||||
<div className="w-8 h-8 bg-surface-3 rounded-full" />
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-medium truncate">
|
||||
{enc.nickname ?? displayPokemon.name}
|
||||
</p>
|
||||
{isSelected && (
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={100}
|
||||
value={selection?.level ?? enc.catchLevel ?? 1}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation()
|
||||
updateLevel(enc.id, Number.parseInt(e.target.value, 10) || 1)
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-14 text-xs px-1 py-0.5 mt-1 rounded border border-border-default bg-surface-1"
|
||||
placeholder="Lv"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="flex-1 min-w-0 text-xs font-medium truncate">
|
||||
{enc.nickname ?? displayPokemon.name}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -922,7 +922,7 @@ export function RunEncounters() {
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-8">
|
||||
<div className="max-w-4xl lg:max-w-6xl mx-auto p-8">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<Link
|
||||
@@ -1246,250 +1246,279 @@ export function RunEncounters() {
|
||||
{/* Encounters Tab */}
|
||||
{activeTab === 'encounters' && (
|
||||
<>
|
||||
{/* Team Section */}
|
||||
{(alive.length > 0 || dead.length > 0) && (
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowTeam(!showTeam)}
|
||||
className="flex items-center gap-2 group"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-text-primary">
|
||||
{isActive ? 'Team' : 'Final Team'}
|
||||
</h2>
|
||||
<span className="text-xs text-text-muted">
|
||||
{alive.length} alive
|
||||
{dead.length > 0 ? `, ${dead.length} dead` : ''}
|
||||
</span>
|
||||
<svg
|
||||
className={`w-4 h-4 text-text-tertiary transition-transform ${showTeam ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{showTeam && alive.length > 1 && (
|
||||
<select
|
||||
value={teamSort}
|
||||
onChange={(e) => setTeamSort(e.target.value as TeamSortKey)}
|
||||
className="text-sm border border-border-default rounded-lg px-3 py-1.5 bg-surface-1 text-text-primary"
|
||||
>
|
||||
<option value="route">Route Order</option>
|
||||
<option value="level">Catch Level</option>
|
||||
<option value="species">Species Name</option>
|
||||
<option value="dex">National Dex</option>
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
{showTeam && (
|
||||
<>
|
||||
{alive.length > 0 && (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2 mb-3">
|
||||
{alive.map((enc) => (
|
||||
<PokemonCard
|
||||
key={enc.id}
|
||||
encounter={enc}
|
||||
onClick={
|
||||
isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined
|
||||
}
|
||||
<div className="lg:flex lg:gap-6">
|
||||
{/* Main content column */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Team Section - Mobile/Tablet only */}
|
||||
{(alive.length > 0 || dead.length > 0) && (
|
||||
<div className="mb-6 lg:hidden">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowTeam(!showTeam)}
|
||||
className="flex items-center gap-2 group"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-text-primary">
|
||||
{isActive ? 'Team' : 'Final Team'}
|
||||
</h2>
|
||||
<span className="text-xs text-text-muted">
|
||||
{alive.length} alive
|
||||
{dead.length > 0 ? `, ${dead.length} dead` : ''}
|
||||
</span>
|
||||
<svg
|
||||
className={`w-4 h-4 text-text-tertiary transition-transform ${showTeam ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{dead.length > 0 && (
|
||||
</svg>
|
||||
</button>
|
||||
{showTeam && alive.length > 1 && (
|
||||
<select
|
||||
value={teamSort}
|
||||
onChange={(e) => setTeamSort(e.target.value as TeamSortKey)}
|
||||
className="text-sm border border-border-default rounded-lg px-3 py-1.5 bg-surface-1 text-text-primary"
|
||||
>
|
||||
<option value="route">Route Order</option>
|
||||
<option value="level">Catch Level</option>
|
||||
<option value="species">Species Name</option>
|
||||
<option value="dex">National Dex</option>
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
{showTeam && (
|
||||
<>
|
||||
<h3 className="text-sm font-medium text-text-tertiary mb-2">Graveyard</h3>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
|
||||
{dead.map((enc) => (
|
||||
<PokemonCard
|
||||
key={enc.id}
|
||||
encounter={enc}
|
||||
showFaintLevel
|
||||
onClick={
|
||||
isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{alive.length > 0 && (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2 mb-3">
|
||||
{alive.map((enc) => (
|
||||
<PokemonCard
|
||||
key={enc.id}
|
||||
encounter={enc}
|
||||
onClick={
|
||||
isActive && canEdit
|
||||
? () => setSelectedTeamEncounter(enc)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{dead.length > 0 && (
|
||||
<>
|
||||
<h3 className="text-sm font-medium text-text-tertiary mb-2">Graveyard</h3>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
|
||||
{dead.map((enc) => (
|
||||
<PokemonCard
|
||||
key={enc.id}
|
||||
encounter={enc}
|
||||
showFaintLevel
|
||||
onClick={
|
||||
isActive && canEdit
|
||||
? () => setSelectedTeamEncounter(enc)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Shiny Box */}
|
||||
{run.rules?.shinyClause && shinyEncounters.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<ShinyBox
|
||||
encounters={shinyEncounters}
|
||||
onEncounterClick={
|
||||
isActive && canEdit ? (enc) => setSelectedTeamEncounter(enc) : undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Transfer Encounters */}
|
||||
{transferEncounters.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h2 className="text-sm font-medium text-indigo-400 mb-2">Transferred Pokemon</h2>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
|
||||
{transferEncounters.map((enc) => (
|
||||
<PokemonCard
|
||||
key={enc.id}
|
||||
encounter={enc}
|
||||
onClick={isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined}
|
||||
{/* Shiny Box */}
|
||||
{run.rules?.shinyClause && shinyEncounters.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<ShinyBox
|
||||
encounters={shinyEncounters}
|
||||
onEncounterClick={
|
||||
isActive && canEdit ? (enc) => setSelectedTeamEncounter(enc) : undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Transfer Encounters */}
|
||||
{transferEncounters.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h2 className="text-sm font-medium text-indigo-400 mb-2">Transferred Pokemon</h2>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
|
||||
{transferEncounters.map((enc) => (
|
||||
<PokemonCard
|
||||
key={enc.id}
|
||||
encounter={enc}
|
||||
onClick={
|
||||
isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="text-lg font-semibold text-text-primary">Encounters</h2>
|
||||
{isActive && canEdit && completedCount < totalLocations && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={bulkRandomize.isPending}
|
||||
onClick={() => {
|
||||
const remaining = totalLocations - completedCount
|
||||
if (
|
||||
window.confirm(
|
||||
`Randomize encounters for all ${remaining} remaining locations?`
|
||||
)
|
||||
) {
|
||||
bulkRandomize.mutate()
|
||||
}
|
||||
}}
|
||||
className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-600 text-purple-400 light:text-purple-700 light:border-purple-500 hover:bg-purple-900/20 light:hover:bg-purple-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{bulkRandomize.isPending ? 'Randomizing...' : 'Randomize All'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm text-text-tertiary">
|
||||
{completedCount} / {totalLocations} locations
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-surface-3 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full transition-all"
|
||||
style={{
|
||||
width: `${totalLocations > 0 ? (completedCount / totalLocations) * 100 : 0}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter tabs */}
|
||||
<div className="flex gap-2 mb-4 flex-wrap">
|
||||
{(
|
||||
[
|
||||
{ key: 'all', label: 'All' },
|
||||
{ key: 'none', label: 'Unvisited' },
|
||||
{ key: 'caught', label: 'Caught' },
|
||||
{ key: 'fainted', label: 'Fainted' },
|
||||
{ key: 'missed', label: 'Missed' },
|
||||
] as const
|
||||
).map(({ key, label }) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setFilter(key)}
|
||||
className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
|
||||
filter === key
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-surface-2 text-text-secondary hover:bg-surface-3'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="text-lg font-semibold text-text-primary">Encounters</h2>
|
||||
{isActive && canEdit && completedCount < totalLocations && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={bulkRandomize.isPending}
|
||||
onClick={() => {
|
||||
const remaining = totalLocations - completedCount
|
||||
if (
|
||||
window.confirm(
|
||||
`Randomize encounters for all ${remaining} remaining locations?`
|
||||
)
|
||||
) {
|
||||
bulkRandomize.mutate()
|
||||
}
|
||||
}}
|
||||
className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-600 text-purple-400 light:text-purple-700 light:border-purple-500 hover:bg-purple-900/20 light:hover:bg-purple-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{bulkRandomize.isPending ? 'Randomizing...' : 'Randomize All'}
|
||||
</button>
|
||||
{/* Route list */}
|
||||
<div className="space-y-1">
|
||||
{filteredRoutes.length === 0 && (
|
||||
<p className="text-text-tertiary text-sm py-4 text-center">
|
||||
{filter === 'all'
|
||||
? 'Click a route to log your first encounter'
|
||||
: 'No routes match this filter — try a different one'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm text-text-tertiary">
|
||||
{completedCount} / {totalLocations} locations
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-surface-3 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full transition-all"
|
||||
style={{
|
||||
width: `${totalLocations > 0 ? (completedCount / totalLocations) * 100 : 0}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{filteredRoutes.map((route) => {
|
||||
// Collect all route IDs to check for boss cards after
|
||||
const routeIds: number[] =
|
||||
route.children.length > 0
|
||||
? [route.id, ...route.children.map((c) => c.id)]
|
||||
: [route.id]
|
||||
|
||||
{/* Filter tabs */}
|
||||
<div className="flex gap-2 mb-4 flex-wrap">
|
||||
{(
|
||||
[
|
||||
{ key: 'all', label: 'All' },
|
||||
{ key: 'none', label: 'Unvisited' },
|
||||
{ key: 'caught', label: 'Caught' },
|
||||
{ key: 'fainted', label: 'Fainted' },
|
||||
{ key: 'missed', label: 'Missed' },
|
||||
] as const
|
||||
).map(({ key, label }) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setFilter(key)}
|
||||
className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
|
||||
filter === key
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-surface-2 text-text-secondary hover:bg-surface-3'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
// Find boss battles positioned after this route (or any of its children)
|
||||
const bossesHere: BossBattle[] = []
|
||||
for (const rid of routeIds) {
|
||||
const b = bossesAfterRoute.get(rid)
|
||||
if (b) bossesHere.push(...b)
|
||||
}
|
||||
|
||||
{/* Route list */}
|
||||
<div className="space-y-1">
|
||||
{filteredRoutes.length === 0 && (
|
||||
<p className="text-text-tertiary text-sm py-4 text-center">
|
||||
{filter === 'all'
|
||||
? 'Click a route to log your first encounter'
|
||||
: 'No routes match this filter — try a different one'}
|
||||
</p>
|
||||
)}
|
||||
{filteredRoutes.map((route) => {
|
||||
// Collect all route IDs to check for boss cards after
|
||||
const routeIds: number[] =
|
||||
route.children.length > 0
|
||||
? [route.id, ...route.children.map((c) => c.id)]
|
||||
: [route.id]
|
||||
|
||||
// Find boss battles positioned after this route (or any of its children)
|
||||
const bossesHere: BossBattle[] = []
|
||||
for (const rid of routeIds) {
|
||||
const b = bossesAfterRoute.get(rid)
|
||||
if (b) bossesHere.push(...b)
|
||||
}
|
||||
|
||||
const routeElement =
|
||||
route.children.length > 0 ? (
|
||||
<RouteGroup
|
||||
key={route.id}
|
||||
group={route}
|
||||
encounterByRoute={encounterByRoute}
|
||||
giftEncounterByRoute={giftEncounterByRoute}
|
||||
isExpanded={expandedGroups.has(route.id)}
|
||||
onToggleExpand={() => toggleGroup(route.id)}
|
||||
onRouteClick={canEdit ? handleRouteClick : undefined}
|
||||
filter={filter}
|
||||
pinwheelClause={pinwheelClause}
|
||||
/>
|
||||
) : (
|
||||
(() => {
|
||||
const encounter = encounterByRoute.get(route.id)
|
||||
const giftEncounter = giftEncounterByRoute.get(route.id)
|
||||
const displayEncounter = encounter ?? giftEncounter
|
||||
const rs = getRouteStatus(displayEncounter)
|
||||
const si = statusIndicator[rs]
|
||||
|
||||
return (
|
||||
<button
|
||||
const routeElement =
|
||||
route.children.length > 0 ? (
|
||||
<RouteGroup
|
||||
key={route.id}
|
||||
type="button"
|
||||
onClick={canEdit ? () => handleRouteClick(route) : undefined}
|
||||
disabled={!canEdit}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-colors ${!canEdit ? 'cursor-default' : 'hover:bg-surface-2/50'} ${si.bg}`}
|
||||
>
|
||||
<span className={`w-2.5 h-2.5 rounded-full shrink-0 ${si.dot}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-text-primary">{route.name}</div>
|
||||
{encounter ? (
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
{encounter.pokemon.spriteUrl && (
|
||||
<img
|
||||
src={encounter.pokemon.spriteUrl}
|
||||
alt={encounter.pokemon.name}
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
)}
|
||||
<span className="text-xs text-text-tertiary capitalize">
|
||||
{encounter.nickname ?? encounter.pokemon.name}
|
||||
{encounter.status === 'caught' &&
|
||||
encounter.faintLevel !== null &&
|
||||
(encounter.deathCause ? ` — ${encounter.deathCause}` : ' (dead)')}
|
||||
</span>
|
||||
{giftEncounter && (
|
||||
<>
|
||||
group={route}
|
||||
encounterByRoute={encounterByRoute}
|
||||
giftEncounterByRoute={giftEncounterByRoute}
|
||||
isExpanded={expandedGroups.has(route.id)}
|
||||
onToggleExpand={() => toggleGroup(route.id)}
|
||||
onRouteClick={canEdit ? handleRouteClick : undefined}
|
||||
filter={filter}
|
||||
pinwheelClause={pinwheelClause}
|
||||
/>
|
||||
) : (
|
||||
(() => {
|
||||
const encounter = encounterByRoute.get(route.id)
|
||||
const giftEncounter = giftEncounterByRoute.get(route.id)
|
||||
const displayEncounter = encounter ?? giftEncounter
|
||||
const rs = getRouteStatus(displayEncounter)
|
||||
const si = statusIndicator[rs]
|
||||
|
||||
return (
|
||||
<button
|
||||
key={route.id}
|
||||
type="button"
|
||||
onClick={canEdit ? () => handleRouteClick(route) : undefined}
|
||||
disabled={!canEdit}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-colors ${!canEdit ? 'cursor-default' : 'hover:bg-surface-2/50'} ${si.bg}`}
|
||||
>
|
||||
<span className={`w-2.5 h-2.5 rounded-full shrink-0 ${si.dot}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-text-primary">
|
||||
{route.name}
|
||||
</div>
|
||||
{encounter ? (
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
{encounter.pokemon.spriteUrl && (
|
||||
<img
|
||||
src={encounter.pokemon.spriteUrl}
|
||||
alt={encounter.pokemon.name}
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
)}
|
||||
<span className="text-xs text-text-tertiary capitalize">
|
||||
{encounter.nickname ?? encounter.pokemon.name}
|
||||
{encounter.status === 'caught' &&
|
||||
encounter.faintLevel !== null &&
|
||||
(encounter.deathCause
|
||||
? ` — ${encounter.deathCause}`
|
||||
: ' (dead)')}
|
||||
</span>
|
||||
{giftEncounter && (
|
||||
<>
|
||||
{giftEncounter.pokemon.spriteUrl && (
|
||||
<img
|
||||
src={giftEncounter.pokemon.spriteUrl}
|
||||
alt={giftEncounter.pokemon.name}
|
||||
className="w-8 h-8 opacity-60"
|
||||
/>
|
||||
)}
|
||||
<span className="text-xs text-text-tertiary capitalize">
|
||||
{giftEncounter.nickname ?? giftEncounter.pokemon.name}
|
||||
<span className="text-text-muted ml-1">(gift)</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : giftEncounter ? (
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
{giftEncounter.pokemon.spriteUrl && (
|
||||
<img
|
||||
src={giftEncounter.pokemon.spriteUrl}
|
||||
@@ -1501,194 +1530,250 @@ export function RunEncounters() {
|
||||
{giftEncounter.nickname ?? giftEncounter.pokemon.name}
|
||||
<span className="text-text-muted ml-1">(gift)</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : giftEncounter ? (
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
{giftEncounter.pokemon.spriteUrl && (
|
||||
<img
|
||||
src={giftEncounter.pokemon.spriteUrl}
|
||||
alt={giftEncounter.pokemon.name}
|
||||
className="w-8 h-8 opacity-60"
|
||||
/>
|
||||
)}
|
||||
<span className="text-xs text-text-tertiary capitalize">
|
||||
{giftEncounter.nickname ?? giftEncounter.pokemon.name}
|
||||
<span className="text-text-muted ml-1">(gift)</span>
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
route.encounterMethods.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-0.5">
|
||||
{route.encounterMethods.map((m) => (
|
||||
<EncounterMethodBadge key={m} method={m} size="xs" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-text-muted shrink-0">{si.label}</span>
|
||||
</button>
|
||||
)
|
||||
})()
|
||||
)
|
||||
|
||||
return (
|
||||
<div key={route.id}>
|
||||
{routeElement}
|
||||
{/* Boss battle cards after this route */}
|
||||
{bossesHere.map((boss) => {
|
||||
const isDefeated = defeatedBossIds.has(boss.id)
|
||||
const sectionAfter = sectionDividerAfterBoss.get(boss.id)
|
||||
const bossTypeLabel: Record<string, string> = {
|
||||
gym_leader: 'Gym Leader',
|
||||
elite_four: 'Elite Four',
|
||||
champion: 'Champion',
|
||||
rival: 'Rival',
|
||||
evil_team: 'Evil Team',
|
||||
kahuna: 'Kahuna',
|
||||
totem: 'Totem',
|
||||
other: 'Boss',
|
||||
}
|
||||
const bossTypeColors: Record<string, string> = {
|
||||
gym_leader: 'border-yellow-600',
|
||||
elite_four: 'border-purple-600',
|
||||
champion: 'border-red-600',
|
||||
rival: 'border-blue-600',
|
||||
evil_team: 'border-gray-400',
|
||||
kahuna: 'border-orange-600',
|
||||
totem: 'border-teal-600',
|
||||
other: 'border-gray-500',
|
||||
}
|
||||
|
||||
const isBossExpanded = expandedBosses.has(boss.id)
|
||||
const toggleBoss = () => {
|
||||
setExpandedBosses((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(boss.id)) next.delete(boss.id)
|
||||
else next.add(boss.id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={`boss-${boss.id}`}>
|
||||
<div
|
||||
className={`my-2 rounded-lg border-2 ${bossTypeColors[boss.bossType] ?? bossTypeColors['other']} ${
|
||||
isDefeated ? 'bg-green-900/10' : 'bg-surface-1'
|
||||
} px-4 py-3`}
|
||||
>
|
||||
<div
|
||||
className="flex items-start justify-between cursor-pointer select-none"
|
||||
onClick={toggleBoss}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<svg
|
||||
className={`w-4 h-4 text-text-tertiary transition-transform ${isBossExpanded ? 'rotate-90' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
{boss.spriteUrl && (
|
||||
<img src={boss.spriteUrl} alt={boss.name} className="h-10 w-auto" />
|
||||
)}
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-text-primary">
|
||||
{boss.name}
|
||||
</span>
|
||||
<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-surface-2 text-text-secondary">
|
||||
{bossTypeLabel[boss.bossType] ?? boss.bossType}
|
||||
</span>
|
||||
{boss.specialtyType && <TypeBadge type={boss.specialtyType} />}
|
||||
</div>
|
||||
<p className="text-xs text-text-tertiary">
|
||||
{boss.location} · Level Cap: {boss.levelCap}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
route.encounterMethods.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-0.5">
|
||||
{route.encounterMethods.map((m) => (
|
||||
<EncounterMethodBadge key={m} method={m} size="xs" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
{isDefeated ? (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-900/40 text-green-300 light:bg-green-100 light:text-green-800">
|
||||
Defeated ✓
|
||||
</span>
|
||||
) : isActive && canEdit ? (
|
||||
<button
|
||||
onClick={() => setSelectedBoss(boss)}
|
||||
className="px-3 py-1 text-xs font-medium rounded-full bg-accent-600 text-white hover:bg-accent-500 transition-colors"
|
||||
>
|
||||
Battle
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{/* Boss pokemon team */}
|
||||
{isBossExpanded && boss.pokemon.length > 0 && (
|
||||
<BossTeamPreview pokemon={boss.pokemon} starterName={starterName} />
|
||||
)}
|
||||
{/* Player team snapshot */}
|
||||
{isDefeated &&
|
||||
(() => {
|
||||
const result = bossResultByBattleId.get(boss.id)
|
||||
if (!result || result.team.length === 0) return null
|
||||
return (
|
||||
<div className="mt-3 pt-3 border-t border-border-default">
|
||||
<p className="text-xs font-medium text-text-secondary mb-2">
|
||||
Your Team
|
||||
</p>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{result.team.map((tm: BossResultTeamMember) => {
|
||||
const enc = encounterById.get(tm.encounterId)
|
||||
if (!enc) return null
|
||||
const dp = enc.currentPokemon ?? enc.pokemon
|
||||
return (
|
||||
<div key={tm.id} className="flex flex-col items-center">
|
||||
{dp.spriteUrl ? (
|
||||
<img
|
||||
src={dp.spriteUrl}
|
||||
alt={dp.name}
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 bg-surface-3 rounded-full" />
|
||||
)}
|
||||
<span className="text-[10px] text-text-tertiary capitalize">
|
||||
{enc.nickname ?? dp.name}
|
||||
</span>
|
||||
<span className="text-[10px] text-text-muted">
|
||||
Lv.{tm.level}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<span className="text-xs text-text-muted shrink-0">{si.label}</span>
|
||||
</button>
|
||||
)
|
||||
})()
|
||||
)
|
||||
|
||||
return (
|
||||
<div key={route.id}>
|
||||
{routeElement}
|
||||
{/* Boss battle cards after this route */}
|
||||
{bossesHere.map((boss) => {
|
||||
const isDefeated = defeatedBossIds.has(boss.id)
|
||||
const sectionAfter = sectionDividerAfterBoss.get(boss.id)
|
||||
const bossTypeLabel: Record<string, string> = {
|
||||
gym_leader: 'Gym Leader',
|
||||
elite_four: 'Elite Four',
|
||||
champion: 'Champion',
|
||||
rival: 'Rival',
|
||||
evil_team: 'Evil Team',
|
||||
kahuna: 'Kahuna',
|
||||
totem: 'Totem',
|
||||
other: 'Boss',
|
||||
}
|
||||
const bossTypeColors: Record<string, string> = {
|
||||
gym_leader: 'border-yellow-600',
|
||||
elite_four: 'border-purple-600',
|
||||
champion: 'border-red-600',
|
||||
rival: 'border-blue-600',
|
||||
evil_team: 'border-gray-400',
|
||||
kahuna: 'border-orange-600',
|
||||
totem: 'border-teal-600',
|
||||
other: 'border-gray-500',
|
||||
}
|
||||
|
||||
const isBossExpanded = expandedBosses.has(boss.id)
|
||||
const toggleBoss = () => {
|
||||
setExpandedBosses((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(boss.id)) next.delete(boss.id)
|
||||
else next.add(boss.id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={`boss-${boss.id}`}>
|
||||
<div
|
||||
className={`my-2 rounded-lg border-2 ${bossTypeColors[boss.bossType] ?? bossTypeColors['other']} ${
|
||||
isDefeated ? 'bg-green-900/10' : 'bg-surface-1'
|
||||
} px-4 py-3`}
|
||||
>
|
||||
<div
|
||||
className="flex items-start justify-between cursor-pointer select-none"
|
||||
onClick={toggleBoss}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<svg
|
||||
className={`w-4 h-4 text-text-tertiary transition-transform ${isBossExpanded ? 'rotate-90' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
{boss.spriteUrl && (
|
||||
<img
|
||||
src={boss.spriteUrl}
|
||||
alt={boss.name}
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-text-primary">
|
||||
{boss.name}
|
||||
</span>
|
||||
<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-surface-2 text-text-secondary">
|
||||
{bossTypeLabel[boss.bossType] ?? boss.bossType}
|
||||
</span>
|
||||
{boss.specialtyType && (
|
||||
<TypeBadge type={boss.specialtyType} />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-text-tertiary">
|
||||
{boss.location} · Level Cap: {boss.levelCap}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
{sectionAfter && (
|
||||
<div className="flex items-center gap-3 my-4">
|
||||
<div className="flex-1 h-px bg-surface-3" />
|
||||
<span className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
|
||||
{sectionAfter}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-surface-3" />
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
{isDefeated ? (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-900/40 text-green-300 light:bg-green-100 light:text-green-800">
|
||||
Defeated ✓
|
||||
</span>
|
||||
) : isActive && canEdit ? (
|
||||
<button
|
||||
onClick={() => setSelectedBoss(boss)}
|
||||
className="px-3 py-1 text-xs font-medium rounded-full bg-accent-600 text-white hover:bg-accent-500 transition-colors"
|
||||
>
|
||||
Battle
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{/* Boss pokemon team */}
|
||||
{isBossExpanded && boss.pokemon.length > 0 && (
|
||||
<BossTeamPreview pokemon={boss.pokemon} starterName={starterName} />
|
||||
)}
|
||||
{/* Player team snapshot */}
|
||||
{isDefeated &&
|
||||
(() => {
|
||||
const result = bossResultByBattleId.get(boss.id)
|
||||
if (!result || result.team.length === 0) return null
|
||||
return (
|
||||
<div className="mt-3 pt-3 border-t border-border-default">
|
||||
<p className="text-xs font-medium text-text-secondary mb-2">
|
||||
Your Team
|
||||
</p>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{result.team.map((tm: BossResultTeamMember) => {
|
||||
const enc = encounterById.get(tm.encounterId)
|
||||
if (!enc) return null
|
||||
const dp = enc.currentPokemon ?? enc.pokemon
|
||||
return (
|
||||
<div key={tm.id} className="flex flex-col items-center">
|
||||
{dp.spriteUrl ? (
|
||||
<img
|
||||
src={dp.spriteUrl}
|
||||
alt={dp.name}
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 bg-surface-3 rounded-full" />
|
||||
)}
|
||||
<span className="text-[10px] text-text-tertiary capitalize">
|
||||
{enc.nickname ?? dp.name}
|
||||
</span>
|
||||
{tm.level != null && (
|
||||
<span className="text-[10px] text-text-muted">
|
||||
Lv.{tm.level}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
{sectionAfter && (
|
||||
<div className="flex items-center gap-3 my-4">
|
||||
<div className="flex-1 h-px bg-surface-3" />
|
||||
<span className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
|
||||
{sectionAfter}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-surface-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Sidebar - Desktop only */}
|
||||
{(alive.length > 0 || dead.length > 0) && (
|
||||
<div className="hidden lg:block w-64 shrink-0">
|
||||
<div className="sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto">
|
||||
<div className="bg-surface-1 border border-border-default rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold text-text-primary">
|
||||
{isActive ? 'Team' : 'Final Team'}
|
||||
</h2>
|
||||
<span className="text-xs text-text-muted">
|
||||
{alive.length}/{alive.length + dead.length}
|
||||
</span>
|
||||
</div>
|
||||
{alive.length > 1 && (
|
||||
<select
|
||||
value={teamSort}
|
||||
onChange={(e) => setTeamSort(e.target.value as TeamSortKey)}
|
||||
className="w-full text-sm border border-border-default rounded-lg px-3 py-1.5 bg-surface-0 text-text-primary mb-3"
|
||||
>
|
||||
<option value="route">Route Order</option>
|
||||
<option value="level">Catch Level</option>
|
||||
<option value="species">Species Name</option>
|
||||
<option value="dex">National Dex</option>
|
||||
</select>
|
||||
)}
|
||||
{alive.length > 0 && (
|
||||
<div className="grid grid-cols-2 gap-2 mb-3">
|
||||
{alive.map((enc) => (
|
||||
<PokemonCard
|
||||
key={enc.id}
|
||||
encounter={enc}
|
||||
onClick={
|
||||
isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
)}
|
||||
{dead.length > 0 && (
|
||||
<>
|
||||
<h3 className="text-sm font-medium text-text-tertiary mb-2">Graveyard</h3>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{dead.map((enc) => (
|
||||
<PokemonCard
|
||||
key={enc.id}
|
||||
encounter={enc}
|
||||
showFaintLevel
|
||||
onClick={
|
||||
isActive && canEdit
|
||||
? () => setSelectedTeamEncounter(enc)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Encounter Modal */}
|
||||
|
||||
@@ -238,7 +238,7 @@ export interface BossBattle {
|
||||
export interface BossResultTeamMember {
|
||||
id: number
|
||||
encounterId: number
|
||||
level: number
|
||||
level: number | null
|
||||
}
|
||||
|
||||
export interface BossResult {
|
||||
@@ -253,7 +253,7 @@ export interface BossResult {
|
||||
|
||||
export interface BossResultTeamMemberInput {
|
||||
encounterId: number
|
||||
level: number
|
||||
level?: number | null
|
||||
}
|
||||
|
||||
export interface CreateBossResultInput {
|
||||
|
||||
Reference in New Issue
Block a user