147 lines
7.1 KiB
TypeScript
147 lines
7.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { getDragCoefficient } from '@/lib/drag';
|
|
import { useI18n } from '@/store/i18nStore';
|
|
import { DragCoefficientChart } from '@/components/DragCoefficientChart';
|
|
import { ResizableBox3D } from '@/components/three/ResizableBox3D';
|
|
import SceneCanvas from '@/components/SceneCanvas';
|
|
import { Environment } from '@react-three/drei';
|
|
import { ViewerOrbitControls as OrbitControls } from '@/components/three/ViewerOrbitControls';
|
|
import { EducationalManual } from '@/components/EducationalManual';
|
|
import { Wind, Box } from 'lucide-react';
|
|
import { Slider } from '@/components/ui/slider';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
export default function CalcCaModule() {
|
|
const i18n = useI18n(); // Apenas chamando caso necessário no ciclo de vida, sem extrair 't'
|
|
const [l1, setL1] = useState<number>(20);
|
|
const [l2, setL2] = useState<number>(40);
|
|
const [h, setH] = useState<number>(10);
|
|
const [viewMode, setViewMode] = useState<'solid' | 'airflow'>('solid');
|
|
|
|
// Clamp inputs to avoid Infinity or negative values breaking the UI
|
|
const safeL1 = Math.max(0.1, l1 || 1);
|
|
const safeL2 = Math.max(0.1, l2 || 1);
|
|
const safeH = Math.max(0.1, h || 1);
|
|
|
|
const caLow = getDragCoefficient(safeL1, safeL2, safeH, 'low');
|
|
const caHigh = getDragCoefficient(safeL1, safeL2, safeH, 'high');
|
|
|
|
return (
|
|
<div className="flex flex-col lg:flex-row h-full w-full gap-4 p-4 lg:p-6 bg-muted/30">
|
|
{/* Coluna Esquerda: Controles */}
|
|
<div className="w-full lg:w-80 shrink-0 flex flex-col gap-4 overflow-y-auto pb-8 lg:pb-0">
|
|
<Card className="shadow-sm border-border">
|
|
<CardHeader className="pb-3 flex flex-row items-start justify-between space-y-0 pr-6">
|
|
<div>
|
|
<CardTitle className="text-lg">Calc_Ca</CardTitle>
|
|
<CardDescription>Cálculo rápido de Coeficiente de Arrasto (Ca)</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<label className="text-sm font-medium">L₁ (Largura)</label>
|
|
<span className="font-mono text-sm">{l1} m</span>
|
|
</div>
|
|
<Slider min={1} max={100} step={1} value={[l1]} onValueChange={(v) => setL1(v[0])} />
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<label className="text-sm font-medium">L₂ (Profundidade)</label>
|
|
<span className="font-mono text-sm">{l2} m</span>
|
|
</div>
|
|
<Slider min={1} max={100} step={1} value={[l2]} onValueChange={(v) => setL2(v[0])} />
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<label className="text-sm font-medium">H (Altura)</label>
|
|
<span className="font-mono text-sm">{h} m</span>
|
|
</div>
|
|
<Slider min={1} max={100} step={1} value={[h]} onValueChange={(v) => setH(v[0])} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Coluna Central: 3D */}
|
|
<div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
|
|
<div className="absolute top-4 right-16 z-10">
|
|
<div className="flex bg-background/80 backdrop-blur-sm border border-border/80 rounded-md shadow-sm p-1">
|
|
<button
|
|
onClick={() => setViewMode('solid')}
|
|
className={`px-3 py-1 text-xs font-medium rounded-sm transition-colors ${viewMode === 'solid' ? 'bg-primary/20 text-primary' : 'text-muted-foreground hover:bg-muted/50'}`}
|
|
>
|
|
<Box className="w-3.5 h-3.5 inline-block mr-1.5" />
|
|
Sólido
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('airflow')}
|
|
className={`px-3 py-1 text-xs font-medium rounded-sm transition-colors ${viewMode === 'airflow' ? 'bg-primary/20 text-primary' : 'text-muted-foreground hover:bg-muted/50'}`}
|
|
>
|
|
<Wind className="w-3.5 h-3.5 inline-block mr-1.5" />
|
|
Fluxo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="absolute top-4 right-4 z-10">
|
|
<EducationalManual type="calc_ca" params={{ l1: safeL1, l2: safeL2, h: safeH }} />
|
|
</div>
|
|
|
|
<SceneCanvas
|
|
moduleId="calc_ca"
|
|
camera={{ position: [50, 40, 50], fov: 45 }}
|
|
fallback={<div />}
|
|
frameloop={viewMode === 'airflow' ? 'always' : 'demand'}
|
|
>
|
|
<ambientLight intensity={0.5} />
|
|
<directionalLight position={[10, 20, 10]} intensity={1} castShadow />
|
|
<Environment preset="city" />
|
|
<ResizableBox3D l1={safeL1} l2={safeL2} h={safeH} viewMode={viewMode} />
|
|
<OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI / 2 - 0.1} />
|
|
</SceneCanvas>
|
|
|
|
<div className="absolute bottom-4 left-4 right-20 text-center text-xs text-muted-foreground pointer-events-none">
|
|
Arraste para rotacionar, role para aproximar
|
|
</div>
|
|
</div>
|
|
|
|
{/* Coluna Direita: Resultados */}
|
|
<div className="w-full lg:w-96 shrink-0 flex flex-col gap-4 overflow-y-auto pb-8 lg:pb-0">
|
|
<Card className="shadow-sm border-border">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg">Resultados (Ca)</CardTitle>
|
|
<CardDescription>Valores baseados nas tabelas 4 e 5</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex justify-between items-center p-3 bg-background rounded-lg border">
|
|
<span className="font-medium text-muted-foreground">Baixa Turbulência</span>
|
|
<span className="text-2xl font-bold text-primary">{caLow.toFixed(2)}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center p-3 bg-background rounded-lg border">
|
|
<span className="font-medium text-muted-foreground">Alta Turbulência</span>
|
|
<span className="text-2xl font-bold text-primary">{caHigh.toFixed(2)}</span>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground flex gap-4 mt-2 px-1">
|
|
<span>H/L₁ = {(safeH / safeL1).toFixed(2)}</span>
|
|
<span>L₁/L₂ = {(safeL1 / safeL2).toFixed(2)}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Ábaco */}
|
|
<Card className="shadow-sm border-border flex-1 min-h-[300px]">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-lg">Ábaco NBR 6123</CardTitle>
|
|
<CardDescription>Curvas isotermas aproximadas</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex items-center justify-center h-[calc(100%-80px)] min-h-[250px]">
|
|
<DragCoefficientChart l1={safeL1} l2={safeL2} h={safeH} caLow={caLow} caHigh={caHigh} />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|