[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68aa302bfd188191bf16df3d47f92a63","versionInt","title","2d Army Simulator (react)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// 2D Army Simulator — fixed JSX + advanced strategies + anti-stuck pathing\n// Notes:\n// - Fixes the unterminated tags are properly closed).\n// - Adds 10 more strategies (total 15) and smarter pathing (LOS checks + waypoints) to avoid\n// getting caught on blocks.\n// - Includes lightweight runtime \"dev tests\" that log to the console.\n\nexport default function ArmySimulator() {\n // === Map / Gameplay constants ===\n const MAP_W = 960;\n const MAP_H = 600;\n\n const UNIT_RADIUS = 6; // px\n const UNIT_MAX_SPEED = 80; // px/s\n const UNIT_ACCEL = 220; // px/s^2\n const SEPARATION_RADIUS = 18; // px\n const OBSTACLE_AVOID_DIST = 18; // px\n const BULLET_SPEED = 350; // px/s\n const BULLET_DAMAGE = 35; // HP per hit\n const FIRE_RANGE = 140; // px\n const FIRE_COOLDOWN = 0.8; // s\n const MAX_OBSTACLES = 28;\n const OBSTACLE_MIN_SIZE = 40;\n const OBSTACLE_MAX_SIZE = 120;\n const BULLET_LIFETIME = 3.2; // s\n\n // === UI State ===\n const [teamAColor, setTeamAColor] = useState(\"#e63946\");\n const [teamBColor, setTeamBColor] = useState(\"#457b9d\");\n const [teamACount, setTeamACount] = useState(25);\n const [teamBCount, setTeamBCount] = useState(25);\n const [teamAStrat, setTeamAStrat] = useState(\"Aggressive\");\n const [teamBStrat, setTeamBStrat] = useState(\"Aggressive\");\n const [running, setRunning] = useState(false);\n const [winner, setWinner] = useState(null as null | \"Team A\" | \"Team B\" | \"Draw\");\n\n // === Refs (simulation) ===\n const canvasRef = useRef(null);\n const animRef = useRef(null);\n const lastTRef = useRef(null);\n const simTimeRef = useRef(0);\n\n // === Types ===\n type Unit = {\n id: number;\n team: 0 | 1; // 0: A, 1: B\n x: number;\n y: number;\n vx: number;\n vy: number;\n hp: number;\n cd: number; // fire cooldown\n spawnedAt: number;\n // Pathing helpers (for anti-stuck)\n hasWP?: boolean;\n wpx?: number;\n wpy?: number;\n stuck?: number; // accumulated stuck time\n detourSide?: 1 | -1; // tangent preference\n };\n\n type Bullet = { team: 0 | 1; x: number; y: number; vx: number; vy: number; t: number };\n type Rect = { x: number; y: number; w: number; h: number };\n\n // === Sim data ===\n const unitsRef = useRef([]);\n const bulletsRef = useRef([]);\n const obstaclesRef = useRef([]);\n const homeARef = useRef<{ x: number; y: number }>({ x: MAP_W * 0.15, y: MAP_H * 0.5 });\n const homeBRef = useRef<{ x: number; y: number }>({ x: MAP_W * 0.85, y: MAP_H * 0.5 });\n\n // === Strategy list (15 total) ===\n const strategies = [\n \"Aggressive\",\n \"Hold Line\",\n \"Defensive\",\n \"Flank Left\",\n \"Flank Right\",\n \"Charge\",\n \"Kite\",\n \"Skirmish\",\n \"Spread\",\n \"Cluster\",\n \"Ambush\",\n \"Patrol\",\n \"Hunt Weak\",\n \"Mid Control\",\n \"Zigzag Advance\",\n ] as const;\n type Strategy = typeof strategies[number];\n\n const colors = useMemo(() => [teamAColor, teamBColor], [teamAColor, teamBColor]);\n\n // === Math / Geometry Helpers ===\n const randRange = (a: number, b: number) => Math.random() * (b - a) + a;\n const clamp = (x: number, a: number, b: number) => Math.max(a, Math.min(b, x));\n const len = (x: number, y: number) => Math.hypot(x, y);\n const normalize = (x: number, y: number) => {\n const L = Math.hypot(x, y) || 1;\n return { x: x / L, y: y / L };\n };\n\n const nearestPointOnRect = (px: number, py: number, r: Rect) => ({\n x: clamp(px, r.x, r.x + r.w),\n y: clamp(py, r.y, r.y + r.h),\n });\n\n const circleRectOverlapDist = (px: number, py: number, rad: number, r: Rect) => {\n const n = nearestPointOnRect(px, py, r);\n return Math.hypot(px - n.x, py - n.y) - rad;\n };\n\n // Robust line-rect intersection (against all 4 edges)\n const orient = (ax: number, ay: number, bx: number, by: number, cx: number, cy: number) =>\n Math.sign((bx - ax) * (cy - ay) - (by - ay) * (cx - ax));\n const onSeg = (ax: number, ay: number, bx: number, by: number, px: number, py: number) =>\n Math.min(ax, bx) <= px && px <= Math.max(ax, bx) && Math.min(ay, by) <= py && py <= Math.max(ay, by);\n const segSeg = (\n a1x: number,\n a1y: number,\n a2x: number,\n a2y: number,\n b1x: number,\n b1y: number,\n b2x: number,\n b2y: number\n ) => {\n const o1 = orient(a1x, a1y, a2x, a2y, b1x, b1y);\n const o2 = orient(a1x, a1y, a2x, a2y, b2x, b2y);\n const o3 = orient(b1x, b1y, b2x, b2y, a1x, a1y);\n const o4 = orient(b1x, b1y, b2x, b2y, a2x, a2y);\n if (o1 !== o2 && o3 !== o4) return true;\n if (o1 === 0 && onSeg(a1x, a1y, a2x, a2y, b1x, b1y)) return true;\n if (o2 === 0 && onSeg(a1x, a1y, a2x, a2y, b2x, b2y)) return true;\n if (o3 === 0 && onSeg(b1x, b1y, b2x, b2y, a1x, a1y)) return true;\n if (o4 === 0 && onSeg(b1x, b1y, b2x, b2y, a2x, a2y)) return true;\n return false;\n };\n const lineRect = (x1: number, y1: number, x2: number, y2: number, r: Rect) => {\n const left = segSeg(x1, y1, x2, y2, r.x, r.y, r.x, r.y + r.h);\n const right = segSeg(x1, y1, x2, y2, r.x + r.w, r.y, r.x + r.w, r.y + r.h);\n const top = segSeg(x1, y1, x2, y2, r.x, r.y, r.x + r.w, r.y);\n const bottom = segSeg(x1, y1, x2, y2, r.x, r.y + r.h, r.x + r.w, r.y + r.h);\n // also count being inside the rect\n const inside = x1 >= r.x && x1 <= r.x + r.w && y1 >= r.y && y1 <= r.y + r.h;\n return left || right || top || bottom || inside;\n };\n\n const losClear = (x1: number, y1: number, x2: number, y2: number, obstacles: Rect[]) => {\n for (const r of obstacles) {\n if (lineRect(x1, y1, x2, y2, r)) return false;\n }\n return true;\n };\n\n // === Obstacle / Spawn Management ===\n const resetObstacles = () => {\n const obstacles: Rect[] = [];\n\n // Keep spawn corridors clearer (avoid heavy overlap near edges)\n const avoidZones = [\n { x: 0, y: 0, w: MAP_W * 0.22, h: MAP_H }, // left band\n { x: MAP_W * 0.78, y: 0, w: MAP_W * 0.22, h: MAP_H }, // right band\n { x: MAP_W * 0.45, y: MAP_H * 0.4, w: MAP_W * 0.1, h: MAP_H * 0.2 }, // center corridor\n ];\n\n let tries = 0;\n while (obstacles.length < MAX_OBSTACLES && tries < MAX_OBSTACLES * 100) {\n tries++;\n const w = randRange(OBSTACLE_MIN_SIZE, OBSTACLE_MAX_SIZE);\n const h = randRange(OBSTACLE_MIN_SIZE * 0.5, OBSTACLE_MAX_SIZE * 0.8);\n const x = randRange(8, MAP_W - w - 8);\n const y = randRange(8, MAP_H - h - 8);\n const candidate = { x, y, w, h };\n\n const overlapsAvoid = avoidZones.some((a) => !(x + w < a.x || x > a.x + a.w || y + h < a.y || y > a.y + a.h));\n if (overlapsAvoid) continue;\n\n const tooClose = obstacles.some((o) => !(x + w + 12 < o.x || x > o.x + o.w + 12 || y + h + 12 < o.y || y > o.y + o.h + 12));\n if (tooClose) continue;\n\n obstacles.push(candidate);\n }\n\n obstaclesRef.current = obstacles;\n };\n\n const posIsFree = (x: number, y: number) => {\n const r = UNIT_RADIUS + 2;\n if (x < r || y < r || x > MAP_W - r || y > MAP_H - r) return false;\n for (const ob of obstaclesRef.current) {\n if (circleRectOverlapDist(x, y, r, ob) < 0) return false;\n }\n return true;\n };\n\n const spawnUnits = (nA: number, nB: number) => {\n const units: Unit[] = [];\n let uid = 1;\n\n const spawnSide = (\n count: number,\n team: 0 | 1,\n minX: number,\n maxX: number,\n minY: number,\n maxY: number\n ) => {\n let placed = 0;\n let attempts = 0;\n while (placed < count && attempts < count * 300) {\n attempts++;\n const x = randRange(minX, maxX);\n const y = randRange(minY, maxY);\n if (!posIsFree(x, y)) continue;\n if (units.some((u) => Math.hypot(u.x - x, u.y - y) < SEPARATION_RADIUS * 0.9)) continue;\n units.push({\n id: uid++,\n team,\n x,\n y,\n vx: 0,\n vy: 0,\n hp: 100,\n cd: randRange(0, FIRE_COOLDOWN),\n spawnedAt: 0,\n hasWP: false,\n wpx: 0,\n wpy: 0,\n stuck: 0,\n detourSide: Math.random() < 0.5 ? 1 : -1,\n });\n placed++;\n }\n };\n\n spawnSide(nA, 0, MAP_W * 0.05, MAP_W * 0.30, MAP_H * 0.08, MAP_H * 0.92);\n spawnSide(nB, 1, MAP_W * 0.70, MAP_W * 0.95, MAP_H * 0.08, MAP_H * 0.92);\n\n unitsRef.current = units;\n bulletsRef.current = [];\n setWinner(null);\n };\n\n const applySettings = () => spawnUnits(teamACount, teamBCount);\n const resetEverything = (regenObstacles: boolean) => {\n if (regenObstacles || obstaclesRef.current.length === 0) resetObstacles();\n spawnUnits(teamACount, teamBCount);\n setRunning(false);\n lastTRef.current = null;\n };\n\n // === Mount ===\n useEffect(() => {\n resetEverything(true);\n }, []);\n\n // === Strategy Utilities ===\n const teamCentroid = (team: 0 | 1) => {\n const us = unitsRef.current.filter((u) => u.team === team && u.hp > 0);\n if (!us.length) return team === 0 ? homeARef.current : homeBRef.current;\n const sx = us.reduce((a, b) => a + b.x, 0);\n const sy = us.reduce((a, b) => a + b.y, 0);\n return { x: sx / us.length, y: sy / us.length };\n };\n\n const firstBlockingObstacle = (x1: number, y1: number, x2: number, y2: number): Rect | null => {\n for (const r of obstaclesRef.current) {\n if (lineRect(x1, y1, x2, y2, r)) return r;\n }\n return null;\n };\n\n const detourAroundRect = (u: Unit, target: { x: number; y: number }, r: Rect) => {\n const margin = UNIT_RADIUS + 10;\n const pts = [\n { x: r.x - margin, y: clamp(u.y, r.y - 6, r.y + r.h + 6) }, // left\n { x: r.x + r.w + margin, y: clamp(u.y, r.y - 6, r.y + r.h + 6) }, // right\n { x: clamp(u.x, r.x - 6, r.x + r.w + 6), y: r.y - margin }, // top\n { x: clamp(u.x, r.x - 6, r.x + r.w + 6), y: r.y + r.h + margin }, // bottom\n ];\n // choose visible point that keeps us closer to target\n let best = pts[0];\n let bestScore = Infinity;\n for (const p of pts) {\n if (!losClear(u.x, u.y, p.x, p.y, obstaclesRef.current)) continue;\n const score = Math.hypot(p.x - target.x, p.y - target.y);\n if (score < bestScore) {\n best = p;\n bestScore = score;\n }\n }\n if (bestScore === Infinity) best = u.detourSide === 1 ? pts[1] : pts[0];\n u.hasWP = true;\n u.wpx = best.x;\n u.wpy = best.y;\n };\n\n const getStrategyTarget = (team: 0 | 1, strat: Strategy): { x: number; y: number } => {\n const myHome = team === 0 ? homeARef.current : homeBRef.current;\n const enemyHome = team === 0 ? homeBRef.current : homeARef.current;\n const myC = teamCentroid(team);\n const enC = teamCentroid(team === 0 ? 1 : 0);\n\n switch (strat) {\n case \"Aggressive\":\n return enC;\n case \"Hold Line\":\n return { x: MAP_W * (team === 0 ? 0.42 : 0.58), y: MAP_H * 0.5 };\n case \"Defensive\":\n return myHome;\n case \"Flank Left\": {\n const dir = normalize(enC.x - myC.x, enC.y - myC.y);\n const left = { x: -dir.y, y: dir.x };\n return { x: enC.x + left.x * 120, y: enC.y + left.y * 120 };\n }\n case \"Flank Right\": {\n const dir = normalize(enC.x - myC.x, enC.y - myC.y);\n const right = { x: dir.y, y: -dir.x };\n return { x: enC.x + right.x * 120, y: enC.y + right.y * 120 };\n }\n case \"Charge\":\n return enemyHome;\n case \"Kite\":\n return enC;\n case \"Skirmish\": {\n const dir = normalize(enC.x - myC.x, enC.y - myC.y);\n const perp = { x: -dir.y, y: dir.x };\n return { x: enC.x + perp.x * 100, y: enC.y + perp.y * 100 };\n }\n case \"Spread\":\n return { x: MAP_W * 0.5, y: MAP_H * 0.5 };\n case \"Cluster\": {\n const dir = normalize(enC.x - myC.x, enC.y - myC.y);\n return { x: myC.x + dir.x * 40, y: myC.y + dir.y * 40 };\n }\n case \"Ambush\": {\n const middle = obstaclesRef.current.reduce<{ r: Rect | null; d: number }>((acc, r) => {\n const cx = r.x + r.w / 2;\n const d = Math.abs(cx - MAP_W * 0.5);\n return d < acc.d ? { r, d } : acc;\n }, { r: null, d: Infinity }).r;\n if (middle) return { x: middle.x + middle.w / 2, y: middle.y + middle.h / 2 };\n return { x: MAP_W * 0.5, y: MAP_H * 0.5 };\n }\n case \"Patrol\": {\n const t = simTimeRef.current + (team === 0 ? 0 : 1);\n const up = { x: MAP_W * 0.5, y: MAP_H * 0.35 };\n const down = { x: MAP_W * 0.5, y: MAP_H * 0.65 };\n return Math.sin(t * 0.5) > 0 ? up : down;\n }\n case \"Hunt Weak\":\n return enC;\n case \"Mid Control\":\n return { x: MAP_W * 0.5, y: MAP_H * 0.5 };\n case \"Zigzag Advance\": {\n const dir = normalize(enC.x - myC.x, enC.y - myC.y);\n const perp = { x: -dir.y, y: dir.x };\n const t = simTimeRef.current * 1.2 + (team === 0 ? 0 : Math.PI);\n return { x: myC.x + dir.x * 120 + perp.x * Math.sin(t) * 80, y: myC.y + dir.y * 120 + perp.y * Math.sin(t) * 80 };\n }\n }\n };\n\n const stratForTeam = (team: 0 | 1) => (team === 0 ? (teamAStrat as Strategy) : (teamBStrat as Strategy));\n\n // === Simulation Step ===\n const step = (dt: number) => {\n simTimeRef.current += dt;\n\n const units = unitsRef.current;\n const obstacles = obstaclesRef.current;\n const bullets = bulletsRef.current;\n\n // Winner detection\n const aliveA = units.filter((u) => u.team === 0 && u.hp > 0).length;\n const aliveB = units.filter((u) => u.team === 1 && u.hp > 0).length;\n if (!winner && (aliveA === 0 || aliveB === 0)) {\n setWinner(aliveA === aliveB ? \"Draw\" : aliveA > aliveB ? \"Team A\" : \"Team B\");\n setRunning(false);\n }\n\n // Bullets\n for (let i = bullets.length - 1; i >= 0; i--) {\n const b = bullets[i];\n b.x += b.vx * dt;\n b.y += b.vy * dt;\n b.t += dt;\n if (b.x < 0 || b.x > MAP_W || b.y < 0 || b.y > MAP_H || b.t > BULLET_LIFETIME) {\n bullets.splice(i, 1);\n continue;\n }\n // obstacle hit\n let hitObstacle = false;\n for (const ob of obstacles) {\n if (b.x >= ob.x && b.x <= ob.x + ob.w && b.y >= ob.y && b.y <= ob.y + ob.h) {\n hitObstacle = true;\n break;\n }\n }\n if (hitObstacle) {\n bullets.splice(i, 1);\n continue;\n }\n // unit hit\n for (const u of units) {\n if (u.hp <= 0 || u.team === b.team) continue;\n if (Math.hypot(u.x - b.x, u.y - b.y) <= UNIT_RADIUS) {\n u.hp -= BULLET_DAMAGE;\n bullets.splice(i, 1);\n break;\n }\n }\n }\n\n // Precompute strategy targets\n const targetA = getStrategyTarget(0, stratForTeam(0));\n const targetB = getStrategyTarget(1, stratForTeam(1));\n\n // Units\n for (const u of units) {\n if (u.hp <= 0) continue;\n u.cd = Math.max(0, u.cd - dt);\n\n // Waypoint-aware target\n let myTarget = u.team === 0 ? targetA : targetB;\n if (!u.hasWP) {\n const blk = firstBlockingObstacle(u.x, u.y, myTarget.x, myTarget.y);\n if (blk) detourAroundRect(u, myTarget, blk);\n }\n if (u.hasWP && u.wpx !== undefined && u.wpy !== undefined) {\n if (losClear(u.x, u.y, myTarget.x, myTarget.y, obstacles)) {\n u.hasWP = false;\n } else {\n const dwp = Math.hypot((u.wpx as number) - u.x, (u.wpy as number) - u.y);\n if (dwp < 12) {\n u.hasWP = false;\n } else if (losClear(u.x, u.y, u.wpx as number, u.wpy as number, obstacles)) {\n myTarget = { x: u.wpx as number, y: u.wpy as number };\n } else {\n const blk2 = firstBlockingObstacle(u.x, u.y, myTarget.x, myTarget.y);\n if (blk2) detourAroundRect(u, myTarget, blk2);\n }\n }\n }\n\n // Base desire toward target\n let desire = { x: myTarget.x - u.x, y: myTarget.y - u.y };\n\n // Enemy awareness\n let nearestEnemy: Unit | null = null;\n let bestD = Infinity;\n for (const v of units) {\n if (v.hp <= 0 || v.team === u.team) continue;\n const d = Math.hypot(v.x - u.x, v.y - u.y);\n if (d < bestD) {\n bestD = d;\n nearestEnemy = v;\n }\n }\n\n const strat = stratForTeam(u.team);\n\n // Formation/behavior modifiers\n if (strat === \"Hold Line\") {\n const lineX = u.team === 0 ? MAP_W * 0.42 : MAP_W * 0.58;\n const dx = lineX - u.x;\n if (Math.abs(dx) < 10) desire.x = 0;\n }\n if (strat === \"Cluster\") {\n const c = teamCentroid(u.team);\n desire.x += (c.x - u.x) * 0.2;\n desire.y += (c.y - u.y) * 0.2;\n }\n if (strat === \"Charge\") {\n const dirF = normalize(myTarget.x - u.x, myTarget.y - u.y);\n desire.x += dirF.x * 120;\n desire.y += dirF.y * 120;\n }\n if (strat === \"Zigzag Advance\") {\n const enC2 = teamCentroid(u.team === 0 ? 1 : 0);\n const dir = normalize(enC2.x - u.x, enC2.y - u.y);\n const perp = { x: -dir.y, y: dir.x };\n const t = simTimeRef.current * 3 + u.id * 0.3;\n desire.x += perp.x * Math.sin(t) * 140;\n desire.y += perp.y * Math.sin(t) * 140;\n }\n\n // Enemy-based behavior + fire\n if (nearestEnemy) {\n const toEnemy = { x: nearestEnemy.x - u.x, y: nearestEnemy.y - u.y };\n const distE = Math.hypot(toEnemy.x, toEnemy.y);\n\n if (strat === \"Aggressive\" || strat === \"Flank Left\" || strat === \"Flank Right\" || strat === \"Charge\") {\n desire.x = toEnemy.x * 0.7 + desire.x * 0.3;\n desire.y = toEnemy.y * 0.7 + desire.y * 0.3;\n } else if (strat === \"Defensive\") {\n const home = u.team === 0 ? homeARef.current : homeBRef.current;\n const dHome = Math.hypot(u.x - home.x, u.y - home.y);\n if (dHome < 120) {\n desire.x = toEnemy.x * 0.5 + desire.x * 0.5;\n desire.y = toEnemy.y * 0.5 + desire.y * 0.5;\n }\n } else if (strat === \"Kite\") {\n if (distE < FIRE_RANGE * 0.8) {\n const away = normalize(-toEnemy.x, -toEnemy.y);\n desire.x += away.x * 180;\n desire.y += away.y * 180;\n }\n } else if (strat === \"Skirmish\") {\n const dir = normalize(toEnemy.x, toEnemy.y);\n const perp = { x: -dir.y, y: dir.x };\n desire.x += perp.x * 160;\n desire.y += perp.y * 160;\n } else if (strat === \"Hunt Weak\") {\n let weakest: Unit | null = nearestEnemy;\n let minHp = nearestEnemy.hp;\n for (const v of units) {\n if (v.team !== u.team && v.hp > 0 && v.hp < minHp) {\n if (losClear(u.x, u.y, v.x, v.y, obstacles)) {\n weakest = v;\n minHp = v.hp;\n }\n }\n }\n if (weakest) {\n const tw = { x: weakest.x - u.x, y: weakest.y - u.y };\n desire.x = tw.x * 0.7 + desire.x * 0.3;\n desire.y = tw.y * 0.7 + desire.y * 0.3;\n }\n }\n\n // Shooting\n if (distE <= FIRE_RANGE && u.cd <= 0) {\n if (losClear(u.x, u.y, nearestEnemy.x, nearestEnemy.y, obstacles)) {\n const d = normalize(nearestEnemy.x - u.x, nearestEnemy.y - u.y);\n bullets.push({ team: u.team, x: u.x, y: u.y, vx: d.x * BULLET_SPEED, vy: d.y * BULLET_SPEED, t: 0 });\n u.cd = FIRE_COOLDOWN;\n }\n }\n }\n\n // Separation (wider if Spread)\n let sepX = 0, sepY = 0, sepCount = 0;\n const sepR = strat === \"Spread\" ? SEPARATION_RADIUS * 1.6 : SEPARATION_RADIUS;\n for (const v of units) {\n if (v === u || v.hp <= 0 || v.team !== u.team) continue;\n const dx = u.x - v.x;\n const dy = u.y - v.y;\n const d = Math.hypot(dx, dy);\n if (d > 0 && d < sepR) {\n const f = (sepR - d) / sepR;\n sepX += (dx / d) * f;\n sepY += (dy / d) * f;\n sepCount++;\n }\n }\n if (sepCount > 0) {\n desire.x += sepX * 80;\n desire.y += sepY * 80;\n }\n\n // Obstacle avoidance shell (soft push)\n for (const ob of obstacles) {\n const d = circleRectOverlapDist(u.x, u.y, UNIT_RADIUS + OBSTACLE_AVOID_DIST, ob);\n if (d < 0) {\n const n = nearestPointOnRect(u.x, u.y, ob);\n const dx = u.x - n.x;\n const dy = u.y - n.y;\n const L = Math.hypot(dx, dy) || 1;\n const push = (-(d) / (OBSTACLE_AVOID_DIST + 1)) * 240;\n desire.x += (dx / L) * push;\n desire.y += (dy / L) * push;\n }\n }\n\n // Walls containment\n if (u.x < 20) desire.x += 120;\n if (u.x > MAP_W - 20) desire.x -= 120;\n if (u.y < 20) desire.y += 120;\n if (u.y > MAP_H - 20) desire.y -= 120;\n\n // Anti-stuck: if slow & LOS blocked, set a detour + jitter\n const curSpeed = Math.hypot(u.vx, u.vy);\n u.stuck = (u.stuck || 0) + ((curSpeed < 5 && !losClear(u.x, u.y, myTarget.x, myTarget.y, obstacles)) ? dt : -dt);\n if ((u.stuck || 0) < 0) u.stuck = 0;\n if ((u.stuck || 0) > 0.6) {\n const blk = firstBlockingObstacle(u.x, u.y, myTarget.x, myTarget.y);\n if (blk) detourAroundRect(u, myTarget, blk);\n desire.x += (Math.random() - 0.5) * 120;\n desire.y += (Math.random() - 0.5) * 120;\n u.stuck = 0.2;\n }\n\n // Integrate velocity\n const nDes = normalize(desire.x, desire.y);\n u.vx += nDes.x * UNIT_ACCEL * dt;\n u.vy += nDes.y * UNIT_ACCEL * dt;\n\n let sp = Math.hypot(u.vx, u.vy);\n if (sp > UNIT_MAX_SPEED) {\n u.vx = (u.vx / sp) * UNIT_MAX_SPEED;\n u.vy = (u.vy / sp) * UNIT_MAX_SPEED;\n sp = UNIT_MAX_SPEED;\n }\n\n // Move\n let nx = u.x + u.vx * dt;\n let ny = u.y + u.vy * dt;\n\n // Slide out if ended up inside a block (rare)\n for (const ob of obstacles) {\n if (nx >= ob.x + UNIT_RADIUS && nx <= ob.x + ob.w - UNIT_RADIUS && ny >= ob.y + UNIT_RADIUS && ny <= ob.y + ob.h - UNIT_RADIUS) {\n const left = Math.abs(nx - (ob.x + UNIT_RADIUS));\n const right = Math.abs(nx - (ob.x + ob.w - UNIT_RADIUS));\n const top = Math.abs(ny - (ob.y + UNIT_RADIUS));\n const bottom = Math.abs(ny - (ob.y + ob.h - UNIT_RADIUS));\n const m = Math.min(left, right, top, bottom);\n if (m === left) nx = ob.x + UNIT_RADIUS;\n else if (m === right) nx = ob.x + ob.w - UNIT_RADIUS;\n else if (m === top) ny = ob.y + UNIT_RADIUS;\n else ny = ob.y + ob.h - UNIT_RADIUS;\n }\n }\n\n u.x = clamp(nx, UNIT_RADIUS, MAP_W - UNIT_RADIUS);\n u.y = clamp(ny, UNIT_RADIUS, MAP_H - UNIT_RADIUS);\n }\n };\n\n // === Drawing ===\n const draw = (ctx: CanvasRenderingContext2D) => {\n ctx.clearRect(0, 0, MAP_W, MAP_H);\n\n // BG\n ctx.fillStyle = \"#0b1020\";\n ctx.fillRect(0, 0, MAP_W, MAP_H);\n\n // Grid (subtle)\n ctx.lineWidth = 1;\n ctx.strokeStyle = \"rgba(255,255,255,0.06)\";\n for (let x = 0; x <= MAP_W; x += 40) {\n ctx.beginPath();\n ctx.moveTo(x + 0.5, 0);\n ctx.lineTo(x + 0.5, MAP_H);\n ctx.stroke();\n }\n for (let y = 0; y <= MAP_H; y += 40) {\n ctx.beginPath();\n ctx.moveTo(0, y + 0.5);\n ctx.lineTo(MAP_W, y + 0.5);\n ctx.stroke();\n }\n\n // Obstacles\n ctx.fillStyle = \"#2b2d42\";\n for (const r of obstaclesRef.current) ctx.fillRect(r.x, r.y, r.w, r.h);\n\n // Bases\n ctx.fillStyle = teamAColor + \"66\";\n ctx.beginPath();\n ctx.arc(homeARef.current.x, homeARef.current.y, 24, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.fillStyle = teamBColor + \"66\";\n ctx.beginPath();\n ctx.arc(homeBRef.current.x, homeBRef.current.y, 24, 0, Math.PI * 2);\n ctx.fill();\n\n // Bullets\n ctx.fillStyle = \"#f1fa8c\";\n for (const b of bulletsRef.current) {\n ctx.beginPath();\n ctx.arc(b.x, b.y, 2, 0, Math.PI * 2);\n ctx.fill();\n }\n\n // Units + HP bars\n for (const u of unitsRef.current) {\n if (u.hp <= 0) continue;\n ctx.fillStyle = u.team === 0 ? colors[0] : colors[1];\n ctx.beginPath();\n ctx.arc(u.x, u.y, UNIT_RADIUS, 0, Math.PI * 2);\n ctx.fill();\n\n // Facing line\n const speed = Math.hypot(u.vx, u.vy);\n if (speed > 5) {\n ctx.strokeStyle = \"#ffffff\";\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(u.x, u.y);\n ctx.lineTo(u.x + (u.vx / (speed || 1)) * 10, u.y + (u.vy / (speed || 1)) * 10);\n ctx.stroke();\n }\n\n // HP bar\n const w = 14;\n const h = 3;\n ctx.fillStyle = \"#111827\";\n ctx.fillRect(u.x - w / 2, u.y - UNIT_RADIUS - 8, w, h);\n ctx.fillStyle = \"#22c55e\";\n ctx.fillRect(u.x - w / 2, u.y - UNIT_RADIUS - 8, (w * Math.max(0, u.hp)) / 100, h);\n }\n };\n\n // === Animation Loop ===\n useEffect(() => {\n const canvas = canvasRef.current!;\n const ctx = canvas.getContext(\"2d\")!;\n\n const loop = (t: number) => {\n if (lastTRef.current == null) lastTRef.current = t;\n const dt = Math.min(0.033, (t - lastTRef.current) / 1000);\n lastTRef.current = t;\n\n if (running) step(dt);\n draw(ctx);\n\n animRef.current = requestAnimationFrame(loop);\n };\n\n animRef.current = requestAnimationFrame(loop);\n return () => {\n if (animRef.current) cancelAnimationFrame(animRef.current);\n };\n }, [running, teamAColor, teamBColor]);\n\n // === Dev tests (console) ===\n useEffect(() => {\n try {\n // LOS should be blocked if a rectangle lies between two points\n obstaclesRef.current = [{ x: 100, y: 100, w: 80, h: 60 }];\n console.assert(losClear(50, 130, 220, 130, obstaclesRef.current) === false, \"LOS test: expected blocked\");\n console.assert(losClear(10, 10, 50, 50, obstaclesRef.current) === true, \"LOS test: expected clear\");\n // Strategy type safety\n const okTargets = [\n getStrategyTarget(0, \"Aggressive\"),\n getStrategyTarget(1, \"Hold Line\"),\n getStrategyTarget(0, \"Zigzag Advance\"),\n ];\n console.assert(okTargets.every((p) => Number.isFinite(p.x) && Number.isFinite(p.y)), \"Strategy target finite\");\n } catch (e) {\n // non-fatal\n console.warn(\"Dev tests encountered an issue:\", e);\n } finally {\n // restore fresh obstacles for real run\n resetObstacles();\n spawnUnits(teamACount, teamBCount);\n }\n }, []); // run once\n\n // === UI helpers ===\n const aliveCounts = () => ({\n a: unitsRef.current.filter((u) => u.team === 0 && u.hp > 0).length,\n b: unitsRef.current.filter((u) => u.team === 1 && u.hp > 0).length,\n });\n const { a: aliveA, b: aliveB } = aliveCounts();\n\n // === Render ===\n return (\n

2D Army Simulator

\n\n {/* Controls */}\n

\n {/* Team A */}\n

Team A

\n Color\n setTeamAColor(e.target.value)}\n className=\"h-9 w-16 rounded\"\n aria-label=\"Team A Color\"\n />\n

