feat(components/Field): highlight intersecting elements

src/components/Field.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { concat } from "../lib/utils"
-  import { ElementId, Field, FieldElement, Intersections } from "../lib/field"
+  import { ElementId, Field, FieldElement, IntersectBetweens } from "../lib/field"
   const colsCount = 8
   const rowsCount = 8
   let field = Field.create(colsCount, rowsCount)
@@ -21,13 +21,24 @@
           "bg-gray-500",
           "aspect-square",
           "border",
-          "border-gray-500",
+          ...(() => {
+            if (value === undefined) {
+              return ["border-gray-500"]
+            }
+            if (Field.getIntersections(field, { x, y }).length === 0) {
+              return ["border-gray-500"]
+            }
+            return [
+              "border-red-500",
+              "border-2",
+            ]
+          })(),
           (() => {
             if (value) {
               return "bg-white-900"
             }
-            const intersects = Intersections.count(
-              Field.getIntersections(field, { x, y })
+            const intersects = IntersectBetweens.count(
+              Field.getIntersectBetweens(field, { x, y })
             )
             return intersects === 0 ? (
               "bg-yellow-100"

src/lib/field.ts

@@ -49,18 +49,18 @@ export type Position = {
   y: number,
 }
 
-export type IntersectionPair = [ElementId, ElementId]
+export type IntersectBetweensPair = [ElementId, ElementId]
 
-export type Intersections = {
-  horizontal: Option<IntersectionPair>
-  vertical: Option<IntersectionPair>
-  leftTopRightBottom: Option<IntersectionPair>
-  rightTopLeftBottom: Option<IntersectionPair>
+export type IntersectBetweens = {
+  horizontal: Option<IntersectBetweensPair>
+  vertical: Option<IntersectBetweensPair>
+  leftTopRightBottom: Option<IntersectBetweensPair>
+  rightTopLeftBottom: Option<IntersectBetweensPair>
 }
 
-export namespace Intersections {
-  export function count(intersects: Intersections): number {
-    const f = (pair: Option<IntersectionPair>) => (
+export namespace IntersectBetweens {
+  export function count(intersects: IntersectBetweens): number {
+    const f = (pair: Option<IntersectBetweensPair>) => (
       Option.isSome(pair) ? 1 : 0
     )
     return f(intersects.horizontal)
@@ -152,16 +152,16 @@ export namespace Field {
     })
   }
 
-  export function getIntersections(
+  export function getIntersectBetweens(
     field: Field,
     pos: Position,
-  ): Intersections {
+  ): IntersectBetweens {
     const cols = field.field
 
     function combine(
       fn1: () => Option<ElementId>,
       fn2: () => Option<ElementId>
-    ): Option<IntersectionPair> {
+    ): Option<IntersectBetweensPair> {
       const result1 = fn1()
       if (result1 === undefined) {
         return Option.mkNone()
@@ -286,4 +286,96 @@ export namespace Field {
       rightTopLeftBottom: combine(rightUp, leftDown),
     }
   }
+
+  export function getIntersections(
+    field: Field,
+    pos: Position,
+  ): ElementId[] {
+    const intersects = new Array<ElementId>()
+    const cols = field.field
+    function add(element: FieldElement) {
+      if (element === undefined) {
+        return
+      }
+      intersects.push(element)
+    }
+
+    // ↖ North West
+    for (
+      let x = pos.x - 1, y = pos.y - 1;
+      y >= 0 && x >= 0;
+      y--, x--
+    ) {
+      const rows = cols[y]
+      const element = rows[x]
+      add(element)
+    }
+
+    // ↘ South East
+    for (
+      let y = pos.y + 1, x = pos.x + 1;
+      y < cols.length && x < cols[0].length;
+      y++, x++
+    ) {
+      const rows = cols[y]
+      const element = rows[x]
+      add(element)
+    }
+
+    // ↑ Upwards
+    for (let y = pos.y - 1; y >= 0; y--) {
+      const rows = cols[y]
+      const element = rows[pos.x]
+      add(element)
+    }
+
+    // ↓ Downwards
+    for (let y = pos.y + 1; y < cols.length; y++) {
+      const rows = cols[y]
+      const element = rows[pos.x]
+      add(element)
+    }
+
+    // ↗ North East
+    for (
+      let y = pos.y - 1, x = pos.x + 1;
+      y >= 0 && x < cols[0].length;
+      y--, x++
+    ) {
+      const rows = cols[y]
+      const element = rows[x]
+      add(element)
+    }
+
+    // ↙ South West
+    for (
+      let y = pos.y + 1, x = pos.x - 1;
+      y < cols.length && x >= 0;
+      y++, x--
+    ) {
+      const rows = cols[y]
+      const element = rows[x]
+      add(element)
+    }
+
+    // ← Leftwards
+    {
+      const rows = cols[pos.y]
+      for (let x = pos.x - 1; x >= 0; x--) {
+        const element = rows[x]
+        add(element)
+      }
+    }
+
+    // → Rightwards
+    {
+      const rows = cols[pos.y]
+      for (let x = pos.x + 1; x < rows.length; x++) {
+        const element = rows[x]
+        add(element)
+      }
+    }
+
+    return intersects
+  }
 }

tests/lib/field.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest"
 import { Option } from "@fering-org/functional-helper"
 import immutableUpdate from "immutability-helper";
 
-import { ElementId, Field, FieldElement, Intersections, Option2, Position } from "../../src/lib/field"
+import { ElementId, Field, FieldElement, IntersectBetweens, Option2, Position } from "../../src/lib/field"
 
 // refactor: [feat(ArrayExt): add pick function #11](https://github.com/gretmn102/functional-helper/issues/11)
 export namespace ArrayExt {
@@ -104,54 +104,60 @@ describe("Field.update", () => {
 
 type IntersectionField = (" " | number | "x")[][]
 
-function getIntersection(cols: IntersectionField) {
-  const field = cols.reduce(
-    (state, rows, y) => (
-      rows.reduce(
-        (state, current, x) => (
-          (typeof current === "number") ? (
-            immutableUpdate(state, {
-              field: {
-                $apply: field => Field.update(
-                  field,
-                  { x, y },
-                  _ => FieldElement.create(
-                    ElementId.create(new Date(current))
+namespace IntersectionField {
+  export function parse(cols: IntersectionField) {
+    const field = cols.reduce(
+      (state, rows, y) => (
+        rows.reduce(
+          (state, current, x) => (
+            (typeof current === "number") ? (
+              immutableUpdate(state, {
+                field: {
+                  $apply: field => Field.update(
+                    field,
+                    { x, y },
+                    _ => FieldElement.create(
+                      ElementId.create(new Date(current))
+                    )
                   )
-                )
-              },
-              id: {
-                $apply: id => id + 1
-              },
-            })
-          ) : (
-            state
-          )
-        ),
-        state
-      )
-    ), {
-    field: Field.create(cols[0].length, cols.length),
-    id: 0,
-  }
-  ).field
+                },
+                id: {
+                  $apply: id => id + 1
+                },
+              })
+            ) : (
+              state
+            )
+          ),
+          state
+        )
+      ), {
+      field: Field.create(cols[0].length, cols.length),
+      id: 0,
+    }
+    ).field
 
-  const targetPosition = (() => {
-    const result = ArrayExt.pick(cols, (rows, y) => (
-      ArrayExt.pick(rows, (value, x) => {
-        if (value !== "x") {
-          return;
-        }
-        return Option.mkSome({ x, y } as Position);
-      })
-    ));
-    return Option2.get(result);
-  })()
+    const targetPosition = (() => {
+      const result = ArrayExt.pick(cols, (rows, y) => (
+        ArrayExt.pick(rows, (value, x) => {
+          if (value !== "x") {
+            return;
+          }
+          return Option.mkSome({ x, y } as Position);
+        })
+      ));
+      return Option2.get(result);
+    })()
 
-  return Field.getIntersections(field, targetPosition)
+    return { field, targetPosition }
+  }
 }
 
-describe("Field.getIntersections", () => {
+describe("Field.getIntersectBetweens", () => {
+  const getIntersection = (intersectField) => {
+    const { field, targetPosition } = IntersectionField.parse(intersectField)
+    return Field.getIntersectBetweens(field, targetPosition)
+  }
   it("8", () => {
     expect(
       getIntersection([
@@ -166,7 +172,7 @@ describe("Field.getIntersections", () => {
         vertical: Option.mkSome(["2", "8"]),
         leftTopRightBottom: Option.mkSome(["1", "9"]),
         rightTopLeftBottom: Option.mkSome(["4", "7"]),
-      } as Intersections)
+      } as IntersectBetweens)
   })
   it("0", () => {
     expect(
@@ -182,7 +188,7 @@ describe("Field.getIntersections", () => {
         vertical: Option.mkNone(),
         leftTopRightBottom: Option.mkNone(),
         rightTopLeftBottom: Option.mkNone(),
-      } as Intersections)
+      } as IntersectBetweens)
   })
   it("1", () => {
     expect(
@@ -198,6 +204,45 @@ describe("Field.getIntersections", () => {
         vertical: Option.mkNone(),
         leftTopRightBottom: Option.mkNone(),
         rightTopLeftBottom: Option.mkNone(),
-      } as Intersections)
+      } as IntersectBetweens)
+  })
+})
+
+describe("Field.getIntersections", () => {
+  const getIntersection = (intersectField) => {
+    const { field, targetPosition } = IntersectionField.parse(intersectField)
+    return Field.getIntersections(field, targetPosition)
+  }
+  it("8", () => {
+    expect(
+      getIntersection([
+        [ 1 , " ",  2 ,  3 ],
+        [" ", " ", " ",  4 ],
+        [" ",  5 , "x",  6 ],
+        [" ",  7 ,  8 ,  9 ],
+      ])
+    )
+      .toStrictEqual([
+        "1", "9", // \
+        "2", "8", // vertical
+        "4", "7", // /
+        "5", "6", // horizontal
+      ])
+  })
+  it("4", () => {
+    expect(
+      getIntersection([
+        [ 1 , " ",  2 ,  3 ],
+        [" ", " ", " ",  4 ],
+        ["x",  5 , " ",  6 ],
+        [" ",  7 ,  8 ,  9 ],
+      ])
+    )
+      .toStrictEqual([
+        "7",      // \
+        "1",      // vertical
+        "2",      // /
+        "5", "6", // horizontal
+      ])
   })
 })