feat: Implement complete lift simulator with interactive UI#42
feat: Implement complete lift simulator with interactive UI#42Soumava-221B wants to merge 3 commits into
Conversation
- Add HTML structure with input form for floors and lifts configuration - Create responsive CSS styling for lift doors, floors, and controls - Implement JavaScript logic for lift movement, door animations, and call handling - Add lift availability tracking and queue management system - Support multiple lifts with automatic assignment and movement timing - Include visual door opening/closing animations with CSS transforms - Add floor control buttons (up/down) for lift calls - Implement input validation and error handling
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThis PR introduces a complete Lift Simulator web application, starting with a user input form that collects floor and lift counts, then dynamically rendering a visual grid of floors with control buttons and animated lift elements. The JavaScript coordinates lift dispatch, movement animations, and door control via state-tracked calls and availability queues. ChangesLift Simulator Application
Sequence Diagram(s)sequenceDiagram
participant Floor as Floor Button
participant Handler as handleLiftCall()
participant Movement as liftMovement()
participant Doors as doorOpenClose()
participant Queue as Call Queue
Floor->>Handler: Click up/down button
Handler->>Handler: Check available lifts
alt Lift available
Handler->>Movement: Animate to floor
Movement->>Movement: CSS transform
Movement->>Doors: Schedule door ops
Doors->>Doors: Open/close doors
Doors->>Handler: Mark available again
Handler->>Queue: Process next call
else No lift available
Handler->>Queue: Enqueue floor request
end
Queue->>Handler: Dequeue when lift ready
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/css/main.css`:
- Around line 5-11: The CSS custom properties --bg-color, --text-color,
--upButton-color, --downButton-color, --lift-color, --border-color, and
--door-color are defined with quoted hex strings which makes var(--text-color)
and similar usages invalid; update each variable value to be a raw hex color
(e.g., `#2D2727` instead of "`#2D2727`") so color: var(--text-color) and other var()
usages resolve correctly.
In `@src/index.html`:
- Around line 23-31: Labels use for="floorInput" and for="liftInput" but the
corresponding <input> elements only have name attributes; add id="floorInput" to
the input with name="floorInput" and id="liftInput" to the input with
name="liftInput" so the label's for attributes correctly bind to the input
elements (ensure ids are unique and match the label values).
- Around line 12-15: The HTML has a mismatched element: <section
class="countShow_section"> is opened but not closed before the closing
</header>; fix this by inserting a closing </section> before </header> so the
section (countShow_section) encloses its h3 elements and the header is properly
closed; locate the markup around the countShow_section and header tags and add
the missing </section> to restore valid HTML structure.
In `@src/js/main.js`:
- Around line 36-41: Replace the innerHTML construction for topFloor with DOM
methods: create the section element with class "floor-details", create a button
with classes "lift-control down" and set its type attribute and textContent to
"↓", create a p element with class "floor-number" and set its textContent to
`Floor-${totalFloors}`, then append the button and p into the section and append
the section into the topFloor container; update references to topFloor and
totalFloors accordingly and remove the innerHTML assignment to avoid
string-based DOM insertion.
- Around line 16-21: floorCount and liftCount are being read as strings from
floorInput.value and liftInput.value so non-numeric values like "abc" bypass the
numeric check; convert the inputs to numbers (e.g., using Number(...) or
parseInt(...,10)) before comparing and then validate with Number.isFinite or
isNaN (e.g., ensure !isNaN(floorCount) && floorCount > 0) so invalid or
non-integer inputs are rejected; update the assignment of floorCount and
liftCount and the validation branch that currently calls handleFloor to use the
parsed numeric values and reject on NaN or non-positive values.
- Line 107: The code uses event.composedPath()[2].id which is brittle; replace
this DOM traversal with a robust ancestor lookup: find the clicked element
(event.target or event.currentTarget) and call closest(...) to locate the floor
element (e.g., using a selector like '.floor' or a data attribute such as
'[data-floor]'), then read its id; also add a null-check and early return or
error handling if closest(...) returns null to avoid runtime errors — update the
logic around the floorId declaration accordingly (the symbol to change is the
floorId assignment where event.composedPath()[2].id is used).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: ab153c35-34ed-48bd-9cff-0cfbad5fca1e
📒 Files selected for processing (4)
.vscode/settings.jsonsrc/css/main.csssrc/index.htmlsrc/js/main.js
Date: 16/05/26
Developer Name: Soumava Das
Description
This PR introduces a complete lift simulator web application with interactive UI and realistic lift movement animations. The application allows users to configure the number of floors and lifts, then interact with the simulator through floor call buttons.
Screenrecording
Screen.Recording.2026-05-16.at.8.58.24.PM.mov