Spaces:
Running
Running
File size: 3,963 Bytes
f7cecf3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import React from "react";
import { ArrowRightLeft } from "lucide-react";
import { CHIP_CONFIG, getPlayerPrice } from "../utils/fplLogic";
export const ActiveMovesPanel = ({
activeGW,
manualOverrides,
globalPlayers,
chipsByGw,
transfersByGw
}) => {
const activeLock = manualOverrides[activeGW] || {};
const manualTransfers = activeLock.manualTransfers || {};
const chip = chipsByGw[activeGW];
const tData = transfersByGw[activeGW] || { count: 0, netDelta: 0 };
const moveEntries = Object.entries(manualTransfers);
const hasMoves = moveEntries.length > 0;
return (
<div className="w-full bg-slate-950 border border-slate-800 rounded-2xl flex flex-col shadow-2xl overflow-hidden shrink-0 transition-all duration-300">
{/* Header */}
<div className="border-b border-slate-800 px-4 py-3 bg-slate-900/80 flex justify-between items-center">
<h2 className="text-xs font-black uppercase tracking-widest text-slate-300 flex items-center gap-2">
<ArrowRightLeft size={14} className="text-cyan-400" />
GW {activeGW} Moves Made So Far
</h2>
{chip && CHIP_CONFIG[chip] && (
<span className={`text-[9px] font-black px-1.5 py-0.5 rounded ${CHIP_CONFIG[chip].badge}`}>
{CHIP_CONFIG[chip].short}
</span>
)}
</div>
{/* Body */}
<div className="p-4 flex flex-col gap-2">
{!hasMoves ? (
<div className="text-center text-slate-500 text-[10px] italic py-2">
No active transfers made for GW {activeGW}.
</div>
) : (
moveEntries.map(([inIdStr, outPlayer], idx) => {
const isBlankIn = inIdStr.startsWith("blank_");
const inPlayer = !isBlankIn ? globalPlayers.find(p => String(p.ID) === inIdStr) : null;
return (
<div key={idx} className="flex items-center justify-between bg-slate-900/50 border border-slate-800/80 rounded-lg p-2.5 font-mono text-xs shadow-inner">
{/* Outgoing Player */}
<div className="flex-1 min-w-0 flex flex-col">
<span className="text-red-400 truncate font-bold">{outPlayer?.Name || "Unknown"}</span>
<span className="text-slate-500 text-[9px]">£{(outPlayer ? getPlayerPrice(outPlayer) : 0).toFixed(1)}m</span>
</div>
<span className="text-slate-600 font-black px-3">»</span>
{/* Incoming Player */}
<div className="flex-1 min-w-0 flex flex-col items-end text-right">
{isBlankIn ? (
<>
<span className="text-yellow-500/70 italic truncate text-[11px] mt-0.5">Select Player...</span>
</>
) : (
<>
<span className="text-emerald-400 truncate font-bold">{inPlayer?.Name || inIdStr}</span>
<span className="text-slate-500 text-[9px]">£{(inPlayer ? getPlayerPrice(inPlayer) : 0).toFixed(1)}m</span>
</>
)}
</div>
</div>
);
})
)}
{/* Summary Footer */}
{hasMoves && (
<div className="mt-2 pt-3 border-t border-slate-800/80 flex justify-between items-center text-[10px] font-bold">
<span className="text-slate-400 uppercase tracking-wider">
Total Moves: <span className="text-cyan-400 font-mono text-xs ml-1">{tData.count}</span>
</span>
<span className="text-slate-400 uppercase tracking-wider">
Bank Delta:
<span className={`font-mono text-xs ml-1 ${tData.netDelta >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{tData.netDelta > 0 ? '+' : ''}{tData.netDelta.toFixed(1)}m
</span>
</span>
</div>
)}
</div>
</div>
);
}; |