From b92bbb9741909d452e01cbd66c22e6a91016a09c Mon Sep 17 00:00:00 2001
From: Tony Garnock-Jones <tonyg@leastfixedpoint.com>
Date: Mon, 13 Dec 2021 20:21:21 +0100
Subject: [PATCH] Run pipes as linked actors in their own subfacets, to prevent
 a vanishing pipe from killing the game

---
 .../src/index.ts                              | 95 ++++++++++---------
 1 file changed, 50 insertions(+), 45 deletions(-)

diff --git a/examples/syndicate-html-example-flappy-bird/src/index.ts b/examples/syndicate-html-example-flappy-bird/src/index.ts
index f63bd93..1025ca4 100644
--- a/examples/syndicate-html-example-flappy-bird/src/index.ts
+++ b/examples/syndicate-html-example-flappy-bird/src/index.ts
@@ -137,60 +137,65 @@ function spawnGame(mainDs: Ref) {
         spawn linked named 'pipe-factory' {
             field nextPipe: number = 0;
             at gameDs {
-                on asserted Score(nextPipe.value) => spawnPipe(nextPipe.value++);
-            }
-        }
-
-        function spawnPipe(i: number) {
-            const xlocation = (i + 1) * 324;
-
-            spawn linked named ['pipe', i] {
-                let ui = new Anchor();
-                field xpos: number = xlocation;
-
-                const upperHeight =
-                    Math.random() * (FIELD_HEIGHT - PILLAR_GAP - PILLAR_HEAD_HEIGHT * 6)
-                    + PILLAR_HEAD_HEIGHT * 3;
-                const lowerHeight = FIELD_HEIGHT - upperHeight - PILLAR_GAP;
-
-                stop on (xpos.value < -(PILLAR_WIDTH + FLAPPY_XPOS));
-
-                at gameDs {
+                on asserted Score(nextPipe.value) => {
                     react {
-                        stop on (xpos.value <= 0) send message IncreaseScore();
-                    }
-
-                    on asserted Position($flappyXpos, _) =>
-                        xpos.value = xlocation - floatValue(flappyXpos);
-
-                    on asserted Position($xpos, $ypos) => {
-                        if (touchingPillar(floatValue(xpos), floatValue(ypos))) {
-                            react {
-                                assert GameOver();
-                            }
+                        const pipeNumber = nextPipe.value++;
+                        spawn linked named ['pipe', pipeNumber] {
+                            runPipe(pipeNumber);
                         }
                     }
                 }
+            }
+        }
 
-                at mainDs {
-                    assert ui.html(
-                        '#board-area',
-                        template`<div class="pillars">
-                                 <div class="pillar pillar-upper"
-                                      style="${`left: ${xpos.value + FLAPPY_XPOS}px; height: ${upperHeight}px;`}"></div>
-                                 <div class="pillar pillar-lower"
-                                      style="${`left: ${xpos.value + FLAPPY_XPOS}px; height: ${lowerHeight}px;`}"></div>
-                                 </div>`);
+        function runPipe(i: number) {
+            const xlocation = (i + 1) * 324;
+
+            let ui = new Anchor();
+            field xpos: number = xlocation;
+
+            const upperHeight =
+                Math.random() * (FIELD_HEIGHT - PILLAR_GAP - PILLAR_HEAD_HEIGHT * 6)
+                + PILLAR_HEAD_HEIGHT * 3;
+            const lowerHeight = FIELD_HEIGHT - upperHeight - PILLAR_GAP;
+
+            stop on (xpos.value < -(PILLAR_WIDTH + FLAPPY_XPOS));
+
+            at gameDs {
+                react {
+                    stop on (xpos.value <= 0) send message IncreaseScore();
                 }
 
-                function touchingPillar(xpos: number, ypos: number): boolean {
-                    const inHorizontalRange =
-                        (xpos + FLAPPY_WIDTH >= xlocation) && (xpos <= xlocation + PILLAR_WIDTH);
-                    const aboveGapTop = (ypos <= upperHeight);
-                    const belowGapBottom = (ypos + FLAPPY_HEIGHT >= upperHeight + PILLAR_GAP);
-                    return inHorizontalRange && (aboveGapTop || belowGapBottom);
+                on asserted Position($flappyXpos, _) =>
+                    xpos.value = xlocation - floatValue(flappyXpos);
+
+                on asserted Position($xpos, $ypos) => {
+                    if (touchingPillar(floatValue(xpos), floatValue(ypos))) {
+                        react {
+                            assert GameOver();
+                        }
+                    }
                 }
             }
+
+            at mainDs {
+                assert ui.html(
+                    '#board-area',
+                    template`<div class="pillars">
+                             <div class="pillar pillar-upper"
+                                  style="${`left: ${xpos.value + FLAPPY_XPOS}px; height: ${upperHeight}px;`}"></div>
+                             <div class="pillar pillar-lower"
+                                  style="${`left: ${xpos.value + FLAPPY_XPOS}px; height: ${lowerHeight}px;`}"></div>
+                             </div>`);
+            }
+
+            function touchingPillar(xpos: number, ypos: number): boolean {
+                const inHorizontalRange =
+                    (xpos + FLAPPY_WIDTH >= xlocation) && (xpos <= xlocation + PILLAR_WIDTH);
+                const aboveGapTop = (ypos <= upperHeight);
+                const belowGapBottom = (ypos + FLAPPY_HEIGHT >= upperHeight + PILLAR_GAP);
+                return inHorizontalRange && (aboveGapTop || belowGapBottom);
+            }
         }
     }
 }