Added arrows

src/js/game/modes/regular.js

@@ -525,20 +525,20 @@ export function generateLevelDefinitions(limitedVersion = false) {
                   {
                       shapes: [
                           { key: "CbCuCbCu:Sr------:--CrSrCr:CwCwCwCw", amount: 50000 },
-                          { key: "Rg--Rg--:CwRwCwRw:--Rg--Rg", amount: 30000, throughputOnly: true },
+                          { key: "Rg--Rg--:CwRwCwRw:--Rg--Rg", amount: 50000 },
                       ],
-                      reward: enumHubGoalRewards.reward_freeplay,
+                      reward: enumHubGoalRewards.no_reward_freeplay,
                       inOrder: true,
                   },
 
                   // 29 More shapes
                   {
                       shapes: [
-                          { key: "CbCuCbCu:Sr------:--CrSrCr:CwCwCwCw", amount: 50000 },
+                          { key: "CbCuCbCu:Sr------:--CrSrCr:CwCwCwCw", amount: 100, throughputOnly: true },
-                          { key: "Rg--Rg--:CwRwCwRw:--Rg--Rg", amount: 30000, throughputOnly: true },
+                          { key: "Rg--Rg--:CwRwCwRw:--Rg--Rg", amount: 100, throughputOnly: true },
-                          { key: "Su----Su:RwRwRwRw:Cu----Cu:CwCwCwCw", amount: 70000, throughputOnly: true },
+                          { key: "Su----Su:RwRwRwRw:Cu----Cu:CwCwCwCw", amount: 100, throughputOnly: true },
                       ],
-                      reward: enumHubGoalRewards.reward_freeplay,
+                      reward: enumHubGoalRewards.no_reward_freeplay,
                   },
 
                   // 30 More shapes
@@ -563,7 +563,7 @@ export function generateLevelDefinitions(limitedVersion = false) {
                               amount: 90000,
                           },
                       ],
-                      reward: enumHubGoalRewards.reward_freeplay,
+                      reward: enumHubGoalRewards.no_reward_freeplay,
                   },
               ]),
     ];

src/js/game/systems/hub.js

@@ -82,7 +82,6 @@ export class HubSystem extends GameSystemWithFilter {
 
             return;
         }
-
         const goals = this.root.hubGoals.currentGoal;
         const goalsLength = goals.definitions.length;
         const delivered = this.root.hubGoals.getCurrentGoalDelivered();
@@ -99,10 +98,13 @@ export class HubSystem extends GameSystemWithFilter {
         else if (goalsLength > 2) size = 26;
         else if (goalsLength > 1) size = 32;
 
+        let gap = 0;
+        if (goalsLength > 3) gap = 22;
+        else if (goalsLength > 2) gap = 28;
+        else if (goalsLength > 1) gap = 43;
+
         for (let i = 0; i < goalsLength; i++) {
-            if (goalsLength > 3) x += 22;
+            x += gap;
-            else if (goalsLength > 2) x += 28;
-            else if (goalsLength > 1) x += 43;
 
             goals.definitions[i].shape.drawCentered(x, y, parameters, size);
 
@@ -227,6 +229,20 @@ export class HubSystem extends GameSystemWithFilter {
             }
         }
 
+        // Add arrows
+        if (goals.inOrder) {
+            if (goalsLength > 3) {
+                this.drawArrow(context, x - size * 3 + gap * 0.13, y - gap * 0.1, 0.8);
+                this.drawArrow(context, x - size * 2 + gap * 0.25, y - gap * 0.1, 0.8);
+                this.drawArrow(context, x - size * 1 + gap * 0.33, y - gap * 0.1, 0.8);
+            } else if (goalsLength > 2) {
+                this.drawArrow(context, x - size * 2 + gap * 0.3, y - gap * 0.1, 0.8);
+                this.drawArrow(context, x - size * 1 + gap * 0.37, y - gap * 0.1, 0.8);
+            } else if (goalsLength > 1) {
+                this.drawArrow(context, x - size * 1 + gap * 0.19, y - gap * 0.1, 1.2);
+            }
+        }
+
         // Reward
         const rewardText = T.storyRewards[goals.reward].title.toUpperCase();
         if (rewardText.length > 12) {
@@ -267,6 +283,72 @@ export class HubSystem extends GameSystemWithFilter {
         context.textAlign = "left";
     }
 
+    /**
+     * @param {CanvasRenderingContext2D} context
+     * @param {number} x
+     * @param {number} y
+     * @param {number} size
+     */
+    drawArrow(context, x, y, size) {
+        this.rounedPolly(
+            context,
+            [
+                { x: 0 + x, y: 0 + y },
+                { x: 5.5 * size + x, y: 3.75 * size + y },
+                { x: 0 + x, y: 7.5 * size + y },
+            ],
+            1.4
+        );
+    }
+
+    /**
+     * Draws a polygon with rounded corners
+     * @param {CanvasRenderingContext2D} context The canvas context
+     * @param {Array} points A list of `{x, y}` points
+     * @param {Number} radius how much to round the corners
+     */
+    rounedPolly(context, points, radius) {
+        const distance = (p1, p2) => Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
+
+        const lerp = (a, b, x) => a + (b - a) * x;
+
+        const lerp2D = (p1, p2, t) => ({
+            x: lerp(p1.x, p2.x, t),
+            y: lerp(p1.y, p2.y, t),
+        });
+
+        const numPoints = points.length;
+
+        let corners = [];
+        for (let i = 0; i < numPoints; i++) {
+            let lastPoint = points[i];
+            let thisPoint = points[(i + 1) % numPoints];
+            let nextPoint = points[(i + 2) % numPoints];
+
+            let lastEdgeLength = distance(lastPoint, thisPoint);
+            let lastOffsetDistance = Math.min(lastEdgeLength / 2, radius);
+            let start = lerp2D(thisPoint, lastPoint, lastOffsetDistance / lastEdgeLength);
+
+            let nextEdgeLength = distance(nextPoint, thisPoint);
+            let nextOffsetDistance = Math.min(nextEdgeLength / 2, radius);
+            let end = lerp2D(thisPoint, nextPoint, nextOffsetDistance / nextEdgeLength);
+
+            corners.push([start, thisPoint, end]);
+        }
+        context.beginPath();
+
+        context.moveTo(corners[0][0].x, corners[0][0].y);
+        for (let [start, ctrl, end] of corners) {
+            context.lineTo(start.x, start.y);
+            context.quadraticCurveTo(ctrl.x, ctrl.y, end.x, end.y);
+        }
+
+        context.closePath();
+
+        context.fillStyle = "#797A7F";
+        context.fill();
+    }
+
     /**
      * @param {DrawParameters} parameters
      * @param {Entity} entity