feat(airport): draw the entry channel to the tray edge

Board-edge runways reach the tray outline with a threshold gate, fixed apron slabs mark each side, and a connected side lights the whole plane-to-stand channel in the neutral hint colour.

labs/airport/README.md

@@ -8,6 +8,8 @@
 
 点击地面飞机起飞，点击场外停机坪上的飞机降落；左右转每次 60°。成功、失败与旋转都消耗一次。灰色轨道不分颜色；来机匹配彩色专用机位。P 标记表示已停好的来机。它再次起飞后，停到实际出口那条边的停机坪，仍需重新停好。
 
+板边轨道一直画到托盘外缘并带一道门槛，托盘外的浅色停机坪航线固定不动。当等待机在当前朝向下接得上同色机位时，整条"飞机 → 盘边开口 → 机位"的通道用中性强调色点亮；旋转时通道会亮灭，据此判断能否进场。
+
 ## 关卡证据
 
 所有数据冻结在 `levels.js`。`solution` 是最优免费解，`experience` 是制作意图回放；第三关后者演示来机阻挡及再次起飞换侧。

labs/airport/app.js

@@ -1,4 +1,4 @@
-import { AirportGame, SIDES, boardAt, catalogs, parkedCount, copy, boardRadius, waitingPose, apronDistance } from './core.js';
+import { AirportGame, SIDES, boardAt, catalogs, parkedCount, copy, boardRadius, waitingPose, apronDistance, trayHull, rimCrossing, bayNormal, TRAY_PAD } from './core.js';
 import { LEVELS } from './levels.js';
 import { requestReward } from './rewards.js';
 import { position, PORTS, hexPoints, trackPoints, sweepPath } from '../../src/path-math.js';
