clean up

line-segment-intersection/src/App.svelte

@@ -4,11 +4,24 @@
   let canvas;
   let ctx;
   const GRID_SIZE = 40; // pixels per grid unit
-  const WIDTH = 800;
+  const WIDTH = 320;
-  const HEIGHT = 640;
+  const HEIGHT = 320;
 
   let userPoint = { x: 5, y: 2 };
 
+  // Rectangle coordinates
+  const blueRect = { x1: 6, y1: 1 }; // Blue rectangle corner
+  const redRect = { x1: 1, y1: 7 }; // Red rectangle corner
+
+  // Calculate rectangle areas
+  $: blueWidth = Math.abs(blueRect.x1 - userPoint.x);
+  $: blueHeight = Math.abs(blueRect.y1 - userPoint.y);
+  $: blueArea = blueWidth * blueHeight;
+
+  $: redWidth = Math.abs(redRect.x1 - userPoint.x);
+  $: redHeight = Math.abs(redRect.y1 - userPoint.y);
+  $: redArea = redWidth * redHeight;
+
   $: if (ctx && userPoint) {
     redraw();
   }
@@ -21,10 +34,10 @@
   function redraw() {
     drawGrid();
     drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(100, 108, 255, 0.3)');
-    drawRectangle(userPoint.x, userPoint.y, 1, 6, 'rgba(255, 0, 0, 0.3)');
+    drawRectangle(userPoint.x, userPoint.y, 1, 7, 'rgba(255, 0, 0, 0.3)');
     drawLineSegment(1, 1, 6, 7, '#ff3e00');
     drawLabel('A', 1, 1);
-    drawLabel('B', 6, 7);
+    drawLabel('C', 6, 7);
     drawUserPoint();
   }
 
@@ -50,20 +63,16 @@
   }
 
   function toCanvasCoords(x, y) {
-    const centerX = WIDTH / 2;
-    const centerY = HEIGHT / 2;
     return {
-      x: centerX + x * GRID_SIZE,
+      x: x * GRID_SIZE,
-      y: centerY - y * GRID_SIZE
+      y: HEIGHT - y * GRID_SIZE
     };
   }
 
   function toCartesianCoords(canvasX, canvasY) {
-    const centerX = WIDTH / 2;
-    const centerY = HEIGHT / 2;
     return {
-      x: (canvasX - centerX) / GRID_SIZE,
+      x: canvasX / GRID_SIZE,
-      y: (centerY - canvasY) / GRID_SIZE
+      y: (HEIGHT - canvasY) / GRID_SIZE
     };
   }
 
@@ -112,7 +121,7 @@
     ctx.font = 'bold 16px monospace';
     ctx.textAlign = 'center';
     ctx.textBaseline = 'bottom';
-    ctx.fillText('C', coords.x, coords.y - 12);
+    ctx.fillText('B', coords.x, coords.y - 12);
   }
 
   function drawGrid() {
@@ -120,9 +129,6 @@
     ctx.fillStyle = '#1a1a1a';
     ctx.fillRect(0, 0, WIDTH, HEIGHT);
 
-    const centerX = WIDTH / 2;
-    const centerY = HEIGHT / 2;
-
     // Draw grid lines
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 1;
@@ -143,20 +149,20 @@
       ctx.stroke();
     }
 
-    // Draw axes
+    // Draw axes (left and bottom edges)
     ctx.strokeStyle = '#666';
     ctx.lineWidth = 2;
 
-    // Y-axis
+    // Y-axis (left edge)
     ctx.beginPath();
-    ctx.moveTo(centerX, 0);
+    ctx.moveTo(0, 0);
-    ctx.lineTo(centerX, HEIGHT);
+    ctx.lineTo(0, HEIGHT);
     ctx.stroke();
 
-    // X-axis
+    // X-axis (bottom edge)
     ctx.beginPath();
-    ctx.moveTo(0, centerY);
+    ctx.moveTo(0, HEIGHT);
-    ctx.lineTo(WIDTH, centerY);
+    ctx.lineTo(WIDTH, HEIGHT);
     ctx.stroke();
 
     // Draw axis labels
