fix: deterministic behaviour for radar by storing the random fractions when generating rd.json (#372)

* Store the random blip positions when generating rd.json

Fixes: https://github.com/AOEpeople/aoe_technology_radar/issues/148

Simple solution to creating stable blips is to store the randomly generated angle and radius in rg.json.

Attempted a few hash functions but found it hard to spread blips 'nicely'
(they tended to clump into groups or sections of the radar).

* distribute points within .1 and .9 of the arc

---------

Co-authored-by: Bastian Ike <bastian.ike@bare.id>

src/components/Chart/BlipPoints.tsx

@@ -26,13 +26,15 @@ function generateCoordinates(
     ringPadding = 0.7;
 
   // radian between 0 and 90 degrees
-  const randomDegree = (Math.random() * 90 * pi) / 180;
+  const randomDegree = ((0.1 + (blip.angleFraction || Math.random()) * .8) * 90 * pi) / 180;
   // random distance from the centre of the radar, but within given ring. Also, with some "padding" so the points don't touch ring borders.
-  const radius = randomBetween(
+  const radius = pointBetween(
     previousRingRadius + ringPadding,
-    ringRadius - ringPadding
+    ringRadius - ringPadding,
+    blip.radiusFraction || Math.random()
   );
-  /* 
+
+  /*
     Multiples of PI/2. To apply the calculated position to the specific quadrant.
     Order here is counter-clockwise, so we need to "invert" quadrant positions (i.e. swap 2 with 4)
     */
@@ -44,8 +46,8 @@ function generateCoordinates(
   };
 }
 
-function randomBetween(min: number, max: number): number {
-  return Math.random() * (max - min) + min;
+function pointBetween(min: number, max: number, amount: number): number {
+  return amount * (max - min) + min;
 }
 
 function distanceBetween(point1: Point, point2: Point): number {

src/model.ts

@@ -25,6 +25,8 @@ export type Item = ItemAttributes & {
   info: string;
   flag: FlagType;
   revisions: Revision[];
+  angleFraction?: number;
+  radiusFraction?: number;
 };
 
 export type Blip = Item & {