feat(lessons): add lessons from client db

2026-03-01 20:24:14 +06:00
parent 2eaf77e13c
commit 2a00c44157
152 changed files with 74587 additions and 222 deletions
--- a/src/components/lessons/LinearTransformationWidget.tsx
+++ b/src/components/lessons/LinearTransformationWidget.tsx
@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+
+const LinearTransformationWidget: React.FC = () => {
+  const [h, setH] = useState(0); // Horizontal shift (x - h)
+  const [k, setK] = useState(0); // Vertical shift + k
+  const [reflectX, setReflectX] = useState(false); // -f(x)
+  const [stretch, setStretch] = useState(1); // a * f(x)
+
+  // Base function f(x) = 0.5x
+  // Transformed g(x) = a * f(x - h) + k 
+  // g(x) = a * (0.5 * (x - h)) + k
+  
+  // Actually, let's use f(x) = x for simplicity, or 0.5x to show slope changes easier? 
+  // PDF examples use general f(x). Let's use f(x) = x as base.
+  // g(x) = stretch * (x - h) + k. If reflectX is true, stretch becomes -stretch.
+  
+  const effectiveStretch = reflectX ? -stretch : stretch;
+
+  const range = 10;
+  const scale = 20; // 20px per unit
+  const size = 300;
+  const center = size / 2;
+
+  const toPx = (v: number, isY = false) => isY ? center - v * scale : center + v * scale;
+
+  // Base: y = 0.5x (to make it distinct from diagonals)
+  const getBasePath = () => {
+      const m = 0.5;
+      const x1 = -range, x2 = range;
+      const y1 = m * x1;
+      const y2 = m * x2;
+      return `M ${toPx(x1)} ${toPx(y1, true)} L ${toPx(x2)} ${toPx(y2, true)}`;
+  };
+
+  const getTransformedPath = () => {
+      // f(x) = 0.5x
+      // g(x) = effectiveStretch * (0.5 * (x - h)) + k
+      const x1 = -range, x2 = range;
+      const y1 = effectiveStretch * (0.5 * (x1 - h)) + k;
+      const y2 = effectiveStretch * (0.5 * (x2 - h)) + k;
+      return `M ${toPx(x1)} ${toPx(y1, true)} L ${toPx(x2)} ${toPx(y2, true)}`;
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
+      <div className="flex flex-col md:flex-row gap-8">
+         <div className="w-full md:w-1/3 space-y-6">
+             <div className="p-4 bg-slate-50 border border-slate-200 rounded-xl font-mono text-sm">
+                 <p className="text-slate-400 mb-2">Base: <span className="text-slate-600 font-bold">f(x) = 0.5x</span></p>
+                 <p className="text-indigo-900 font-bold text-lg">
+                     g(x) = {reflectX ? '-' : ''}{stretch !== 1 ? stretch : ''}f(x {h > 0 ? '-' : '+'} {Math.abs(h)}) {k >= 0 ? '+' : '-'} {Math.abs(k)}
+                 </p>
+             </div>
+
+             <div className="space-y-4">
+                 <div>
+                     <label className="text-xs font-bold text-indigo-600 uppercase flex justify-between">
+                         Horizontal Shift (h) <span>{h}</span>
+                     </label>
+                     <input 
+                       type="range" min="-5" max="5" step="1" 
+                       value={h} onChange={e => setH(parseInt(e.target.value))}
+                       className="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600 mt-1"
+                     />
+                     <div className="flex justify-between text-[10px] text-slate-400">
+                         <span>Left (x+h)</span>
+                         <span>Right (x-h)</span>
+                     </div>
+                 </div>
+
+                 <div>
+                     <label className="text-xs font-bold text-emerald-600 uppercase flex justify-between">
+                         Vertical Shift (k) <span>{k}</span>
+                     </label>
+                     <input 
+                       type="range" min="-5" max="5" step="1" 
+                       value={k} onChange={e => setK(parseInt(e.target.value))}
+                       className="w-full h-2 bg-emerald-100 rounded-lg appearance-none cursor-pointer accent-emerald-600 mt-1"
+                     />
+                 </div>
+
+                 <div className="flex items-center gap-4 pt-2">
+                     <label className="flex items-center gap-2 text-sm font-bold text-slate-700 cursor-pointer">
+                         <input type="checkbox" checked={reflectX} onChange={e => setReflectX(e.target.checked)} className="accent-rose-600 w-4 h-4"/>
+                         Reflect (-f(x))
+                     </label>
+                 </div>
+             </div>
+         </div>
+
+         <div className="flex-1 flex justify-center">
+             <div className="relative w-[300px] h-[300px] border border-slate-200 rounded-xl overflow-hidden bg-white">
+                 <svg width="300" height="300" viewBox="0 0 300 300">
+                     <defs>
+                        <pattern id="grid-t" width="20" height="20" patternUnits="userSpaceOnUse">
+                            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" strokeWidth="1"/>
+                        </pattern>
+                     </defs>
+                     <rect width="100%" height="100%" fill="url(#grid-t)" />
+                     
+                     {/* Axes */}
+                     <line x1="0" y1={center} x2={size} y2={center} stroke="#cbd5e1" strokeWidth="2" />
+                     <line x1={center} y1="0" x2={center} y2={size} stroke="#cbd5e1" strokeWidth="2" />
+
+                     {/* Base Function (Ghost) */}
+                     <path d={getBasePath()} stroke="#94a3b8" strokeWidth="2" strokeDasharray="4,4" />
+                     <text x="260" y={toPx(0.5*8, true) - 5} className="text-xs fill-slate-400 font-bold">f(x)</text>
+
+                     {/* Transformed Function */}
+                     <path d={getTransformedPath()} stroke="#4f46e5" strokeWidth="3" />
+                     <text x="20" y="20" className="text-xs fill-indigo-600 font-bold">g(x)</text>
+                 </svg>
+             </div>
+         </div>
+      </div>
+    </div>
+  );
+};
+
+export default LinearTransformationWidget;