From 733f7af57fe6ad65503188096eaa10809ce0a813 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Wed, 23 Aug 2023 18:53:37 +0530 Subject: [PATCH 01/19] lift simulator m1 --- .DS_Store | Bin 0 -> 6148 bytes src/css/main.css | 60 +++++++++++++++++++++++++++++++++++ src/index.html | 49 +++++++++++++++++++++++++++++ src/js/main.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 189 insertions(+) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ea0ceb0e1d03990423bde5eee869363ad8ebf7d6 GIT binary patch literal 6148 zcmeHK!AiqG5PhRPRC?(}5JcD?u;3r0B|QiVVt+tmYbhkAh!v0dBR^5!%&yYJoJC{? zcHU%mX0myZ-5mfj+bu7EF@Pb5qNvd$>h7I7NWq6hu^Q*N!82+UD0>S1MVGGq7+2Wf z5ii(Z{|XhKb12rBn0~!1>xZJO3uY;0Q;x}p2`%7suhN1wE9}U`Ju7cm^fSOSTV*(k=-L@@ z2AqL!26TT29Ew@OCZcT}RMr9z2Xvdz){C*`goIhbCL(7j5>tsWRZ@!~F`fR9;E>+Z)g2r;gBq%YiGb2XfvR_FJ-Lf|D3-}Z|)^`^bq+#`&N&button { + padding: 5px 8px; + z-index: 2; +} + +.lift { + position: absolute; + bottom: 0%; + left: 20%; + transform: translate(-50%); + width: 100px; + height: 100px; + background-color: #715050; + border-radius: 8px; + transition: bottom 3s ease; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index e69de29b..072d09c2 100644 --- a/src/index.html +++ b/src/index.html @@ -0,0 +1,49 @@ + + + + + + + + Document + + + +
+ + + +
+ +
+
+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index e69de29b..acd68865 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,80 @@ +const state = { + noOfFloors: 0, + noOfLifts: 0, + heightOfEachFloor: 150, + leftMarginEachLift: 150, + requests: [], + lifts: [], +}; + + +const floorContainer = document.querySelector(".floor-container"); +const liftContainer = document.querySelector(".lift-container"); + +const form = document.querySelector("form"); +form.onsubmit = (e) => { + e.preventDefault(); + let formData = new FormData(e.target); + state.noOfFloors = parseInt(formData.get("floor_input")); + state.noOfLifts = parseInt(formData.get("lift_input")); + initializeSimulation(); +}; + +function initializeSimulation() { + floorContainer.innerHTML = ""; + liftContainer.innerHTML = ""; + render(); +} + +function render() { + for (let index = 0; index < state.noOfFloors; index++) { + let floor = document.createElement("div"); + floor.classList.add("floor-divider"); + floor_heading = document.createElement("h4"); + floor_heading.innerText = `Floor ${index + 1}`; + floor_button = document.createElement("button"); + floor_button.innerText = `Call`; + floor_button.onclick = () => { + console.log("hello"); + callLift(index + 1); + }; + floor.append(floor_heading, floor_button); + floor.style.height = `${state.heightOfEachFloor + 5}px`; + floorContainer.append(floor); + } + + for (let index = 0; index < state.noOfLifts; index++) { + let lift = document.createElement("div"); + lift.classList.add("lift"); + let lift_state = { id: index, state: "free" }; + lift.classList.add(`lift-${lift_state.id}`); + state.lifts.push(lift_state); + + lift.setAttribute("data-id", lift_state.id); + lift.setAttribute("data-state", lift_state.state); + + lift.style.left = `${(index + 1) * state.leftMarginEachLift}px`; + liftContainer.append(lift); + } + function callLift(floor) { + const availableLift = state.lifts.find(lift => lift.state === "free"); + + if (availableLift) { + availableLift.state = "occupied"; + const liftElement = document.querySelector(`.lift-${availableLift.id}`); + liftElement.setAttribute("data-state", availableLift.state); + + liftElement.style.transitionDuration = `${2 * floor}s`; + liftElement.style.bottom = `${(floor - 1) * state.heightOfEachFloor + 30}px`; + setTimeout(() => { + availableLift.state = "free"; + liftElement.setAttribute("data-state", availableLift.state); + }, 2 * floor * 1000); + } else { + alert("All lifts are busy. Please wait."); + } + } +} + + +initializeSimulation(); \ No newline at end of file From 6cabc8e556bac829d44fab8c281d213de80175e1 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Wed, 23 Aug 2023 19:37:38 +0530 Subject: [PATCH 02/19] lift simulator m1 --- src/css/main.css | 89 ++++++++++++++++++++++++++++++++++++++++++++++-- src/js/main.js | 71 +++++++++++++++++++++++++++----------- 2 files changed, 138 insertions(+), 22 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 6e936cac..a394ea96 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -48,7 +48,7 @@ } .lift { - position: absolute; +position: absolute; bottom: 0%; left: 20%; transform: translate(-50%); @@ -57,4 +57,89 @@ background-color: #715050; border-radius: 8px; transition: bottom 3s ease; -} \ No newline at end of file + animation-duration: 2.5s; + animation-timing-function: ease; + animation-fill-mode: forwards; +} + +.door-open { + animation-name: doorOpen; +} + +.door-close { + animation-name: doorClose; +} + +@keyframes doorOpen { + 0% { + transform: translate(-50%) scaleY(1); + } + 50% { + transform: translate(-50%) scaleY(0.1); + } + 100% { + transform: translate(-50%) scaleY(0.1); + } +} + +@keyframes doorClose { + 0% { + transform: translate(-50%) scaleY(0.1); + } + 50% { + transform: translate(-50%) scaleY(1); + } + 100% { + transform: translate(-50%) scaleY(1); + } +} + + +.lift { +position: absolute; + bottom: 0%; + left: 20%; + transform: translate(-50%); + width: 100px; + height: 100px; + background-color: #715050; + border-radius: 8px; + transition: bottom 3s ease; + animation-duration: 2.5s; + animation-timing-function: ease; + animation-fill-mode: forwards; +} +.door-open { + animation-name: doorOpen; +} + +.door-close { + animation-name: doorClose; +} + +@keyframes doorOpen { + 0% { + transform: translate(-50%, 0) scaleX(1); + } + 50% { + transform: translate(-50%, 0) scaleX(0); + } + 100% { + transform: translate(-50%, 0) scaleX(0); + } +} + +@keyframes doorClose { + 0% { + transform: translate(-50%, 0) scaleX(0); + } + 50% { + transform: translate(-50%, 0) scaleX(1); + } + 100% { + transform: translate(-50%, 0) scaleX(1); + } +} + + + diff --git a/src/js/main.js b/src/js/main.js index acd68865..7317b4fb 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -32,13 +32,22 @@ function render() { floor.classList.add("floor-divider"); floor_heading = document.createElement("h4"); floor_heading.innerText = `Floor ${index + 1}`; - floor_button = document.createElement("button"); - floor_button.innerText = `Call`; - floor_button.onclick = () => { - console.log("hello"); + + // Call button for going up + floor_button_up = document.createElement("button"); + floor_button_up.innerText = `Up`; + floor_button_up.onclick = () => { callLift(index + 1); }; - floor.append(floor_heading, floor_button); + + // Call button for going down + floor_button_down = document.createElement("button"); + floor_button_down.innerText = `Down`; + floor_button_down.onclick = () => { + callLift(index + 1, true); + }; + + floor.append(floor_heading, floor_button_up, floor_button_down); floor.style.height = `${state.heightOfEachFloor + 5}px`; floorContainer.append(floor); } @@ -56,25 +65,47 @@ function render() { lift.style.left = `${(index + 1) * state.leftMarginEachLift}px`; liftContainer.append(lift); } - function callLift(floor) { - const availableLift = state.lifts.find(lift => lift.state === "free"); - - if (availableLift) { - availableLift.state = "occupied"; - const liftElement = document.querySelector(`.lift-${availableLift.id}`); - liftElement.setAttribute("data-state", availableLift.state); +} - liftElement.style.transitionDuration = `${2 * floor}s`; - liftElement.style.bottom = `${(floor - 1) * state.heightOfEachFloor + 30}px`; +function callLift(floor, isGoingDown = false) { + const availableLift = state.lifts.find(lift => lift.state === "free"); + + if (availableLift) { + availableLift.state = "occupied"; + const liftElement = document.querySelector(`.lift-${availableLift.id}`); + liftElement.setAttribute("data-state", availableLift.state); + liftElement.classList.add("door-open"); + setTimeout(() => { + liftElement.classList.remove("door-open"); + liftElement.classList.add("door-close"); setTimeout(() => { - availableLift.state = "free"; - liftElement.setAttribute("data-state", availableLift.state); - }, 2 * floor * 1000); - } else { - alert("All lifts are busy. Please wait."); - } + liftElement.classList.remove("door-close"); + // direction and target floor + const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; + if (isGoingDown) { + const transitionDuration = isGoingDown + ? `${2 * Math.abs(state.noOfFloors - floor)}s` + : `${2 * floor}s`; + liftElement.style.transitionDuration = transitionDuration; + liftElement.style.bottom = `${targetFloorPosition}px`; + } else { + const transitionDuration = `${2 * floor}s`; + liftElement.style.transitionDuration = transitionDuration; + liftElement.style.bottom = `${targetFloorPosition}px`; + } + + setTimeout(() => { + availableLift.state = "free"; + liftElement.setAttribute("data-state", availableLift.state); + }, Math.max(2 * floor, 2 * Math.abs(state.noOfFloors - floor)) * 1000); + }, 2500); + }, 2500); + } else { + alert("All lifts are busy. Please wait."); } } + + initializeSimulation(); \ No newline at end of file From 48bb69852bcad6a5055fb366485328103550da80 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Wed, 23 Aug 2023 20:33:46 +0530 Subject: [PATCH 03/19] lift simulator m1 --- src/css/main.css | 98 +++++++++++++++++++----------------------------- src/js/main.js | 40 +++++++++++--------- 2 files changed, 62 insertions(+), 76 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index a394ea96..3293eff5 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -8,7 +8,7 @@ background-color: #818181; width: auto; display: flex; - margin: 4rem 4rem; + margin: 2rem; display: grid; grid-template-areas: "overflow"; } @@ -17,43 +17,41 @@ .lift-container { background-color: rgb(255, 255, 133); width: 100%; - height: 100%; display: flex; flex-direction: column-reverse; - margin: 0% 10%; position: relative; min-height: max-content; grid-area: overflow; + overflow: hidden; /* Prevent scrolling */ } .lift-container { background-color: transparent; } - .floor-divider { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; - padding: 0.8rem; + padding: 0.5rem; border: 2px solid #cdcdcd; border-left: none; border-right: none; } -.floor-divider>button { +.floor-divider > button { padding: 5px 8px; z-index: 2; } .lift { -position: absolute; - bottom: 0%; - left: 20%; - transform: translate(-50%); - width: 100px; - height: 100px; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 60px; background-color: #715050; border-radius: 8px; transition: bottom 3s ease; @@ -72,74 +70,56 @@ position: absolute; @keyframes doorOpen { 0% { - transform: translate(-50%) scaleY(1); + transform: translateX(-50%) scaleX(1); } 50% { - transform: translate(-50%) scaleY(0.1); + transform: translateX(-50%) scaleX(0.5); } 100% { - transform: translate(-50%) scaleY(0.1); + transform: translateX(-50%) scaleX(0.5); } } @keyframes doorClose { 0% { - transform: translate(-50%) scaleY(0.1); + transform: translateX(-50%) scaleX(0.5); } 50% { - transform: translate(-50%) scaleY(1); + transform: translateX(-50%) scaleX(1); } 100% { - transform: translate(-50%) scaleY(1); + transform: translateX(-50%) scaleX(1); } } - -.lift { -position: absolute; - bottom: 0%; - left: 20%; - transform: translate(-50%); - width: 100px; - height: 100px; - background-color: #715050; - border-radius: 8px; - transition: bottom 3s ease; - animation-duration: 2.5s; - animation-timing-function: ease; - animation-fill-mode: forwards; -} -.door-open { - animation-name: doorOpen; -} - -.door-close { - animation-name: doorClose; -} - -@keyframes doorOpen { - 0% { - transform: translate(-50%, 0) scaleX(1); +/* Media query for screens up to 768px width */ +@media (max-width: 768px) { + .container { + margin: 1rem; } - 50% { - transform: translate(-50%, 0) scaleX(0); + + .floor-divider { + padding: 0.3rem; + display: flex; + justify-content: start; } - 100% { - transform: translate(-50%, 0) scaleX(0); + + .lift { + width: 40px; + height: 40px; + left: 10%; } -} -@keyframes doorClose { - 0% { - transform: translate(-50%, 0) scaleX(0); + .container { + margin: 1rem; } - 50% { - transform: translate(-50%, 0) scaleX(1); + + .floor-divider { + padding: 0.3rem; } - 100% { - transform: translate(-50%, 0) scaleX(1); + + .floor-divider button { + font-size: 10px; + padding: 3px 6px; } } - - - diff --git a/src/js/main.js b/src/js/main.js index 7317b4fb..711fd538 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -17,9 +17,17 @@ form.onsubmit = (e) => { let formData = new FormData(e.target); state.noOfFloors = parseInt(formData.get("floor_input")); state.noOfLifts = parseInt(formData.get("lift_input")); - initializeSimulation(); -}; + // Check if the device is desktop + const isDesktopDevice = window.innerWidth > 768; + const maxLifts = isDesktopDevice ? 8 : 6; + + if (state.noOfLifts <= maxLifts) { + initializeSimulation(); + } else { + alert(isDesktopDevice ? "Desktop devices should have 10 lifts." : "Mobile devices have a maximum of 7 lifts."); + } +}; function initializeSimulation() { floorContainer.innerHTML = ""; liftContainer.innerHTML = ""; @@ -32,6 +40,7 @@ function render() { floor.classList.add("floor-divider"); floor_heading = document.createElement("h4"); floor_heading.innerText = `Floor ${index + 1}`; + const liftLeftPosition = (index + 1) * 10; // Call button for going up floor_button_up = document.createElement("button"); @@ -54,6 +63,7 @@ function render() { for (let index = 0; index < state.noOfLifts; index++) { let lift = document.createElement("div"); + const liftLeftPosition = (index + 1) * 12; lift.classList.add("lift"); let lift_state = { id: index, state: "free" }; lift.classList.add(`lift-${lift_state.id}`); @@ -62,14 +72,14 @@ function render() { lift.setAttribute("data-id", lift_state.id); lift.setAttribute("data-state", lift_state.state); - lift.style.left = `${(index + 1) * state.leftMarginEachLift}px`; + lift.style.left = `${liftLeftPosition}%`; liftContainer.append(lift); } } function callLift(floor, isGoingDown = false) { const availableLift = state.lifts.find(lift => lift.state === "free"); - + if (availableLift) { availableLift.state = "occupied"; const liftElement = document.querySelector(`.lift-${availableLift.id}`); @@ -80,24 +90,19 @@ function callLift(floor, isGoingDown = false) { liftElement.classList.add("door-close"); setTimeout(() => { liftElement.classList.remove("door-close"); - // direction and target floor + // Determine direction and target floor const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; - if (isGoingDown) { - const transitionDuration = isGoingDown - ? `${2 * Math.abs(state.noOfFloors - floor)}s` - : `${2 * floor}s`; - liftElement.style.transitionDuration = transitionDuration; - liftElement.style.bottom = `${targetFloorPosition}px`; - } else { - const transitionDuration = `${2 * floor}s`; - liftElement.style.transitionDuration = transitionDuration; - liftElement.style.bottom = `${targetFloorPosition}px`; - } + const transitionDuration = isGoingDown + ? `${2 * Math.abs(floor - 1)}s` + : `${2 * floor}s`; + liftElement.style.transitionDuration = transitionDuration; + liftElement.style.bottom = `${targetFloorPosition}px`; + setTimeout(() => { availableLift.state = "free"; liftElement.setAttribute("data-state", availableLift.state); - }, Math.max(2 * floor, 2 * Math.abs(state.noOfFloors - floor)) * 1000); + }, Math.max(2 * floor, 2 * Math.abs(floor - 1)) * 1000); }, 2500); }, 2500); } else { @@ -108,4 +113,5 @@ function callLift(floor, isGoingDown = false) { + initializeSimulation(); \ No newline at end of file From 04786bae651e6a259e14da30b18e8c13ab187e4f Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Wed, 23 Aug 2023 20:36:25 +0530 Subject: [PATCH 04/19] lift simulator m1 --- src/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/main.js b/src/js/main.js index 711fd538..2fd96273 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -25,7 +25,7 @@ form.onsubmit = (e) => { if (state.noOfLifts <= maxLifts) { initializeSimulation(); } else { - alert(isDesktopDevice ? "Desktop devices should have 10 lifts." : "Mobile devices have a maximum of 7 lifts."); + alert(isDesktopDevice ? "Desktop devices should have 8 lifts." : "Mobile devices have a maximum of 6 lifts."); } }; function initializeSimulation() { From 60f41ef563b42b3ccd569f5de1129917a672d9c3 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Tue, 29 Aug 2023 15:08:45 +0530 Subject: [PATCH 05/19] fixed commit --- .DS_Store | Bin 6148 -> 6148 bytes .vscode/settings.json | 3 +++ src/index.html | 22 ---------------------- 3 files changed, 3 insertions(+), 22 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.DS_Store b/.DS_Store index ea0ceb0e1d03990423bde5eee869363ad8ebf7d6..631e4b53c7d787a1f97eb891e4ba517c0b7f19e7 100644 GIT binary patch delta 292 zcmZoMXfc=|#>B)qu~2NHo+2ab#DLw4KQJ;fvQFkAvvYFu@;iZU0|G`y2+hC?rD0STkOB2gS#VKa qPJUiGP=s;wLq<22&Fmcf9KbLDa=tT9<`=Q#0Ga|eXmfzb7G?m?qD-s+ delta 67 zcmZoMXfc=|#>B`mu~2NHo+2aj#DLw5%#(STu5LcY?8vhD0`pVG&Fmcf96%+T4>Ese Wp3E;|$-w{wj0_A+n*&6)FarRFG!b?H diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 072d09c2..2d1d65f9 100644 --- a/src/index.html +++ b/src/index.html @@ -17,30 +17,8 @@
-
-
From dddb2d792296cb7d036951c15c0f2469e08dc593 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Mon, 4 Sep 2023 16:27:26 +0530 Subject: [PATCH 06/19] lift fix --- .vscode/settings.json | 3 ++- src/css/main.css | 12 +++--------- src/js/main.js | 42 +++++++++++++++++++++++++----------------- 3 files changed, 30 insertions(+), 27 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a2913..4d1a35a8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5501, + "editor.acceptSuggestionOnEnter": "on" } \ No newline at end of file diff --git a/src/css/main.css b/src/css/main.css index 3293eff5..59a8f787 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -70,25 +70,19 @@ @keyframes doorOpen { 0% { - transform: translateX(-50%) scaleX(1); - } - 50% { - transform: translateX(-50%) scaleX(0.5); + transform: translateX(-50%) scaleX(0); } 100% { - transform: translateX(-50%) scaleX(0.5); + transform: translateX(-50%) scaleX(1); } } @keyframes doorClose { 0% { - transform: translateX(-50%) scaleX(0.5); - } - 50% { transform: translateX(-50%) scaleX(1); } 100% { - transform: translateX(-50%) scaleX(1); + transform: translateX(-50%) scaleX(0); } } diff --git a/src/js/main.js b/src/js/main.js index 2fd96273..2b1891aa 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -53,7 +53,7 @@ function render() { floor_button_down = document.createElement("button"); floor_button_down.innerText = `Down`; floor_button_down.onclick = () => { - callLift(index + 1, true); + callLift(index + 1); }; floor.append(floor_heading, floor_button_up, floor_button_down); @@ -78,33 +78,40 @@ function render() { } function callLift(floor, isGoingDown = false) { - const availableLift = state.lifts.find(lift => lift.state === "free"); + const availableLift = state.lifts.find((lift) => lift.state === "free"); if (availableLift) { availableLift.state = "occupied"; const liftElement = document.querySelector(`.lift-${availableLift.id}`); liftElement.setAttribute("data-state", availableLift.state); - liftElement.classList.add("door-open"); + + // Determine direction and target floor + const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; + const transitionDuration = isGoingDown + ? `${2 * Math.abs(floor - 1)}s` + : `${2 * floor}s`; + + // Move the lift to the target floor + liftElement.style.transitionDuration = transitionDuration; + liftElement.style.bottom = `${targetFloorPosition}px`; + + // Wait for the lift to reach the target floor setTimeout(() => { - liftElement.classList.remove("door-open"); - liftElement.classList.add("door-close"); + liftElement.classList.add("door-open"); + + // Show the door animation for 2.5 seconds setTimeout(() => { - liftElement.classList.remove("door-close"); - // Determine direction and target floor - const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; - const transitionDuration = isGoingDown - ? `${2 * Math.abs(floor - 1)}s` - : `${2 * floor}s`; - - liftElement.style.transitionDuration = transitionDuration; - liftElement.style.bottom = `${targetFloorPosition}px`; + liftElement.classList.remove("door-open"); + // liftElement.classList.add("door-close"); + // Wait for the door animation to finish setTimeout(() => { + liftElement.classList.remove("door-close"); availableLift.state = "free"; liftElement.setAttribute("data-state", availableLift.state); - }, Math.max(2 * floor, 2 * Math.abs(floor - 1)) * 1000); - }, 2500); - }, 2500); + }, 2500); + }, 2500); + }, parseInt(transitionDuration) * 1000); } else { alert("All lifts are busy. Please wait."); } @@ -114,4 +121,5 @@ function callLift(floor, isGoingDown = false) { + initializeSimulation(); \ No newline at end of file From 42576cee6aa1737fcc5a5e26fe7e1031aeeba555 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Tue, 5 Sep 2023 00:57:41 +0530 Subject: [PATCH 07/19] lift fix and errors handled --- src/css/main.css | 1 - src/js/main.js | 61 ++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 51 insertions(+), 11 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 59a8f787..4999ab16 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -86,7 +86,6 @@ } } -/* Media query for screens up to 768px width */ @media (max-width: 768px) { .container { margin: 1rem; diff --git a/src/js/main.js b/src/js/main.js index 2b1891aa..c5400491 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -12,22 +12,49 @@ const floorContainer = document.querySelector(".floor-container"); const liftContainer = document.querySelector(".lift-container"); const form = document.querySelector("form"); + form.onsubmit = (e) => { e.preventDefault(); let formData = new FormData(e.target); - state.noOfFloors = parseInt(formData.get("floor_input")); - state.noOfLifts = parseInt(formData.get("lift_input")); + const floorInput = formData.get("floor_input"); + const liftInput = formData.get("lift_input"); + + if (!floorInput || !liftInput) { + alert("Both inputs must be filled."); + return; + } + + const numFloors = parseInt(floorInput); + const numLifts = parseInt(liftInput); + + if (isNaN(numFloors) || isNaN(numLifts)) { + alert("Inputs must be valid numbers."); + return; + } + + // Check if the number of lifts is not greater than the number of floors + if (numLifts > numFloors) { + alert("Number of lifts cannot be greater than the number of floors."); + return; + } // Check if the device is desktop const isDesktopDevice = window.innerWidth > 768; - const maxLifts = isDesktopDevice ? 8 : 6; + const maxLifts = isDesktopDevice ? 8 : 6; - if (state.noOfLifts <= maxLifts) { + if (numLifts <= maxLifts) { + state.noOfFloors = numFloors; + state.noOfLifts = numLifts; initializeSimulation(); } else { - alert(isDesktopDevice ? "Desktop devices should have 8 lifts." : "Mobile devices have a maximum of 6 lifts."); + alert( + isDesktopDevice + ? "Desktop devices should have 8 lifts." + : "Mobile devices have a maximum of 6 lifts." + ); } }; + function initializeSimulation() { floorContainer.innerHTML = ""; liftContainer.innerHTML = ""; @@ -81,6 +108,7 @@ function callLift(floor, isGoingDown = false) { const availableLift = state.lifts.find((lift) => lift.state === "free"); if (availableLift) { + // Mark the lift as occupied availableLift.state = "occupied"; const liftElement = document.querySelector(`.lift-${availableLift.id}`); liftElement.setAttribute("data-state", availableLift.state); @@ -102,21 +130,34 @@ function callLift(floor, isGoingDown = false) { // Show the door animation for 2.5 seconds setTimeout(() => { liftElement.classList.remove("door-open"); - // liftElement.classList.add("door-close"); // Wait for the door animation to finish setTimeout(() => { - liftElement.classList.remove("door-close"); - availableLift.state = "free"; - liftElement.setAttribute("data-state", availableLift.state); + liftElement.classList.add("door-close"); + setTimeout(() => { + liftElement.classList.remove("door-close"); + availableLift.state = "free"; + liftElement.setAttribute("data-state", availableLift.state); + + // Check if there are pending requests + if (state.requests.length > 0) { + // Get the next requested floor from the queue + const nextRequest = state.requests.shift(); + // Call the lift to the next requested floor + callLift(nextRequest.floor, nextRequest.isGoingDown); + } + }, 2500); }, 2500); }, 2500); }, parseInt(transitionDuration) * 1000); } else { - alert("All lifts are busy. Please wait."); + // If all lifts are busy, add the request to the queue + state.requests.push({ floor, isGoingDown }); } } +initializeSimulation(); + From ae994ea4b1f653f736c5ce7e56bf449d9eba410d Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Mon, 11 Sep 2023 18:44:41 +0530 Subject: [PATCH 08/19] issue : same floor --- src/js/main.js | 36 +++++++++++++----------------------- 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index c5400491..d952efa3 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -7,7 +7,6 @@ const state = { lifts: [], }; - const floorContainer = document.querySelector(".floor-container"); const liftContainer = document.querySelector(".lift-container"); @@ -32,13 +31,6 @@ form.onsubmit = (e) => { return; } - // Check if the number of lifts is not greater than the number of floors - if (numLifts > numFloors) { - alert("Number of lifts cannot be greater than the number of floors."); - return; - } - - // Check if the device is desktop const isDesktopDevice = window.innerWidth > 768; const maxLifts = isDesktopDevice ? 8 : 6; @@ -67,22 +59,22 @@ function render() { floor.classList.add("floor-divider"); floor_heading = document.createElement("h4"); floor_heading.innerText = `Floor ${index + 1}`; - const liftLeftPosition = (index + 1) * 10; - + const liftLeftPosition = (index + 1) * 10; + // Call button for going up floor_button_up = document.createElement("button"); floor_button_up.innerText = `Up`; floor_button_up.onclick = () => { callLift(index + 1); }; - + // Call button for going down floor_button_down = document.createElement("button"); floor_button_down.innerText = `Down`; floor_button_down.onclick = () => { callLift(index + 1); }; - + floor.append(floor_heading, floor_button_up, floor_button_down); floor.style.height = `${state.heightOfEachFloor + 5}px`; floorContainer.append(floor); @@ -90,9 +82,9 @@ function render() { for (let index = 0; index < state.noOfLifts; index++) { let lift = document.createElement("div"); - const liftLeftPosition = (index + 1) * 12; + const liftLeftPosition = (index + 1) * 12; lift.classList.add("lift"); - let lift_state = { id: index, state: "free" }; + let lift_state = { id: index, state: "free", currentFloor: 1 }; lift.classList.add(`lift-${lift_state.id}`); state.lifts.push(lift_state); @@ -103,9 +95,9 @@ function render() { liftContainer.append(lift); } } - function callLift(floor, isGoingDown = false) { const availableLift = state.lifts.find((lift) => lift.state === "free"); + console.log(state); if (availableLift) { // Mark the lift as occupied @@ -114,10 +106,11 @@ function callLift(floor, isGoingDown = false) { liftElement.setAttribute("data-state", availableLift.state); // Determine direction and target floor - const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; + const targetFloor = floor; + const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; const transitionDuration = isGoingDown - ? `${2 * Math.abs(floor - 1)}s` - : `${2 * floor}s`; + ? `${2 * Math.abs(targetFloor - availableLift.currentFloor)}s` + : `${2 * Math.abs(targetFloor - availableLift.currentFloor)}s`; // Move the lift to the target floor liftElement.style.transitionDuration = transitionDuration; @@ -137,6 +130,7 @@ function callLift(floor, isGoingDown = false) { setTimeout(() => { liftElement.classList.remove("door-close"); availableLift.state = "free"; + availableLift.currentFloor = targetFloor; // Update the current floor liftElement.setAttribute("data-state", availableLift.state); // Check if there are pending requests @@ -156,11 +150,7 @@ function callLift(floor, isGoingDown = false) { } } -initializeSimulation(); - - - -initializeSimulation(); \ No newline at end of file +initializeSimulation(); From 71454ac4869c2b8b76d8d9f209dd5adcfb648cba Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Mon, 11 Sep 2023 19:31:39 +0530 Subject: [PATCH 09/19] issue : same floor --- src/js/main.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index d952efa3..9796377d 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -95,9 +95,10 @@ function render() { liftContainer.append(lift); } } + function callLift(floor, isGoingDown = false) { const availableLift = state.lifts.find((lift) => lift.state === "free"); - console.log(state); + console.log(state) if (availableLift) { // Mark the lift as occupied @@ -105,12 +106,14 @@ function callLift(floor, isGoingDown = false) { const liftElement = document.querySelector(`.lift-${availableLift.id}`); liftElement.setAttribute("data-state", availableLift.state); + // Update the current floor for the lift + // availableLift.currentFloor = floor; + // Determine direction and target floor - const targetFloor = floor; - const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; + const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; const transitionDuration = isGoingDown - ? `${2 * Math.abs(targetFloor - availableLift.currentFloor)}s` - : `${2 * Math.abs(targetFloor - availableLift.currentFloor)}s`; + ? `${2 * Math.abs(floor - 1)}s` + : `${2 * floor}s`; // Move the lift to the target floor liftElement.style.transitionDuration = transitionDuration; @@ -126,11 +129,10 @@ function callLift(floor, isGoingDown = false) { // Wait for the door animation to finish setTimeout(() => { - liftElement.classList.add("door-close"); + // liftElement.classList.add("door-close"); setTimeout(() => { - liftElement.classList.remove("door-close"); + // liftElement.classList.remove("door-close"); availableLift.state = "free"; - availableLift.currentFloor = targetFloor; // Update the current floor liftElement.setAttribute("data-state", availableLift.state); // Check if there are pending requests @@ -150,7 +152,4 @@ function callLift(floor, isGoingDown = false) { } } - - - initializeSimulation(); From 72161998928f18a3406b5eaedaab8b15f630c5bd Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Thu, 14 Sep 2023 02:44:48 +0530 Subject: [PATCH 10/19] lift functionality completed --- .DS_Store | Bin 6148 -> 6148 bytes src/css/main.css | 19 ++++++++- src/js/main.js | 104 ++++++++++++++++++++++++----------------------- 3 files changed, 70 insertions(+), 53 deletions(-) diff --git a/.DS_Store b/.DS_Store index 631e4b53c7d787a1f97eb891e4ba517c0b7f19e7..897a9ce86733f71186c2742dcbc942665d15195e 100644 GIT binary patch delta 52 zcmZoMXfc@J&&akhU^gQp+hiW5I|80L`N>H+`AG~63<3-cjNOwjF->DKG~JxVT+XtY Io#QV*0F|x}FaQ7m delta 38 ucmZoMXfc@J&&awlU^gQp>tr6LJCpgC8<@;ZHcwzKXPMZbwwaydFFyd}w+rO} diff --git a/src/css/main.css b/src/css/main.css index 4999ab16..538d7afb 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -58,15 +58,30 @@ animation-duration: 2.5s; animation-timing-function: ease; animation-fill-mode: forwards; + display: flex; + margin: 2px; } -.door-open { +.door-close{ + background-color: red; + width: 60px; + height: 60px; + border-radius: 8px; +} + +.door-open{ + /* width: 0px; */ + width: 0px; + background-color: aqua; +} + +/* .door-open { animation-name: doorOpen; } .door-close { animation-name: doorClose; -} +} */ @keyframes doorOpen { 0% { diff --git a/src/js/main.js b/src/js/main.js index 9796377d..c29a1608 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -57,19 +57,19 @@ function render() { for (let index = 0; index < state.noOfFloors; index++) { let floor = document.createElement("div"); floor.classList.add("floor-divider"); - floor_heading = document.createElement("h4"); + let floor_heading = document.createElement("h4"); floor_heading.innerText = `Floor ${index + 1}`; - const liftLeftPosition = (index + 1) * 10; + // Call button for going up - floor_button_up = document.createElement("button"); + let floor_button_up = document.createElement("button"); floor_button_up.innerText = `Up`; floor_button_up.onclick = () => { callLift(index + 1); }; // Call button for going down - floor_button_down = document.createElement("button"); + let floor_button_down = document.createElement("button"); floor_button_down.innerText = `Down`; floor_button_down.onclick = () => { callLift(index + 1); @@ -80,76 +80,78 @@ function render() { floorContainer.append(floor); } - for (let index = 0; index < state.noOfLifts; index++) { - let lift = document.createElement("div"); - const liftLeftPosition = (index + 1) * 12; - lift.classList.add("lift"); - let lift_state = { id: index, state: "free", currentFloor: 1 }; - lift.classList.add(`lift-${lift_state.id}`); - state.lifts.push(lift_state); - - lift.setAttribute("data-id", lift_state.id); - lift.setAttribute("data-state", lift_state.state); - - lift.style.left = `${liftLeftPosition}%`; - liftContainer.append(lift); - } + for (let index = 0; index < state.noOfLifts; index++) { + let lift = document.createElement("div"); + const liftLeftPosition = (index + 1) * 12; + lift.classList.add("lift"); + let lift_state = { id: index, state: "free", currentFloor: 1 }; + lift.classList.add(`lift-${lift_state.id}`); + state.lifts.push(lift_state); + + lift.setAttribute("data-id", lift_state.id); + lift.setAttribute("data-state", lift_state.state); + + lift.style.left = `${liftLeftPosition}%`; + + // Create the first span element + let span1 = document.createElement("span"); + lift.appendChild(span1); + span1.classList.add("door-close"); + liftContainer.append(lift); +} } function callLift(floor, isGoingDown = false) { const availableLift = state.lifts.find((lift) => lift.state === "free"); - console.log(state) if (availableLift) { // Mark the lift as occupied availableLift.state = "occupied"; - const liftElement = document.querySelector(`.lift-${availableLift.id}`); - liftElement.setAttribute("data-state", availableLift.state); + const previousFloor = availableLift.currentFloor + availableLift.currentFloor = floor; // Set the current floor - // Update the current floor for the lift - // availableLift.currentFloor = floor; + const liftElement = document.querySelector(`.lift-${availableLift.id}`); // Determine direction and target floor + const floorDifference = Math.abs(floor - previousFloor) const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; const transitionDuration = isGoingDown - ? `${2 * Math.abs(floor - 1)}s` - : `${2 * floor}s`; + ? `${2 * floorDifference + 1}s` + : `${2 * floorDifference + 1}s`; // Move the lift to the target floor liftElement.style.transitionDuration = transitionDuration; liftElement.style.bottom = `${targetFloorPosition}px`; - +console.log(transitionDuration, floor - 1, floor) // Wait for the lift to reach the target floor + + const doorOpenTimeout = parseInt(transitionDuration) * 1000 + setTimeout(() => { - liftElement.classList.add("door-open"); - - // Show the door animation for 2.5 seconds - setTimeout(() => { - liftElement.classList.remove("door-open"); - - // Wait for the door animation to finish - setTimeout(() => { - // liftElement.classList.add("door-close"); - setTimeout(() => { - // liftElement.classList.remove("door-close"); - availableLift.state = "free"; - liftElement.setAttribute("data-state", availableLift.state); - - // Check if there are pending requests - if (state.requests.length > 0) { - // Get the next requested floor from the queue - const nextRequest = state.requests.shift(); - // Call the lift to the next requested floor - callLift(nextRequest.floor, nextRequest.isGoingDown); - } - }, 2500); - }, 2500); - }, 2500); - }, parseInt(transitionDuration) * 1000); + span1.classList.add("door-open"); + }, doorOpenTimeout); + setTimeout(() => { + console.log(1, "dusra") + span1.classList.remove("door-open"); + +}, +doorOpenTimeout + 1000); + setTimeout(() => { + availableLift.state = "free"; + + // Check if there are pending requests + if (state.requests.length > 0) { + // Get the next requested floor from the queue + const nextRequest = state.requests.shift(); + // Call the lift to the next requested floor + callLift(nextRequest.floor, nextRequest.isGoingDown); + } + }, doorOpenTimeout + 2000); } else { // If all lifts are busy, add the request to the queue state.requests.push({ floor, isGoingDown }); } + console.log(state) } initializeSimulation(); From 70125cfb57c32703decd5f08c0f035ba12bb18c6 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Thu, 14 Sep 2023 03:22:14 +0530 Subject: [PATCH 11/19] lift simulatore completed --- src/css/main.css | 53 ++++++++++++++++++++++++++++++++++++++---------- src/js/main.js | 15 +++++++++++--- 2 files changed, 54 insertions(+), 14 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 538d7afb..ba3929bc 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -62,24 +62,55 @@ margin: 2px; } -.door-close{ - background-color: red; - width: 60px; +.lift>span{ + background-color: aqua; + width: 30px; height: 60px; - border-radius: 8px; + transition: 2s ease; } -.door-open{ - /* width: 0px; */ - width: 0px; - background-color: aqua; +.left-door { + /* Your styles for the first child span here */ + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + /* Add any other styles you need */ +} + +.right-door { + /* Your styles for the first child span here */ + + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + /* Add any other styles you need */ } -/* .door-open { - animation-name: doorOpen; + + + + + + + +.door-open{ + gap: 50px; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 60px; + background-color: #715050; + border-radius: 8px; + /* transition: bottom 3s ease; */ + /* animation-duration: 2.5s; */ + animation-timing-function: ease; + animation-fill-mode: forwards; + display: flex; + margin: 2px; + transition: 2s ease; } -.door-close { +/* .door-close { animation-name: doorClose; } */ diff --git a/src/js/main.js b/src/js/main.js index c29a1608..aa0017f1 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -95,8 +95,17 @@ function render() { // Create the first span element let span1 = document.createElement("span"); + span1.classList.add("left-door"); + // span1.innerText = "Span 1 Text"; // You can set the text as needed lift.appendChild(span1); - span1.classList.add("door-close"); + + // Create the second span element + let span2 = document.createElement("span"); + span2.classList.add("right-door"); + + // span2.innerText = "Span 2 Text"; // You can set the text as needed + lift.appendChild(span2); + liftContainer.append(lift); } } @@ -128,11 +137,11 @@ console.log(transitionDuration, floor - 1, floor) const doorOpenTimeout = parseInt(transitionDuration) * 1000 setTimeout(() => { - span1.classList.add("door-open"); + liftElement.classList.add("door-open"); }, doorOpenTimeout); setTimeout(() => { console.log(1, "dusra") - span1.classList.remove("door-open"); + liftElement.classList.remove("door-open"); }, doorOpenTimeout + 1000); From 42d4e5e37279ef6e860373f955a5a66ff0b56981 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Thu, 14 Sep 2023 03:28:38 +0530 Subject: [PATCH 12/19] lift simulatore completed mobile --- src/css/main.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index ba3929bc..e7dff72f 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -161,4 +161,10 @@ font-size: 10px; padding: 3px 6px; } + .lift>span{ + background-color: aqua; + width: 20px; + height: 40px; + transition: 2s ease; +} } From 3dac0d98998efe0bfc2bd036bf2256dbf37d0411 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Thu, 14 Sep 2023 13:48:40 +0530 Subject: [PATCH 13/19] lift simulatore completed mobile --- src/css/main.css | 47 ++++++++++++++++++++++++++++++----------------- src/js/main.js | 7 +++++++ 2 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index e7dff72f..010744ae 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -110,28 +110,41 @@ transition: 2s ease; } -/* .door-close { - animation-name: doorClose; -} */ +.input { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} -@keyframes doorOpen { - 0% { - transform: translateX(-50%) scaleX(0); - } - 100% { - transform: translateX(-50%) scaleX(1); - } +.input input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + width: 200px; + font-size: 16px; } -@keyframes doorClose { - 0% { - transform: translateX(-50%) scaleX(1); - } - 100% { - transform: translateX(-50%) scaleX(0); - } +.input button { + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.input button:hover { + background-color: #0056b3; } + +/* .door-close { + animation-name: doorClose; +} */ + @media (max-width: 768px) { .container { margin: 1rem; diff --git a/src/js/main.js b/src/js/main.js index aa0017f1..f34d0598 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -31,6 +31,11 @@ form.onsubmit = (e) => { return; } + if (isNaN(numFloors) || isNaN(numLifts) || numFloors < 0 || numLifts < 0) { + alert("Inputs must be valid non-negative numbers."); + return; + } + const isDesktopDevice = window.innerWidth > 768; const maxLifts = isDesktopDevice ? 8 : 6; @@ -38,6 +43,8 @@ form.onsubmit = (e) => { state.noOfFloors = numFloors; state.noOfLifts = numLifts; initializeSimulation(); + const inputForm = document.querySelector(".input"); + inputForm.style.display = "none"; } else { alert( isDesktopDevice From 64fd5f38a8d43a706add2ac9fec0949fab329ee1 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Thu, 14 Sep 2023 16:25:24 +0530 Subject: [PATCH 14/19] . --- src/css/main.css | 101 ++++++++++++++++++++++++++++++++++++++++------- src/js/main.js | 29 +++++++++----- 2 files changed, 106 insertions(+), 24 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 010744ae..d2989996 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -62,28 +62,98 @@ margin: 2px; } -.lift>span{ + +.left-door { background-color: aqua; width: 30px; height: 60px; - transition: 2s ease; -} - -.left-door { - /* Your styles for the first child span here */ border-top-left-radius: 8px; border-bottom-left-radius: 8px; - /* Add any other styles you need */ + border: 1px solid black; + } .right-door { - /* Your styles for the first child span here */ - - border-top-right-radius: 8px; + background-color: aqua; + width: 30px; + height: 60px; + border-top-right-radius: 8px; border-bottom-right-radius: 8px; - /* Add any other styles you need */ + border: 1px solid black; +} + +.left-door-open { + background-color: red; + animation: left-animation 4s; +} + +.right-door-open { + background-color: red; + animation: right-animation 4s; +} + + +.left-door-close { + background-color: red; +} + +.right-door-close { + background-color: red; +} + +/* @keyframes right-animation { + from { + position: absolute; + right: 0; + } + to { + position: absolute; + right: -30px; + } +} + +@keyframes left-animation { + from { + position: absolute; + left: 0; + } + to { + position: absolute; + left: -30px; + } +} */ + +@keyframes right-animation { + 0%, 100% { + position: absolute; + right: 0; + } + 50% { + position: absolute; + right: -30px; + } + 75% { + position: absolute; + right: -30px; + } } +@keyframes left-animation { + 0%, 100% { + position: absolute; + left: 0; + } + 50% { + position: absolute; + left: -30px; + } + 75% { + position: absolute; + left: -30px; + } +} + + @@ -91,7 +161,10 @@ -.door-open{ + + + +/* .door-open{ gap: 50px; position: absolute; bottom: 0; @@ -101,14 +174,12 @@ height: 60px; background-color: #715050; border-radius: 8px; - /* transition: bottom 3s ease; */ - /* animation-duration: 2.5s; */ animation-timing-function: ease; animation-fill-mode: forwards; display: flex; margin: 2px; transition: 2s ease; -} +} */ .input { display: flex; diff --git a/src/js/main.js b/src/js/main.js index f34d0598..31f891d4 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -23,6 +23,11 @@ form.onsubmit = (e) => { return; } + if(!floorInput || !liftInput<0){ + alert("Inputs cannot be"); + return; + } + const numFloors = parseInt(floorInput); const numLifts = parseInt(liftInput); @@ -31,11 +36,6 @@ form.onsubmit = (e) => { return; } - if (isNaN(numFloors) || isNaN(numLifts) || numFloors < 0 || numLifts < 0) { - alert("Inputs must be valid non-negative numbers."); - return; - } - const isDesktopDevice = window.innerWidth > 768; const maxLifts = isDesktopDevice ? 8 : 6; @@ -43,8 +43,8 @@ form.onsubmit = (e) => { state.noOfFloors = numFloors; state.noOfLifts = numLifts; initializeSimulation(); - const inputForm = document.querySelector(".input"); - inputForm.style.display = "none"; + form.style.display = "none"; + } else { alert( isDesktopDevice @@ -127,6 +127,8 @@ function callLift(floor, isGoingDown = false) { availableLift.currentFloor = floor; // Set the current floor const liftElement = document.querySelector(`.lift-${availableLift.id}`); + const innerElement1 = liftElement.querySelector('.left-door'); + const innerElement2 = liftElement.querySelector('.right-door'); // Determine direction and target floor const floorDifference = Math.abs(floor - previousFloor) @@ -138,17 +140,24 @@ function callLift(floor, isGoingDown = false) { // Move the lift to the target floor liftElement.style.transitionDuration = transitionDuration; liftElement.style.bottom = `${targetFloorPosition}px`; -console.log(transitionDuration, floor - 1, floor) + console.log(transitionDuration, floor - 1, floor) // Wait for the lift to reach the target floor const doorOpenTimeout = parseInt(transitionDuration) * 1000 setTimeout(() => { liftElement.classList.add("door-open"); + innerElement1.classList.add("left-door-open") + innerElement2.classList.add("right-door-open") }, doorOpenTimeout); setTimeout(() => { console.log(1, "dusra") - liftElement.classList.remove("door-open"); + // liftElement.classList.remove("door-open"); + // innerElement1.classList.remove("left-door-open") + // innerElement2.classList.remove("right-door-open") + + innerElement1.classList.add("left-door-close") + innerElement2.classList.add("right-door-close") }, doorOpenTimeout + 1000); @@ -163,6 +172,8 @@ doorOpenTimeout + 1000); callLift(nextRequest.floor, nextRequest.isGoingDown); } }, doorOpenTimeout + 2000); + innerElement1.classList.remove("left-door-open") + innerElement2.classList.remove("right-door-open") } else { // If all lifts are busy, add the request to the queue state.requests.push({ floor, isGoingDown }); From aca234f96508de3af615ad757f78800705509b53 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Thu, 14 Sep 2023 16:27:23 +0530 Subject: [PATCH 15/19] . --- src/css/main.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index d2989996..e1533729 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -251,4 +251,35 @@ height: 40px; transition: 2s ease; } + +@keyframes right-animation { + 0%, 100% { + position: absolute; + right: 0; + } + 50% { + position: absolute; + right: -20px; + } + 75% { + position: absolute; + right: -20px; + } +} + +@keyframes left-animation { + 0%, 100% { + position: absolute; + left: 0; + } + 50% { + position: absolute; + left: -20px; + } + 75% { + position: absolute; + left: -20px; + } +} + } From 07ba68c8b62ea1cdead5430cb742b0b9dc590385 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Thu, 14 Sep 2023 17:45:02 +0530 Subject: [PATCH 16/19] negative value --- src/css/main.css | 1 + src/js/main.js | 15 +++++++++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index e1533729..861fbabd 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -60,6 +60,7 @@ animation-fill-mode: forwards; display: flex; margin: 2px; + /* overflow: hidden; */ } diff --git a/src/js/main.js b/src/js/main.js index 31f891d4..c4a07ac7 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -23,11 +23,6 @@ form.onsubmit = (e) => { return; } - if(!floorInput || !liftInput<0){ - alert("Inputs cannot be"); - return; - } - const numFloors = parseInt(floorInput); const numLifts = parseInt(liftInput); @@ -36,6 +31,15 @@ form.onsubmit = (e) => { return; } + if (numFloors < 0) { + alert("Inputs cannot be negative."); + return; + } + if (numLifts < 0) { + alert("Inputs cannot be negative."); + return; + } + const isDesktopDevice = window.innerWidth > 768; const maxLifts = isDesktopDevice ? 8 : 6; @@ -44,7 +48,6 @@ form.onsubmit = (e) => { state.noOfLifts = numLifts; initializeSimulation(); form.style.display = "none"; - } else { alert( isDesktopDevice From c91d8cd290c23ff5c687f59589b42c1f449205de Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Thu, 14 Sep 2023 17:53:23 +0530 Subject: [PATCH 17/19] negative value --- src/js/main.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index c4a07ac7..f916cd59 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -31,12 +31,12 @@ form.onsubmit = (e) => { return; } - if (numFloors < 0) { - alert("Inputs cannot be negative."); + if (numFloors <= 0) { + alert("Value of floor cannot be negative or 0."); return; } - if (numLifts < 0) { - alert("Inputs cannot be negative."); + if (numLifts <= 0) { + alert("Value of lift cannot be negative or 0."); return; } From d50e031b83cdd1f1a10c57283b7d28b5276050d2 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Sat, 16 Sep 2023 14:38:10 +0530 Subject: [PATCH 18/19] height fix --- src/js/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index f916cd59..9944a8f8 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,7 +1,7 @@ const state = { noOfFloors: 0, noOfLifts: 0, - heightOfEachFloor: 150, + heightOfEachFloor: 155, leftMarginEachLift: 150, requests: [], lifts: [], @@ -86,7 +86,7 @@ function render() { }; floor.append(floor_heading, floor_button_up, floor_button_down); - floor.style.height = `${state.heightOfEachFloor + 5}px`; + floor.style.height = `${state.heightOfEachFloor}px`; floorContainer.append(floor); } @@ -135,7 +135,7 @@ function callLift(floor, isGoingDown = false) { // Determine direction and target floor const floorDifference = Math.abs(floor - previousFloor) - const targetFloorPosition = (floor - 1) * state.heightOfEachFloor + 30; + const targetFloorPosition = (floor - 1) * state.heightOfEachFloor+30; const transitionDuration = isGoingDown ? `${2 * floorDifference + 1}s` : `${2 * floorDifference + 1}s`; From fba1fbe42e446f029886861bf7b477fc3fb50c37 Mon Sep 17 00:00:00 2001 From: Ashif Khan Date: Sat, 16 Sep 2023 17:00:09 +0530 Subject: [PATCH 19/19] time fix --- src/js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index 9944a8f8..7f28926d 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -163,7 +163,7 @@ function callLift(floor, isGoingDown = false) { innerElement2.classList.add("right-door-close") }, -doorOpenTimeout + 1000); +doorOpenTimeout + 2500); setTimeout(() => { availableLift.state = "free"; @@ -174,7 +174,7 @@ doorOpenTimeout + 1000); // Call the lift to the next requested floor callLift(nextRequest.floor, nextRequest.isGoingDown); } - }, doorOpenTimeout + 2000); + }, doorOpenTimeout + 3500); innerElement1.classList.remove("left-door-open") innerElement2.classList.remove("right-door-open") } else {