TheFurya/nuzlocke-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add collapsible boss teams and hide attempts in hardcore mode

Browse Source 
Boss battle cards now collapse the pokemon team by default with a
chevron toggle. Expanded teams show larger sprites with "Lvl" prefix.
In hardcore mode, the BossDefeatModal hides the attempts field and
lost button since a loss ends the run.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-08 12:03:11 +01:00
parent 5d54c00af0
commit 979f57f184
3 changed files with 70 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/components/BossDefeatModal.tsx
View File

@@ -6,9 +6,10 @@ interface BossDefeatModalProps {
onSubmit: (data: CreateBossResultInput) => void
onClose: () => void
isPending?: boolean
hardcoreMode?: boolean
}
export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefeatModalProps) {
export function BossDefeatModal({ boss, onSubmit, onClose, isPending, hardcoreMode }: BossDefeatModalProps) {
const [result, setResult] = useState<'won' | 'lost'>('won')
const [attempts, setAttempts] = useState('1')
@@ -16,8 +17,8 @@ export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefe
e.preventDefault()
onSubmit({
bossBattleId: boss.id,
result,
attempts: Number(attempts) || 1,
result: hardcoreMode ? 'won' : result,
attempts: hardcoreMode ? 1 : Number(attempts) || 1,
})
}
@@ -71,30 +72,34 @@ export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefe
>
Won
</button>
<button
type="button"
onClick={() => setResult('lost')}
className={`flex-1 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${
result === 'lost'
? 'bg-red-600 text-white border-red-600'
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
}`}
>
Lost
</button>
{!hardcoreMode && (
<button
type="button"
onClick={() => setResult('lost')}
className={`flex-1 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${
result === 'lost'
? 'bg-red-600 text-white border-red-600'
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
}`}
>
Lost
</button>
)}
</div>
</div>
<div>
<label className="block text-sm font-medium mb-1">Attempts</label>
<input
type="number"
min={1}
value={attempts}
onChange={(e) => setAttempts(e.target.value)}
className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
/>
</div>
{!hardcoreMode && (
<div>
<label className="block text-sm font-medium mb-1">Attempts</label>
<input
type="number"
min={1}
value={attempts}
onChange={(e) => setAttempts(e.target.value)}
className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
/>
</div>
)}
</div>
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">

36
frontend/src/pages/RunEncounters.tsx
View File

@@ -337,6 +337,7 @@ export function RunEncounters() {
useState<EncounterDetail | null>(null)
const [showEndRun, setShowEndRun] = useState(false)
const [showShinyModal, setShowShinyModal] = useState(false)
const [expandedBosses, setExpandedBosses] = useState<Set<number>>(new Set())
const [showTeam, setShowTeam] = useState(true)
const [filter, setFilter] = useState<'all' | RouteStatus>('all')
@@ -1021,6 +1022,16 @@ export function RunEncounters() {
other: 'border-gray-400 dark: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}`}
@@ -1028,8 +1039,20 @@ export function RunEncounters() {
isDefeated ? 'bg-green-50/50 dark:bg-green-900/10' : 'bg-white dark:bg-gray-800'
} px-4 py-3`}
>
<div className="flex items-start justify-between">
<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-gray-400 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="w-10 h-10" />
)}
@@ -1047,7 +1070,7 @@ export function RunEncounters() {
</p>
</div>
</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-100 dark:bg-green-900/40 text-green-700 dark:text-green-300">
Defeated &#10003;
@@ -1063,19 +1086,19 @@ export function RunEncounters() {
</div>
</div>
{/* Boss pokemon team */}
{boss.pokemon.length > 0 && (
{isBossExpanded && boss.pokemon.length > 0 && (
<div className="flex gap-2 mt-2 flex-wrap">
{boss.pokemon
.sort((a, b) => a.order - b.order)
.map((bp) => (
<div key={bp.id} className="flex items-center gap-1">
{bp.pokemon.spriteUrl ? (
<img src={bp.pokemon.spriteUrl} alt={bp.pokemon.name} className="w-6 h-6" />
<img src={bp.pokemon.spriteUrl} alt={bp.pokemon.name} className="w-10 h-10" />
) : (
<div className="w-6 h-6 bg-gray-200 dark:bg-gray-700 rounded-full" />
<div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full" />
)}
<span className="text-xs text-gray-500 dark:text-gray-400">
{bp.level}
Lvl {bp.level}
</span>
</div>
))}
@@ -1141,6 +1164,7 @@ export function RunEncounters() {
}}
onClose={() => setSelectedBoss(null)}
isPending={createBossResult.isPending}
hardcoreMode={run?.rules?.hardcoreMode}
/>
)}