components/Line: finish refactoring, clean up

src/components/Board/Board.tsx

@@ -90,8 +90,8 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
     return (
       <Line
         key={`Line${x}`}
-        startPos={{...this.state.start}}
+        start={{...this.state.start}}
-        endPos={{...this.state.end}}
+        end={{...this.state.end}}
         cellSize={60}
       />
     );

src/components/Line/Line.scss

@@ -3,9 +3,3 @@
   stroke-width: 5px;
   fill: none;
 }
-
-.Line2 {
-  stroke: #d6a54d;
-  stroke-width: 5px;
-  fill: none;
-}

src/components/Line/Line.tsx

@@ -17,14 +17,14 @@ enum Direction {
 }
 
 interface ILineProps {
-  startPos: Point;
+  start: Point;
-  endPos: Point;
+  end: Point;
   cellSize: number;
 }
 
 export default function Line(props: ILineProps): JSX.Element {
   const offset = 2.5;
-  const margin = 30;
+  const margin = props.cellSize / 2;
   const padding = margin - offset * 2;
 
   const dir = (v: number) => v < 0 ? 2 : v > 0 ? 1 : 0;
@@ -34,131 +34,54 @@ export default function Line(props: ILineProps): JSX.Element {
   const pad3 = (v: number) => mid(v) + padding + v * padding;
   const pad4 = (v: number) => mid(v - 1) + margin;
 
-  const ox = dir(props.startPos.x - props.endPos.x);
+  const ox = dir(props.start.x - props.end.x);
-  const oy = dir(props.startPos.y - props.endPos.y);
+  const oy = dir(props.start.y - props.end.y);
   const d = Number(`${ox}${oy}`) as Direction;
 
-  const startX = Math.min(props.startPos.x, props.endPos.x);
+  const minX = Math.min(props.start.x, props.end.x);
-  const startY = Math.min(props.startPos.y, props.endPos.y);
+  const minY = Math.min(props.start.y, props.end.y);
-  const absX = Math.abs(props.startPos.x - props.endPos.x);
+  const maxY = Math.max(props.start.y, props.end.y);
-  const absY = Math.abs(props.startPos.y - props.endPos.y);
+  const absX = Math.abs(props.start.x - props.end.x);
+  const absY = Math.abs(props.start.y - props.end.y);
+  const signX = Math.sign(props.start.x - props.end.x);
+  const signY = Math.sign(props.start.y - props.end.y);
 
-  let [x, y, w, h, tx, ty, r, rx, ry] = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+  /* uhh, edge cases for two directions, idk how to fix it */
+  const x = d === Direction.LeftDown ? pad4(minX) : pad1(minX);
+  const y = d === Direction.LeftDown || d === Direction.RightUp
+    ? pad1(maxY) : pad1(minY);
 
-  switch (d) {
+  /* pad3 is used only for diagonals */
-    case Direction.None:
+  let width = d % 10 ? pad3(absX) : pad2(absX);
-      break;
+  let height = pad2(absY * (1 - Math.abs(signX * signY)));
-    case Direction.Up:
+
-      x = pad1(startX);
+  /* hide when not moving */
-      y = pad1(startY);
+  if (d === Direction.None)
-      w = 55;
+    [width, height] = [0, 0];
-      h = pad2(absY);
+
-      tx = 0;
+  const r = 45 * signX * signY;
-      ty = 0;
+  const rx = (x - offset) * Math.abs(signX);
-      r = 0;
+  const ry = (y + offset) * Math.abs(signY);
-      rx = 0;
+
-      ry = 0;
+  let [tx, ty] = [0, 0, 0, 0];
-      break;
+
-    case Direction.Down:
+  /* ugly translation fixes but they work i guess */
-      x = pad1(startX);
+  if (d === Direction.LeftUp || d === Direction.RightDown)
-      y = pad1(startY);
+    [tx, ty] = [26, -14];
-      w = 55;
+
-      h = pad2(absY);
+  if (d === Direction.LeftDown)
-      tx = 0;
+    [tx, ty] = [-6, 29];
-      ty = 0;
+
-      r = 0;
+  if (d === Direction.RightUp)
-      rx = 0;
+    [tx, ty] = [-9, 28];
-      ry = 0;
-      break;
-    case Direction.Left:
-      x = pad1(startX);
-      y = pad1(startY);
-      w = pad2(absX);
-      h = 55;
-      tx = 0;
-      ty = 0;
-      r = 0;
-      rx = 0;
-      ry = 0;
-      break;
-    case Direction.LeftUp:
-      x = pad1(startX);
-      y = pad1(startY);
-      w = pad3(absX);
-      h = 55;
-      tx = 26;
-      ty = -14;
-      r = 45;
-      rx = x-offset;
-      ry = y+offset;
-      break;
-    case Direction.LeftDown:
-      x = pad4(props.endPos.x);
-      y = pad1(props.endPos.y);
-      w = pad3(absX);
-      h = 55;
-      tx = -12;
-      ty = 27;
-      r = -45;
-      rx = x+offset;
-      ry = y-offset;
-      break;
-    case Direction.Right:
-      x = pad1(startX);
-      y = pad1(startY);
-      w = pad2(absX);
-      h = 55;
-      tx = 0;
-      ty = 0;
-      r = 0;
-      rx = 0;
-      ry = 0;
-      break;
-    case Direction.RightUp:
-      x = pad1(props.startPos.x);
-      y = pad1(props.startPos.y);
-      w = pad3(absX);
-      h = 55;
-      tx = -9;
-      ty = 28;
-      r = -45;
-      rx = x-offset;
-      ry = y+offset;
-      break;
-    case Direction.RightDown:
-      x = pad1(startX);
-      y = pad1(startY);
-      w = pad3(absX);
-      h = 55;
-      tx = 27;
-      ty = -14;
-      r = 45;
-      rx = x-offset;
-      ry = y+offset;
-      break;
-  }
 
   return (
-    <svg>
+    <rect
-      <rect
+      className="Line"
-        className="Line2"
+      rx={margin - offset}
-        x={x}
+      ry={margin - offset}
-        y={y}
+      {...{x, y, width, height}}
-        width={w}
+      transform={`translate(${tx}, ${ty}), rotate(${r}, ${rx}, ${ry})`}
-        height={h}
+    />
-      />
-      <rect
-        className="Line"
-        x={x}
-        y={y}
-        width={w}
-        height={h}
-        transform={`translate(${tx}, ${ty}), rotate(${r}, ${rx}, ${ry})`}
-        rx={margin - offset}
-        ry={margin - offset}
-      />
-      <circle cx={x} cy={y} r="5" fill="orange" />
-      <circle cx={x+w} cy={y+h} r="5" fill="red" />
-    </svg>
   );
 }