1 files changed, 28 insertions, 2 deletions
diff --git a/site/main.mjs b/site/main.mjs
index 31f1375..703062d 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -112,8 +112,7 @@ function renderArena(robos, delta=0.0) {
             robo.speedx, robo.speedy
         ].map(x => timeScale * x);
 
-        const x = robo.x + velx;
-        const y = robo.y + vely;
+        const [_, x, y] = bounce(25, robo.heading, robo.x + velx, robo.y + vely, canvas.width, canvas.height);
         //console.debug('bjc render robo', robo, velx, vely, x, y)
         renderRobo(ctx, x, y);
     });
@@ -154,6 +153,26 @@ function loadForth(taintedPath) {
         });
 }
 
+function bounce(radius, heading, x, y, width, height) {
+    // todo: don't just clamp the x/y, instead calculate based on
+    // where the intersection with the wall is.
+    if (y < radius) {
+        // top wall
+        return [-1 * heading, x, radius];
+    } else if (y >= height-radius) {
+        // bottom wall
+        return [-1 * heading, x, height-radius];
+    } else if (x < radius) {
+        // left wall
+        return [heading - 180, radius, y];
+    } else if (x >= width-radius) {
+        // right wall
+        return [180 - heading, width-radius, y];
+    } else {
+        return [heading, x, y];
+    }
+}
+
 async function loaded() {
     const roboWorker = new Worker('robo.mjs', { type: 'module' });
     const robo = {
@@ -206,6 +225,13 @@ async function loaded() {
             robo.speedy = speedy;
             robo.x += speedx;
             robo.y += speedy;
+            const canvas = document.querySelector(CANVAS_SELECTOR);
+            const [newHeading, newx, newy] = bounce(25, trans.vars.heading, robo.x, robo.y, canvas.width, canvas.height);
+            if (newHeading != trans.vars.heading) {
+                roboWorker.postMessage({ kind: 'setHeading', heading: newHeading });
+                robo.x = newx;
+                robo.y = newy;
+            }
             renderArena([robo]);
             break;
         default: