407 lines
18 KiB
JavaScript
407 lines
18 KiB
JavaScript
import { useState, useCallback } from 'react'
|
||
import axios from 'axios'
|
||
import { Play, Square, RefreshCw, Monitor, Swords, Plus, X, ThumbsUp, ThumbsDown, Minus } from 'lucide-react'
|
||
|
||
const ACTION_MAP = {
|
||
buy: { label: 'Acheter', color: 'text-green-400' },
|
||
sell: { label: 'Vendre', color: 'text-red-400' },
|
||
freeze: { label: 'Geler', color: 'text-blue-400' },
|
||
upgrade: { label: 'Monter tier', color: 'text-yellow-400' },
|
||
reposition: { label: 'Repositionner', color: 'text-purple-400' },
|
||
hero_power: { label: 'Pouvoir héros', color: 'text-orange-400' },
|
||
wait: { label: 'Attendre', color: 'text-gray-400' },
|
||
}
|
||
|
||
function ConfBar({ value }) {
|
||
const pct = Math.round((value || 0) * 100)
|
||
const col = pct >= 70 ? 'bg-green-500' : pct >= 40 ? 'bg-yellow-500' : 'bg-red-500'
|
||
return (
|
||
<div className="mt-2">
|
||
<div className="flex justify-between text-xs text-gray-400 mb-1">
|
||
<span>Confiance</span><span>{pct}%</span>
|
||
</div>
|
||
<div className="h-1.5 bg-gray-700 rounded-full overflow-hidden">
|
||
<div className={`h-full rounded-full ${col} transition-all duration-500`} style={{ width: `${pct}%` }} />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function MinionChip({ minion, onRemove }) {
|
||
return (
|
||
<div className="relative bg-gray-800 border border-gray-600 rounded-lg p-2 text-xs group">
|
||
{onRemove && (
|
||
<button onClick={onRemove}
|
||
className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<X size={10} />
|
||
</button>
|
||
)}
|
||
<p className="font-semibold text-yellow-300 truncate max-w-[90px]">{minion.name || '?'}</p>
|
||
<p className="text-gray-300">{minion.attack || 0}/{minion.health || 0}</p>
|
||
{minion.race && (
|
||
<p className="text-blue-400 text-[10px]">
|
||
{Array.isArray(minion.race) ? minion.race.join(', ') : minion.race}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function AddMinionButton({ onClick }) {
|
||
return (
|
||
<button onClick={onClick}
|
||
className="border border-dashed border-gray-600 rounded-lg p-2 text-xs text-gray-500 hover:border-yellow-600 hover:text-yellow-500 transition-colors flex flex-col items-center justify-center min-h-[64px]">
|
||
<Plus size={14} className="mb-1" />
|
||
Ajouter
|
||
</button>
|
||
)
|
||
}
|
||
|
||
function FeedbackBar({ decisionId, onDone }) {
|
||
const [sent, setSent] = useState(false)
|
||
const [better, setBetter] = useState('')
|
||
const [comment, setComment] = useState('')
|
||
|
||
const send = async (rating) => {
|
||
try {
|
||
await axios.post('/api/learning/feedback', {
|
||
decision_id: decisionId, rating,
|
||
better_action: better ? { action: better } : null,
|
||
comment: comment || null,
|
||
})
|
||
setSent(true)
|
||
onDone && onDone()
|
||
} catch { alert('Erreur envoi feedback') }
|
||
}
|
||
|
||
if (sent) return (
|
||
<div className="bg-green-900/20 border border-green-700/40 rounded-xl p-3 text-green-400 text-sm text-center">
|
||
✅ Feedback envoyé — merci!
|
||
</div>
|
||
)
|
||
|
||
return (
|
||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
|
||
<p className="text-xs text-gray-400 mb-3">Ce conseil était-il bon?</p>
|
||
<div className="flex gap-2 mb-3">
|
||
<button onClick={() => send('good')} className="flex-1 flex items-center justify-center gap-1.5 bg-green-700 hover:bg-green-600 py-2 rounded-lg text-sm font-medium transition-colors">
|
||
<ThumbsUp size={13} /> Bon
|
||
</button>
|
||
<button onClick={() => send('neutral')} className="flex-1 flex items-center justify-center gap-1.5 bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm font-medium transition-colors">
|
||
<Minus size={13} /> Neutre
|
||
</button>
|
||
<button onClick={() => send('bad')} className="flex-1 flex items-center justify-center gap-1.5 bg-red-700 hover:bg-red-600 py-2 rounded-lg text-sm font-medium transition-colors">
|
||
<ThumbsDown size={13} /> Mauvais
|
||
</button>
|
||
</div>
|
||
<input value={better} onChange={e => setBetter(e.target.value)}
|
||
placeholder="Meilleure action? (buy/sell/freeze/upgrade/wait...)"
|
||
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-1.5 text-xs text-white mb-2 focus:outline-none focus:border-yellow-600" />
|
||
<input value={comment} onChange={e => setComment(e.target.value)}
|
||
placeholder="Commentaire (optionnel)"
|
||
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-yellow-600" />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function GamePage() {
|
||
const [session, setSession] = useState(null)
|
||
const [advice, setAdvice] = useState(null)
|
||
const [loading, setLoading] = useState(false)
|
||
const [screenshot, setScreenshot] = useState(null)
|
||
const [state, setState] = useState({
|
||
turn: 1, tavern_tier: 1, gold: 3, hero_hp: 40,
|
||
board_minions: [], tavern_minions: [],
|
||
freeze: false, can_upgrade: true, upgrade_cost: 5,
|
||
current_placement: 5, player_count: 8, phase: 'recruit',
|
||
})
|
||
|
||
const startSession = async () => {
|
||
try {
|
||
const r = await axios.post('/api/game/start')
|
||
setSession(r.data)
|
||
setAdvice(null)
|
||
} catch { alert('Erreur démarrage session') }
|
||
}
|
||
|
||
const endSession = async () => {
|
||
const place = parseInt(prompt('Place finale (1-8)?', '4') || '4')
|
||
if (!place) return
|
||
try {
|
||
await axios.post(`/api/game/${session.session_id}/end?final_place=${place}`)
|
||
setSession(null); setAdvice(null)
|
||
} catch { alert('Erreur fin de session') }
|
||
}
|
||
|
||
const getAdvice = useCallback(async () => {
|
||
setLoading(true)
|
||
try {
|
||
const r = await axios.post('/api/advice/', { ...state, session_id: session?.session_id })
|
||
setAdvice(r.data)
|
||
} catch { alert('Service IA non disponible — vérifiez que le backend tourne sur :8000') }
|
||
finally { setLoading(false) }
|
||
}, [state, session])
|
||
|
||
const captureScreen = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const r = await axios.get('/api/advice/from-screen')
|
||
setAdvice(r.data.advice)
|
||
if (r.data.screenshot) setScreenshot(r.data.screenshot)
|
||
if (r.data.extracted_state?.gold) setState(s => ({ ...s, ...r.data.extracted_state }))
|
||
} catch { alert('Capture non disponible — activez la vision dans les paramètres') }
|
||
finally { setLoading(false) }
|
||
}
|
||
|
||
const addMinion = (field) => {
|
||
const name = prompt('Nom du serviteur?')
|
||
if (!name) return
|
||
const attack = parseInt(prompt('Attaque?', '2') || '2')
|
||
const health = parseInt(prompt('Points de vie?', '2') || '2')
|
||
const race = prompt('Race? (mech/beast/murloc/demon/dragon/none)', 'none') || 'none'
|
||
setState(s => ({
|
||
...s,
|
||
[field]: [...s[field], { name, attack, health, race: [race] }]
|
||
}))
|
||
}
|
||
|
||
const removeMinion = (field, idx) => {
|
||
setState(s => ({ ...s, [field]: s[field].filter((_, i) => i !== idx) }))
|
||
}
|
||
|
||
const setField = (key, val) => setState(s => ({ ...s, [key]: val }))
|
||
|
||
const mainAction = advice?.main_decision
|
||
const actionInfo = ACTION_MAP[mainAction?.action] || { label: mainAction?.action, color: 'text-white' }
|
||
|
||
return (
|
||
<div className="p-4 lg:p-6 max-w-7xl mx-auto">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between mb-6">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-yellow-400">Partie en cours</h2>
|
||
<p className="text-gray-500 text-sm">
|
||
{session ? `Session #${session.session_id}` : 'Aucune session active'}
|
||
</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
{!session ? (
|
||
<button onClick={startSession}
|
||
className="flex items-center gap-2 bg-green-600 hover:bg-green-500 px-4 py-2 rounded-xl text-sm font-semibold transition-colors">
|
||
<Play size={15} /> Démarrer
|
||
</button>
|
||
) : (
|
||
<button onClick={endSession}
|
||
className="flex items-center gap-2 bg-red-600 hover:bg-red-500 px-4 py-2 rounded-xl text-sm font-semibold transition-colors">
|
||
<Square size={15} /> Terminer
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-5">
|
||
{/* Colonne gauche: état du jeu */}
|
||
<div className="xl:col-span-2 space-y-4">
|
||
{/* Stats numériques */}
|
||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
|
||
<h3 className="text-sm font-semibold text-gray-300 mb-4">État du tour</h3>
|
||
<div className="grid grid-cols-3 sm:grid-cols-6 gap-3">
|
||
{[
|
||
['Tour', 'turn', 1, 50],
|
||
['Tier', 'tavern_tier', 1, 6],
|
||
['Or (g)', 'gold', 0, 20],
|
||
['HP Héros', 'hero_hp', 1, 40],
|
||
['Position', 'current_placement', 1, 8],
|
||
['Coût up.', 'upgrade_cost', 0, 10],
|
||
].map(([label, key, min, max]) => (
|
||
<div key={key}>
|
||
<label className="text-xs text-gray-500 block mb-1">{label}</label>
|
||
<input
|
||
type="number" min={min} max={max}
|
||
value={state[key]}
|
||
onChange={e => setField(key, parseInt(e.target.value) || 0)}
|
||
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-2 py-1.5 text-sm text-white text-center focus:outline-none focus:border-yellow-600"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="flex gap-6 mt-3 pt-3 border-t border-gray-800">
|
||
{[['freeze', '❄️ Gel actif'], ['can_upgrade', '⬆️ Peut monter']].map(([key, label]) => (
|
||
<label key={key} className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||
<input type="checkbox" checked={state[key]}
|
||
onChange={e => setField(key, e.target.checked)}
|
||
className="w-4 h-4 accent-yellow-500" />
|
||
{label}
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Board */}
|
||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<h3 className="text-sm font-semibold text-gray-300">
|
||
Board <span className="text-gray-500">({state.board_minions.length}/7)</span>
|
||
</h3>
|
||
</div>
|
||
<div className="grid grid-cols-4 sm:grid-cols-7 gap-2">
|
||
{state.board_minions.map((m, i) => (
|
||
<MinionChip key={i} minion={m} onRemove={() => removeMinion('board_minions', i)} />
|
||
))}
|
||
{state.board_minions.length < 7 && (
|
||
<AddMinionButton onClick={() => addMinion('board_minions')} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Taverne */}
|
||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<h3 className="text-sm font-semibold text-gray-300">
|
||
Taverne <span className="text-gray-500">({state.tavern_minions.length})</span>
|
||
</h3>
|
||
</div>
|
||
<div className="grid grid-cols-4 sm:grid-cols-7 gap-2">
|
||
{state.tavern_minions.map((m, i) => (
|
||
<MinionChip key={i} minion={m} onRemove={() => removeMinion('tavern_minions', i)} />
|
||
))}
|
||
{state.tavern_minions.length < 7 && (
|
||
<AddMinionButton onClick={() => addMinion('tavern_minions')} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="flex gap-3">
|
||
<button onClick={getAdvice} disabled={loading}
|
||
className="flex-1 flex items-center justify-center gap-2 bg-yellow-600 hover:bg-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3 rounded-xl font-semibold transition-colors">
|
||
{loading
|
||
? <><RefreshCw size={16} className="animate-spin" /> Analyse...</>
|
||
: <><Swords size={16} /> Obtenir conseil</>
|
||
}
|
||
</button>
|
||
<button onClick={captureScreen} disabled={loading}
|
||
title="Capturer l'écran automatiquement"
|
||
className="flex items-center gap-2 bg-blue-700 hover:bg-blue-600 disabled:opacity-50 px-4 py-3 rounded-xl text-sm font-medium transition-colors">
|
||
<Monitor size={16} /> Capturer
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Colonne droite: conseils */}
|
||
<div className="space-y-4">
|
||
{advice ? (
|
||
<>
|
||
{/* Conseil principal */}
|
||
<div className="bg-gray-900 border border-yellow-800/40 rounded-xl p-5 card-glow">
|
||
<div className="flex justify-between items-center mb-1">
|
||
<span className="text-xs text-gray-400 uppercase tracking-wider">Conseil principal</span>
|
||
<span className="text-xs text-gray-600 bg-gray-800 px-2 py-0.5 rounded">{advice.model_used}</span>
|
||
</div>
|
||
<p className={`text-3xl font-bold mt-2 ${actionInfo.color}`}>
|
||
{actionInfo.label}
|
||
</p>
|
||
{mainAction?.target && (
|
||
<p className="text-yellow-300 text-sm mt-1">
|
||
→ {mainAction.target?.name || JSON.stringify(mainAction.target)}
|
||
</p>
|
||
)}
|
||
<ConfBar value={mainAction?.confidence} />
|
||
<p className="text-gray-200 text-sm mt-3 leading-relaxed">{mainAction?.reasoning}</p>
|
||
{mainAction?.warnings?.length > 0 && (
|
||
<div className="mt-2 space-y-1">
|
||
{mainAction.warnings.map((w, i) => (
|
||
<p key={i} className="text-yellow-400 text-xs">⚠️ {w}</p>
|
||
))}
|
||
</div>
|
||
)}
|
||
{mainAction?.synergies?.length > 0 && (
|
||
<div className="mt-2 flex flex-wrap gap-1">
|
||
{mainAction.synergies.map(s => (
|
||
<span key={s} className="text-xs bg-blue-900/40 text-blue-400 border border-blue-800/30 px-2 py-0.5 rounded">
|
||
{s}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Analyse du board */}
|
||
{advice.board_analysis && (
|
||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
|
||
<p className="text-xs text-gray-400 uppercase tracking-wider mb-2">Analyse</p>
|
||
<p className="text-gray-200 text-sm leading-relaxed">{advice.board_analysis}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Stratégie LLM */}
|
||
{advice.strategy_long_term && (
|
||
<div className="bg-gray-900 border border-blue-800/30 rounded-xl p-4">
|
||
<p className="text-xs text-blue-400 uppercase tracking-wider mb-2">Stratégie</p>
|
||
<p className="text-gray-200 text-sm">{advice.strategy_long_term}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Menaces */}
|
||
{advice.threat_assessment && (
|
||
<div className="bg-gray-900 border border-red-900/30 rounded-xl p-4">
|
||
<p className="text-xs text-red-400 uppercase tracking-wider mb-2">Menaces</p>
|
||
<p className="text-gray-200 text-sm">{advice.threat_assessment}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Alternatives */}
|
||
{advice.secondary_decisions?.length > 0 && (
|
||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
|
||
<p className="text-xs text-gray-400 uppercase tracking-wider mb-2">Alternatives</p>
|
||
<div className="space-y-1">
|
||
{advice.secondary_decisions.slice(0, 4).map((d, i) => {
|
||
const info = ACTION_MAP[d.action] || { label: d.action, color: 'text-gray-400' }
|
||
return (
|
||
<div key={i} className="flex items-center justify-between py-1.5 border-b border-gray-800 last:border-0">
|
||
<span className={`text-sm font-medium ${info.color}`}>{info.label}</span>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-gray-500 text-xs truncate max-w-[120px]">{d.reasoning?.slice(0, 40)}...</span>
|
||
<span className="text-gray-600 text-xs">{Math.round(d.confidence * 100)}%</span>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Feedback */}
|
||
{advice.decision_id && (
|
||
<FeedbackBar decisionId={advice.decision_id} />
|
||
)}
|
||
|
||
{/* Meta */}
|
||
<p className="text-gray-700 text-xs text-center">{advice.processing_ms}ms de traitement</p>
|
||
</>
|
||
) : (
|
||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-8 text-center">
|
||
<Swords size={40} className="mx-auto mb-4 text-gray-700" />
|
||
<p className="text-gray-400 font-medium mb-2">Prêt à analyser</p>
|
||
<p className="text-gray-600 text-sm">Renseignez l'état du jeu puis cliquez sur "Obtenir conseil"</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Screenshot preview */}
|
||
{screenshot && (
|
||
<div className="mt-4 bg-gray-900 border border-gray-800 rounded-xl p-4">
|
||
<div className="flex justify-between items-center mb-2">
|
||
<p className="text-sm text-gray-400">Capture d'écran</p>
|
||
<button onClick={() => setScreenshot(null)} className="text-gray-600 hover:text-gray-400">
|
||
<X size={14} />
|
||
</button>
|
||
</div>
|
||
<img src={`data:image/png;base64,${screenshot}`} className="max-h-48 rounded-lg" alt="capture" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|