@@ -166,23 +172,22 @@
 
     // X-axis labels
     for (let x = GRID_SIZE; x <= WIDTH; x += GRID_SIZE) {
-      const value = Math.round((x - centerX) / GRID_SIZE);
+      const value = Math.round(x / GRID_SIZE);
-      if (value !== 0) {
+      ctx.fillText(value, x, HEIGHT - 5);
-        ctx.fillText(value, x, centerY + 20);
-      }
     }
 
     // Y-axis labels
-    ctx.textAlign = 'right';
+    ctx.textAlign = 'left';
-    for (let y = GRID_SIZE; y <= HEIGHT; y += GRID_SIZE) {
+    for (let y = 0; y < HEIGHT; y += GRID_SIZE) {
-      const value = Math.round((centerY - y) / GRID_SIZE);
+      const value = Math.round((HEIGHT - y) / GRID_SIZE);
-      if (value !== 0) {
+      if (value > 0) {
-        ctx.fillText(value, centerX - 10, y + 5);
+        ctx.fillText(value, 5, y + 5);
       }
     }
 
     // Origin label
-    ctx.fillText('0', centerX - 10, centerY + 20);
+    ctx.textAlign = 'left';
+    ctx.fillText('0', 5, HEIGHT - 5);
   }
 </script>
 
@@ -191,6 +196,27 @@
   <div class="canvas-container">
     <canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:mousemove={handleMouseMove}></canvas>
   </div>
+
+  <div class="calculations">
+    <h2>Rectangle Areas</h2>
+    <p class="point-c">Point B: ({userPoint.x.toFixed(2)}, {userPoint.y.toFixed(2)})</p>
+
+    <div class="rect-calc blue" class:largest={blueArea > redArea}>
+      <h3>Blue Rectangle</h3>
+      <p>Corner: ({blueRect.x1}, {blueRect.y1})</p>
+      <p>Width = |{blueRect.x1} - {userPoint.x.toFixed(2)}| = {blueWidth.toFixed(2)}</p>
+      <p>Height = |{blueRect.y1} - {userPoint.y.toFixed(2)}| = {blueHeight.toFixed(2)}</p>
+      <p class="area">Area = {blueWidth.toFixed(2)} × {blueHeight.toFixed(2)} = <strong>{blueArea.toFixed(2)}</strong></p>
+    </div>
+
+    <div class="rect-calc red" class:largest={redArea > blueArea}>
+      <h3>Red Rectangle</h3>
+      <p>Corner: ({redRect.x1}, {redRect.y1})</p>
+      <p>Width = |{redRect.x1} - {userPoint.x.toFixed(2)}| = {redWidth.toFixed(2)}</p>
+      <p>Height = |{redRect.y1} - {userPoint.y.toFixed(2)}| = {redHeight.toFixed(2)}</p>
+      <p class="area">Area = {redWidth.toFixed(2)} × {redHeight.toFixed(2)} = <strong>{redArea.toFixed(2)}</strong></p>
+    </div>
+  </div>
 </main>
 
 <style>
@@ -215,4 +241,84 @@
   canvas {
     display: block;
   }
+
+  .calculations {
+    margin-top: 2rem;
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .calculations h2 {
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    margin-bottom: 0.5rem;
+  }
+
+  .point-c {
+    width: 100%;
+    text-align: center;
+    color: #646cff;
+    font-family: monospace;
+    font-size: 1.1em;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  .rect-calc {
+    background: #242424;
+    border-radius: 8px;
+    padding: 1.5rem;
+    min-width: 300px;
+    border: 2px solid;
+  }
+
+  .rect-calc.blue {
+    border-color: #646cff;
+  }
+
+  .rect-calc.red {
+    border-color: #ff0000;
+  }
+
+  .rect-calc.largest {
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3),
+                0 0 40px rgba(255, 255, 255, 0.2);
+    transform: scale(1.02);
+    transition: all 0.3s ease;
+  }
+
+  .rect-calc h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: #fff;
+  }
+
+  .rect-calc.blue h3 {
+    color: #646cff;
+  }
+
+  .rect-calc.red h3 {
+    color: #ff0000;
+  }
+
+  .rect-calc p {
+    margin: 0.5rem 0;
+    color: #ccc;
+    font-family: monospace;
+  }
+
+  .rect-calc .area {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #444;
+    font-size: 1.1em;
+  }
+
+  .rect-calc strong {
+    color: #fff;
+    font-size: 1.2em;
+  }
 </style>