\n Soldiers\n setTeamACount(Number(e.target.value))}\n className=\"bg-zinc-800 rounded px-2 py-1 w-24\"\n />\n

\n Strategy\n setTeamAStrat(e.target.value as Strategy)}\n className=\"bg-zinc-800 rounded px-2 py-1 flex-1\"\n >\n {strategies.map((s) => (\n \n ))}\n \n

\n\n {/* Team B */}\n

Team B

\n Color\n setTeamBColor(e.target.value)}\n className=\"h-9 w-16 rounded\"\n aria-label=\"Team B Color\"\n />\n

\n Soldiers\n setTeamBCount(Number(e.target.value))}\n className=\"bg-zinc-800 rounded px-2 py-1 w-24\"\n />\n

\n Strategy\n setTeamBStrat(e.target.value as Strategy)}\n className=\"bg-zinc-800 rounded px-2 py-1 flex-1\"\n >\n {strategies.map((s) => (\n \n ))}\n \n

\n\n {/* Global controls */}\n

Controls

\n setRunning((r) => !r)}\n >\n {running ? \"Pause\" : \"Start\"}\n \n applySettings()}\n >\n Apply Settings\n \n resetEverything(false)}\n >\n Reset Battle (keep blocks)\n \n resetEverything(true)}\n >\n New Blocks + Reset\n \n

\n\n

\n \n Team A Alive: {aliveA}\n

\n \n Team B Alive: {aliveB}\n

\n {winner && (\n

\n Result: {winner}\n

\n )}\n

\n\n

\n Strategies: Aggressive, Hold Line, Defensive, Flank Left/Right, Charge, Kite, Skirmish, Spread, Cluster, Ambush, Patrol,\n Hunt Weak, Mid Control, Zigzag Advance.\n

\n\n {/* Canvas */}\n

\n\n

\n Tip: You can increase soldiers up to ~200 per side depending on your device. Use “New Blocks + Reset” to reshuffle obstacles.\n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","12885203754548160501","traceTime",1776417905363]