From 9002346bddc97e8aa00ada6f6cbe5af211fc1a5a Mon Sep 17 00:00:00 2001
From: cyanedel <cleewlkr@gmail.com>
Date: Fri, 19 Jan 2024 11:25:55 +0700
Subject: [PATCH 1/5] Tidy up tower.js

Tidying up `tower.js` to make it more readable;
---
 html/difficulty-levels.html |   2 +-
 html/tower.html             |   4 +-
 js/tower.js                 | 317 +++++++++++++++++++++---------------
 3 files changed, 185 insertions(+), 138 deletions(-)

diff --git a/html/difficulty-levels.html b/html/difficulty-levels.html
index 0fb7989..2ab751b 100644
--- a/html/difficulty-levels.html
+++ b/html/difficulty-levels.html
@@ -23,7 +23,7 @@
     <div class="all-levels">
       <img src="../image/icyTower.png" />
       <h1>Choose your level</h1>
-      <a href="../html/tower.html?level=beginer" class="levels" id="level-one"
+      <a href="../html/tower.html?level=beginner" class="levels" id="level-one"
         >Beginner level</a
       >
       <a href="../html/tower.html?level=advanced" class="levels" id="level-two"
diff --git a/html/tower.html b/html/tower.html
index 9536d37..c02472c 100644
--- a/html/tower.html
+++ b/html/tower.html
@@ -32,11 +32,11 @@ <h2>what do you want to do next?</h2>
       <a class="link" href="../html/game-scores.html">high scores</a>
     </div>
     <div id="agree-to-sound" class="overModal">
-      <button id="close-modal-agreement">
+      <button class="btn-close">
         <img src="../image/x.png" alt="x" />
       </button>
       <h2>Would you like to play music?</h2>
-      <button id="agreement" class="link">yes!!!</button>
+      <button  class="btn-agree link">yes!!!</button>
     </div>
 
     <footer class="game-score">
diff --git a/js/tower.js b/js/tower.js
index 6667f33..d3a7919 100644
--- a/js/tower.js
+++ b/js/tower.js
@@ -1,54 +1,81 @@
-// initial audio
-const backgroundMusic = new Audio('../audio/happy-day-113985.mp3');
-const successSound = new Audio('../audio/game-bonus-144751.mp3');
-const failure = new Audio('../audio/wah-wah-sad-trombone-6347.mp3');
-// ask to user agreement to music and sounds
-let playMusic = false;
-let agreementModal = document.getElementById('agree-to-sound');
-agreementModal.style.display = 'block';
-let closeAgreementModal = document.getElementById('close-modal-agreement'); //add event listener to the x button in the closal model to close it
-closeAgreementModal.addEventListener('click', () => {
-  agreementModal.style.display = 'none';
-});
-let agreementBtn = document.getElementById('agreement');
-agreementBtn.addEventListener('click', () => {
-  playMusic = true;
-  agreementModal.style.display = 'none';
-});
+class Modal {
+  constructor(elementId) {
+    this.modal = document.getElementById(elementId);
+  }
+  hide() { this.modal.style.display = 'none'; }
+  show() { this.modal.style.display = 'block'; }
+}
 
