"use strict"; "use client"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = MgLaneRunner; var _react = require("react"); var _react2 = require("@chakra-ui/react"); function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } const DT = 1 / 60; const FIELD_W = 360; const FIELD_H = 560; const PLAYER_Y = 460; const MAX_TICKS = 216000; const DEFAULT_COLORS = { ground: "#2b2f36", speck: "#353a43", line: "#5a606b", accent: "#fbbf24", panel: "rgba(18,21,13,0.62)", label: "#c9d4b0", text: "#eef1e4", card: "#1c2216", camo: ["#262d1e", "#2f3825", "#12150d", "#3a3426", "#2a3320"] }; function MgLaneRunner({ game = "lane-runner", hint = null, language = "nl", ...rest }) { const canvasRef = (0, _react.useRef)(null); const optionsRef = (0, _react.useRef)(null); const engine = (0, _react.useRef)(null); const scrollRef = (0, _react.useRef)(0); const shown = (0, _react.useRef)(null); const sendStatus = detail => { window.dispatchEvent(new CustomEvent("mg:status", { detail: { game, ...detail } })); }; const allowed = control => { const controls = optionsRef.current?.controls; return !controls || controls.includes(control); }; const report = run => { const score = Math.floor(run.score); if (shown.current?.score === score && shown.current?.secondary === run.collected) return; shown.current = { score, secondary: run.collected }; sendStatus(shown.current); }; const applyOptions = options => { optionsRef.current = options || {}; sendStatus({ hint: hint ?? hintFor(optionsRef.current.controls), controls: "sides", secondary: 0 }); }; const finish = () => { const state = engine.current; state.moves.push([state.tick, "E"]); engine.current = null; window.dispatchEvent(new CustomEvent("mg:finish", { detail: { game, moves: state.moves } })); }; const advance = seconds => { const state = engine.current; state.pool += seconds; while (state.pool >= DT && engine.current) { state.pool -= DT; if (state.pending !== null && state.pending !== state.run.lane) { state.run.lane = state.pending; state.moves.push([state.tick, state.pending]); } state.pending = null; state.run.step(); state.tick += 1; if (state.run.dead || state.tick >= MAX_TICKS) { report(state.run); finish(); return; } } report(state.run); }; const steer = delta => { const state = engine.current; if (!state) return; const from = state.pending !== null ? state.pending : state.run.lane; state.pending = Math.max(0, Math.min(state.run.rules.lanes - 1, from + delta)); }; (0, _react.useEffect)(() => { const onOptions = event => { if (event.detail?.game === game) applyOptions(event.detail.options); }; const onStart = event => { if (event.detail?.game !== game) return; applyOptions(event.detail.options); engine.current = { run: createLaneRun(optionsRef.current, event.detail.seed), moves: [], tick: 0, pool: 0, pending: null }; shown.current = null; }; const onResult = event => { if (event.detail?.game !== game) return; sendStatus({ secondary: event.detail.stats?.collected || 0 }); }; const onCard = event => { if (event.detail?.game !== game) return; const detail = event.detail; const title = optionsRef.current.title || "Lane Runner"; detail.canvas = drawCard(optionsRef.current, { ...detail, title }); detail.text = `${detail.name ? `${detail.name} haalde ` : "Ik haalde "}${detail.score} punten in ${title}. Kun jij dat verslaan?`; }; const onControl = event => { if (event.detail?.game !== game) return; if (event.detail.direction === "L") steer(-1); if (event.detail.direction === "R") steer(1); }; const onKey = event => { if (event.ctrlKey || event.metaKey || event.altKey || !allowed("keys")) return; if (engine.current) { if (event.key === "ArrowLeft" || event.key === "a") { event.preventDefault(); steer(-1); } else if (event.key === "ArrowRight" || event.key === "d") { event.preventDefault(); steer(1); } } else if ((event.key === " " || event.key === "Enter") && (!document.activeElement || document.activeElement === document.body)) { event.preventDefault(); window.dispatchEvent(new CustomEvent("mg:request-start", { detail: { game } })); } }; window.addEventListener("mg:options", onOptions); window.addEventListener("mg:control", onControl); window.addEventListener("mg:start", onStart); window.addEventListener("mg:result", onResult); window.addEventListener("mg:card", onCard); window.addEventListener("keydown", onKey); window.dispatchEvent(new CustomEvent("mg:ready", { detail: { game } })); const canvas = canvasRef.current; const ratio = Math.min(window.devicePixelRatio || 1, 2); canvas.width = FIELD_W * ratio; canvas.height = FIELD_H * ratio; const context = canvas.getContext("2d"); context.setTransform(ratio, 0, 0, ratio, 0, 0); const specks = Array.from({ length: 28 }, () => ({ x: Math.random() * FIELD_W, y: Math.random() * FIELD_H, r: 1.5 + Math.random() * 2.5 })); let frame; let last = performance.now(); const loop = now => { const seconds = Math.min((now - last) / 1000, 0.05); last = now; if (engine.current) { scrollRef.current += engine.current.run.speed * seconds; advance(seconds); } else { scrollRef.current += 60 * seconds; } if (optionsRef.current) { drawField(context, specks, optionsRef.current, engine.current?.run, scrollRef.current); } frame = requestAnimationFrame(loop); }; frame = requestAnimationFrame(loop); return () => { cancelAnimationFrame(frame); window.removeEventListener("mg:options", onOptions); window.removeEventListener("mg:control", onControl); window.removeEventListener("mg:start", onStart); window.removeEventListener("mg:result", onResult); window.removeEventListener("mg:card", onCard); window.removeEventListener("keydown", onKey); engine.current = null; }; }, [game]); const onPointer = event => { const state = engine.current; if (!state || !allowed("tap")) return; const box = event.currentTarget.getBoundingClientRect(); const lane = Math.floor((event.clientX - box.left) / box.width * state.run.rules.lanes); state.pending = Math.max(0, Math.min(state.run.rules.lanes - 1, lane)); }; return /*#__PURE__*/React.createElement(_react2.Box, _extends({ w: "full", css: { userSelect: "none", touchAction: "none" } }, rest), /*#__PURE__*/React.createElement("canvas", { ref: canvasRef, onPointerDown: onPointer, role: "img", "aria-label": "Spelveld", style: { display: "block", width: "100%", height: "auto", aspectRatio: "360 / 560" } })); } const IMAGES = new Map(); function loadSprite(src) { if (!IMAGES.has(src)) { const image = new window.Image(); image.src = src; IMAGES.set(src, image); } return IMAGES.get(src); } function rounded(context, x, y, width, height, radius) { context.beginPath(); if (context.roundRect) context.roundRect(x, y, width, height, radius);else context.rect(x, y, width, height); } function drawItem(context, sprite, time) { const name = sprite?.image ? "image" : typeof sprite === "string" ? sprite : sprite?.sprite; if (name === "image") { const image = loadSprite(sprite.image); if (image.complete && image.naturalWidth) context.drawImage(image, -24, -24, 48, 48); } else if (name === "rock") { context.fillStyle = "#8b8f7c"; context.beginPath(); context.ellipse(0, 0, 25, 19, 0.3, 0, Math.PI * 2); context.fill(); context.fillStyle = "#6e7262"; context.beginPath(); context.ellipse(5, 4, 14, 9, 0.3, 0, Math.PI * 2); context.fill(); } else if (name === "mine") { context.fillStyle = "#12150d"; context.beginPath(); context.arc(0, 0, 18, 0, Math.PI * 2); context.fill(); context.strokeStyle = "#eef1e4"; context.lineWidth = 3; context.stroke(); context.fillStyle = Math.floor(time * 4) % 2 ? "#ee7b1f" : "#eef1e4"; context.beginPath(); context.arc(0, 0, 5, 0, Math.PI * 2); context.fill(); } else if (name === "jerrycan") { context.fillStyle = "#c75f0f"; rounded(context, -8, -25, 16, 9, 3); context.fill(); context.fillStyle = "#ee7b1f"; rounded(context, -15, -19, 30, 38, 6); context.fill(); context.fillStyle = "#151a0f"; context.fillRect(-9, -3, 18, 3); context.fillRect(-9, 5, 18, 3); } else if (name === "cone") { context.fillStyle = "#f97316"; context.beginPath(); context.moveTo(0, -22); context.lineTo(16, 18); context.lineTo(-16, 18); context.closePath(); context.fill(); context.fillStyle = "#f8fafc"; context.fillRect(-9, -2, 18, 6); } else { context.fillStyle = "#fbbf24"; context.beginPath(); context.arc(0, 0, 16, 0, Math.PI * 2); context.fill(); context.strokeStyle = "#b45309"; context.lineWidth = 3; context.stroke(); } } function drawPlayer(context, player) { if (player?.image) { const image = loadSprite(player.image); if (image.complete && image.naturalWidth) context.drawImage(image, -28, -44, 56, 88); return; } const truck = player?.sprite === "truck"; context.fillStyle = "#0d0f09"; rounded(context, -26, -32, 9, 20, 3); context.fill(); rounded(context, 17, -32, 9, 20, 3); context.fill(); rounded(context, -26, 14, 9, 20, 3); context.fill(); rounded(context, 17, 14, 9, 20, 3); context.fill(); context.fillStyle = truck ? "#5d6b30" : "#2563eb"; rounded(context, -19, -42, 38, 84, 7); context.fill(); context.fillStyle = truck ? "#4a5626" : "#1d4ed8"; rounded(context, -19, -42, 38, 28, 7); context.fill(); context.fillStyle = truck ? "#c9d4b0" : "#bfdbfe"; rounded(context, -13, -36, 26, 9, 3); context.fill(); context.fillStyle = truck ? "#7b8a40" : "#3b82f6"; rounded(context, -16, -8, 32, 46, 5); context.fill(); if (truck) { context.strokeStyle = "#5d6b30"; context.lineWidth = 2; for (let y = 2; y < 36; y += 11) { context.beginPath(); context.moveTo(-16, y); context.lineTo(16, y); context.stroke(); } } context.fillStyle = "#f1e6a0"; context.beginPath(); context.arc(-12, -43, 2.5, 0, Math.PI * 2); context.fill(); context.beginPath(); context.arc(12, -43, 2.5, 0, Math.PI * 2); context.fill(); } function spriteFor(options, type) { const found = (Array.isArray(options.items) ? options.items : []).find(item => item && item.key === type.key); if (found?.image) return { image: found.image }; return found?.sprite || type.key; } function hintFor(controls) { const keys = !controls || controls.includes("keys"); const tap = !controls || controls.includes("tap"); if (keys && tap) return "Pijltjestoetsen, of klik of tik op de baan waar je heen wilt. Spatie start een nieuw spel."; if (keys) return "Pijltjestoetsen. Spatie start een nieuw spel."; return tap ? "Klik of tik op de baan waar je heen wilt." : ""; } function paletteOf(options) { const colors = options.colors || {}; return { ...DEFAULT_COLORS, ground: colors.field || DEFAULT_COLORS.ground, speck: colors.detail || DEFAULT_COLORS.speck, line: colors.line || DEFAULT_COLORS.line, accent: colors.accent || DEFAULT_COLORS.accent }; } function drawField(context, specks, options, run, scroll) { const colors = paletteOf(options); const rules = run?.rules || runnerRules(options); const laneWidth = FIELD_W / rules.lanes; context.fillStyle = colors.ground; context.fillRect(0, 0, FIELD_W, FIELD_H); context.fillStyle = colors.speck; for (const speck of specks) { const y = (speck.y + scroll) % (FIELD_H + 20); context.beginPath(); context.arc(speck.x, y - 10, speck.r, 0, Math.PI * 2); context.fill(); } context.strokeStyle = colors.line; context.lineWidth = 3; context.setLineDash([24, 22]); context.lineDashOffset = -(scroll % 46); for (let lane = 1; lane < rules.lanes; lane += 1) { context.beginPath(); context.moveTo(lane * laneWidth, 0); context.lineTo(lane * laneWidth, FIELD_H); context.stroke(); } context.setLineDash([]); for (const item of run?.items || []) { context.save(); context.translate(item.lane * laneWidth + laneWidth / 2, item.y); drawItem(context, spriteFor(options, item.type), run.time); context.restore(); } const lane = run ? run.lane : Math.floor(rules.lanes / 2); const x = run ? run.x : lane * laneWidth + laneWidth / 2; context.save(); context.translate(x, PLAYER_Y); context.rotate((lane * laneWidth + laneWidth / 2 - x) / laneWidth * 0.25); if (run?.flash > 0) { context.strokeStyle = colors.accent; context.globalAlpha = Math.min(1, run.flash * 3); context.lineWidth = 4; rounded(context, -34, -54, 68, 108, 16); context.stroke(); context.globalAlpha = 1; } drawPlayer(context, options.player); context.restore(); } function drawCard(options, { score, stats, name, rank, title, language }) { const colors = paletteOf(options); const width = 1200; const height = 630; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const context = canvas.getContext("2d"); const font = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"; context.fillStyle = colors.card; context.fillRect(0, 0, width, height); let seed = (score * 9301 + 49297) % 233280; const random = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }; for (let index = 0; index < 46; index += 1) { context.fillStyle = colors.camo[Math.floor(random() * colors.camo.length)]; context.beginPath(); context.ellipse(random() * width, random() * height, 50 + random() * 120, 30 + random() * 70, random() * Math.PI, 0, Math.PI * 2); context.fill(); } context.fillStyle = "rgba(14,17,10,0.55)"; context.fillRect(0, 0, width, height); const road = 830; context.fillStyle = "rgba(14,17,10,0.78)"; context.fillRect(road, 0, width - road, height); context.strokeStyle = colors.line; context.lineWidth = 4; context.setLineDash([30, 26]); for (let lane = 1; lane < 3; lane += 1) { const x = road + (width - road) / 3 * lane; context.beginPath(); context.moveTo(x, 0); context.lineTo(x, height); context.stroke(); } context.setLineDash([]); const laneWidth = (width - road) / 3; const bonus = (Array.isArray(options.items) ? options.items : []).find(item => item?.kind === "bonus"); context.save(); context.translate(road + laneWidth * 2.5, 150); context.scale(2, 2); drawItem(context, bonus?.image ? { image: bonus.image } : bonus?.sprite || "coin", 0); context.restore(); context.save(); context.translate(road + laneWidth * 1.5, 430); context.scale(2.1, 2.1); drawPlayer(context, options.player); context.restore(); const fit = (weight, size, text) => { let current = size; context.font = `${weight} ${current}px ${font}`; while (current > 14 && context.measureText(text).width > 730) { current -= 2; context.font = `${weight} ${current}px ${font}`; } }; context.textBaseline = "alphabetic"; context.textAlign = "left"; context.fillStyle = colors.accent; context.font = `700 26px ${font}`; context.fillText(String(title).toUpperCase(), 64, 88); context.fillStyle = colors.text; fit("800", 250, String(score)); context.fillText(String(score), 60, 330); context.fillStyle = colors.label; const place = `PUNTEN${rank ? ` · PLEK ${rank}` : ""}`; fit("600", 30, place); context.fillText(place, 64, 386); context.fillStyle = colors.text; const count = stats?.collected || 0; const who = `${name ? `${name} · ` : ""}${count} ${String(options.secondary_label || "bonussen").toLowerCase()}`; fit("700", 44, who); context.fillText(who, 64, 462); context.fillStyle = colors.label; const line = "Kun jij dit verslaan?"; fit("500", 30, line); context.fillText(line, 64, 520); context.fillStyle = colors.text; context.font = `700 30px ${font}`; context.fillText(`${window.location.hostname}${window.location.pathname.replace(/\/$/, "")}`, 64, 580); context.textAlign = "right"; context.fillStyle = colors.label; context.font = `500 24px ${font}`; context.fillText(new Date().toLocaleDateString(language || "nl", { day: "numeric", month: "long", year: "numeric" }), 790, 580); return canvas; } const DEFAULT_ITEMS = [{ key: "coin", kind: "bonus", weight: 0.3, points: 25 }, { key: "rock", kind: "hazard", weight: 0.35, points: 0 }, { key: "mine", kind: "hazard", weight: 0.35, points: 0 }]; function runnerNumber(value, low, high, fallback) { if (typeof value !== "number" || !Number.isFinite(value)) return fallback; return Math.max(low, Math.min(high, value)); } function runnerRules(options) { const raw = options && typeof options === "object" && !Array.isArray(options) ? options : {}; const items = []; for (const item of Array.isArray(raw.items) ? raw.items.slice(0, 12) : []) { if (!item || typeof item !== "object" || Array.isArray(item)) continue; if (item.kind !== "bonus" && item.kind !== "hazard") continue; const weight = runnerNumber(item.weight, 0, 1000, 0); if (weight <= 0) continue; items.push({ key: typeof item.key === "string" ? item.key : "", kind: item.kind, weight, points: item.kind === "bonus" ? runnerNumber(item.points, 0, 100000, 0) : 0 }); } return { lanes: Math.floor(runnerNumber(raw.lanes, 2, 6, 3)), start_speed: runnerNumber(raw.start_speed, 50, 1000, 230), acceleration: runnerNumber(raw.acceleration, 0, 100, 7), speed_bonus: runnerNumber(raw.speed_bonus, 0, 2000, 280), score_divisor: runnerNumber(raw.score_divisor, 1, 1000, 24), spawn_gap: runnerNumber(raw.spawn_gap, 20, 2000, 175), spawn_jitter: runnerNumber(raw.spawn_jitter, 0, 2000, 130), items: items.length ? items : DEFAULT_ITEMS }; } // Must match the replay in the /games/lane-runner/score/ endpoint exactly. function createLaneRun(options, seed) { const rules = runnerRules(options); const laneWidth = FIELD_W / rules.lanes; const hit = laneWidth * 0.3; const totalWeight = rules.items.reduce((sum, item) => sum + item.weight, 0); let random = 0; for (const character of String(seed)) { random = Math.imul(random, 31) + character.charCodeAt(0) >>> 0; } const next = () => { random = Math.imul(random, 1664525) + 1013904223 >>> 0; return random / 4294967296; }; const lane = Math.floor(rules.lanes / 2); const run = { rules, laneWidth, lane, x: lane * laneWidth + laneWidth / 2, items: [], time: 0, score: 0, speed: rules.start_speed, spawn: 0.7, collected: 0, dead: false, flash: 0 }; run.step = () => { if (run.dead) return; run.time += DT; run.speed = rules.start_speed + Math.min(run.time * rules.acceleration, rules.speed_bonus); run.score += DT * (run.speed / rules.score_divisor); run.flash = Math.max(0, run.flash - DT); const target = run.lane * laneWidth + laneWidth / 2; run.x += (target - run.x) * Math.min(1, DT * 14); run.spawn -= DT; if (run.spawn <= 0) { run.spawn = (rules.spawn_gap + next() * rules.spawn_jitter) / run.speed; let pick = next() * totalWeight; let chosen = rules.items[rules.items.length - 1]; for (const item of rules.items) { if (pick < item.weight) { chosen = item; break; } pick -= item.weight; } run.items.push({ lane: Math.floor(next() * rules.lanes), type: chosen, y: -40 }); } for (const item of run.items) item.y += run.speed * DT; for (let index = run.items.length - 1; index >= 0; index -= 1) { const item = run.items[index]; if (item.y > FIELD_H + 50) { run.items.splice(index, 1); continue; } const itemX = item.lane * laneWidth + laneWidth / 2; if (Math.abs(itemX - run.x) < hit && Math.abs(item.y - PLAYER_Y) < 44) { if (item.type.kind === "bonus") { run.items.splice(index, 1); run.score += item.type.points; run.collected += 1; run.flash = 0.25; } else { run.dead = true; return; } } } }; return run; }