[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","694ed575be588191a6a83677e3c0af34","versionInt","title","Interactive Elevator Simulator","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// Interactive Elevator Simulator (mobile-first)\n// - Direction-based queuing: serves requests \"on the way\" in current direction (car calls + matching hall calls)\n// - Other hall calls are queued for the next direction\n// - Doors open ONLY after the cabin fully stops; animated open/close duration configurable\n\nconst clampInt = (v, min, max) => Math.max(min, Math.min(max, Math.round(v)));\n\nfunction uniqAdd(setLike, v) {\n const s = new Set(setLike);\n s.add(v);\n return s;\n}\n\nfunction removeFrom(setLike, v) {\n const s = new Set(setLike);\n s.delete(v);\n return s;\n}\n\nfunction setHasAny(...sets) {\n return sets.some((s) => s && s.size > 0);\n}\n\nfunction toSortedArray(setLike, asc = true) {\n const arr = Array.from(setLike);\n arr.sort((a, b) => (asc ? a - b : b - a));\n return arr;\n}\n\nfunction formatSpeed(fps) {\n if (!Number.isFinite(fps) || fps <= 0) return \"—\";\n return `${fps.toFixed(2)} floors/s`;\n}\n\nfunction formatSeconds(s) {\n if (!Number.isFinite(s) || s < 0) return \"—\";\n return `${s.toFixed(2)} s`;\n}\n\nexport default function ElevatorSimulator() {\n // Settings\n const [numFloors, setNumFloors] = useState(5);\n // movementSpeed: floors per second\n const [movementSpeed, setMovementSpeed] = useState(1.2);\n // doorAnimTime: seconds for open or close\n const [doorAnimTime, setDoorAnimTime] = useState(1.0);\n const [showSettings, setShowSettings] = useState(false);\n\n // Layout metrics (compact, responsive)\n const floorHeight = 56; // px per floor; tuned for phone\n const shaftPadding = 10;\n\n // Elevator state\n const [currentFloor, setCurrentFloor] = useState(1);\n const [direction, setDirection] = useState(0); // -1 down, 0 idle, 1 up\n const [movingTo, setMovingTo] = useState(null); // target floor while moving\n\n // Requests\n const [upCalls, setUpCalls] = useState(() => new Set());\n const [downCalls, setDownCalls] = useState(() => new Set());\n const [carCalls, setCarCalls] = useState(() => new Set());\n\n // Doors\n const [doorState, setDoorState] = useState(\"closed\");\n const doorTimerRef = useRef(null);\n\n // Cabin transition\n const [cabinY, setCabinY] = useState(0);\n const [cabinTransitionMs, setCabinTransitionMs] = useState(0);\n const cabinRef = useRef(null);\n\n // Derived\n const floors = useMemo(() => {\n const arr = [];\n for (let f = 1; f <= numFloors; f++) arr.push(f);\n return arr;\n }, [numFloors]);\n\n const travelTimePerFloor = useMemo(() => {\n if (!Number.isFinite(movementSpeed) || movementSpeed <= 0) return Infinity;\n return 1 / movementSpeed;\n }, [movementSpeed]);\n\n // Reset requests that are out of range when numFloors changes\n useEffect(() => {\n const filterRange = (s) => new Set(Array.from(s).filter((f) => f >= 1 && f <= numFloors));\n setUpCalls((s) => filterRange(s));\n setDownCalls((s) => filterRange(s));\n setCarCalls((s) => filterRange(s));\n setCurrentFloor((f) => clampInt(f, 1, numFloors));\n }, [numFloors]);\n\n // Update cabinY on currentFloor changes (no animation when not moving)\n useEffect(() => {\n // y=0 at top; floor 1 at bottom\n const y = (numFloors - currentFloor) * floorHeight;\n if (movingTo == null) {\n setCabinTransitionMs(0);\n setCabinY(y);\n }\n }, [currentFloor, numFloors]);\n\n // Cleanup timers\n useEffect(() => {\n return () => {\n if (doorTimerRef.current) window.clearTimeout(doorTimerRef.current);\n };\n }, []);\n\n function anyPending() {\n return setHasAny(upCalls, downCalls, carCalls);\n }\n\n function pendingInDirection(dir) {\n if (dir === 1) {\n return {\n hall: upCalls,\n otherHall: downCalls,\n };\n }\n if (dir === -1) {\n return {\n hall: downCalls,\n otherHall: upCalls,\n };\n }\n return { hall: new Set(), otherHall: new Set() };\n }\n\n function computeNextStop(fromFloor, dir) {\n // Serve: carCalls + hallCalls matching dir.\n // Anything else waits for next direction.\n const { hall } = pendingInDirection(dir);\n const candidates = new Set([...carCalls, ...hall]);\n\n if (candidates.size === 0) return null;\n\n if (dir === 1) {\n const ahead = Array.from(candidates).filter((f) => f > fromFloor);\n if (ahead.length === 0) return null;\n return Math.min(...ahead);\n }\n if (dir === -1) {\n const ahead = Array.from(candidates).filter((f) => f < fromFloor);\n if (ahead.length === 0) return null;\n return Math.max(...ahead);\n }\n return null;\n }\n\n function decideDirectionWhenIdle(fromFloor) {\n // Choose closest requested floor (car or any hall). Tie-break: upward.\n const all = new Set([...carCalls, ...upCalls, ...downCalls]);\n if (all.size === 0) return { dir: 0, target: null };\n\n let best = null;\n let bestDist = Infinity;\n for (const f of all) {\n const d = Math.abs(f - fromFloor);\n if (d < bestDist) {\n bestDist = d;\n best = f;\n } else if (d === bestDist && best != null) {\n // tie: prefer higher floor (arbitrary but deterministic)\n if (f > best) best = f;\n }\n }\n\n if (best === fromFloor) {\n // Already at a requested floor: open doors immediately.\n return { dir: 0, target: fromFloor };\n }\n\n return { dir: best > fromFloor ? 1 : -1, target: best };\n }\n\n function startMove(targetFloor, dir) {\n if (targetFloor == null || targetFloor === currentFloor) return;\n setDirection(dir);\n setMovingTo(targetFloor);\n\n const distFloors = Math.abs(targetFloor - currentFloor);\n const durationSec = distFloors * travelTimePerFloor;\n const durationMs = Math.max(0, Math.round(durationSec * 1000));\n\n setCabinTransitionMs(durationMs);\n const y = (numFloors - targetFloor) * floorHeight;\n // Ensure doors are closed while moving\n setDoorState(\"closed\");\n setCabinY(y);\n }\n\n function clearServedRequestsAtFloor(floor, dirAtStop) {\n // Car calls always served when doors open at this floor.\n setCarCalls((s) => removeFrom(s, floor));\n\n // Hall calls: serve only those matching travel direction.\n // If idle (dirAtStop===0), serve both.\n if (dirAtStop === 1) {\n setUpCalls((s) => removeFrom(s, floor));\n } else if (dirAtStop === -1) {\n setDownCalls((s) => removeFrom(s, floor));\n } else {\n setUpCalls((s) => removeFrom(s, floor));\n setDownCalls((s) => removeFrom(s, floor));\n }\n }\n\n function scheduleDoorSequence(dirAtStop) {\n // Doors open only after arrival; then close; then proceed.\n if (doorTimerRef.current) window.clearTimeout(doorTimerRef.current);\n\n setDoorState(\"opening\");\n doorTimerRef.current = window.setTimeout(() => {\n setDoorState(\"open\");\n // Dwell time (keep short; students can re-trigger calls during dwell)\n const dwellMs = 600;\n doorTimerRef.current = window.setTimeout(() => {\n setDoorState(\"closing\");\n doorTimerRef.current = window.setTimeout(() => {\n setDoorState(\"closed\");\n // After doors close, decide what to do next\n proceedAfterStop(currentFloor, dirAtStop);\n }, Math.round(doorAnimTime * 1000));\n }, dwellMs);\n }, Math.round(doorAnimTime * 1000));\n }\n\n function proceedAfterStop(fromFloor, dirAtStop) {\n // Keep direction if more work ahead in same direction; otherwise reverse if pending.\n if (!anyPending()) {\n setDirection(0);\n setMovingTo(null);\n return;\n }\n\n if (dirAtStop === 0) {\n const { dir, target } = decideDirectionWhenIdle(fromFloor);\n if (target === fromFloor) {\n clearServedRequestsAtFloor(fromFloor, 0);\n scheduleDoorSequence(0);\n return;\n }\n if (dir === 0 || target == null) {\n setDirection(0);\n setMovingTo(null);\n return;\n }\n const next = computeNextStop(fromFloor, dir) ?? target;\n startMove(next, dir);\n return;\n }\n\n // Try to continue in the same direction\n const cont = computeNextStop(fromFloor, dirAtStop);\n if (cont != null) {\n startMove(cont, dirAtStop);\n return;\n }\n\n // No more in this direction; reverse if anything pending\n const rev = -dirAtStop;\n const revNext = computeNextStop(fromFloor, rev);\n if (revNext != null) {\n startMove(revNext, rev);\n return;\n }\n\n // Maybe pending exists only at current floor (or opposite hall call at current)\n const { dir, target } = decideDirectionWhenIdle(fromFloor);\n if (target === fromFloor) {\n clearServedRequestsAtFloor(fromFloor, 0);\n scheduleDoorSequence(0);\n return;\n }\n\n setDirection(0);\n setMovingTo(null);\n }\n\n // Movement completion handler\n function onCabinTransitionEnd(e) {\n if (e.propertyName !== \"transform\") return;\n if (!movingTo) return;\n // Ignore transform transitions from door panels\n if (e.currentTarget !== cabinRef.current) return;\n\n const arrived = movingTo;\n setMovingTo(null);\n setCurrentFloor(arrived);\n\n // Serve requests at arrived floor\n clearServedRequestsAtFloor(arrived, direction);\n\n // Doors open only after stopping (we're now fully stopped)\n scheduleDoorSequence(direction);\n }\n\n // When idle and doors closed, attempt to dispatch automatically\n useEffect(() => {\n if (movingTo != null) return;\n if (doorState !== \"closed\") return;\n if (!anyPending()) {\n setDirection(0);\n return;\n }\n\n // If current floor itself is requested (car or matching hall when direction known), open doors.\n const isCarHere = carCalls.has(currentFloor);\n const isUpHere = upCalls.has(currentFloor);\n const isDownHere = downCalls.has(currentFloor);\n\n if (isCarHere || (direction === 1 && isUpHere) || (direction === -1 && isDownHere) || (direction === 0 && (isUpHere || isDownHere))) {\n clearServedRequestsAtFloor(currentFloor, direction);\n scheduleDoorSequence(direction);\n return;\n }\n\n // Decide next target\n if (direction === 0) {\n const { dir, target } = decideDirectionWhenIdle(currentFloor);\n if (target == null) return;\n if (target === currentFloor) {\n clearServedRequestsAtFloor(currentFloor, 0);\n scheduleDoorSequence(0);\n return;\n }\n const next = computeNextStop(currentFloor, dir) ?? target;\n startMove(next, dir);\n return;\n }\n\n const next = computeNextStop(currentFloor, direction);\n if (next != null) {\n startMove(next, direction);\n return;\n }\n\n // Otherwise reverse if there are pending requests\n const rev = -direction;\n const revNext = computeNextStop(currentFloor, rev);\n if (revNext != null) {\n startMove(revNext, rev);\n } else {\n setDirection(0);\n }\n }, [movingTo, doorState, upCalls, downCalls, carCalls, currentFloor, direction, numFloors]);\n\n // UI helpers\n const shaftHeight = numFloors * floorHeight + shaftPadding * 2;\n const cabinHeight = floorHeight - 12;\n\n const doorDurationStyle = { transitionDuration: `${Math.max(0.1, doorAnimTime)}s` };\n\n function isActiveHallButton(floor, kind) {\n if (kind === \"up\") return upCalls.has(floor);\n if (kind === \"down\") return downCalls.has(floor);\n return false;\n }\n\n function isActiveCarButton(floor) {\n return carCalls.has(floor);\n }\n\n function requestHall(floor, kind) {\n if (floor < 1 || floor > numFloors) return;\n if (kind === \"up\") setUpCalls((s) => uniqAdd(s, floor));\n if (kind === \"down\") setDownCalls((s) => uniqAdd(s, floor));\n }\n\n function requestCar(floor) {\n if (floor < 1 || floor > numFloors) return;\n setCarCalls((s) => uniqAdd(s, floor));\n }\n\n function directionLabel() {\n if (movingTo != null) return direction === 1 ? \"UP\" : direction === -1 ? \"DOWN\" : \"IDLE\";\n return direction === 1 ? \"UP\" : direction === -1 ? \"DOWN\" : \"IDLE\";\n }\n\n const pendingSummary = useMemo(() => {\n const up = toSortedArray(upCalls, true);\n const down = toSortedArray(downCalls, false);\n const car = toSortedArray(carCalls, true);\n return { up, down, car };\n }, [upCalls, downCalls, carCalls]);\n\n return (\n

Elevator Dispatching Simulator

\n Direction-based queuing (serve on-the-way requests; queue others for next direction).\n

\n setShowSettings((v) => !v)}\n className=\"shrink-0 rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-medium shadow-sm active:scale-[0.99]\"\n aria-expanded={showSettings}\n >\n {showSettings ? \"Hide\" : \"Show\"} settings\n \n

