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; if (!isVisible) return null;
return ( return (
<Html position={position} center distanceFactor={10}> <Html position={position} center distanceFactor={15}>
<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"> <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"> <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-xs font-bold text-cyan-400">{name}</span>
<span className="text-[10px] text-slate-400">{plantCount} Plants</span> <span className="text-[10px] text-slate-400">{plantCount} Plants</span>
@ -90,19 +90,22 @@ export function RoomSummaryOverlay({
position: [number, number, number]; position: [number, number, number];
}) { }) {
return ( return (
<Html position={position} center distanceFactor={15}> <Html position={position} center distanceFactor={25}>
<div className="flex flex-col items-center group"> <div className="flex flex-col items-center group cursor-pointer">
<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"> <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 h-3 text-green-400" /> <Leaf className="w-3.5 h-3.5 text-green-400" />
<span className="text-[10px] font-bold text-white whitespace-nowrap">{roomName}</span> <span className="text-xs font-bold text-white whitespace-nowrap">{roomName}</span>
<div className="w-px h-3 bg-slate-700 mx-0.5" /> <div className="w-px h-3.5 bg-slate-700 mx-0.5" />
<span className="text-[10px] text-slate-400">{plantCount}</span> <span className="text-xs text-cyan-400 font-mono">{plantCount}</span>
{warnings > 0 && ( {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> </div>
{/* Arrow indicator */} {/* 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> </div>
</Html> </Html>
); );