feat: multi-combat ×5/×10 + cooldown anti-spam
Some checks failed
CI/CD — Build & Deploy / Build & Deploy (push) Failing after 30s
Some checks failed
CI/CD — Build & Deploy / Build & Deploy (push) Failing after 30s
- Backend: startMultiCombat boucle séquentielle, arrêt sur défaite - Frontend: cooldown 1.5s entre combats, boutons ×1/×5/×10 - Frontend: résumé multi-combat (wins/losses, XP/Or/loot totaux) - Fix: lock contention par spam de clics résolu
This commit is contained in:
@@ -27,7 +27,7 @@ export const characterApi = {
|
|||||||
export const combatApi = {
|
export const combatApi = {
|
||||||
zones: () => api.get<any[]>('/monsters/zones'),
|
zones: () => api.get<any[]>('/monsters/zones'),
|
||||||
monsters: () => api.get<Monster[]>('/monsters'),
|
monsters: () => api.get<Monster[]>('/monsters'),
|
||||||
start: (monsterId: string, attackType: string) => api.post<CombatResult>('/combat/start', { monsterId, attackType }),
|
start: (monsterId: string, attackType: string, count?: number) => api.post<any>('/combat/start', { monsterId, attackType, ...(count && count > 1 ? { count } : {}) }),
|
||||||
history: () => api.get<CombatLog[]>('/combat/history'),
|
history: () => api.get<CombatLog[]>('/combat/history'),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -85,6 +85,22 @@ export interface CombatResult {
|
|||||||
character: CombatCharacterState;
|
character: CombatCharacterState;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface MultiCombatResult {
|
||||||
|
mode: 'multi';
|
||||||
|
count: number;
|
||||||
|
totals: {
|
||||||
|
wins: number;
|
||||||
|
losses: number;
|
||||||
|
xp: number;
|
||||||
|
gold: number;
|
||||||
|
goldLost: number;
|
||||||
|
loot: { name: string; quantity: number }[];
|
||||||
|
levelsGained: number;
|
||||||
|
};
|
||||||
|
lastResult: CombatResult;
|
||||||
|
character: CombatCharacterState;
|
||||||
|
}
|
||||||
|
|
||||||
export interface CombatLog {
|
export interface CombatLog {
|
||||||
id: string;
|
id: string;
|
||||||
winner: 'player' | 'monster';
|
winner: 'player' | 'monster';
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useState } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { combatApi, characterApi } from '../api/endpoints';
|
import { combatApi, characterApi } from '../api/endpoints';
|
||||||
import type { Monster, CombatResult, CombatLog } from '../api/types';
|
import type { Monster, CombatResult, MultiCombatResult, CombatLog } from '../api/types';
|
||||||
import { Swords, Trophy, Skull, Clock, Zap, Heart, Lock } from 'lucide-react';
|
import { Swords, Trophy, Skull, Clock, Zap, Heart, Lock } from 'lucide-react';
|
||||||
|
|
||||||
const COMBAT_COST = 5;
|
const COMBAT_COST = 5;
|
||||||
@@ -91,6 +91,39 @@ function CombatLogView({ result }: { result: CombatResult }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function MultiCombatView({ result }: { result: MultiCombatResult }) {
|
||||||
|
const t = result.totals;
|
||||||
|
return (
|
||||||
|
<div className="card" style={{ marginTop: '1rem' }}>
|
||||||
|
<div style={{ textAlign: 'center', padding: '0.75rem 0', marginBottom: '0.75rem', borderBottom: '1px solid #2a3448' }}>
|
||||||
|
<div style={{ fontWeight: 800, fontSize: 18, color: t.losses > 0 ? '#e84040' : '#3ddc84' }}>
|
||||||
|
{t.losses > 0 ? <Skull size={20} style={{ display: 'inline', marginRight: 8 }} /> : <Trophy size={20} style={{ display: 'inline', marginRight: 8 }} />}
|
||||||
|
{result.count} combat{result.count > 1 ? 's' : ''} — {t.wins}V / {t.losses}D
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 14, color: '#dce4f0', marginTop: 6 }}>
|
||||||
|
+{t.xp} XP +{t.gold} Or
|
||||||
|
{t.goldLost > 0 && <span style={{ color: '#e84040' }}> −{t.goldLost} Or</span>}
|
||||||
|
</div>
|
||||||
|
{t.levelsGained > 0 && (
|
||||||
|
<div style={{ fontSize: 13, color: '#a78bfa', marginTop: 4 }}>
|
||||||
|
🎉 {t.levelsGained} level up{t.levelsGained > 1 ? 's' : ''} !
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{t.loot.length > 0 && (
|
||||||
|
<div style={{ fontSize: 13, color: '#f4c94e', marginTop: 4 }}>
|
||||||
|
🎁 Loot : {t.loot.reduce((sum, l) => sum + l.quantity, 0)} matériaux
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{t.losses > 0 && (
|
||||||
|
<div style={{ fontSize: 11, color: '#6b7a99', marginTop: 4 }}>
|
||||||
|
Série interrompue par une défaite
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function HistoryEntry({ h }: { h: CombatLog }) {
|
function HistoryEntry({ h }: { h: CombatLog }) {
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', borderBottom: '1px solid #1e2535' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', borderBottom: '1px solid #1e2535' }}>
|
||||||
@@ -109,6 +142,8 @@ export function CombatPage() {
|
|||||||
const [selectedMonster, setSelectedMonster] = useState<Monster | null>(null);
|
const [selectedMonster, setSelectedMonster] = useState<Monster | null>(null);
|
||||||
const [attackType, setAttackType] = useState('melee');
|
const [attackType, setAttackType] = useState('melee');
|
||||||
const [lastResult, setLastResult] = useState<CombatResult | null>(null);
|
const [lastResult, setLastResult] = useState<CombatResult | null>(null);
|
||||||
|
const [lastMultiResult, setLastMultiResult] = useState<MultiCombatResult | null>(null);
|
||||||
|
const [cooldown, setCooldown] = useState(false);
|
||||||
|
|
||||||
const { data: char } = useQuery({ queryKey: ['character'], queryFn: characterApi.me });
|
const { data: char } = useQuery({ queryKey: ['character'], queryFn: characterApi.me });
|
||||||
const endurance = char?.enduranceCurrent ?? 0;
|
const endurance = char?.enduranceCurrent ?? 0;
|
||||||
@@ -137,14 +172,28 @@ export function CombatPage() {
|
|||||||
queryFn: combatApi.history,
|
queryFn: combatApi.history,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const startCooldown = useCallback(() => {
|
||||||
|
setCooldown(true);
|
||||||
|
setTimeout(() => setCooldown(false), 1500);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const fight = useMutation({
|
const fight = useMutation({
|
||||||
mutationFn: () => combatApi.start(selectedMonster!.id, attackType),
|
mutationFn: (count: number = 1) => combatApi.start(selectedMonster!.id, attackType, count),
|
||||||
onSuccess: (result) => {
|
onSuccess: (result) => {
|
||||||
setLastResult(result);
|
if (result.mode === 'multi') {
|
||||||
|
setLastMultiResult(result as MultiCombatResult);
|
||||||
|
setLastResult(null);
|
||||||
|
} else {
|
||||||
|
setLastResult(result as CombatResult);
|
||||||
|
setLastMultiResult(null);
|
||||||
|
}
|
||||||
qc.invalidateQueries({ queryKey: ['character'] });
|
qc.invalidateQueries({ queryKey: ['character'] });
|
||||||
qc.invalidateQueries({ queryKey: ['combatHistory'] });
|
qc.invalidateQueries({ queryKey: ['combatHistory'] });
|
||||||
qc.invalidateQueries({ queryKey: ['questsActive'] });
|
qc.invalidateQueries({ queryKey: ['questsActive'] });
|
||||||
|
qc.invalidateQueries({ queryKey: ['materialsInventory'] });
|
||||||
|
startCooldown();
|
||||||
},
|
},
|
||||||
|
onError: () => startCooldown(),
|
||||||
});
|
});
|
||||||
|
|
||||||
if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement des monstres…</div>;
|
if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement des monstres…</div>;
|
||||||
@@ -252,19 +301,26 @@ export function CombatPage() {
|
|||||||
{canFight && <span style={{ color: '#6b7a99' }}>({Math.floor(endurance / COMBAT_COST)} combats)</span>}
|
{canFight && <span style={{ color: '#6b7a99' }}>({Math.floor(endurance / COMBAT_COST)} combats)</span>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bouton combattre */}
|
{/* Boutons combattre */}
|
||||||
<button
|
<div style={{ display: 'flex', gap: 6 }}>
|
||||||
className="btn btn-red"
|
{[1, 5, 10].map(n => (
|
||||||
style={{ width: '100%', fontSize: 15, padding: '0.75rem', opacity: canFight ? 1 : 0.5 }}
|
<button
|
||||||
disabled={!selectedMonster || fight.isPending || !canFight}
|
key={n}
|
||||||
onClick={() => fight.mutate()}
|
className="btn btn-red"
|
||||||
>
|
style={{ flex: n === 1 ? 2 : 1, fontSize: n === 1 ? 14 : 12, padding: '0.75rem 0.5rem', opacity: canFight && !cooldown ? 1 : 0.5 }}
|
||||||
{fight.isPending ? (
|
disabled={!selectedMonster || fight.isPending || !canFight || cooldown}
|
||||||
<span><Swords size={14} style={{ display: 'inline', marginRight: 6 }} />Combat…</span>
|
onClick={() => fight.mutate(n)}
|
||||||
) : (
|
>
|
||||||
<span>⚔️ Combattre {selectedMonster ? `— ${selectedMonster.name}` : ''} ({COMBAT_COST}⚡)</span>
|
{fight.isPending ? (
|
||||||
)}
|
<span><Swords size={14} style={{ display: 'inline', marginRight: 4 }} />Combat…</span>
|
||||||
</button>
|
) : (
|
||||||
|
n === 1
|
||||||
|
? <span>⚔️ Combat ({COMBAT_COST}⚡)</span>
|
||||||
|
: <span>×{n} ({COMBAT_COST * n}⚡)</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
{fight.isError && (
|
{fight.isError && (
|
||||||
<p style={{ color: '#e84040', fontSize: 12, marginTop: 8 }}>{(fight.error as Error).message}</p>
|
<p style={{ color: '#e84040', fontSize: 12, marginTop: 8 }}>{(fight.error as Error).message}</p>
|
||||||
@@ -285,6 +341,7 @@ export function CombatPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Résultat du dernier combat */}
|
{/* Résultat du dernier combat */}
|
||||||
|
{lastMultiResult && <MultiCombatView result={lastMultiResult} />}
|
||||||
{lastResult && <CombatLogView result={lastResult} />}
|
{lastResult && <CombatLogView result={lastResult} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -16,6 +16,10 @@ export class CombatController {
|
|||||||
@Body() dto: StartCombatDto,
|
@Body() dto: StartCombatDto,
|
||||||
@Req() req: Request & { user: User },
|
@Req() req: Request & { user: User },
|
||||||
) {
|
) {
|
||||||
|
const count = dto.count ?? 1;
|
||||||
|
if (count > 1) {
|
||||||
|
return this.combatService.startMultiCombat(dto, req.user, count);
|
||||||
|
}
|
||||||
return this.combatService.startCombat(dto, req.user);
|
return this.combatService.startCombat(dto, req.user);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -287,6 +287,40 @@ export class CombatService {
|
|||||||
return txResult.response;
|
return txResult.response;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async startMultiCombat(dto: StartCombatDto, user: User, count: number) {
|
||||||
|
const results: any[] = [];
|
||||||
|
const totals = { wins: 0, losses: 0, xp: 0, gold: 0, goldLost: 0, loot: [] as { name: string; quantity: number }[], levelsGained: 0 };
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
try {
|
||||||
|
const result = await this.startCombat(dto, user);
|
||||||
|
results.push(result);
|
||||||
|
if (result.winner === 'player') {
|
||||||
|
totals.wins++;
|
||||||
|
totals.xp += result.rewards.xp;
|
||||||
|
totals.gold += result.rewards.gold;
|
||||||
|
if (result.rewards.levelUp) totals.levelsGained++;
|
||||||
|
if (result.rewards.loot) totals.loot.push(result.rewards.loot);
|
||||||
|
} else {
|
||||||
|
totals.losses++;
|
||||||
|
totals.goldLost += result.rewards.goldLost ?? 0;
|
||||||
|
break; // Défaite = arrêt de la série
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
break; // Endurance insuffisante ou autre erreur = arrêt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastResult = results[results.length - 1];
|
||||||
|
return {
|
||||||
|
mode: 'multi',
|
||||||
|
count: results.length,
|
||||||
|
totals,
|
||||||
|
lastResult,
|
||||||
|
character: lastResult?.character,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
async getHistory(user: User) {
|
async getHistory(user: User) {
|
||||||
const character = await this.characterRepository.findOne({
|
const character = await this.characterRepository.findOne({
|
||||||
where: { userId: user.id },
|
where: { userId: user.id },
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { IsUUID, IsIn } from 'class-validator';
|
import { IsUUID, IsIn, IsOptional, IsInt, Min, Max } from 'class-validator';
|
||||||
import { AttackType } from '../../monster/monster.entity';
|
import { AttackType } from '../../monster/monster.entity';
|
||||||
|
|
||||||
export class StartCombatDto {
|
export class StartCombatDto {
|
||||||
@@ -7,4 +7,10 @@ export class StartCombatDto {
|
|||||||
|
|
||||||
@IsIn(['melee', 'ranged', 'magic'])
|
@IsIn(['melee', 'ranged', 'magic'])
|
||||||
attackType: AttackType;
|
attackType: AttackType;
|
||||||
|
|
||||||
|
@IsOptional()
|
||||||
|
@IsInt()
|
||||||
|
@Min(1)
|
||||||
|
@Max(10)
|
||||||
|
count?: number;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user