\n\n {/* Collapsible settings */}\n \n

\n \n

Floors

\n setNumFloors(clampInt(Number(e.target.value || 5), 2, 12))}\n className=\"mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm outline-none focus:border-slate-300\"\n />\n

2–12 (compact for phones)

\n \n\n \n

Movement speed

\n setMovementSpeed(Math.max(0.2, Number(e.target.value || 1.2)))}\n className=\"mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm outline-none focus:border-slate-300\"\n />\n

{formatSpeed(movementSpeed)} • {formatSeconds(travelTimePerFloor)} per floor

\n \n\n \n

Door animation

\n setDoorAnimTime(Math.max(0.2, Number(e.target.value || 1.0)))}\n className=\"mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm outline-none focus:border-slate-300\"\n />\n

Open/close duration

\n \n

\n\n {/* Main layout: compact 2-column even on mobile */}\n

\n {/* Elevator + floors */}\n

Shaft

\n \n {directionLabel()}\n \n \n F{currentFloor}\n \n

\n\n

\n {/* Floor grid lines & labels */}\n

\n {floors\n .slice()\n .reverse()\n .map((f) => {\n const top = (numFloors - f) * floorHeight + shaftPadding;\n const isCurrent = f === currentFloor;\n return (\n \n

\n \n {f}\n

\n );\n })}\n

