malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: Polished 3D overlays for better visibility
Some checks are pending
Deploy to Production / deploy (push) Waiting to run
Details
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source 
- SummaryOverlay: Increased distanceFactor for better scaling at distance
- Added animations and glassmorphic refinements
- Enhanced room badges with pulsing alert indicators
- Section summary is now more prominent on hover
This commit is contained in:
fullsizemalt 2025-12-19 13:34:09 -08:00
parent a23a2c5582
commit 0c05c41e81
1 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/components/facility3d/SummaryOverlay.tsx
View file

@ -25,8 +25,8 @@ export function SectionSummary({
if (!isVisible) return null;
return (
<Html position={position} center distanceFactor={10}>
<div className="bg-slate-900/90 backdrop-blur-md border border-slate-700/50 rounded-lg p-3 shadow-2xl w-48 pointer-events-none select-none">
<Html position={position} center distanceFactor={15}>
<div className="bg-slate-900/95 backdrop-blur-xl border border-cyan-500/30 rounded-lg p-3 shadow-[0_0_20px_rgba(0,0,0,0.5)] w-48 pointer-events-none select-none animate-in fade-in zoom-in duration-200">
<div className="flex justify-between items-center mb-2 border-b border-slate-700/50 pb-1">
<span className="text-xs font-bold text-cyan-400">{name}</span>
<span className="text-[10px] text-slate-400">{plantCount} Plants</span>
@ -90,19 +90,22 @@ export function RoomSummaryOverlay({
position: [number, number, number];
}) {
return (
<Html position={position} center distanceFactor={15}>
<div className="flex flex-col items-center group">
<div className="bg-slate-900/80 backdrop-blur-sm border border-slate-700/50 rounded-full py-1 px-3 shadow-lg flex items-center gap-2 transition-all group-hover:bg-slate-800">
<Leaf className="w-3 h-3 text-green-400" />
<span className="text-[10px] font-bold text-white whitespace-nowrap">{roomName}</span>
<div className="w-px h-3 bg-slate-700 mx-0.5" />
<span className="text-[10px] text-slate-400">{plantCount}</span>
<Html position={position} center distanceFactor={25}>
<div className="flex flex-col items-center group cursor-pointer">
<div className="bg-slate-900/90 backdrop-blur-md border border-slate-700/50 rounded-full py-1.5 px-4 shadow-xl flex items-center gap-2 transition-all group-hover:bg-slate-800 group-hover:border-cyan-500/50 group-hover:scale-110">
<Leaf className="w-3.5 h-3.5 text-green-400" />
<span className="text-xs font-bold text-white whitespace-nowrap">{roomName}</span>
<div className="w-px h-3.5 bg-slate-700 mx-0.5" />
<span className="text-xs text-cyan-400 font-mono">{plantCount}</span>
{warnings > 0 && (
<div className="w-2 h-2 rounded-full bg-red-500 animate-ping ml-1" />
<div className="relative flex h-2 w-2 ml-1">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
</div>
)}
</div>
{/* Arrow indicator */}
<div className="w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[6px] border-t-slate-700/50" />
<div className="w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[8px] border-t-slate-800/90 -mt-px" />
</div>
</Html>
);