2 files changed, 31 insertions(+), 11 deletions(-)

M index.html
M lib.js

@@ 87,10 87,6 @@
       .truchet-2 .a {
         bottom: calc(50% - var(--linewidth) / 2);
       }
-
-      .colored {
-        border-color: red !important;
-      }
     </style>
   </head>
 

@@ 17,6 17,29 @@ const getConnections = (orientation, type) =>
     return acc;
   }, []);
 
+const randomColor = () => hslToHex(rand() * 360, 100, 45);
+
+/**
+ * Convert HSL to Hex
+ * @param h - hue (0-360) in degrees
+ * @param s - saturation (0-100) in percentage
+ * @param l - lightness (0-100) in percentage
+ * @returns A hex color code
+ */
+function hslToHex(h, s, l) {
+  // from https://stackoverflow.com/a/44134328
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, "0"); // convert to Hex and prefix "0" if needed
+  };
+  return "#" + f(0) + f(8) + f(4);
+}
+
 //#region Tile
 /**
  * It creates a tile with two segments, and it has a random number


@@ 74,13 97,13 @@ function Segment(parent, type) {
 Segment.prototype.isColored = function () {
   return this.colored;
 };
-Segment.prototype.color = function (setColor = true) {
+Segment.prototype.color = function (setColor) {
   if (setColor) {
     this.colored = true;
-    this.element.classList.add("colored");
+    this.element.style.borderColor = setColor;
   } else {
     this.colored = false;
-    this.element.classList.remove("colored");
+    this.element.style.borderColor = "";
   }
 };
 Object.defineProperty(Segment.prototype, "rowIndex", {


@@ 157,10 180,11 @@ Object.defineProperty(TileList.prototype, "length", {
  * @param startSegment - the segment that the loop starts at
  * @param tiles - the tiles object
  */
-function Loop(startSegment, tiles) {
+function Loop(startSegment, tiles, HEXcolor = randomColor()) {
   this.startSegment = startSegment;
   this.tiles = tiles;
   this.loop = this.findLoop(this.startSegment);
+  this.HEXcolor = HEXcolor;
 }
 Loop.prototype.findLoop = function (segment) {
   const findNeighborSegment = (segment) =>


@@ 195,15 219,15 @@ Loop.prototype.findLoop = function (segment) {
   });
   return loop;
 };
-Loop.prototype.color = function (setColor) {
+Loop.prototype.color = function () {
   this.loop.forEach((segment) => {
-    segment.color(setColor);
+    segment.color(this.HEXcolor);
   });
 };
 Loop.prototype.redraw = function () {
   this.color(false); // remove color
   this.loop = this.findLoop(this.startSegment);
-  this.color(); // add color
+  this.color(this.HEXcolor); // add color
 };
 Loop.prototype.isSafe = function (loopMaxLength, tiles) {
   // check if loop is too long or ends at the bottom