\n\n {/* Cabin */}\n \n

\n {/* Door panels */}\n

\n \n \n

\n\n {/* Cabin header */}\n

\n Cabin\n

\n F{currentFloor}\n {movingTo != null ? `→${movingTo}` : \"\"}\n

\n\n {/* Hall call buttons (stacked on left of shaft) */}\n

\n {floors\n .slice()\n .reverse()\n .map((f) => {\n const showUp = f !== numFloors;\n const showDown = f !== 1;\n return (\n

Call

\n {showUp ? (\n requestHall(f, \"up\")}\n className={`rounded-xl px-2 py-1 text-[11px] font-semibold shadow-sm border transition active:scale-[0.99] ${\n isActiveHallButton(f, \"up\")\n ? \"border-sky-200 bg-sky-100 text-sky-800\"\n : \"border-slate-200 bg-white text-slate-700\"\n }`}\n aria-label={`Call up at floor ${f}`}\n disabled={movingTo != null && doorState !== \"closed\"}\n >\n ↑\n \n ) : (\n

\n )}\n {showDown ? (\n requestHall(f, \"down\")}\n className={`rounded-xl px-2 py-1 text-[11px] font-semibold shadow-sm border transition active:scale-[0.99] ${\n isActiveHallButton(f, \"down\")\n ? \"border-violet-200 bg-violet-100 text-violet-800\"\n : \"border-slate-200 bg-white text-slate-700\"\n }`}\n aria-label={`Call down at floor ${f}`}\n disabled={movingTo != null && doorState !== \"closed\"}\n >\n ↓\n \n ) : (\n

\n )}\n

\n );\n })}\n

\n\n {/* Subtle center line */}\n

\n\n

\n Pending\n \n Car: {pendingSummary.car.length ? pendingSummary.car.join(\",\") : \"—\"}\n \n \n Up: {pendingSummary.up.length ? pendingSummary.up.join(\",\") : \"—\"}\n \n \n Down: {pendingSummary.down.length ? pendingSummary.down.join(\",\") : \"—\"}\n \n

\n\n {/* Control panel */}\n

Controls

Cabin panel + indicator

\n {\n // Reset everything\n setUpCalls(new Set());\n setDownCalls(new Set());\n setCarCalls(new Set());\n setDirection(0);\n setMovingTo(null);\n setDoorState(\"closed\");\n if (doorTimerRef.current) window.clearTimeout(doorTimerRef.current);\n }}\n className=\"rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-medium shadow-sm active:scale-[0.99]\"\n >\n Reset\n \n

\n\n {/* Indicator */}\n

Current

Direction

Floor

{currentFloor}

\n {movingTo != null ? `Moving to ${movingTo}` : doorState === \"open\" ? \"Doors open\" : \"Stopped\"}\n

Mode

{directionLabel()}

Doors: {doorState}

\n\n {/* Manual door controls */}\n

\n {\n if (movingTo != null) return;\n if (doorState === \"open\" || doorState === \"opening\") return;\n setDoorState(\"opening\");\n if (doorTimerRef.current) window.clearTimeout(doorTimerRef.current);\n doorTimerRef.current = window.setTimeout(() => setDoorState(\"open\"), Math.round(doorAnimTime * 1000));\n }}\n className=\"rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold shadow-sm active:scale-[0.99] disabled:opacity-50\"\n disabled={movingTo != null}\n >\n Open\n \n {\n if (movingTo != null) return;\n if (doorState === \"closed\" || doorState === \"closing\") return;\n setDoorState(\"closing\");\n if (doorTimerRef.current) window.clearTimeout(doorTimerRef.current);\n doorTimerRef.current = window.setTimeout(() => {\n setDoorState(\"closed\");\n proceedAfterStop(currentFloor, direction);\n }, Math.round(doorAnimTime * 1000));\n }}\n className=\"rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold shadow-sm active:scale-[0.99] disabled:opacity-50\"\n disabled={movingTo != null}\n >\n Close\n \n

\n\n {/* Floor selection buttons */}\n

Select floor

(Car calls)

\n\n

\n {floors\n .slice()\n .reverse()\n .map((f) => (\n requestCar(f)}\n className={`rounded-2xl px-3 py-3 text-sm font-semibold shadow-sm border transition active:scale-[0.99] ${\n isActiveCarButton(f)\n ? \"border-emerald-200 bg-emerald-100 text-emerald-800\"\n : \"border-slate-200 bg-slate-50 text-slate-800\"\n }`}\n aria-label={`Select floor ${f}`}\n >\n {f}\n \n ))}\n

\n\n

\n Tip: Add a mix of hall calls and car calls, then watch which ones are served while going {direction === 1 ? \"up\" : direction === -1 ? \"down\" : \"in a chosen direction\"}.\n

\n\n {/* Algorithm note */}\n

Dispatch rule

\n While moving, the elevator stops at car calls and hall calls matching its direction (on-the-way).\n
\n Hall calls in the opposite direction stay active and are served after the elevator finishes the current direction and reverses.\n
\n Doors open only after the cabin fully stops; open/close durations follow your settings.\n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","3265545345650754295","traceTime",1780981475766]