チップを追加

Author: gitdmnt

src/components/Trajectory/ResultCard.tsx

@@ -5,18 +5,26 @@ import { calculate } from "./calculate";
 
 export const ResultCard = ({ condition }: { condition: Condition }) => {
   const [results, setResults] = useState<
-    { x_list: number[]; y_list: number[]; condition: Condition }[]
+    {
+      x_list: number[];
+      y_list: number[];
+      condition: Condition;
+      finalVelocity: number;
+      flightTime: number;
+    }[]
   >([]);
   useEffect(() => {
     if (!condition) return;
     setResults((prev) => {
       const exists = prev.some((r) => isSameCondition(r.condition, condition));
       if (exists) return prev;
       const res = calculate(condition);
+      const finalVelocity = res.finalVelocity;
+      const flightTime = res.flightTime;
       let len = res.x_list.length;
       res.x_list = res.x_list.filter((_, i) => i % Math.ceil(len / 500) === 0);
       res.y_list = res.y_list.filter((_, i) => i % Math.ceil(len / 500) === 0);
-      return [...prev, { ...res, condition }];
+      return [...prev, { ...res, condition, finalVelocity, flightTime }];
     });
   }, [condition]);
   return (
@@ -30,12 +38,12 @@ export const ResultCard = ({ condition }: { condition: Condition }) => {
           return (
             <li
               key={idx}
-              className="rounded-full px-3 py-1 text-white flex items-center justify-center gap-2 hover:shadow-lg hover:opacity-80 transition-all duration-200 ease-in-out"
+              className="relative group rounded-full px-3 py-1 text-white flex items-center justify-center gap-2 hover:shadow-lg hover:opacity-80 transition-all duration-200 ease-in-out"
               style={{ backgroundColor: color }}
             >
               <div>{idx}</div>
               <div
-                className="bg-white w-3 h-3 rounded-full flex items-center justify-center font-bold"
+                className="bg-white w-3 h-3 rounded-full flex items-center justify-center font-bold cursor-pointer"
                 style={{ color: color }}
                 onClick={() => {
                   const newResults = results.filter((_, i) => i !== idx);
@@ -44,6 +52,21 @@ export const ResultCard = ({ condition }: { condition: Condition }) => {
               >
                 ×
               </div>
+
+              {/* Tooltip: shows condition on parent hover */}
+              <div className="absolute top-full left-[200%] mb-2 transform -translate-x-1/2 w-56 p-2 rounded shadow bg-white text-neutral-800 text-xs opacity-0 scale-95 pointer-events-none group-hover:opacity-100 group-hover:scale-100 transition-all duration-200 z-10">
+                <div className="font-semibold">Condition</div>
+                <div>初速: {res.condition.initV} m/s</div>
+                <div>角度: {res.condition.angle}°</div>
+                <div>発射高さ: {res.condition.yoffset} m</div>
+                <div>飛翔体半径: {res.condition.radius} m</div>
+                <div>質量: {res.condition.mass.toFixed(4)} kg</div>
+                <div>Δt: {res.condition.deltaT}</div>
+                <div>飛距離: {Math.max(...res.x_list).toFixed(4)} m</div>
+                <div>最高高度: {Math.max(...res.y_list).toFixed(4)} m</div>
+                <div>到達時間: {res.flightTime.toFixed(4)} s</div>
+                <div>着弾速度: {res.finalVelocity.toFixed(2)} m/s</div>
+              </div>
             </li>
           );
         })}

src/components/Trajectory/calculate.ts

@@ -17,7 +17,7 @@ export const calculate = (condition: Condition) => {
   const x_list = [x];
   const y_list = [y];
 
-  while (y >= 0) {
+  while (y >= 0 && x_list.length < 100000) {
     // 空気抵抗の計算
     const v = Math.sqrt(vx * vx + vy * vy);
 
@@ -27,11 +27,17 @@ export const calculate = (condition: Condition) => {
       condition.radius * 2,
       condition.viscosity
     );
-    const cd = dragCoefficient(re);
-    const area = Math.PI * condition.radius * condition.radius;
 
-    const dragForceX = 0.5 * condition.fluidDensity * v * vx * cd * area;
-    const dragForceY = 0.5 * condition.fluidDensity * v * vy * cd * area;
+    let dragForceX = 0;
+    let dragForceY = 0;
+
+    if (re > 0) {
+      const cd = dragCoefficient(re);
+      const area = Math.PI * condition.radius * condition.radius;
+
+      dragForceX = 0.5 * condition.fluidDensity * v * vx * cd * area;
+      dragForceY = 0.5 * condition.fluidDensity * v * vy * cd * area;
+    }
 
     // 加速度の計算
     const ax = -dragForceX / condition.mass;
@@ -50,5 +56,10 @@ export const calculate = (condition: Condition) => {
     y_list.push(y);
   }
 
-  return { x_list, y_list };
+  return {
+    x_list,
+    y_list,
+    finalVelocity: Math.sqrt(vx * vx + vy * vy),
+    flightTime: (x_list.length - 1) * deltaT,
+  };
 };

src/components/Trajectory/index.tsx

@@ -6,9 +6,17 @@ import { ResultCard } from "./ResultCard";
 export const TrajectoryCalculator = () => {
   const [condition, setCondition] = useState<Condition | undefined>(undefined);
   return (
-    <div className="flex flex-col gap-4">
-      <InputCard setCondition={setCondition} />
-      <ResultCard condition={condition} />
+    <div className="flex flex-col gap-4 w-full md:flex-row-reverse">
+      <div className="flex flex-col gap-4 w-full md:w-1/3">
+        <div className="text-center p-8 bg-white rounded-xl shadow-lg">
+          <h1 className="text-4xl font-bold">簡易弾道計算機</h1>
+          <p className="text-sm text-neutral-500">ティータイムのおともに。</p>
+        </div>
+        <InputCard setCondition={setCondition} />
+      </div>
+      <div className="w-full md:w-2/3">
+        <ResultCard condition={condition} />
+      </div>
     </div>
   );
 };

src/pages/trajectory.astro

@@ -13,11 +13,7 @@ import "../styles/global.css";
   image=""
 >
   <div class="min-h-screen w-dvw bg-neutral-100 text-neutral-800">
-    <div class="min-h-screen w-1/2 mx-auto py-16">
-      <div class="text-center p-8 mb-4 bg-white rounded-xl shadow-lg">
-        <h1 class="text-4xl font-bold">簡易弾道計算機</h1>
-        <p class="text-sm text-neutral-500">ティータイムのおともに。</p>
-      </div>
+    <div class="w-full mx-auto p-4">
       <TrajectoryCalculator client:load />
     </div>
   </div>