moshcode 0.45.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "moshcode",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "type": "module",
   "description": "moshcode — a metal wrapper for coding engines and native UGig/CoinPay workflow CLIs, with OpenPRD and moshscript",
   "repository": {

package/src/games-breakout.mjs

@@ -4,6 +4,7 @@
 // decides the angle it leaves at, so the paddle is a steering wheel rather than
 // a wall. Without that you cannot dig a channel up the side of the wall, and
 // digging a channel is the entire reason anybody still plays this.
+import { ballCell } from "./games-draw.mjs";
 import { acid, amber, bone, danger, rgb } from "./ui.mjs";
 
 export const WIDTH = 40;
@@ -197,7 +198,10 @@ export const BREAKOUT = {
     }
 
     for (let i = 0; i < PADDLE_W; i++) put(state.paddle + i, PADDLE_ROW, bone("▀"));
-    put(Math.round(state.ball.x), Math.round(state.ball.y), state.stuck ? amber("●") : bone("●"));
+    // Drawn on half-rows, so the ball steps the same distance down the wall as
+    // it does across it. See games-draw.mjs.
+    const ball = ballCell(state.ball.x, state.ball.y);
+    put(ball.col, ball.row, (state.stuck ? amber : bone)(ball.glyph));
 
     return grid.map((row) => row.map((cell) => cell ?? " ").join(""));
   },

package/src/games-draw.mjs

@@ -0,0 +1,50 @@
+// Shared drawing for the things in the arcade that move on a diagonal.
+//
+// A terminal cell is about twice as tall as it is wide, so a board drawn one
+// object per cell has half the resolution going down that it has going across.
+// For a ball that is not a rounding detail, it is the whole reason the motion
+// looks wrong. Two things fall out of it, and both of them read as bad physics
+// rather than as a coarse grid:
+//
+// A step sideways moves the ball one pixel and a step down moves it two, so the
+// same ball appears to travel faster down the board than across it, and a
+// trajectory the maths has at forty-five degrees is drawn at sixty.
+//
+// Worse, the two steps keep their own schedules. Crossing into the next column
+// and crossing into the next row almost never land on the same tick, so a ball
+// going diagonally does not move diagonally — it hops sideways, then a tick or
+// two later hops down. Measured on pong, the ball holds a cell for four ticks,
+// four ticks, then two and two as a row change splits one of those spans. That
+// 4-4-2-2 stutter, three or four times a second, is what is left of the jiggle
+// after the clock was fixed.
+//
+// Half blocks fix both. `▀` and `▄` each fill half a cell, which is close to
+// square, so the ball is drawn on a grid with the same pitch both ways: it
+// steps the same distance whichever way it goes, a row is two steps rather than
+// one, and the corner it turns is half as wide. It is also a better ball than
+// `●` was — a square pixel moving on a square grid, rather than a round dot
+// snapping between cells twice its own height apart.
+
+/**
+ * Where to draw a ball whose true position is (x, y) in board coordinates.
+ *
+ * `y` is a row centre, so row r covers y from r - 0.5 up to r + 0.5: below the
+ * centre the ball is in the top half of the cell, at or above it the bottom.
+ * Returns the cell to write into and the half block to write there.
+ */
+export function ballCell(x, y) {
+  const col = Math.round(x);
+  const row = Math.round(y);
+  return { col, row, glyph: y < row ? "▀" : "▄" };
+}
+
+/**
+ * The ball's position in half-rows — the unit it is actually drawn in.
+ *
+ * Only the tests use this, to assert that a step down the board is the same
+ * size as a step across it.
+ */
+export const halfRow = (y) => {
+  const row = Math.round(y);
+  return y < row ? row * 2 : row * 2 + 1;
+};

package/src/games-pong.mjs

@@ -7,6 +7,7 @@
 // A flat return it will always get; one taken off the end of your paddle it will
 // not. That is the whole game, and it is why the angle off the paddle depends on
 // where the ball hit it.
+import { ballCell } from "./games-draw.mjs";
 import { acid, bone, danger, dim } from "./ui.mjs";
 
 export const WIDTH = 44;
@@ -164,7 +165,10 @@ export const PONG = {
 
     for (const row of paddleRows(state.you)) put(YOU_COL, row, acid("█"));
     for (const row of paddleRows(state.them)) put(THEM_COL, row, danger("█"));
-    put(Math.round(state.ball.x), Math.round(state.ball.y), bone("●"));
+    // Drawn on half-rows, so the ball steps the same distance up the table as
+    // it does across it. See games-draw.mjs.
+    const ball = ballCell(state.ball.x, state.ball.y);
+    put(ball.col, ball.row, bone(ball.glyph));
 
     return grid.map((row, y) => row.map((cell, x) => (
       // The net, which is only there so the middle of the table has a middle.