-let minmumBlockWidth;
-let horizontalDistance;
-let velocity;
-let parameter = new URLSearchParams(document.location.search);
-let level = parameter.get('level');
-switch (
-  level //defines some game's paramaters according to the level the user choosed
-) {
-  case 'beginer':
-    minmumBlockWidth = 112;
-    horizontalDistance = 60;
-    velocity = [0.15, 0.3];
-    break;
-  case 'advanced':
-    minmumBlockWidth = 100;
-    horizontalDistance = 70;
-    velocity = [0.2, 0.6];
-    break;
-  default:
-    minmumBlockWidth = 80;
-    horizontalDistance = 85;
-    velocity = [0.3, 0.8];
+class block {
+  constructor(x, y, width, height, step) {
+    this.x = x; // The x-coordinate of the block
+    this.y = y; // The y-coordinate of the block
+    this.width = width; // The width of the block
+    this.height = height; // The height of the block
+    this.scoreBlock = false; // Flag to indicate if the block has been scored
+    this.step = step; // The type of image for the block
+  }
+
+  IsUnderCharacter() {
+    // Check if the block is under the character
+    return character.y + character.height < this.y + this.height;
+  }
+}
+
+const modalGameOver = new Modal('over-modal')
+const modalMusicAgreement = new Modal('agree-to-sound')
+
+const urlParams = new URLSearchParams(document.location.search);
+const canvas = document.getElementById('myCanvas');
+const context = canvas.getContext('2d');
+
+const music = {
+  isPlayMusic: false,
+  background: new Audio('../audio/happy-day-113985.mp3'),
+  success: new Audio('../audio/game-bonus-144751.mp3'),
+  failure: new Audio('../audio/wah-wah-sad-trombone-6347.mp3'),
 }
+
+const gameConf = setGameConfig()
+const keyboardEvents = ['keyup','keydown']
+const keyboard = { right: false, left: false, up: false, any: false };
+
 let blocks = [];
 let heightToFirstBlock = 5;
 let firstDistanceToBlocks = 26;
 let verticalDistance = [27];
 let score = 0;
 let moveScreenFlag = false;
-let canvas = document.getElementById('myCanvas');
-let context = canvas.getContext('2d');
 let scoreSpan = document.querySelector('#score-span');
-scoreSpan.innerHTML = score;
+let step = 0;
+let inMiddleOfJump = false;
+let powerOfJump = -3;
+let gradient = context.createLinearGradient(0, 0, canvas.width, 0);
+let gradient2 = context.createLinearGradient(0, 0, canvas.width, 0);
+let tex = "LET'S ";
+let tex2 = 'START';
+let tex3 = 'GAME OVER';
+let texString1 = '';
+let texString2 = '';
+let alphabet_index = 0;
+let times = 0;
+let fondHighScore = false;
+let gameOver = false;
+
+let hero = sessionStorage.getItem('hero') || '../image/hero2_2.png';
+let character = { // Define the character object
+  x: canvas.width / 2 - 12.5,
+  y: canvas.height - 20,
+  height: 20,
+  width: 25,
+  distanceY: 0,
+  distanceX: 0,
+  onGround: true,
+};
+
+let characterImg = new Image(); // Create a new image object for the character
+characterImg.src = hero; // Set the source of the character image to the selected hero
+
 const imagePaths = [
   '../image/first_block.png',
   '../image/second-block.png',
@@ -59,40 +86,95 @@ const blockImages = imagePaths.map((path) => {
   image.src = path;
   return image;
 });
-let step = 0;
-let inMiddleOfJump = false;
-let powerOfJump = -3;
-let gradient = context.createLinearGradient(0, 0, canvas.width, 0);
-let gradient2 = context.createLinearGradient(0, 0, canvas.width, 0);
+
+// INIT /////////////
+letStart();
+modalMusicAgreement.show();
+
+scoreSpan.innerHTML = score;
 gradient.addColorStop('0.2', 'magenta');
 gradient.addColorStop('0.3', 'green');
 gradient.addColorStop('1.0', 'red');
 gradient2.addColorStop('0.2', 'red');
 gradient2.addColorStop('0.3', 'green');
 gradient2.addColorStop('1.0', 'blue');
-let tex = "LET'S ";
-let tex2 = 'START';
-let tex3 = 'GAME OVER';
-let texString1 = '';
-let texString2 = '';
-let alphabet_index = 0;
+mainLoop();
+drawCharacter();
+
+// EVENTS /////////////
+keyboardEvents.forEach((eventString)=>{
+  document.addEventListener(eventString, (e)=>{
+    let state = e.type === 'keydown'; // Check if the event type is keydown
+    
+    if (e.keyCode == 39) {
+      keyboard.right = state; // Set the right property of the keyboard object based on the key state
+    } else if (e.keyCode == 37) {
+      keyboard.left = state; // Set the left property of the keyboard object based on the key state
+    } else if (e.keyCode == 38) {
+      keyboard.up = state; // Set the up property of the keyboard object based on the key state
+      e.preventDefault(); // Prevent the default key up behavior (e.g., scrolling)
+    }
+
+    if (state) {
+      keyboard.any = true; // Set the any property of the keyboard object to true if any key is pressed
+    }
+  })
+})
+
+modalMusicAgreement.modal.querySelectorAll('button').forEach((el)=>{
+  el.addEventListener('click', ()=>{
+    modalMusicAgreement.hide();
+    if(el.classList.contains('btn-agree')){
+      music.isPlayMusic = true;
+    }
+  })
+})
+
+modalGameOver.modal.querySelector('#close-modal').addEventListener('click', ()=>{
+  modalGameOver.hide()
+})
+
 blockImages[step].addEventListener('load', () => {
   initBlocks();
 });
-class block {
-  constructor(x, y, width, height, step) {
-    this.x = x; // The x-coordinate of the block
-    this.y = y; // The y-coordinate of the block
-    this.width = width; // The width of the block
-    this.height = height; // The height of the block
-    this.scoreBlock = false; // Flag to indicate if the block has been scored
-    this.step = step; // The type of image for the block
+
+// Add an event listener to the character image to trigger the drawCharacter function once it's loaded
+characterImg.addEventListener('load', () => {
+  drawCharacter();
+});
+
+// FUNCTIONS /////////////
+function setGameConfig(){
+  const defaultConf = {
+    minBlockWidth: 0,
+    horizontalDistance: 0,
+    velocity: 0,
+    difficulty: urlParams.get('level') || 'beginner',
+    gravity: 1.0,
+    drag: 0.999,
+    groundDrag: 0.9,
   }
 
-  IsUnderCharacter() {
-    // Check if the block is under the character
-    return character.y + character.height < this.y + this.height;
+  let newConf = {}
+  
+  switch(defaultConf.difficulty){
+    case 'beginner':
+      newConf = { minBlockWidth: 112, horizontalDistance: 60, velocity: [0.15, 0.3] }
+      break;
+    case 'advanced':
+      newConf = { minBlockWidth: 100, horizontalDistance: 70, velocity: [0.2, 0.6] }
+      break;
+    case 'champions':
+      newConf = { minBlockWidth: 80, horizontalDistance: 85, velocity: [0.3, 0.8] }
+      break;
+    default:
+      newConf = { minBlockWidth: 112, horizontalDistance: 60, velocity: [0.15, 0.3] }
+      break;
   }
+  
+  Object.assign(defaultConf, {...defaultConf, ...newConf})
+
+  return defaultConf
 }
 
 function randomMinMax(min, max) {
@@ -114,12 +196,12 @@ function drawBlocks() {
     );
   });
 }
-let times = 0;
+
 function movingScreen() {
   //move the blocks
   // Move each block downwards based on the velocity
   for (let i = 0; i < blocks.length; i++) {
-    blocks[i].y = blocks[i].y + velocity[1]; // Move the block downwards by adding the y-component of the velocity
+    blocks[i].y = blocks[i].y + gameConf.velocity[1]; // Move the block downwards by adding the y-component of the velocity
     if (blocks[i].y > canvas.height) {
       //if one of the stone is underground
       blocks.splice(i, 1); // Remove the block if it goes beyond the canvas height
@@ -147,12 +229,13 @@ function movingScreen() {
     }
   }
 }
+
 function initBlocks() {
   blocks = []; // Initialize the blocks array
   // Create the first block
   let width = randomMinMax(
-    minmumBlockWidth,
-    canvas.width * 0.09 + minmumBlockWidth
+    gameConf.minBlockWidth,
+    canvas.width * 0.09 + gameConf.minBlockWidth
   ); // Generate a random width for the block
   let height = 6; // Set the height of the block
   let x = randomMinMax(100, canvas.width - height) % (canvas.width - width); // Generate a random x-coordinate for the block
@@ -161,11 +244,11 @@ function initBlocks() {
   // Create the remaining blocks
   for (let i = 1; i < 5; i++) {
     width = randomMinMax(
-      minmumBlockWidth,
-      canvas.width * 0.09 + minmumBlockWidth
+      gameConf.minBlockWidth,
+      canvas.width * 0.09 + gameConf.minBlockWidth
     ); // Generate a random width for the block
     x =
-      (randomMinMax(horizontalDistance, horizontalDistance * 1.2) +
+      (randomMinMax(gameConf.horizontalDistance, gameConf.horizontalDistance * 1.2) +
         blocks[i - 1].x) %
       (canvas.width - width); // Calculate the x-coordinate of the block based on the previous block's position
     y = blocks[i - 1].y - verticalDistance[0]; // Calculate the y-coordinate of the block based on the previous block's position
@@ -173,6 +256,7 @@ function initBlocks() {
   }
   drawBlocks(); // Draw the blocks on the canvas
 }
+
 function letStart() {
   //animation with the words "let's start"
   if (alphabet_index < 5) {
@@ -205,19 +289,20 @@ function letStart() {
     }
   }
 }
+
 function addblock() {
   // Get the current length of the blocks array
   let i = blocks.length;
   // Generate random width of the new block within a given range
   let width = randomMinMax(
-    minmumBlockWidth,
-    canvas.width * 0.2 + minmumBlockWidth
+    gameConf.minBlockWidth,
+    canvas.width * 0.2 + gameConf.minBlockWidth
   );
   // Set the height of the new block
   let height = 6;
   // Calculate the x-coordinate of the new block based on the previous block's position
   let x =
-    (randomMinMax(0.5 * horizontalDistance, horizontalDistance * 1.3) +
+    (randomMinMax(0.5 * gameConf.horizontalDistance, gameConf.horizontalDistance * 1.3) +
       blocks[0].x) %
     (canvas.width - width);
   // Calculate the y-coordinate of the new block based on the previous block's position
@@ -225,26 +310,7 @@ function addblock() {
   // Create a new block object and add it to the blocks array
   blocks.push(new block(x, y, width, height, step));
 }
-// Get the selected hero from the session storage
-let hero = sessionStorage.getItem('hero');
-// Define the character object
-let character = {
-  x: canvas.width / 2 - 12.5,
-  y: canvas.height - 20,
-  height: 20,
-  width: 25,
-  distanceY: 0,
-  distanceX: 0,
-  onGround: true,
-};
-// Create a new image object for the character
-let characterImg = new Image();
-// Set the source of the character image to the selected hero
-characterImg.src = hero;
-// Add an event listener to the character image to trigger the drawCharacter function once it's loaded
-characterImg.addEventListener('load', () => {
-  drawCharacter();
-});
+
 function characterUp() {
   //Note that here, in js it is the opposite of a minus jump is a high jump
   // Set the character's onGround flag to false to indicate that it is in the air
@@ -261,14 +327,17 @@ function characterUp() {
   // Set the flag to indicate that the character is in the middle of a jump
   inMiddleOfJump = true;
 }
+
 function characterGoLeft() {
   // Set the character's horizontal distance to move left
   character.distanceX = -2;
 }
+
 function characterGoRight() {
   // Set the character's horizontal distance to move right
   character.distanceX = 2;
 }
+
 function updatePosition() {
   // Check if the character will go beyond the canvas boundaries
   if (
@@ -281,6 +350,7 @@ function updatePosition() {
   if (character.y + character.distanceY < 0) character.distanceY = 0; // Prevent the character from moving too high above the canvas
   character.y += character.distanceY; // Update the character's y-coordinate
 }
+
 function drawCharacter() {
   context.drawImage(
     characterImg,
@@ -290,11 +360,7 @@ function drawCharacter() {
     character.height
   ); // Draw the character image on the canvas
 }
-const game = {
-  gravity: 1.0,
-  drag: 0.999,
-  groundDrag: 0.9,
-};
+
 function checkState() {
   // Check if the character has reached the ground
   if (character.y + character.height >= canvas.height) {
@@ -320,6 +386,7 @@ function checkState() {
     }
   }
 }
+
 function updateScore() {
   // Iterate through each block in the blocks array
   blocks.forEach(function (block, index) {
@@ -338,14 +405,14 @@ function updateScore() {
 function gravity() {
   // Check if the character is not on the ground
   if (character.onGround == false) {
-    character.distanceY += game.gravity; // Apply gravity to the character's vertical movement
-    character.distanceY *= game.drag; // Apply drag to the character's vertical movement
+    character.distanceY += gameConf.gravity; // Apply gravity to the character's vertical movement
+    character.distanceY *= gameConf.drag; // Apply drag to the character's vertical movement
   } else {
     character.distanceY = 0; // Reset the character's vertical movement to 0 when on the ground
   }
 
   // Adjust the character's horizontal movement based on whether it is on the ground or not
-  character.distanceX *= character.onGround ? game.groundDrag : game.drag;
+  character.distanceX *= character.onGround ? gameConf.groundDrag : gameConf.drag;
   // Note: This line allows the character to move horizontally without being affected by the groundDrag when it is on the ground
 }
 
@@ -367,16 +434,6 @@ function movingBlocks() {
   character.y += 0.2; // Move the character downwards by 0.2
 }
 
-document.addEventListener('keydown', keyHandler); // Add event listener for keydown event
-document.addEventListener('keyup', keyHandler); // Add event listener for keyup event
-
-const keyboard = {
-  right: false,
-  left: false,
-  up: false,
-  any: false,
-};
-
 function keyHandler(e) {
   let state = e.type === 'keydown'; // Check if the event type is keydown
   if (e.keyCode == 39) {
@@ -391,14 +448,11 @@ function keyHandler(e) {
     keyboard.any = true; // Set the any property of the keyboard object to true if any key is pressed
   }
 }
-let gameOver = false;
-mainLoop();
-letStart();
-let fondHighScore = false;
+
 function mainLoop() {
   //the loop that works while the game. It calls the functions
-  if (playMusic) {
-    backgroundMusic.play();
+  if (music.isPlayMusic) {
+    music.background.play();
   }
 
   if (gameOver == false) {
@@ -427,8 +481,8 @@ function mainLoop() {
       if (character.onGround) updateScore();
       if (score > 25 && !step == 1) {
         step = 1;
-        if (playMusic) {
-          successSound.play();
+        if (music.isPlayMusic) {
+          music.success.play();
         }
 
         cancelAnimationFrame(mainLoop);
@@ -436,8 +490,8 @@ function mainLoop() {
       if (score > 50 && step != 2) {
         step = 2;
 
-        if (playMusic) {
-          successSound.play();
+        if (music.isPlayMusic) {
+          music.success.play();
         }
       }
       drawBlocks();
@@ -445,9 +499,9 @@ function mainLoop() {
     }
     myanim = requestAnimationFrame(mainLoop);
   } else {
-    if (playMusic) {
-      backgroundMusic.pause();
-      failure.play();
+    if (music.isPlayMusic) {
+      music.background.pause();
+      music.failure.play();
     }
 
     alphabet_index = 0;
@@ -485,8 +539,7 @@ function mainLoop() {
     gradientAnimation();
   }
 }
-drawCharacter();
-mainLoop();
+
 function gradientAnimation() {
   //the animation in of game  over in the end of the game
   if (alphabet_index == 9) {
@@ -517,12 +570,6 @@ function gradientAnimation() {
   if (alphabet_index <= 18) setTimeout(gradientAnimation, 100);
   else {
     //when we finished introduct "game over" twice
-    let overMOdal = document.getElementById('over-modal');
-    overMOdal.style.display = 'block';
+    modalGameOver.show()
   }
-}
-let closeDiv = document.getElementById('close-modal'); //add event listener to the x button in the closal model to close it
-closeDiv.addEventListener('click', () => {
-  let overMOdal = document.getElementById('over-modal');
-  overMOdal.style.display = 'none';
-});
+}
\ No newline at end of file

From 0c16325ad11124a04fd3597a161af4049d32ff04 Mon Sep 17 00:00:00 2001
From: cyanedel <cleewlkr@gmail.com>
Date: Fri, 19 Jan 2024 12:24:48 +0700
Subject: [PATCH 2/5] Home page form fix

Fixes home page form position, reduce spacing between form inputs;
---
 css/home-page.css   | 58 +++++++++++++++++++----------------------
 html/home-page.html | 63 +++++++++++++++++++++------------------------
 2 files changed, 56 insertions(+), 65 deletions(-)

diff --git a/css/home-page.css b/css/home-page.css
index 7c9e1b9..11f8229 100644
--- a/css/home-page.css
+++ b/css/home-page.css
@@ -1,6 +1,10 @@
 * {
   box-sizing: border-box;
 }
+html, body {
+  height: 100%;
+  width: 100%;
+}
 
 body {
   margin: 0%;
@@ -11,9 +15,8 @@ body {
   font-family: 'Pacifico', cursive;
 }
 
-form {
-  text-align: center;
-}
+.mt-16px { margin-top: 16px; }
+.mb-16px { margin-bottom: 16px; }
 
 .main-heading {
   text-align: center;
@@ -85,36 +88,27 @@ form {
 }
 
 .form {
-  width: 27%;
   background-color: white;
-  color: black;
+  border-radius: 16px;
   border: 3px solid #31a2ff;
-  margin-top: -7%;
-  margin-left: 37%;
-  z-index: 99;
-  align-self: center;
+  bottom: 0;
+  color: black;
+  height: fit-content;
+  left: 0;
+  margin: auto;
+  max-width: 400px;
+  padding: 16px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  width: 100%;
   z-index: 99;
-  position: fixed;
-}
-
-@media screen and (max-width: 1200px) {
-  .form {
-    width: 47%;
-    margin-left: 25%;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .form {
-    width: 96%;
-    margin-left: 2%;
-  }
 }
 
 .form input {
-  width: 96%;
-  padding: 3%;
-  margin: 0.5% 1% 0px 1%;
+  width: 100%;
+  padding: 16px;
   border: none;
   background: #bfb8b8;
 }
@@ -124,13 +118,13 @@ form {
 }
 
 .submit {
-  width: 96%;
-  border: none;
-  margin: 0.5% 1% 0px 1%;
-  padding: 3.5%;
   background: linear-gradient(magenta, #31a2ff, rgb(138, 12, 65));
+  border: none;
   color: white;
   font-size: 1.8em;
+  padding: 3.5%;
+  width: 100%;
+  border-radius: 16px;
 }
 
 .form input :focus {
@@ -179,8 +173,8 @@ form {
 
 .container img {
   border-radius: 30px;
-  width: 450px;
   height: 350px;
+  width: 450px;
 }
 
 @media screen and (max-width: 1150px) {
diff --git a/html/home-page.html b/html/home-page.html
index a54eddb..89f0d5b 100644
--- a/html/home-page.html
+++ b/html/home-page.html
@@ -15,7 +15,7 @@
 </head>
 
 <body>
-    <header>
+    <header style="position: absolute; width: 100%;">
         <div class="hide" id="hello-user">
             <span id="user-first-name"></span><br>
             <span id="user-name"> </span>
@@ -38,27 +38,29 @@
         <br>
         <button class="change-form js-toggle-form" data-toggle-to="login" id="change-to-login" type="button">already have an acount? click to login</button>
         <form method="get">
-            <div> <label for="first-name">first name</label>
+            <div class="mt-16px mb-16px">
+                <label for="first-name">first name</label>
                 <input type="text" id="first-name" name="first-name">
-            </div><br>
-            <br>
-            <div> <label for="email">email</label>
+            </div>
+            <div class="mt-16px mb-16px">
+                <label for="email">email</label>
                 <input  name="email-user-name" type="email" id="user-name" placeholder="this will be your user name">
-            </div><br>
-            <br>
-            <div> <label for="pwd">Password</label>
+            </div>
+            <div class="mt-16px mb-16px">
+                <label for="pwd">Password</label>
                 <br>
-                <input type="password" id="pasword-first" name="pwd">
+                <input type="password" id="pasword-first" name="pwd" placeholder="your password">
                 <span id="message" class="message"></span>
-            </div> <br>
-            <br>
-            <div><label for="verify password">verify Password</label>
-                <input type="password" id="verify-pwd" name="verify password">
+            </div> 
+            <div class="mt-16px mb-16px">
+                <label for="verify password">verify Password</label>
+                <input type="password" id="verify-pwd" name="verify password" placeholder="retype your password">
                 <span class="hide" id="verify-message">**Enter the password here again</span>
-            </div> <br>
-            <br> <button class="submit" id="sign-in-submit">sign-up</button>
-            <br>
+            </div>
+            <button class="submit" id="sign-in-submit">sign-up</button>
+            <br />
             <span class="message" id="submit-error-message"></span>
+        </form>
     </div>
 
     <div class="form hide" id="login-form" data-form-type="login">
@@ -67,20 +69,19 @@
         <button class="change-form js-toggle-form" data-toggle-to="register" id="change-to-sign" type="button">don't have an account? sign-up</button>
         <h2>we are happy to see you again!</h2>
         <form>
-            <div> <label for="user">email</label>
+            <div class="mt-16px mb-16px">
+                <label for="user">email</label>
                 <input type="email" id="email" name="user" required="required">
-            </div><br>
-            <br>
-            <div> <label for="pwd">Password</label>
-                <br>
+            </div>
+            <div class="mt-16px mb-16px">
+                <label for="pwd">Password</label>
                 <input type="password" id="pwd" name="pwd" required="required">
-            </div> <br>
-            <br>
-            <div class="hide" id="error-massage">** The
-                identification process
-                failed ,one or more of the details is incorrect<br></span>
+            </div>
+            <div class="hide" id="error-massage">
+                <p>** The identification process failed,<br />one or more of the details is incorrect</p>
             </div>
             <div> <button class="submit" id="login-submit" type="submit">login</button></div>
+        </form>
     </div>
     <div id="you-must-login">
         <button id="close-modal">
@@ -92,15 +93,11 @@ <h2>we are happy to see you again!</h2>
         <img class="icy-tower-img" src="../image/stone-wall.jpg">
     </div>
 
-    <div class="container">
-        <div class="row">
-            <div class="image">
-                <a href="../html/icy-tower-home.html" class="game"><img  class="icy-img" src="../image/icy-tower-start1.png"></a>
-            </div>
-        </div>
+    <div style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;">
+        <a href="../html/icy-tower-home.html" class="game"><img  class="icy-img" src="../image/icy-tower-start1.png" style="margin-top: 50px; width: 40vw;"></a>
+    </div>                                
      
     <script src="../js/login-sign-in.js"></script>
-    <script src="../js/home-page.js"></script>
 </body>
 
 </html>

From 244de05ebe60a4c94b190296a2716f2a1583b54c Mon Sep 17 00:00:00 2001
From: cyanedel <cleewlkr@gmail.com>
Date: Fri, 19 Jan 2024 13:04:15 +0700
Subject: [PATCH 3/5] Tidy up tower.js

Grouping variables into JSON object;
---
 js/tower.js | 187 +++++++++++++++++++++++++---------------------------
 1 file changed, 91 insertions(+), 96 deletions(-)

diff --git a/js/tower.js b/js/tower.js
index d3a7919..b2913db 100644
--- a/js/tower.js
+++ b/js/tower.js
@@ -39,17 +39,17 @@ const music = {
 const gameConf = setGameConfig()
 const keyboardEvents = ['keyup','keydown']
 const keyboard = { right: false, left: false, up: false, any: false };
+const gameState = {
+  inMiddleOfJump: false,
+  isGameOver: false,
+  isHighScore: false,
+  powerOfJump: -3,
+  score: 0,
+  step: 0,
+  times: 0,
+}
 
 let blocks = [];
-let heightToFirstBlock = 5;
-let firstDistanceToBlocks = 26;
-let verticalDistance = [27];
-let score = 0;
-let moveScreenFlag = false;
-let scoreSpan = document.querySelector('#score-span');
-let step = 0;
-let inMiddleOfJump = false;
-let powerOfJump = -3;
 let gradient = context.createLinearGradient(0, 0, canvas.width, 0);
 let gradient2 = context.createLinearGradient(0, 0, canvas.width, 0);
 let tex = "LET'S ";
@@ -58,11 +58,7 @@ let tex3 = 'GAME OVER';
 let texString1 = '';
 let texString2 = '';
 let alphabet_index = 0;
-let times = 0;
-let fondHighScore = false;
-let gameOver = false;
 
-let hero = sessionStorage.getItem('hero') || '../image/hero2_2.png';
 let character = { // Define the character object
   x: canvas.width / 2 - 12.5,
   y: canvas.height - 20,
@@ -74,13 +70,14 @@ let character = { // Define the character object
 };
 
 let characterImg = new Image(); // Create a new image object for the character
-characterImg.src = hero; // Set the source of the character image to the selected hero
+characterImg.src = gameConf.heroImagePath; // Set the source of the character image to the selected hero
 
 const imagePaths = [
   '../image/first_block.png',
   '../image/second-block.png',
   '../image/third-block.png',
 ];
+
 const blockImages = imagePaths.map((path) => {
   const image = new Image();
   image.src = path;
@@ -91,13 +88,14 @@ const blockImages = imagePaths.map((path) => {
 letStart();
 modalMusicAgreement.show();
 
-scoreSpan.innerHTML = score;
+displayScore();
 gradient.addColorStop('0.2', 'magenta');
 gradient.addColorStop('0.3', 'green');
 gradient.addColorStop('1.0', 'red');
 gradient2.addColorStop('0.2', 'red');
 gradient2.addColorStop('0.3', 'green');
 gradient2.addColorStop('1.0', 'blue');
+
 mainLoop();
 drawCharacter();
 
@@ -134,7 +132,7 @@ modalGameOver.modal.querySelector('#close-modal').addEventListener('click', ()=>
   modalGameOver.hide()
 })
 
-blockImages[step].addEventListener('load', () => {
+blockImages[gameState.step].addEventListener('load', () => {
   initBlocks();
 });
 
@@ -148,11 +146,14 @@ function setGameConfig(){
   const defaultConf = {
     minBlockWidth: 0,
     horizontalDistance: 0,
+    verticalDistance: [27],
+    firstDistanceToBlocks: 26,
     velocity: 0,
     difficulty: urlParams.get('level') || 'beginner',
     gravity: 1.0,
     drag: 0.999,
     groundDrag: 0.9,
+    heroImagePath: sessionStorage.getItem('hero') || '../image/hero2_2.png'
   }
 
   let newConf = {}
@@ -177,6 +178,27 @@ function setGameConfig(){
   return defaultConf
 }
 
+const moveChar = {
+  up: function(){
+    //Note that here, in js it is the opposite of a minus jump is a high jump
+    // Set the character's onGround flag to false to indicate that it is in the air
+    character.onGround = false;
+
+    // Check if the character is not in the middle of a jump
+    if (!gameState.inMiddleOfJump) gameState.powerOfJump = -3; // Set the initial jump power
+    else gameState.powerOfJump += 0.2; // Increase the jump power if the character is already jumping
+
+    // Limit the maximum jump power to -0.3
+    if (gameState.powerOfJump >= -0.3) gameState.powerOfJump = -0.4;
+    // Add the jump power to the character's vertical distance
+    character.distanceY += gameState.powerOfJump;
+    // Set the flag to indicate that the character is in the middle of a jump
+    gameState.inMiddleOfJump = true;
+  },
+  left: function(){ character.distanceX = -2; },
+  right: function(){ character.distanceX = 2; }
+}
+
 function randomMinMax(min, max) {
   // Generate a random number between min and max (inclusive)
   return Math.floor(Math.random() * (max - min + 1) + min);
@@ -188,7 +210,7 @@ function drawBlocks() {
     //Chooses the image according to the current step of the game
     //(not the level you chose at the beginning but when you progress and accumulate points, the game becomes more difficult)
     context.drawImage(
-      blockImages[step],
+      blockImages[gameState.step],
       item.x,
       item.y,
       item.width,
@@ -209,23 +231,23 @@ function movingScreen() {
     }
   }
   // Move the current block to the sides only if the game is in advanced step
-  if (step == 1) {
-    times++; // Increase the times variable
-    if (times <= 3) {
+  if (gameState.step == 1) {
+    gameState.times++; // Increase the times variable
+    if (gameState.times <= 3) {
       blocks[currentBlock].x = blocks[currentBlock].x + 8.5; // Move the block to the right by adding 8.5 to its x-coordinate
     }
-    if (times <= 6 && times > 3) {
+    if (gameState.times <= 6 && gameState.times > 3) {
       blocks[currentBlock].x = blocks[currentBlock].x - 7; // Move the block to the left by subtracting 7 from its x-coordinate
-      if (times == 6) times = 0; // Reset the times variable to 0 when it reaches 6
+      if (gameState.times == 6) gameState.times = 0; // Reset the times variable to 0 when it reaches 6
     }
-  } else if (step == 2) {
-    times++;
-    if (times < 3) {
+  } else if (gameState.step == 2) {
+    gameState.times++;
+    if (gameState.times < 3) {
       blocks[currentBlock].x = blocks[currentBlock].x + 13;
     }
-    if (times <= 6 && times > 3) {
+    if (gameState.times <= 6 && gameState.times > 3) {
       blocks[currentBlock].x = blocks[currentBlock].x - 10;
-      if (times == 6) times = 0;
+      if (gameState.times == 6) gameState.times = 0;
     }
   }
 }
@@ -239,8 +261,8 @@ function initBlocks() {
   ); // Generate a random width for the block
   let height = 6; // Set the height of the block
   let x = randomMinMax(100, canvas.width - height) % (canvas.width - width); // Generate a random x-coordinate for the block
-  let y = canvas.height - firstDistanceToBlocks - height; // Calculate the y-coordinate of the block
-  blocks.push(new block(x, y, width, height, step)); // Add the block to the blocks array
+  let y = canvas.height - gameConf.firstDistanceToBlocks - height; // Calculate the y-coordinate of the block
+  blocks.push(new block(x, y, width, height, gameState.step)); // Add the block to the blocks array
   // Create the remaining blocks
   for (let i = 1; i < 5; i++) {
     width = randomMinMax(
@@ -251,8 +273,8 @@ function initBlocks() {
       (randomMinMax(gameConf.horizontalDistance, gameConf.horizontalDistance * 1.2) +
         blocks[i - 1].x) %
       (canvas.width - width); // Calculate the x-coordinate of the block based on the previous block's position
-    y = blocks[i - 1].y - verticalDistance[0]; // Calculate the y-coordinate of the block based on the previous block's position
-    blocks.push(new block(x, y, width, height, step)); // Add the block to the blocks array
+    y = blocks[i - 1].y - gameConf.verticalDistance[0]; // Calculate the y-coordinate of the block based on the previous block's position
+    blocks.push(new block(x, y, width, height, gameState.step)); // Add the block to the blocks array
   }
   drawBlocks(); // Draw the blocks on the canvas
 }
@@ -306,36 +328,9 @@ function addblock() {
       blocks[0].x) %
     (canvas.width - width);
   // Calculate the y-coordinate of the new block based on the previous block's position
-  let y = blocks[i - 1].y - verticalDistance - height * 1.5;
+  let y = blocks[i - 1].y - gameConf.verticalDistance - height * 1.5;
   // Create a new block object and add it to the blocks array
-  blocks.push(new block(x, y, width, height, step));
-}
-
-function characterUp() {
-  //Note that here, in js it is the opposite of a minus jump is a high jump
-  // Set the character's onGround flag to false to indicate that it is in the air
-  character.onGround = false;
-
-  // Check if the character is not in the middle of a jump
-  if (!inMiddleOfJump) powerOfJump = -3; // Set the initial jump power
-  else powerOfJump += 0.2; // Increase the jump power if the character is already jumping
-
-  // Limit the maximum jump power to -0.3
-  if (powerOfJump >= -0.3) powerOfJump = -0.4;
-  // Add the jump power to the character's vertical distance
-  character.distanceY += powerOfJump;
-  // Set the flag to indicate that the character is in the middle of a jump
-  inMiddleOfJump = true;
-}
-
-function characterGoLeft() {
-  // Set the character's horizontal distance to move left
-  character.distanceX = -2;
-}
-
-function characterGoRight() {
-  // Set the character's horizontal distance to move right
-  character.distanceX = 2;
+  blocks.push(new block(x, y, width, height, gameState.step));
 }
 
 function updatePosition() {
@@ -366,8 +361,8 @@ function checkState() {
   if (character.y + character.height >= canvas.height) {
     character.onGround = true; // Set the character's onGround flag to true
 
-    if (score / 3 > 3) {
-      gameOver = true; // Set the gameOver flag to true if a condition is met
+    if (gameState.score / 3 > 3) {
+      gameState.isGameOver = true; // Set the isGameOver flag to true if a condition is met
     } // game over condition
   } else {
     character.onGround = false; // Set the character's onGround flag to false
@@ -394,12 +389,12 @@ function updateScore() {
     if (block.IsUnderCharacter()) {
       // Check if the block has not been scored yet
       if (!block.scoreBlock) {
-        score += 3; // Increase the score by 3
+        gameState.score += 3; // Increase the score by 3
         block.scoreBlock = true; // Set the scoreBlock flag to true to indicate that the block has been scored
       }
     }
   });
-  scoreSpan.innerHTML = score; // Update the score displayed on the screen
+  displayScore(); // Update the score displayed on the screen
 }
 
 function gravity() {
@@ -455,49 +450,45 @@ function mainLoop() {
     music.background.play();
   }
 
-  if (gameOver == false) {
+  if (gameState.isGameOver == false) {
     if (keyboard.any) {
       context.clearRect(0, 0, canvas.width, canvas.height);
-      if (keyboard.up) {
-        characterUp();
-      } else inMiddleOfJump = false;
-      if (keyboard.left) {
-        characterGoLeft();
-      }
-      if (keyboard.right) {
-        characterGoRight();
-      }
+      if (keyboard.up) { moveChar.up(); } else { gameState.inMiddleOfJump = false; }
+      if (keyboard.left) { moveChar.left(); }
+      if (keyboard.right) { moveChar.right(); }
+
       updatePosition();
-      if (score / 3 > 5) {
-        movingScreen();
-      }
+
+      if (gameState.score / 3 > 5) { movingScreen(); }
+
       checkState();
       gravity();
+      
       if (character.y < 70 && character.onGround) {
         context.clearRect(0, 0, canvas.width, canvas.height);
         movingBlocks();
         character.onGround = false;
       }
-      if (character.onGround) updateScore();
-      if (score > 25 && !step == 1) {
-        step = 1;
-        if (music.isPlayMusic) {
-          music.success.play();
-        }
 
+      if (character.onGround) { updateScore(); }
+
+      if (gameState.score > 25 && !gameState.step == 1) {
+        gameState.step = 1;
+        if (music.isPlayMusic) { music.success.play(); }
         cancelAnimationFrame(mainLoop);
       }
-      if (score > 50 && step != 2) {
-        step = 2;
 
-        if (music.isPlayMusic) {
-          music.success.play();
-        }
+      if (gameState.score > 50 && gameState.step != 2) {
+        gameState.step = 2;
+        if (music.isPlayMusic) { music.success.play(); }
       }
+
       drawBlocks();
       drawCharacter();
     }
+
     myanim = requestAnimationFrame(mainLoop);
+
   } else {
     if (music.isPlayMusic) {
       music.background.pause();
@@ -509,21 +500,21 @@ function mainLoop() {
     context.clearRect(0, 0, canvas.width, canvas.height);
     drawBlocks();
     drawCharacter();
-    tex2 = 'your score is ' + score;
+    tex2 = 'your score is ' + gameState.score;
     texString1 = ' ';
     let currentUser = JSON.parse(sessionStorage.getItem('currentUser'));
-    if (score > currentUser.highScore) {
-      fondHighScore = true;
+    if (gameState.score > currentUser.highScore) {
+      gameState.isHighScore = true;
       console.log('if');
       let temp = currentUser.highScore;
-      currentUser.highScore = score;
+      currentUser.highScore = gameState.score;
       currentUser.secondScore = temp;
-    } else if (score > currentUser.secondScore && !fondHighScore) {
-      fondHighScore = true;
+    } else if (gameState.score > currentUser.secondScore && !gameState.isHighScore) {
+      gameState.isHighScore = true;
       console.log('else if');
-      currentUser.secondScore = score;
+      currentUser.secondScore = gameState.score;
     }
-    if (fondHighScore) {
+    if (gameState.isHighScore) {
       let userInLocal = JSON.parse(
         localStorage.getItem(currentUser['userName'])
       );
@@ -572,4 +563,8 @@ function gradientAnimation() {
     //when we finished introduct "game over" twice
     modalGameOver.show()
   }
+}
+
+function displayScore(){
+  document.querySelector('#score-span').innerHTML = gameState.score;
 }
\ No newline at end of file

From d954bffe44b766313c1c7826c89ba2eb9a320c0b Mon Sep 17 00:00:00 2001
From: cyanedel <cleewlkr@gmail.com>
Date: Fri, 19 Jan 2024 13:13:23 +0700
Subject: [PATCH 4/5] Remove unused function;

---
 js/tower.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/js/tower.js b/js/tower.js
index b2913db..33b9906 100644
--- a/js/tower.js
+++ b/js/tower.js
@@ -429,21 +429,6 @@ function movingBlocks() {
   character.y += 0.2; // Move the character downwards by 0.2
 }
 
-function keyHandler(e) {
-  let state = e.type === 'keydown'; // Check if the event type is keydown
-  if (e.keyCode == 39) {
-    keyboard.right = state; // Set the right property of the keyboard object based on the key state
-  } else if (e.keyCode == 37) {
-    keyboard.left = state; // Set the left property of the keyboard object based on the key state
-  } else if (e.keyCode == 38) {
-    keyboard.up = state; // Set the up property of the keyboard object based on the key state
-    e.preventDefault(); // Prevent the default key up behavior (e.g., scrolling)
-  }
-  if (state) {
-    keyboard.any = true; // Set the any property of the keyboard object to true if any key is pressed
-  }
-}
-
 function mainLoop() {
   //the loop that works while the game. It calls the functions
   if (music.isPlayMusic) {

From a8ea77a5aa1ebea1a476943493bee43445a4a266 Mon Sep 17 00:00:00 2001
From: cyanedel <cleewlkr@gmail.com>
Date: Sun, 21 Jan 2024 12:58:30 +0700
Subject: [PATCH 5/5] Form modal placement fixes;

- Consolidated all modal controllers to the `Modal` class;
- Added overlay layer that prevents the user from interacting with other page elements when the modal is open;
- Fixed some typos;
---
 css/home-page.css   |  69 ++++++++++++++++----------
 html/home-page.html | 102 ++++++++++++++++++++------------------
 js/login-sign-in.js | 116 ++++++++++++++++++++++++++++----------------
 3 files changed, 172 insertions(+), 115 deletions(-)

diff --git a/css/home-page.css b/css/home-page.css
index 11f8229..74c85ca 100644
--- a/css/home-page.css
+++ b/css/home-page.css
@@ -1,22 +1,36 @@
 * {
   box-sizing: border-box;
 }
+
 html, body {
   height: 100%;
   width: 100%;
 }
 
 body {
-  margin: 0%;
   background-image: url('../image/background-for-game.png');
   background-repeat: no-repeat;
   background-size: cover;
-  text-align: center;
   font-family: 'Pacifico', cursive;
+  margin: 0%;
+  text-align: center;
+}
+
+body.modal-open {
+  overflow: hidden;
+}
+
+.modal-overlay {
+  background-color: rgba(0, 0, 0, 0.2);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
 
 .mt-16px { margin-top: 16px; }
 .mb-16px { margin-bottom: 16px; }
+.text-start { text-align: left; }
 
 .main-heading {
   text-align: center;
@@ -87,23 +101,31 @@ body {
   position: relative;
 }
 
-.form {
+.modal {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  visibility: hidden;
+  width: 100%;
+  z-index: -1;
+}
+.modal.show {
+  visibility: visible;
+  z-index: 999;
+}
+
+.modal-dialog {
+  margin: 80px auto auto auto;
+  max-width: 500px;
+  position: relative;
+}
+
+.modal-content {
   background-color: white;
   border-radius: 16px;
   border: 3px solid #31a2ff;
-  bottom: 0;
-  color: black;
-  height: fit-content;
-  left: 0;
-  margin: auto;
-  max-width: 400px;
   padding: 16px;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 0;
-  width: 100%;
-  z-index: 99;
 }
 
 .form input {
@@ -230,24 +252,19 @@ body {
 }
 
 .change-form {
-  color: #315bff;
-  border: 1px solid #ccc;
   border-radius: 30px;
-  height: 29px;
+  border: 1px solid #ccc;
+  color: #315bff;
   font-family: 'Pacifico', cursive;
   font-size: 1.1em;
 }
 
 .btn-close {
-  border: none;
-  position: absolute;
-  top: 14px;
-  left: 14px;
-  display: block;
-  width: 28px;
-  height: 28px;
   background: url(../image/close-window.png) no-repeat;
-  font-family: 'Pacifico', cursive;
+  border: none;
+  cursor: pointer;
+  height: 22px;
+  width: 29px;
 }
 #close-modal {
   color: #aaa;
diff --git a/html/home-page.html b/html/home-page.html
index 89f0d5b..2c4e96e 100644
--- a/html/home-page.html
+++ b/html/home-page.html
@@ -30,58 +30,66 @@
                 <li class="c-rainbow__layer c-rainbow__layer--blue">Icy-Tower</li>
                 <li class="c-rainbow__layer c-rainbow__layer--green">Icy-Tower</li>
                 <li class="c-rainbow__layer c-rainbow__layer--yellow">Icy-Tower</li>
-               </ul>
-            </div>
+            </ul>
+        </div>
     </header>
-    <div class="form hide" id="sign-in-form" data-form-type="register">
-        <button class="btn-close" type="button"></button>
-        <br>
-        <button class="change-form js-toggle-form" data-toggle-to="login" id="change-to-login" type="button">already have an acount? click to login</button>
-        <form method="get">
-            <div class="mt-16px mb-16px">
-                <label for="first-name">first name</label>
-                <input type="text" id="first-name" name="first-name">
-            </div>
-            <div class="mt-16px mb-16px">
-                <label for="email">email</label>
-                <input  name="email-user-name" type="email" id="user-name" placeholder="this will be your user name">
-            </div>
-            <div class="mt-16px mb-16px">
-                <label for="pwd">Password</label>
-                <br>
-                <input type="password" id="pasword-first" name="pwd" placeholder="your password">
-                <span id="message" class="message"></span>
-            </div> 
-            <div class="mt-16px mb-16px">
-                <label for="verify password">verify Password</label>
-                <input type="password" id="verify-pwd" name="verify password" placeholder="retype your password">
-                <span class="hide" id="verify-message">**Enter the password here again</span>
+    
+
+    <div id="modal-register" class="modal hide" data-form-type="register">
+        <div class="modal-dialog">
+            <div class="form modal-content">
+                <div class="text-start"><button class="btn-close btn-close-modal" type="button"></button></div>
+                <button class="change-form js-toggle-form" data-toggle-to="login" id="change-to-login" type="button">already have an acount? click to login</button>
+                <form method="get">
+                    <div class="mt-16px mb-16px">
+                        <label for="first-name">first name</label>
+                        <input type="text" id="first-name" name="first-name">
+                    </div>
+                    <div class="mt-16px mb-16px">
+                        <label for="email">email</label>
+                        <input  name="email-user-name" type="email" id="user-name" placeholder="this will be your user name">
+                    </div>
+                    <div class="mt-16px mb-16px">
+                        <label for="pwd">Password</label>
+                        <br>
+                        <input type="password" id="pasword-first" name="pwd" placeholder="your password">
+                        <span id="message" class="message"></span>
+                    </div> 
+                    <div class="mt-16px mb-16px">
+                        <label for="verify password">verify Password</label>
+                        <input type="password" id="verify-pwd" name="verify password" placeholder="retype your password">
+                        <span class="hide" id="verify-message">**Enter the password here again</span>
+                    </div>
+                    <button class="submit" id="sign-in-submit">sign-up</button>
+                    <br />
+                    <span class="message" id="submit-error-message"></span>
+                </form>
             </div>
-            <button class="submit" id="sign-in-submit">sign-up</button>
-            <br />
-            <span class="message" id="submit-error-message"></span>
-        </form>
+        </div>
     </div>
 
-    <div class="form hide" id="login-form" data-form-type="login">
-        <button class="btn-close" type="button"></button>
-        <br>
-        <button class="change-form js-toggle-form" data-toggle-to="register" id="change-to-sign" type="button">don't have an account? sign-up</button>
-        <h2>we are happy to see you again!</h2>
-        <form>
-            <div class="mt-16px mb-16px">
-                <label for="user">email</label>
-                <input type="email" id="email" name="user" required="required">
-            </div>
-            <div class="mt-16px mb-16px">
-                <label for="pwd">Password</label>
-                <input type="password" id="pwd" name="pwd" required="required">
+    <div id="modal-login" class="modal hide" data-form-type="login">
+        <div class="modal-dialog">
+            <div class="form modal-content">
+                <div class="text-start"><button class="btn-close btn-close-modal" type="button"></button></div>
+                <button class="change-form js-toggle-form" data-toggle-to="register" id="change-to-sign" type="button">don't have an account? sign-up</button>
+                <h2>we are happy to see you again!</h2>
+                <form>
+                    <div class="mt-16px mb-16px">
+                        <label for="user">email</label>
+                        <input type="email" id="email" name="user" required="required">
+                    </div>
+                    <div class="mt-16px mb-16px">
+                        <label for="pwd">Password</label>
+                        <input type="password" id="pwd" name="pwd" required="required">
+                    </div>
+                    <div class="hide" id="error-massage">
+                        <p>** The identification process failed,<br />one or more of the details is incorrect</p>
+                    </div>
+                    <div> <button class="submit" id="login-submit" type="submit">login</button></div>
+                </form>
             </div>
-            <div class="hide" id="error-massage">
-                <p>** The identification process failed,<br />one or more of the details is incorrect</p>
-            </div>
-            <div> <button class="submit" id="login-submit" type="submit">login</button></div>
-        </form>
+        </div>
     </div>
     <div id="you-must-login">
         <button id="close-modal">
diff --git a/js/login-sign-in.js b/js/login-sign-in.js
index ed02f4d..a0e022d 100644
--- a/js/login-sign-in.js
+++ b/js/login-sign-in.js
@@ -1,14 +1,57 @@
-let btnOpen = document.querySelector('#open-form');
-const btnListClose = document.querySelectorAll('.btn-close');
+class Modal {
+  constructor(elementId) {
+    this.modal = document.getElementById(elementId);
+    try{
+      this.modal.querySelector('.btn-close-modal').addEventListener('click', ()=>{
+        this.hide()
+      })
+    } catch(e) {}
+    
+  }
+  hide() {
+    this.modal.classList.add('hide');
+    this.modal.classList.remove('show');
+    this.checkAllModalState();
+  }
+  show() {
+    this.modal.classList.add('show');
+    this.modal.classList.remove('hide');
+    this.checkAllModalState();
+  }
+  checkAllModalState(){
+    let isModalOpen = false;
+    const docbody = document.getElementsByTagName('body')[0];
+    docbody.classList.remove('modal-open');
+    document.querySelectorAll('.modal').forEach((el)=>{
+      if(el.classList.contains('show')){
+        docbody.classList.add('modal-open');
+        isModalOpen = true;
+      }
+    })
+
+    if(isModalOpen){
+      const overlayLayer = document.createElement("div");
+      overlayLayer.className = 'modal-overlay';
+      docbody.append(overlayLayer);
+    } else {
+      const overlayLayer = docbody.getElementsByClassName('modal-overlay');
+      docbody.removeChild(overlayLayer[0]);
+    }
+  }
+}
+
+const btnOpen = document.querySelector('#open-form');
 let verifyPwd = document.querySelector('#verify-pwd');
 let password = document.querySelector('#pasword-first');
 let submBtn = document.querySelector('#sign-in-submit');
 let allImg = document.querySelectorAll('a');
 let closeDiv = document.getElementById('close-modal');
-let isFormOpen = false;
-let cheakLogin = document.querySelector('#login-submit');
-const formList = document.querySelectorAll('div.form')
-const btnToggleForm = document.getElementsByClassName('js-toggle-form')
+let checkLogin = document.querySelector('#login-submit');
+const modalList = document.querySelectorAll('div.modal');
+const btnToggleForm = document.getElementsByClassName('js-toggle-form');
+
+const modalLogin = new Modal('modal-login');
+const modalRegister = new Modal('modal-register');
 
 if (sessionStorage.getItem('currentUser') != null) {
   updateHeloUser();
@@ -17,29 +60,20 @@ if (sessionStorage.getItem('currentUser') != null) {
 // EVENTS /////////////
 Object.keys(btnToggleForm).forEach((i)=>{
   btnToggleForm[i].addEventListener('click', (e)=>{
-    formList.forEach((el)=>{
+    modalList.forEach((el)=>{
       if(e.target.dataset.toggleTo === el.dataset.formType){
-        el.classList.remove('hide')
+        el.classList.remove('hide');
+        el.classList.add('show');
       } else {
-        el.classList.add('hide')
+        el.classList.remove('show');
+        el.classList.add('hide');
       }
     })
   })
 })
 
-btnListClose.forEach((item)=>{
-  item.addEventListener('click', ()=>{
-    location.reload();
-  });
-})
-
 btnOpen.addEventListener('click', () => {
-  if (isFormOpen) return;
-  isFormOpen = true;
-  let form = document.querySelector('#login-form');
-  if (window.screen.height < 600) form.style.position = 'absolute';
-  form.classList.remove('hide');
-  toggleImageOpacity(false);
+  modalLogin.show();
 });
 
 closeDiv.addEventListener('click', () => {
@@ -52,10 +86,10 @@ allImg.forEach(function (item) {
 });
 
 submBtn.addEventListener('click', saveUser);
-cheakLogin.addEventListener('click', cheakLoginValidation);
-password.addEventListener('input', cheakPassword);
-password.addEventListener('input', cheakEqualtoPwd);
-verifyPwd.addEventListener('input', cheakEqualtoPwd);
+checkLogin.addEventListener('click', checkLoginValidation);
+password.addEventListener('input', checkPassword);
+password.addEventListener('input', checkEqualtoPwd);
+verifyPwd.addEventListener('input', checkEqualtoPwd);
 
 // FUNCTIONS /////////////
 function toggleImageOpacity(state){
@@ -67,7 +101,7 @@ function toggleImageOpacity(state){
   }
 }
 
-function cheakLoginValidation(e) {
+function checkLoginValidation(e) {
   e.preventDefault();
   let massege = document.querySelector('#error-massage');
   let password = document.querySelector('#pwd').value;
@@ -86,12 +120,11 @@ function cheakLoginValidation(e) {
   };
   sessionStorage.setItem('currentUser', JSON.stringify(currentUser));
   massege.classList.add('hide');
-  let loginForm = document.querySelector('#login-form');
-  loginForm.classList.toggle('hide');
+  modalLogin.hide()
   updateHeloUser();
 }
 
-function cheakEqualtoPwd() {
+function checkEqualtoPwd() {
   let pw = document.querySelector('#pasword-first').value;
   if (pw != document.querySelector('#verify-pwd').value) {
     document.querySelector('#verify-message').classList.remove('hide');
@@ -103,24 +136,24 @@ function cheakEqualtoPwd() {
   }
 }
 
-function addMEssageAboutPassword(message) {
+function addMessageAboutPassword(message) {
   document.getElementById('message').innerHTML = message;
   document.getElementById('message').style.color = 'red';
 }
 
-function cheakPassword() {
+function checkPassword() {
   // Spelled wrong but not a concern
   let pw = document.querySelector('#pasword-first').value;
   if (pw.length < 8) {
-    addMEssageAboutPassword('**Password length must be at least 8 characters');
+    addMessageAboutPassword('**Password length must be at least 8 characters');
   } else if (pw.length > 35) {
-    addMEssageAboutPassword('**Password length must not exceed 35 characters');
+    addMessageAboutPassword('**Password length must not exceed 35 characters');
   } else if (pw.search(/\d/) == -1) {
-    addMEssageAboutPassword(
+    addMessageAboutPassword(
       '**Password length must contain at least one number'
     );
   } else if (pw.search(/[a-zA-Z]/) == -1) {
-    addMEssageAboutPassword(
+    addMessageAboutPassword(
       '**Password must contain at least one English letter'
     );
   } else {
@@ -135,7 +168,7 @@ function saveUser(e) {
   e.preventDefault();
   document.getElementById('submit-error-message').innerHTML = '';
   let isOk = true;
-  if (cheakPassword() == false || cheakEqualtoPwd() == false) {
+  if (checkPassword() == false || checkEqualtoPwd() == false) {
     isOk = false;
   }
   let firstName = document.querySelector('#first-name').value;
@@ -174,8 +207,7 @@ function saveUser(e) {
   localStorage.setItem(userName, JSON.stringify(user));
   log = true;
   sessionStorage.setItem('currentUser', JSON.stringify(currentUser));
-  let signForm = document.querySelector('#sign-in-form');
-  signForm.classList.toggle('hide');
+  modalRegister.hide();
   updateHeloUser();
 }
 
@@ -190,15 +222,15 @@ function addMessage(e) {
 
 function updateHeloUser() {
   currentUser = JSON.parse(sessionStorage.getItem('currentUser'));
-  let spanFName = document.getElementById('user-first-name');
+  const spanFName = document.getElementById('user-first-name');
   spanFName.innerHTML = 'hello ' + currentUser.firstName;
   
-  let spanUserName = document.getElementById('user-name');
+  const spanUserName = document.getElementById('user-name');
   spanUserName.innerHTML = currentUser.userName;
 
   btnOpen.classList.add('hide');
-  let helloUser = document.getElementById('hello-user');
+  const helloUser = document.getElementById('hello-user');
   helloUser.classList.remove('hide');
 
   toggleImageOpacity(true);
-}
+}
\ No newline at end of file