refactor: render covering layers fix

src/scripts/connectVertices.ts

@@ -113,7 +113,7 @@ export function connectVertices({
     chain.push(current);
 
     const neibCells = vertices.c[current];
-    if (addToChecked) neibCells.forEach(addToChecked);
+    if (addToChecked) neibCells.filter(ofSameType).forEach(addToChecked);
 
     const [c1, c2, c3] = neibCells.map(ofSameType);
     const [v1, v2, v3] = vertices.v[current];

src/scripts/generation/generation.ts

@@ -26,8 +26,6 @@ import {createGrid} from "./grid/grid";
 import {createPack} from "./pack/pack";
 import {getInputValue, setInputValue} from "utils/nodeUtils";
 import {calculateMapCoordinates} from "modules/coordinates";
-import {drawPoint, drawPolygons} from "utils/debugUtils";
-import {isReligion} from "utils/typeUtils";
 
 const {Zoom, ThreeD} = window;
 
@@ -74,13 +72,6 @@ async function generate(options?: IGenerationOptions) {
     // renderLayer("states");
     renderLayer("religions");
 
-    // drawPolygons(pack.cells.religion, pack.cells.v, pack.vertices.p, {fillOpacity: 0.8, excludeZeroes: true});
-    pack.religions.filter(isReligion).forEach(({center}) =>
-      drawPoint(pack.cells.p[center], {
-        radius: 5
-      })
-    );
-
     WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`);
     // showStatistics();
     INFO && console.groupEnd();

src/scripts/generation/pack/religions/generateReligions.ts

@@ -1,4 +1,5 @@
 import {TIME} from "config/logging";
+import {drawPoint} from "utils/debugUtils";
 import {pick} from "utils/functionUtils";
 import {generateFolkReligions} from "./generateFolkReligions";
 import {generateOrganizedReligions} from "./generateOrganizedReligions";
@@ -32,6 +33,9 @@ export function generateReligions({
     pick(cells, "i", "c", "biome", "culture", "burg", "state", "route")
   );
 
+  folkReligions.forEach(({center}) => drawPoint(cells.p[center], {radius: 3, color: "blue"}));
+  basicReligions.forEach(({center}) => drawPoint(cells.p[center], {radius: 3, color: "red"}));
+
   TIME && console.timeEnd("generateReligions");
   return {religionIds, religions};
 }

src/scripts/generation/pack/religions/specifyReligions.ts

@@ -1,4 +1,4 @@
-import {getMixedColor, getRandomColor} from "utils/colorUtils";
+import {brighter, getMixedColor} from "utils/colorUtils";
 import {each, gauss, rand} from "utils/probabilityUtils";
 import {isCulture} from "utils/typeUtils";
 import {expandReligions} from "./expandReligions";
@@ -12,8 +12,10 @@ const expansionismMap = {
   Heresy: () => gauss(1.2, 0.5, 0, 5)
 };
 
+type TReligionData = Pick<IReligion, "type" | "form" | "culture" | "center">;
+
 export function specifyReligions(
-  religionsData: Pick<IReligion, "type" | "form" | "culture" | "center">[],
+  religionsData: TReligionData[],
   cultures: TCultures,
   states: TStates,
   burgs: TBurgs,
@@ -39,8 +41,7 @@ export function specifyReligions(
 
     const expansionism = expansionismMap[type]();
 
-    const culture = cultures[cultureId];
-    const color = isCulture(culture) ? getMixedColor(culture.color, 0.1, 0) : getRandomColor();
+    const color = getReligionColor(cultureId, type);
 
     return {i: index + 1, name, type, form, culture: cultureId, center, deity, expansion, expansionism, color};
   });
@@ -51,6 +52,14 @@ export function specifyReligions(
 
   return {religions: combineReligionsData(), religionIds};
 
+  function getReligionColor(cultureId: number, type: IReligion["type"]) {
+    const culture = cultures[cultureId];
+    if (!isCulture(culture)) throw new Error(`Culture ${cultureId} is not a valid culture`);
+
+    if (type === "Folk") return brighter(culture.color, 0.2);
+    return getMixedColor(culture.color, 0.2, 0);
+  }
+
   function combineReligionsData(): TReligions {
     const noReligion: TNoReligion = {i: 0, name: "No religion"};
 

src/utils/colorUtils.ts

@@ -25,7 +25,7 @@ const colorSchemeMap: {[key in TColorScheme]: d3.ScaleSequential<string>} = {
   monochrome: d3.scaleSequential(d3.interpolateGreys)
 };
 
-export function getColors(number: number) {
+export function getColors(number: number): Hex[] {
   if (number <= cardinal12.length) return d3.shuffle(cardinal12.slice(0, number));
 
   const scheme = colorSchemeMap.default;
@@ -40,19 +40,28 @@ export function getColors(number: number) {
 }
 
 export function getRandomColor(): Hex {
-  const scheme = colorSchemeMap.default;
+  const scheme = d3.scaleSequential(d3.interpolateSpectral);
   const rgb = scheme(Math.random())!;
   return d3.color(rgb)?.formatHex() as Hex;
 }
 
-// mix a color with a random color
-export function getMixedColor(hexColor: string, mixation = 0.2, bright = 0.3) {
-  // if provided color is not hex (e.g. harching), generate random one
-  const color1 = hexColor && hexColor[0] === "#" ? hexColor : getRandomColor();
+// mix a color with a random color. TODO: refactor without interpolation
+export function getMixedColor(color: Hex | CssUrl, mixation = 0.2, bright = 0.3) {
+  const color1 = color.startsWith("#") ? color : getRandomColor();
   const color2 = getRandomColor();
   const mixedColor = d3.interpolate(color1, color2)(mixation);
 
-  return d3.color(mixedColor)!.brighter(bright).hex();
+  return d3.color(mixedColor)!.brighter(bright).formatHex() as Hex;
+}
+
+export function darker(color: Hex | CssUrl, amount = 1) {
+  if (color.startsWith("#") === false) return color;
+  return d3.color(color)!.darker(amount).formatHex() as Hex;
+}
+
+export function brighter(color: Hex | CssUrl, amount = 1) {
+  if (color.startsWith("#") === false) return color;
+  return d3.color(color)!.brighter(amount).formatHex() as Hex;
 }
 
 export function getColorScheme(schemeName: TColorScheme) {