@@ -22,7 +22,7 @@ try { const value = JSON.parse(localStorage.getItem(STORAGE)); if (value && Arra
 function persist() { try { localStorage.setItem(STORAGE, JSON.stringify(saved)); } catch {} }
 let index = Number.isInteger(saved.last) && saved.last >= 0 && saved.last < LEVELS.length ? saved.last : 0;
 let game, motions = [], rotation = null, feedback = null, queue = [], requestId = 0, diagnosis = null, generation = 0;
-const HINT_LEVELS = 10; // tutorial levels auto-bring in planes and show the approach hint
+const GATE_OVERSHOOT = 0.12, GATE_HALF = 0.16, APRON_WIDTH = 1.9;
 let view = { width: 390, height: 460, size: 28, ox: 195, oy: 230 }, audioContext;
 const worker = new Worker(new URL('./solver-worker.js', import.meta.url), { type: 'module' });
 worker.onmessage = ({ data }) => {
@@ -69,7 +69,7 @@ function screen(point) { return { x: view.ox + point.x * view.size, y: view.oy +
 // exists (whether or not a plane currently blocks it). Used to prompt the player
 // and to draw the approach guide; the player still performs the landing.
 function approachHints() {
-  if (index >= HINT_LEVELS || game.won || game.deadlocked) return [];
+  if (game.won || game.deadlocked) return [];
   const routes = catalogs(game.level)[game.state.orientation].arrivals;
   const blockers = game.state.planes.filter(p => (p.state === 'ground' || p.state === 'parked'))
     .map(p => ({ ...position(p.q, p.r), id: p.id }));
@@ -79,7 +79,7 @@ function approachHints() {
     const route = routes.find(r => r.side === plane.side && r.color === plane.color);
     if (!route) continue; // no entrance / no connected runway from this edge
     const hit = sweepPath(route.points, blockers.filter(b => b.id !== plane.id));
-    hints.push({ plane, from: planeLocation(plane), points: [planeLocation(plane), ...route.points.slice(1)], color: pigments[plane.color].color, blocker: hit ? hit.blocker : null });
+    hints.push({ plane, from: planeLocation(plane), points: [planeLocation(plane), ...route.points], blocker: hit ? hit.blocker : null });
   }
   return hints;
 }
@@ -251,9 +251,20 @@ function draw(now){
   const dpr=Math.min(devicePixelRatio||1,2);ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,view.width,view.height);
   ctx.translate(view.ox,view.oy);ctx.scale(view.size,view.size);
   const board=rotation?rotation.old:catalogs(game.level)[game.state.orientation].board;
+  const hullPts=trayHull(board.cells);
+  // Fixed apron slabs sit under everything: waiting planes park on a soft lane outside
+  // the tray, on each side's flat-side normal, so a plane's side is readable before any
+  // hint appears. They never turn with the base.
+  const radius=boardRadius(game.level.cells),apronR=apronDistance(radius);
+  for(let side=0;side<6;side++){
+    const n=bayNormal(side),count=Math.max(1,game.level.arrivals.filter(a=>a.side===side).length);
+    const inner=rimCrossing(hullPts,{x:0,y:0},n)+0.20,outer=apronR+(count-1)*1.12+0.85;
+    if(!(outer>inner))continue;
+    line([{x:n.x*inner,y:n.y*inner},{x:n.x*outer,y:n.y*outer}],materials.shadowSoft,APRON_WIDTH);
+  }
   ctx.save();
   if(rotation){const p=Math.min(1,(now-rotation.start)/rotation.duration),u=p*p*(3-2*p);ctx.rotate(rotation.direction*Math.PI/3*u);}
-  const tray=grow=>roundedPoly(hull(board.cells.flatMap(c=>{const p=position(c.q,c.r);return hexPoints(p.x,p.y,1.34+grow);})),.9);
+  const tray=grow=>roundedPoly(hull(board.cells.flatMap(c=>{const p=position(c.q,c.r);return hexPoints(p.x,p.y,TRAY_PAD+grow);})),.9);
   polygon(tray(.06).map(q=>({x:q.x,y:q.y+.20})),materials.shadowSoft);
   polygon(tray(0).map(q=>({x:q.x,y:q.y+.10})),materials.shadow);
   polygon(tray(0),materials.tray);
@@ -263,6 +274,14 @@ function draw(now){
   const cellKeys=new Set(board.cells.map(c=>key(c.q,c.r)));
   const trackWidth=.11,portRadius=Math.hypot(PORTS[0].x,PORTS[0].y),visualRadius=Math.max(0,.90*FLAT-trackWidth/2-.01);
   const exterior=(cell,d)=>!cellKeys.has(key(cell.q+DIRS[d][0],cell.r+DIRS[d][1]));
+  // A boundary runway then reaches the tray outline instead of stopping inside the brick,
+  // so an off-board plane can be read as joining one specific opening. The reach rotates
+  // with the base, exactly like the track it belongs to.
+  const gateReach=(point,dir)=>{
+    const n=PORTS[dir],l=Math.hypot(n.x,n.y),ux=n.x/l,uy=n.y/l,t=rimCrossing(hullPts,point,{x:ux,y:uy});
+    return t===null?null:{x:point.x+ux*(t+GATE_OVERSHOOT),y:point.y+uy*(t+GATE_OVERSHOOT),ux,uy,dir};
+  };
+  const gates=[];
   for(const cell of board.cells){
     const p=position(cell.q,cell.r);
     for(let d=0;d<6;d++){
@@ -272,9 +291,13 @@ function draw(now){
       const dx0=exterior(cell,d)?(points[0].x-p.x)*shrink:0,dy0=exterior(cell,d)?(points[0].y-p.y)*shrink:0;
       const dx1=exterior(cell,b)?(last.x-p.x)*shrink:0,dy1=exterior(cell,b)?(last.y-p.y)*shrink:0;
       points.forEach((q,i)=>{const t=i/(points.length-1),u=1-t;q.x-=u*u*u*dx0+t*t*t*dx1;q.y-=u*u*u*dy0+t*t*t*dy1;});
+      if(exterior(cell,d)){const g=gateReach(points[0],d);if(g){points.unshift(g);gates.push(g);}}
+      if(exterior(cell,b)){const g=gateReach(points.at(-1),b);if(g){points.push(g);gates.push(g);}}
       line(points,materials.track,trackWidth);
     }
   }
+  // A perpendicular threshold at each opening, so a runway end reads as a gate.
+  for(const g of gates)line([{x:g.x-g.uy*GATE_HALF,y:g.y+g.ux*GATE_HALF},{x:g.x+g.uy*GATE_HALF,y:g.y-g.ux*GATE_HALF}],materials.track,trackWidth);
   ctx.restore();
   // Stands, like the aircraft, never turn with the base.
   for(const stand of game.level.stands){
@@ -332,21 +355,26 @@ function draw(now){
     line([{x:x-k,y:y-k},{x:x+k,y:y+k}],materials.blocked,.11);
     line([{x:x-k,y:y+k},{x:x+k,y:y-k}],materials.blocked,.11);
   }
-  // Approach guide (tutorial levels): when a waiting plane's edge connects to a
-  // same-colour stand, draw the coloured runway (even past a blocker), a looping
-  // ripple at the plane, and an arrow gliding toward the stand. A blocker ripples
-  // red. This only guides; the player still performs the landing.
+  // Runway read: when a waiting plane's edge connects to a same-colour stand, draw the
+  // whole channel from the plane, across the tray edge, to the stand. The highlight is a
+  // neutral hint colour (never the plane colour: the runway does not carry the match),
+  // a ripple at the plane and a ring at the opening, and an arrow gliding inbound. A
+  // blocker still ripples red. This only guides; the player still performs the landing.
   if (!motions.length && !rotation && !document.querySelector('dialog[open]')) {
     const hints = approachHints(), T = now / 1000;
     for (const h of hints) {
       const pts = h.points;
-      line(pts, h.color, .08);
+      line(pts, materials.hintGlow, .19);
+      line(pts, materials.hint, .085);
       const at = along(pts, (T * 0.6) % 1), dir = at.angle - Math.PI / 2, s = .26;
-      polygon([{ x: at.x + Math.cos(dir) * s, y: at.y + Math.sin(dir) * s }, { x: at.x + Math.cos(dir + 2.4) * s, y: at.y + Math.sin(dir + 2.4) * s }, { x: at.x + Math.cos(dir - 2.4) * s, y: at.y + Math.sin(dir - 2.4) * s }], h.color);
+      polygon([{ x: at.x + Math.cos(dir) * s, y: at.y + Math.sin(dir) * s }, { x: at.x + Math.cos(dir + 2.4) * s, y: at.y + Math.sin(dir + 2.4) * s }, { x: at.x + Math.cos(dir - 2.4) * s, y: at.y + Math.sin(dir - 2.4) * s }], world.ink);
+      const mouth = pts[1] || h.from;
+      ctx.save(); ctx.globalAlpha = .9; ctx.beginPath(); ctx.arc(mouth.x, mouth.y, .34, 0, Math.PI * 2);
+      ctx.strokeStyle = materials.hint; ctx.lineWidth = .10; ctx.stroke(); ctx.restore();
       for (const phase of [T % 1, (T + .5) % 1]) {
         ctx.save(); ctx.globalAlpha = (1 - phase) * .8;
         ctx.beginPath(); ctx.arc(h.from.x, h.from.y, .5 + phase * 1.2, 0, Math.PI * 2);
-        ctx.strokeStyle = h.color; ctx.lineWidth = .10; ctx.stroke(); ctx.restore();
+        ctx.strokeStyle = materials.hint; ctx.lineWidth = .10; ctx.stroke(); ctx.restore();
       }
       const blocker = h.blocker && game.state.planes.find(p => p.id === h.blocker);
       if (blocker) {

labs/airport/core.js

@@ -1,6 +1,6 @@
 // Airport rules. Rendering never supplies occupancy or chooses a destination.
 import { DIRS, key, opposite, rotateBoard, trace, validateLevel as validateBase, canRotate } from '../../src/core.js';
-import { PORTS, position, pathPoints, sweepPath } from '../../src/path-math.js';
+import { PORTS, position, pathPoints, sweepPath, hexPoints } from '../../src/path-math.js';
 
 // Flat-top edges in screen space. Compass names hid that waiting bays sit on the six sides.
 export const SIDES = ['上方', '右上方', '右下方', '下方', '左下方', '左上方'];
@@ -10,18 +10,50 @@ export function boardRadius(cells) {
 export function apronDistance(radius) {
   return Math.sqrt(3) * (radius + 0.5) + 1.15;
 }
+// The cell cluster's outline is pointy-top: its six wide flat sides sit half a
+// step (30°) from the port normals, so bays rest on those sides, never on a point.
+export function bayNormal(side) {
+  const n = PORTS[side], length = Math.hypot(n.x, n.y), x = n.x / length, y = n.y / length;
+  const c = Math.cos(Math.PI / 6), s = Math.sin(Math.PI / 6);
+  return { x: x * c - y * s, y: x * s + y * c };
+}
 export function waitingPose(plane, planes, radius) {
   const group = planes.filter(p => p.kind === 'arrival' && p.state === 'waiting' && p.side === plane.side);
   const at = Math.max(0, group.findIndex(p => p.id === plane.id));
   const offset = group.length ? at * 1.12 : 0;
-  const n = PORTS[plane.side], length = Math.hypot(n.x, n.y), x = n.x / length, y = n.y / length;
-  // The cell cluster's outline is pointy-top: its six wide flat sides sit half a
-  // step (30°) from the port normals, so bays rest on those sides, never on a point.
-  const c = Math.cos(Math.PI / 6), s = Math.sin(Math.PI / 6);
-  const bx = x * c - y * s, by = x * s + y * c;
+  const { x: bx, y: by } = bayNormal(plane.side);
   const d = apronDistance(radius);
   return { x: bx * (d + offset), y: by * (d + offset), angle: Math.atan2(-by, -bx) + Math.PI / 2 };
 }
+
+// White tray outline in board-local units, shared by drawing, the edge-runway
+// reach and the runway-read tests. A convex hull, so ray crossings are unambiguous.
+export const TRAY_PAD = 1.34;
+const hullCache = new WeakMap();
+export function trayHull(cells) {
+  if (hullCache.has(cells)) return hullCache.get(cells);
+  const points = cells.flatMap(c => { const p = position(c.q, c.r); return hexPoints(p.x, p.y, TRAY_PAD); });
+  const sorted = [...points].sort((a, b) => a.x - b.x || a.y - b.y), lower = [], upper = [];
+  const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+  for (const q of sorted) { while (lower.length >= 2 && cross(lower.at(-2), lower.at(-1), q) <= 0) lower.pop(); lower.push(q); }
+  for (const q of sorted.reverse()) { while (upper.length >= 2 && cross(upper.at(-2), upper.at(-1), q) <= 0) upper.pop(); upper.push(q); }
+  const hull = [...lower.slice(0, -1), ...upper.slice(0, -1)];
+  hullCache.set(cells, hull);
+  return hull;
+}
+// Distance from `from` (inside the hull) to the tray outline along unit `dir`.
+export function rimCrossing(hull, from, dir) {
+  let exit = null;
+  for (let i = 0; i < hull.length; i++) {
+    const a = hull[i], b = hull[(i + 1) % hull.length];
+    const ex = b.x - a.x, ey = b.y - a.y, den = dir.x * ey - dir.y * ex;
+    if (Math.abs(den) < 1e-12) continue;
+    const wx = a.x - from.x, wy = a.y - from.y;
+    const t = (wx * ey - wy * ex) / den, u = (wx * dir.y - wy * dir.x) / den;
+    if (t > 0 && u >= -1e-9 && u <= 1 + 1e-9 && (exit === null || t > exit)) exit = t;
+  }
+  return exit;
+}
 export const copy = value => structuredClone(value);
 const onBoard = plane => plane.state === 'ground' || plane.state === 'parked';
 const catalogCache = new WeakMap();