@agencecinq/snake 1.0.0

package/README.md

@@ -0,0 +1,172 @@
+[![](https://img.shields.io/npm/v/@agencecinq/snake)](https://www.npmjs.com/package/@agencecinq/snake)
+[![](https://img.shields.io/npm/dm/@agencecinq/snake)](https://www.npmjs.com/package/@agencecinq/snake)
+
+# @agencecinq/snake
+
+> Canvas Snake as a lightweight Web Component.
+
+`<cinq-snake>` runs the game loop and draws square cells into a consumer-owned
+`<canvas>`. Score, overlay, replay UI, layout, and colors stay in your page.
+
+## Installation
+
+```bash
+pnpm add @agencecinq/snake
+```
+
+## Usage
+
+### Web Component (`<cinq-snake>`)
+
+```html
+<cinq-snake cols="21" rows="15">
+  <p>Score <span data-score aria-live="polite">0</span></p>
+  <div class="snake-stage">
+    <canvas tabindex="0" aria-label="Snake. Arrow keys to move."></canvas>
+    <div data-overlay hidden>
+      <p data-status>Game over</p>
+      <button type="button" data-replay>Play again</button>
+    </div>
+  </div>
+</cinq-snake>
+```
+
+```js
+import "@agencecinq/snake";
+```
+
+Importing `@agencecinq/snake` registers the Web Component automatically.
+No manual `init()` call required.
+
+> **HTML is the source of truth.** The component will not auto-set `role`,
+> auto-migrate attributes, or warn about missing labels. Use an a11y linter
+> (axe-core, Lighthouse) to catch invalid markup.
+
+The `[data-score]` span, overlay, and replay button are yours. The host does
+not query them or write to them.
+
+### Required markup
+
+| Attribute / element | Required | Role |
+| ------------------- | -------- | ---- |
+| `<cinq-snake>` | **Yes** | Host. Observes `cols` and `rows`. |
+| `<canvas>` | **Yes** | Playfield. One canvas per host. Give it `tabindex="0"` so arrow keys reach it. |
+
+### Layout and color
+
+Size the canvas yourself. Use `width: 100%` and `aspect-ratio: 21 / 15`
+(or `cols / rows`) for square tiles. After the canvas box changes, call
+`sync()` (a `ResizeObserver` on the canvas is enough).
+
+Ink follows the canvas CSS `color` (inherited). `background-color` and any
+frame (`border`, `outline`, etc.) are yours. The component clears the bitmap
+each frame so that fill shows through. If CSS `color` is missing, the package
+falls back to `#2a2a2a`.
+
+The component does not ship CSS.
+
+```css
+cinq-snake {
+  display: block;
+}
+
+cinq-snake canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 21 / 15;
+  touch-action: none;
+  image-rendering: pixelated;
+  background-color: #c5d0b8;
+  color: #2a2a2a;
+}
+
+cinq-snake canvas:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+}
+```
+
+### Attributes
+
+| Attribute | Default | Description |
+| --------- | ------- | ----------- |
+| `cols` | `21` | Horizontal cell count. Observed. Resets the board when it changes. |
+| `rows` | `15` | Vertical cell count. Observed. Resets the board when it changes. |
+
+Changing `cols` or `rows` also dispatches `snake:replay`.
+
+### API
+
+```js
+const $host = document.querySelector("cinq-snake");
+
+$host.init();
+$host.sync();
+$host.replay();
+$host.destroy();
+$host.score;
+$host.cols;
+$host.rows;
+$host.$canvas;
+```
+
+Call `destroy()` before `init()` if the host is already bound and you mutated
+the light DOM.
+
+### Keyboard
+
+| Key | Function |
+| --- | --- |
+| Arrow keys | Turn. 180-degree reverses are ignored. The first arrow starts the game. |
+| Enter or Space | After a collision, start again (when the canvas still holds focus). |
+
+On a touch screen, swipe on the board to turn.
+
+### Events
+
+Dispatched on the host `<cinq-snake>` (bubble, not cancelable). Prefer
+constants from `@agencecinq/utils`:
+
+| Event | Constant | Detail | When |
+| ----- | -------- | ------ | ---- |
+| `snake:eat` | `SNAKE_EAT` | `{ score }` | After food |
+| `snake:over` | `SNAKE_OVER` | `{ score }` | After a wall or self hit |
+| `snake:replay` | `SNAKE_REPLAY` | `{ score }` | After `replay()`, or after `cols` / `rows` change |
+
+```js
+import { EVENTS } from "@agencecinq/utils";
+
+const $host = document.querySelector("cinq-snake");
+const $score = $host.querySelector("[data-score]");
+const $overlay = $host.querySelector("[data-overlay]");
+const $replay = $host.querySelector("[data-replay]");
+
+$host.addEventListener(EVENTS.SNAKE_EAT, (event) => {
+  $score.textContent = String(event.detail.score);
+});
+
+$host.addEventListener(EVENTS.SNAKE_OVER, () => {
+  $overlay.hidden = false;
+  $replay.focus();
+});
+
+$host.addEventListener(EVENTS.SNAKE_REPLAY, (event) => {
+  $overlay.hidden = true;
+  $score.textContent = String(event.detail.score);
+});
+
+$replay.addEventListener("click", () => {
+  $host.replay();
+});
+```
+
+## Build setup
+
+```bash
+pnpm -C packages/snake build
+```
+
+## Acknowledgments
+
+See the [interactive docs](https://agencecinq.github.io/ui/components/snake/) for live examples.

package/dist/config.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Fallback ink when the canvas has no usable `color`.
+ */
+export declare const color = "#2a2a2a";
+/** Default `cols` when the host has no `cols` attribute. */
+export declare const COLS = 21;
+/** Default `rows` when the host has no `rows` attribute. */
+export declare const ROWS = 15;
+/** Base interval between snake steps, in milliseconds. */
+export declare const STEP_MS = 130;
+/** Fastest interval after score-based speed-up, in milliseconds. */
+export declare const STEP_MS_MIN = 70;
+/** Starting body length, including the head. Faces right from the board center. */
+export declare const INITIAL_LENGTH = 3;
+//# sourceMappingURL=config.d.ts.map

package/dist/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,KAAK,YAAY,CAAC;AAE/B,4DAA4D;AAC5D,eAAO,MAAM,IAAI,KAAK,CAAC;AAEvB,4DAA4D;AAC5D,eAAO,MAAM,IAAI,KAAK,CAAC;AAEvB,0DAA0D;AAC1D,eAAO,MAAM,OAAO,MAAM,CAAC;AAE3B,oEAAoE;AACpE,eAAO,MAAM,WAAW,KAAK,CAAC;AAE9B,mFAAmF;AACnF,eAAO,MAAM,cAAc,IAAI,CAAC"}

package/dist/game.d.ts

@@ -0,0 +1,31 @@
+import { Direction, Point, TickResult } from './types.js';
+/**
+ * Grid state: snake, food, score, collisions.
+ * No DOM, no canvas, no timers. The host asks for a tick on each step.
+ */
+export default class Game {
+    #private;
+    constructor(cols?: number, rows?: number);
+    get cols(): number;
+    get rows(): number;
+    get snake(): readonly Point[];
+    get food(): Point;
+    get score(): number;
+    get alive(): boolean;
+    get started(): boolean;
+    /** Change the grid size and reset the board. */
+    setSize(cols: number, rows: number): void;
+    /** Place a centered snake, spawn food, clear score. Waits for the first turn. */
+    reset(): void;
+    /**
+     * Queue the next heading. 180-degree turns are ignored so the snake cannot
+     * fold onto itself between two ticks. The first accepted key starts movement.
+     */
+    setDirection(next: Direction): void;
+    /**
+     * Advance one cell. Returns `idle` until the first direction, `dead` on a
+     * wall or self hit, `eat` when the head lands on food, otherwise `move`.
+     */
+    tick(): TickResult;
+}
+//# sourceMappingURL=game.d.ts.map

package/dist/game.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"game.d.ts","sourceRoot":"","sources":["../src/game.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAgB/D;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,IAAI;;gBAWX,IAAI,SAAO,EAAE,IAAI,SAAO;IAMpC,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,KAAK,IAAI,SAAS,KAAK,EAAE,CAE5B;IAED,IAAI,IAAI,IAAI,KAAK,CAEhB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,gDAAgD;IAChD,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAMzC,iFAAiF;IACjF,KAAK,IAAI,IAAI;IAsBb;;;OAGG;IACH,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAYnC;;;OAGG;IACH,IAAI,IAAI,UAAU;CAiFnB"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Snake } from './snake.js';
+export { Snake };
+export { color, COLS, ROWS, STEP_MS } from './config.js';
+export type { Detail, Direction, DrawState, Point } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACzD,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,312 @@
+import { EVENTS as e, dispatchEvent as t, parseNumber as n } from "@agencecinq/utils";
+//#region src/config.ts
+var r = "#2a2a2a", i = 21, a = 15, o = 130, s = {
+	up: "down",
+	down: "up",
+	left: "right",
+	right: "left"
+}, c = {
+	up: {
+		x: 0,
+		y: -1
+	},
+	down: {
+		x: 0,
+		y: 1
+	},
+	left: {
+		x: -1,
+		y: 0
+	},
+	right: {
+		x: 1,
+		y: 0
+	}
+}, l = class {
+	#e;
+	#t;
+	#n = [];
+	#r = "right";
+	#i = "right";
+	#a = {
+		x: 0,
+		y: 0
+	};
+	#o = 0;
+	#s = !0;
+	#c = !1;
+	constructor(e = 21, t = 15) {
+		this.#e = Math.max(1, e), this.#t = Math.max(1, t), this.reset();
+	}
+	get cols() {
+		return this.#e;
+	}
+	get rows() {
+		return this.#t;
+	}
+	get snake() {
+		return this.#n;
+	}
+	get food() {
+		return this.#a;
+	}
+	get score() {
+		return this.#o;
+	}
+	get alive() {
+		return this.#s;
+	}
+	get started() {
+		return this.#c;
+	}
+	setSize(e, t) {
+		this.#e = Math.max(1, Math.floor(e)), this.#t = Math.max(1, Math.floor(t)), this.reset();
+	}
+	reset() {
+		let e = Math.min(3, this.#e), t = Math.min(this.#t - 1, Math.floor(this.#t / 2)), n = Math.min(this.#e - 1, Math.max(e - 1, Math.floor(this.#e / 2))), r = [];
+		for (let i = 0; i < e; i += 1) r.push({
+			x: n - i,
+			y: t
+		});
+		this.#n = r, this.#r = "right", this.#i = "right", this.#o = 0, this.#s = !0, this.#c = !1, this.#d();
+	}
+	setDirection(e) {
+		e !== s[this.#r] && (this.#i = e, !this.#c && this.#s && (this.#c = !0));
+	}
+	tick() {
+		if (!this.#s) return "dead";
+		if (!this.#c) return "idle";
+		this.#r = this.#i;
+		let { x: e, y: t } = c[this.#r], n = this.#n[0], r = {
+			x: n.x + e,
+			y: n.y + t
+		};
+		if (this.#l(r)) return this.#s = !1, "dead";
+		let i = r.x === this.#a.x && r.y === this.#a.y;
+		return this.#u(r, i) ? (this.#s = !1, "dead") : (this.#n.unshift(r), i ? (this.#o += 1, this.#d(), "eat") : (this.#n.pop(), "move"));
+	}
+	#l({ x: e, y: t }) {
+		return e < 0 || t < 0 || e >= this.#e || t >= this.#t;
+	}
+	#u(e, t) {
+		let n = t ? this.#n.length : this.#n.length - 1;
+		for (let t = 0; t < n; t += 1) {
+			let n = this.#n[t];
+			if (n.x === e.x && n.y === e.y) return !0;
+		}
+		return !1;
+	}
+	#d() {
+		let e = new Set(this.#n.map((e) => `${e.x},${e.y}`)), t = [];
+		for (let n = 0; n < this.#t; n += 1) for (let r = 0; r < this.#e; r += 1) e.has(`${r},${n}`) || t.push({
+			x: r,
+			y: n
+		});
+		t.length !== 0 && (this.#a = t[Math.floor(Math.random() * t.length)]);
+	}
+}, u = {
+	ArrowUp: "up",
+	ArrowDown: "down",
+	ArrowLeft: "left",
+	ArrowRight: "right"
+}, d = 24, f = class {
+	#e;
+	#t = null;
+	constructor(e) {
+		this.#e = e;
+	}
+	handle = (e) => {
+		let t = u[e.key];
+		t && (e.preventDefault(), this.#e(t));
+	};
+	handlePointerDown = (e) => {
+		this.#t = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	};
+	handlePointerUp = (e) => {
+		let t = this.#t;
+		if (this.#t = null, !t) return;
+		let { clientX: n, clientY: r } = e, i = n - t.x, a = r - t.y;
+		if (!(Math.hypot(i, a) < d)) {
+			if (Math.abs(i) > Math.abs(a)) {
+				this.#e(i > 0 ? "right" : "left");
+				return;
+			}
+			this.#e(a > 0 ? "down" : "up");
+		}
+	};
+	handlePointerCancel = () => {
+		this.#t = null;
+	};
+}, p = class {
+	#e;
+	#t;
+	#n;
+	#r = 0;
+	#i = 0;
+	#a = 0;
+	#o = !1;
+	constructor(e, t, n) {
+		this.#e = e, this.#t = t, this.#n = n;
+	}
+	get running() {
+		return this.#o;
+	}
+	set stepMs(e) {
+		this.#e = e;
+	}
+	hold() {
+		this.#i = 0, this.#a = 0;
+	}
+	start() {
+		this.#o || (this.#o = !0, this.#i = 0, this.#a = 0, this.#r = requestAnimationFrame(this.#s));
+	}
+	stop() {
+		this.#o = !1, this.#r && (cancelAnimationFrame(this.#r), this.#r = 0, this.#i = 0, this.#a = 0);
+	}
+	#s = (e) => {
+		if (!this.#o) return;
+		if (this.#r = requestAnimationFrame(this.#s), this.#i === 0) {
+			this.#i = e, this.#n();
+			return;
+		}
+		let t = Math.min(e - this.#i, this.#e * 3);
+		for (this.#i = e, this.#a += t; this.#o && this.#a >= this.#e;) this.#t(), this.#a -= this.#e;
+		this.#o && this.#n();
+	};
+}, m = class {
+	#e;
+	#t;
+	constructor(e, t) {
+		this.#e = e, this.#t = t;
+	}
+	resize() {
+		let { clientWidth: e, clientHeight: t } = this.#e;
+		if (e === 0 || t === 0) return;
+		let n = window.devicePixelRatio || 1, r = Math.round(e * n), i = Math.round(t * n);
+		(this.#e.width !== r || this.#e.height !== i) && (this.#e.width = r, this.#e.height = i), this.#t.setTransform(n, 0, 0, n, 0, 0);
+	}
+	draw(e, t) {
+		let n = this.#n(e.cols, e.rows);
+		if (!n) return;
+		let { width: r, height: i } = n, a = this.#t;
+		a.imageSmoothingEnabled = !1, a.clearRect(0, 0, r, i);
+		for (let r of e.snake) this.#r(r.x, r.y, n, t, .12);
+		this.#r(e.food.x, e.food.y, n, t, .32);
+	}
+	#n(e, t) {
+		let { clientWidth: n, clientHeight: r } = this.#e;
+		return n === 0 || r === 0 ? null : {
+			width: n,
+			height: r,
+			cols: e,
+			rows: t
+		};
+	}
+	#r(e, t, n, r, i) {
+		let { width: a, height: o, cols: s, rows: c } = n, l = e * a / s, u = t * o / c, d = (e + 1) * a / s - l, f = (t + 1) * o / c - u, p = Math.max(1, Math.round(Math.min(d, f) * i)), m = d - p * 2, h = f - p * 2;
+		m <= 0 || h <= 0 || (this.#t.fillStyle = r, this.#t.fillRect(l + p, u + p, m, h));
+	}
+}, h = class extends HTMLElement {
+	static observedAttributes = ["cols", "rows"];
+	$canvas = null;
+	#e = new l();
+	#t = null;
+	#n = null;
+	#r = null;
+	connectedCallback() {
+		this.init();
+	}
+	disconnectedCallback() {
+		this.destroy(), this.$canvas = null, this.#n = null, this.#r = null;
+	}
+	attributeChangedCallback(e, t, n) {
+		(e === "cols" || e === "rows") && this.#t && t !== n && this.#a(!0);
+	}
+	init() {
+		if (this.#t) return;
+		if (this.$canvas = this.querySelector("canvas"), !this.$canvas) throw Error("Snake must contain a canvas element");
+		let e = this.$canvas.getContext("2d");
+		if (!e) throw Error("Snake could not get a 2d canvas context");
+		this.#n = new m(this.$canvas, e), this.#r = new f(this.#o), this.#t = new p(130, this.#s, this.#c), this.addEventListener("keydown", this.#f), this.$canvas.addEventListener("pointerdown", this.#p), this.$canvas.addEventListener("pointerup", this.#r.handlePointerUp), this.$canvas.addEventListener("pointercancel", this.#r.handlePointerCancel), this.#a(!1), this.sync(), this.#t.start();
+	}
+	destroy() {
+		if (!this.#t) return;
+		let { $canvas: e } = this, t = this.#r;
+		this.#t.stop(), this.#t = null, this.removeEventListener("keydown", this.#f), e?.removeEventListener("pointerdown", this.#p), e && t && (e.removeEventListener("pointerup", t.handlePointerUp), e.removeEventListener("pointercancel", t.handlePointerCancel)), this.#n = null, this.#r = null;
+	}
+	sync() {
+		this.#n?.resize(), this.#c();
+	}
+	replay() {
+		this.#e.reset(), this.#u(), this.sync(), this.#t?.start(), this.$canvas?.focus(), t(this, e.SNAKE_REPLAY, { score: this.#e.score }, { cancelable: !1 });
+	}
+	get score() {
+		return this.#e.score;
+	}
+	get cols() {
+		return this.#e.cols;
+	}
+	get rows() {
+		return this.#e.rows;
+	}
+	#i() {
+		return {
+			cols: Math.max(1, Math.floor(n(this.getAttribute("cols"), 21))),
+			rows: Math.max(1, Math.floor(n(this.getAttribute("rows"), 15)))
+		};
+	}
+	#a(n) {
+		let { cols: r, rows: i } = this.#i();
+		(r !== this.#e.cols || i !== this.#e.rows) && (this.#e.setSize(r, i), this.#u(), this.sync(), this.#t?.start(), n && t(this, e.SNAKE_REPLAY, { score: this.#e.score }, { cancelable: !1 }));
+	}
+	#o = (e) => {
+		if (!this.#e.alive) return;
+		let t = !this.#e.started;
+		this.#e.setDirection(e), t && this.#e.started && (this.#s(), this.#t?.hold());
+	};
+	#s = () => {
+		let n = this.#e.tick();
+		if (n === "eat") {
+			this.#u(), t(this, e.SNAKE_EAT, { score: this.#e.score }, { cancelable: !1 });
+			return;
+		}
+		n === "dead" && this.#l();
+	};
+	#c = () => {
+		this.#n && this.$canvas && this.#n.draw({
+			snake: this.#e.snake,
+			food: this.#e.food,
+			cols: this.#e.cols,
+			rows: this.#e.rows
+		}, this.#d());
+	};
+	#l() {
+		this.#t?.stop(), this.#c(), t(this, e.SNAKE_OVER, { score: this.#e.score }, { cancelable: !1 });
+	}
+	#u() {
+		this.#t && (this.#t.stepMs = Math.max(70, 130 - this.#e.score * 5));
+	}
+	#d() {
+		let { $canvas: e } = this;
+		return e ? getComputedStyle(e).color || "#2a2a2a" : r;
+	}
+	#f = (e) => {
+		let { key: t, target: n } = e;
+		if (!this.#e.alive) {
+			if (n instanceof Element && n.closest("button, a, input, textarea, select")) return;
+			(t === "Enter" || t === " ") && (e.preventDefault(), this.replay());
+			return;
+		}
+		this.#r?.handle(e);
+	};
+	#p = (e) => {
+		let { $canvas: t } = this;
+		t && (t.focus(), t.setPointerCapture(e.pointerId), this.#r?.handlePointerDown(e));
+	};
+};
+customElements.get("cinq-snake") || customElements.define("cinq-snake", h);
+//#endregion
+export { i as COLS, a as ROWS, o as STEP_MS, h as Snake, r as color };

package/dist/keyboard.d.ts

@@ -0,0 +1,13 @@
+import { Direction } from './types.js';
+/**
+ * Arrow keys (and optional swipe) to a heading. The host owns game rules.
+ */
+export default class Keyboard {
+    #private;
+    constructor(onDirection: (direction: Direction) => void);
+    handle: (event: KeyboardEvent) => void;
+    handlePointerDown: (event: PointerEvent) => void;
+    handlePointerUp: (event: PointerEvent) => void;
+    handlePointerCancel: () => void;
+}
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../src/keyboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAW5C;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;;gBAIf,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI;IAIvD,MAAM,GAAI,OAAO,aAAa,KAAG,IAAI,CAUnC;IAEF,iBAAiB,GAAI,OAAO,YAAY,KAAG,IAAI,CAE7C;IAEF,eAAe,GAAI,OAAO,YAAY,KAAG,IAAI,CAsB3C;IAEF,mBAAmB,QAAO,IAAI,CAE5B;CACH"}

package/dist/loop.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Fixed-timestep game loop driven only by `requestAnimationFrame`.
+ * Simulation steps run at `stepMs`. Drawing runs once per animation frame.
+ */
+export default class Loop {
+    #private;
+    constructor(stepMs: number, onTick: () => void, onFrame: () => void);
+    get running(): boolean;
+    set stepMs(value: number);
+    /** Drop leftover time so the next step waits a full interval. */
+    hold(): void;
+    start(): void;
+    stop(): void;
+}
+//# sourceMappingURL=loop.d.ts.map

package/dist/loop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loop.d.ts","sourceRoot":"","sources":["../src/loop.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,IAAI;;gBASX,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE,OAAO,EAAE,MAAM,IAAI;IAMnE,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,iEAAiE;IACjE,IAAI,IAAI,IAAI;IAKZ,KAAK,IAAI,IAAI;IAWb,IAAI,IAAI,IAAI;CAyCb"}

package/dist/renderer.d.ts

@@ -0,0 +1,16 @@
+import { DrawState } from './types.js';
+/**
+ * Canvas 2D painter. The grid always covers the canvas box. Cell size is
+ * `width / cols` by `height / rows`, so cells stretch with the box.
+ */
+export default class Renderer {
+    #private;
+    constructor($canvas: HTMLCanvasElement, context: CanvasRenderingContext2D);
+    /**
+     * Match the bitmap to the CSS size.
+     * Call after layout changes, and before the first draw.
+     */
+    resize(): void;
+    draw(state: DrawState, color: string): void;
+}
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAS5C;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;;gBAIf,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,wBAAwB;IAKzE;;;OAGG;IACH,MAAM,IAAI,IAAI;IAsBd,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;CA4D5C"}

package/dist/snake.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Canvas Snake host. Markup in light DOM is the source of truth.
+ *
+ * Required: a `<canvas>`. Ink follows the canvas CSS `color` (inherited).
+ * The playfield fill and any frame are consumer CSS on the canvas.
+ * `cols` and `rows` (defaults {@link COLS} / {@link ROWS}). Changing them
+ * resets the board. Score, overlay, and replay UI stay in the consumer.
+ * Listen for `snake:eat`, `snake:over`, and `snake:replay`, and call
+ * {@link replay}.
+ */
+export declare class Snake extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    $canvas: HTMLCanvasElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** Bind markup + listeners. Call {@link destroy} first if already bound. */
+    init(): void;
+    /** Detaches listeners and stops the animation loop. */
+    destroy(): void;
+    /** Re-measure the canvas bitmap. Call after layout changes. */
+    sync(): void;
+    /** Reset the board and run the loop again. */
+    replay(): void;
+    get score(): number;
+    get cols(): number;
+    get rows(): number;
+}
+//# sourceMappingURL=snake.d.ts.map

package/dist/snake.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snake.d.ts","sourceRoot":"","sources":["../src/snake.ts"],"names":[],"mappings":"AAQA;;;;;;;;;GASG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IACpC,MAAM,CAAC,kBAAkB,WAAoB;IAE7C,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAOzC,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAO5B,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI;IAYP,4EAA4E;IAC5E,IAAI,IAAI,IAAI;IAkCZ,uDAAuD;IACvD,OAAO,IAAI,IAAI;IA0Bf,+DAA+D;IAC/D,IAAI,IAAI,IAAI;IAKZ,8CAA8C;IAC9C,MAAM,IAAI,IAAI;IAcd,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;CA0JF"}

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+export type Direction = "up" | "down" | "left" | "right";
+export type TickResult = "idle" | "move" | "eat" | "dead";
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Detail {
+    score: number;
+}
+/** Snapshot the renderer needs. The host passes this, not the Game class. */
+export interface DrawState {
+    snake: readonly Point[];
+    food: Point;
+    cols: number;
+    rows: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,6EAA6E;AAC7E,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,SAAS,KAAK,EAAE,CAAC;IACxB,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@agencecinq/snake",
+  "version": "1.0.0",
+  "description": "Canvas Snake as a lightweight Web Component.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Jérémy Levron <jeremy@agencecinq.com> (https://agencecinq.com)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agencecinq/ui.git",
+    "directory": "packages/snake"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@agencecinq/utils": ">=7.3.0"
+  },
+  "devDependencies": {
+    "vite": "^8.2.0",
+    "vite-plugin-dts": "^5.0.3",
+    "@agencecinq/utils": "7.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  }
+}