slight belt animation refactor

src/js/game/systems/belt.js

@@ -501,26 +501,25 @@ export class BeltSystem extends GameSystem {
             return;
         }
 
+        // SYNC with systems/belt_underlays.js:drawChunk!
         // Limit speed to avoid belts going backwards
         const speedMultiplier = Math.min(this.root.hubGoals.getBeltBaseSpeed(), 10);
-
-        // SYNC with systems/item_acceptor.js:drawEntityUnderlays!
-        // 126 / 42 is the exact animation speed of the png animation
+        // It takes 3 animation cycles for belt arrows to move 1 tile
         const animationIndex = Math.floor(
-            ((this.root.time.realtimeNow() * speedMultiplier * BELT_ANIM_COUNT * 126) / 42) *
-                globalConfig.itemSpacingOnBelts
+            ((this.root.time.realtimeNow() * speedMultiplier * globalConfig.itemSpacingOnBelts * 3) % 1) *
+                BELT_ANIM_COUNT
         );
-        const contents = chunk.containedEntitiesByLayer.regular;
 
+        const contents = chunk.containedEntitiesByLayer.regular;
         if (this.root.app.settings.getAllSettings().simplifiedBelts) {
             // POTATO Mode: Only show items when belt is hovered
             let hoveredBeltPath = null;
             const mousePos = this.root.app.mousePosition;
             if (mousePos && this.root.currentLayer === "regular") {
                 const tile = this.root.camera.screenToWorld(mousePos).toTileSpace();
-                const contents = this.root.map.getLayerContentXY(tile.x, tile.y, "regular");
-                if (contents && contents.components.Belt) {
-                    hoveredBeltPath = contents.components.Belt.assignedPath;
+                const entity = this.root.map.getLayerContentXY(tile.x, tile.y, "regular");
+                if (entity && entity.components.Belt) {
+                    hoveredBeltPath = entity.components.Belt.assignedPath;
                 }
             }
 

src/js/game/systems/belt_underlays.js

@@ -220,8 +220,14 @@ export class BeltUnderlaysSystem extends GameSystem {
      * @param {MapChunkView} chunk
      */
     drawChunk(parameters, chunk) {
+        // SYNC with systems/belt.js:drawChunk!
         // Limit speed to avoid belts going backwards
         const speedMultiplier = Math.min(this.root.hubGoals.getBeltBaseSpeed(), 10);
+        // It takes 3 animation cycles for belt arrows to move 1 tile
+        const animationIndex = Math.floor(
+            ((this.root.time.realtimeNow() * speedMultiplier * globalConfig.itemSpacingOnBelts * 3) % 1) *
+                BELT_ANIM_COUNT
+        );
 
         const contents = chunk.containedEntitiesByLayer.regular;
         for (let i = 0; i < contents.length; ++i) {
@@ -273,11 +279,6 @@ export class BeltUnderlaysSystem extends GameSystem {
                 const y = destY + globalConfig.halfTileSize;
                 const angleRadians = Math.radians(angle);
 
-                // SYNC with systems/belt.js:drawSingleEntity!
-                const animationIndex = Math.floor(
-                    ((this.root.time.realtimeNow() * speedMultiplier * BELT_ANIM_COUNT * 126) / 42) *
-                        globalConfig.itemSpacingOnBelts
-                );
                 parameters.context.translate(x, y);
                 parameters.context.rotate(angleRadians);
                 this.underlayBeltSprites[