From 884192418010d6d1d9d45253826e7e4447dc7bf5 Mon Sep 17 00:00:00 2001
From: Spoiled Unknown <shanjusamsong254@gmail.com>
Date: Thu, 6 Jun 2024 18:50:58 +0530
Subject: [PATCH 1/8]  Improvement related to the Game Menu.

1. Increased the username limit to 20
2. added close menu button to game 3. menu with hover animation
4. added closing animation to game menu
5. added typing affect to the tittle of game menu
6. Remove button Now also closes the game menu when a game is removed
---
 src/App.vue                   | 75 +++++++++++++++++++++++++++++++++++
 src/components/LeftBar.vue    |  2 +-
 src/components/find-games.vue | 27 +++++++++++--
 3 files changed, 99 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb5c2e3d..2424198f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -142,6 +142,7 @@
           placeholder="Launch Flags..."
         /> -->
       <button class="gameMenuBtn" id="removeGame">Remove Game</button>
+      <button class="gameMenuCloseBtn" id="closeMenu">Close Menu</button>
       <!-- </div> -->
     </div>
   </div>
@@ -341,6 +342,18 @@ export default {
       document
         .getElementById("removeGame")
         .addEventListener("click", async function () {
+
+          const gamemenu = document.getElementById("gameMenu");
+          gamemenu.classList.add("active");
+          let isGameMenuAlreadyActive = false
+          gamemenu.addEventListener("animationend", function () {
+              if (gamemenu.style.display === "flex" && isGameMenuAlreadyActive === false) {
+                gamemenu.classList.remove("active");
+                gamemenu.style.display = "none";
+                isGameMenuAlreadyActive = true;
+              }
+          })
+
           let data = JSON.parse(
             await invoke("read_file", {
               filePath: (await path.appDir()) + "cache/games/data.json",
@@ -372,6 +385,22 @@ export default {
           );
         });
     })();
+
+    document
+        .getElementById("closeMenu")
+        .addEventListener("click", async function () {
+          const gamemenu = document.getElementById("gameMenu");
+          gamemenu.classList.add("active");
+          let isGameMenuAlreadyActive = false
+          gamemenu.addEventListener("animationend", function () {
+              if (gamemenu.style.display === "flex" && isGameMenuAlreadyActive === false) {
+                gamemenu.classList.remove("active");
+                gamemenu.style.display = "none";
+                isGameMenuAlreadyActive = true;
+              }
+          })
+        });
+
     function checkForUpdate() {
       window.__TAURI__.updater
         .checkUpdate()
@@ -962,6 +991,10 @@ img,
   align-items: center;
 }
 
+.gameMenu.active {
+  animation: gameMenuAnimationReverse 0.2s both ease-out;
+}
+
 .gameMenu .gameMenuBtn {
   font-family: Nunito;
   color: rgb(201, 201, 201);
@@ -981,6 +1014,26 @@ img,
   align-items: center;
 }
 
+.gameMenu .gameMenuCloseBtn {
+  font-family: Nunito;
+  color: rgb(201, 201, 201);
+  border: 4px solid rgba(var(--accent-color), 1);
+  border-radius: 12px;
+  font-size: 18px;
+  background-color: rgba(var(--all-color-primary), 0.7);
+  opacity: 0.9;
+  width: 13.78rem;
+  height: 50px;
+  text-decoration: none;
+  text-shadow: none;
+  padding: 10;
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s ease-out;
+}
+
 .gameMenu .gameMenuBody {
   margin: 40px;
   display: flex;
@@ -1012,6 +1065,11 @@ img,
   margin-top: 100px;
 }
 
+.gameMenu .gameMenuBody .gameMenuCloseBtn:first-child {
+  margin-top: 100px;
+}
+
+
 .gameMenu .gameMenuTitle {
   font-size: 20px;
   color: #cacaca;
@@ -1021,6 +1079,11 @@ img,
   margin-bottom: 50px;
 }
 
+.gameMenu .gameMenuCloseBtn:hover {
+  scale: 1.05;
+  background-color: rgba(var(--accent-color), 0.5);
+}
+
 .gameMenu .gameMenuBtn:hover {
   scale: 1.05;
 }
@@ -1329,6 +1392,18 @@ img,
   }
 }
 
+@keyframes gameMenuAnimationReverse {
+  0% {
+    width: 30rem;
+    opacity: 1;
+  }
+  100% {
+    width: 0px;
+    opacity: 0.5;
+  }
+}
+
+
 @keyframes closeOverlay {
   0% {
     height: 100%;
diff --git a/src/components/LeftBar.vue b/src/components/LeftBar.vue
index 3ae6a5e8..83d96139 100644
--- a/src/components/LeftBar.vue
+++ b/src/components/LeftBar.vue
@@ -23,7 +23,7 @@
         type="text"
         value="Lazap"
         spellcheck="false"
-        maxlength="12"
+        maxlength="20"
       />
     </div>
 
diff --git a/src/components/find-games.vue b/src/components/find-games.vue
index 2c07237a..d2a465d3 100644
--- a/src/components/find-games.vue
+++ b/src/components/find-games.vue
@@ -1,6 +1,13 @@
 <script>
 import image from "../assets/img/default-game-banner.png";
 
+/*
+  isTyping is very important as it is a fix for a bug where spam clicking makes the GameMenu title weird.
+  It is intended to be a global variable, as keeping it inside getMenuElement() resets it, which is not intended to happen.
+*/
+let isTyping = false;
+
+
 // Classes
 class GameElement {
   constructor(data, listID, jsondata, settings, bannerdirarr) {
@@ -118,10 +125,22 @@ class GameElement {
     const gamemenu = document.getElementById("gameMenu");
 
     element.addEventListener("click", () => {
-      gamemenu.style.display =
-        gamemenu.style.display === "flex" ? "none" : "flex";
-      document.getElementById("gameMenuTitle").innerHTML =
-        this.data.display_name;
+      //makes sure the usre can't spam click.
+      if (!isTyping) {
+        isTyping = true;
+        gamemenu.style.display = "flex";
+        const gameMenuTitle = document.getElementById("gameMenuTitle")
+        gameMenuTitle.innerHTML = " ";
+        const display_name = this.data.display_name;
+        for (let i = 0; i < display_name.length; i++) {
+          setTimeout(function() {
+            gameMenuTitle.innerHTML += display_name.charAt(i);
+            if (i === display_name.length - 1) {
+              isTyping = false; // Reset the flag when typing is finished
+            }
+          }, 50 * i);
+        }
+      }
     });
 
     return element;

From c13a37c02186c8ce5ce55b6c446df56c953c346a Mon Sep 17 00:00:00 2001
From: Spoiled Unknown <shanjusamsong254@gmail.com>
Date: Thu, 6 Jun 2024 19:26:32 +0530
Subject: [PATCH 2/8] Added better dev environment setup guide.

---
 README.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/README.md b/README.md
index 09d20931..276515ca 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,8 @@ winget install LazapDevelopment.Lazap
 Lazap is fully open-source and can be compiled from source.
 
 ### Prerequisites
+- [Visual Studio Build Tools](https://visualstudio.microsoft.com/)
+- [Rust](https://www.rust-lang.org/tools/install)
 - [Tauri Prerequisites](https://tauri.app/v1/guides/getting-started/prerequisites/)
 - [Latest Node.JS](https://nodejs.org/en)
 - [Yet Another Resource Negotiator](https://yarnpkg.com/getting-started)
@@ -80,6 +82,35 @@ cd Lazap && yarn install
 yarn tauri dev
 ```
 
+### Windows Yarn (Yet Another Resource Negotiator) Error
+Sometimes, yarn doesn't works very well, this can be due to error during installation or oudated nodejs version a potential fixe fix given below:
+ 
+ _Note: Make sure you have latest nodejs and yarn installed correctly.if not then install yarn from [here](https://github.com/yarnpkg/yarn/releases), and add this to path._ 
+
+1. Remove .yarn and yarn.lock
+```ps1
+# remove .yarn
+Remove-Item -Recurse -Force .yarn
+# remove yarn.lock
+Remove-Item yarn.lock
+```
+2. Update `.yarnrc.yml`
+```yml
+#remove yarnPath from the .yarnrc.yml
+yarnPath: .yarn/releases/yarn-4.1.1.cjs
+#leave nodeLinker as is, its 100% correct
+```
+
+3. Install Dependencies
+```bash
+#install deps
+yarn install
+# run in development mode
+yarn tauri dev
+```
+
+Although the above should work perfectly, but if you still get any error feel free to ask for help from given below section.
+
 ## 📚 Help & Support
 **Have a question/problem?**<br>
 If you need assist or in need of technical support for your Lazap installation, feel free to file an [issue](https://github.com/Lazap-Development/lazap/issues) so we can assist you.<br><br>

From 22a8027ce061f9d7bae1885f6f3a253ffc50ea2c Mon Sep 17 00:00:00 2001
From: Spoiled Unknown <shanjusamsong254@gmail.com>
Date: Thu, 6 Jun 2024 19:36:07 +0530
Subject: [PATCH 3/8] Fixed some typos.

---
 README.md                     | 2 +-
 src/components/find-games.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 276515ca..fcee566d 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,7 @@ yarn tauri dev
 ```
 
 ### Windows Yarn (Yet Another Resource Negotiator) Error
-Sometimes, yarn doesn't works very well, this can be due to error during installation or oudated nodejs version a potential fixe fix given below:
+Sometimes, yarn doesn't works very well, this can be due to error during installation or oudated nodejs version a potential fix given below:
  
  _Note: Make sure you have latest nodejs and yarn installed correctly.if not then install yarn from [here](https://github.com/yarnpkg/yarn/releases), and add this to path._ 
 
diff --git a/src/components/find-games.vue b/src/components/find-games.vue
index d2a465d3..54f2df8f 100644
--- a/src/components/find-games.vue
+++ b/src/components/find-games.vue
@@ -125,7 +125,7 @@ class GameElement {
     const gamemenu = document.getElementById("gameMenu");
 
     element.addEventListener("click", () => {
-      //makes sure the usre can't spam click.
+      //makes sure the user can't spam click.
       if (!isTyping) {
         isTyping = true;
         gamemenu.style.display = "flex";

From 1722a578b35a5670f01c6b7e17340221c01c8d1b Mon Sep 17 00:00:00 2001
From: Spoiled Unknown <shanjusamsong254@gmail.com>
Date: Thu, 6 Jun 2024 19:44:12 +0530
Subject: [PATCH 4/8] fixed a few more typos

---
 src/components/find-games.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/find-games.vue b/src/components/find-games.vue
index 54f2df8f..93eab69b 100644
--- a/src/components/find-games.vue
+++ b/src/components/find-games.vue
@@ -6,6 +6,7 @@ import image from "../assets/img/default-game-banner.png";
   It is intended to be a global variable, as keeping it inside getMenuElement() resets it, which is not intended to happen.
 */
 let isTyping = false;
+const typeSpeed = 50;
 
 
 // Classes
@@ -138,7 +139,7 @@ class GameElement {
             if (i === display_name.length - 1) {
               isTyping = false; // Reset the flag when typing is finished
             }
-          }, 50 * i);
+          }, typeSpeed * i);
         }
       }
     });

From 4f0fc7a2d37e6b6a62698e14a6efe47459ebda83 Mon Sep 17 00:00:00 2001
From: Spoiled Unknown <shanjusamsong254@gmail.com>
Date: Thu, 6 Jun 2024 19:46:12 +0530
Subject: [PATCH 5/8] update README.MD

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index fcee566d..3fffe1b8 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,7 @@ yarn tauri dev
 ```
 
 ### Windows Yarn (Yet Another Resource Negotiator) Error
-Sometimes, yarn doesn't works very well, this can be due to error during installation or oudated nodejs version a potential fix given below:
+Sometimes, yarn doesn't works very well, this can be due to error during installation or oudated nodejs version a potential fix is given below:
  
  _Note: Make sure you have latest nodejs and yarn installed correctly.if not then install yarn from [here](https://github.com/yarnpkg/yarn/releases), and add this to path._ 
 

From 9cf07044cfe1ca0398089b0281571cdcaad54529 Mon Sep 17 00:00:00 2001
From: Spoiled Unknown <shanjusamsong254@gmail.com>
Date: Fri, 7 Jun 2024 10:34:12 +0530
Subject: [PATCH 6/8] Added improtant yarn fix step.

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3fffe1b8..348f8c78 100644
--- a/README.md
+++ b/README.md
@@ -101,7 +101,13 @@ yarnPath: .yarn/releases/yarn-4.1.1.cjs
 #leave nodeLinker as is, its 100% correct
 ```
 
-3. Install Dependencies
+3. Update package.json
+```json
+//remove the below given line from the package.json file.
+"packageManager": "yarn@4.1.1"
+```
+
+4. Install Dependencies
 ```bash
 #install deps
 yarn install

From df8fd3ea826f16679df103d082f074f4a9907bb2 Mon Sep 17 00:00:00 2001
From: Spoiled Unknown <shanjusamsong254@gmail.com>
Date: Fri, 7 Jun 2024 10:39:23 +0530
Subject: [PATCH 7/8] Added improtant yarn fix step.

---
 README.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f1a26275..1080a89d 100644
--- a/README.md
+++ b/README.md
@@ -101,8 +101,12 @@ Remove-Item yarn.lock
 yarnPath: .yarn/releases/yarn-4.1.1.cjs
 #leave nodeLinker as is, its 100% correct
 ```
-
-3. Install Dependencies
+3. Update `package.json`
+```json
+//remove the below given line from the package.json file
+"packageManager": "yarn@4.1.1"
+```
+4. Install Dependencies
 ```bash
 #install deps
 yarn install

From f6932da334bf247d7ba0aee4c3272396109c108a Mon Sep 17 00:00:00 2001
From: Spoiled Unknown <shanjusamsong254@gmail.com>
Date: Fri, 7 Jun 2024 11:26:17 +0530
Subject: [PATCH 8/8] Fixed some typos in README.md

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 1080a89d..fc23feb1 100644
--- a/README.md
+++ b/README.md
@@ -97,18 +97,18 @@ Remove-Item yarn.lock
 ```
 2. Update `.yarnrc.yml`
 ```yml
-#remove yarnPath from the .yarnrc.yml
+# remove yarnPath from the .yarnrc.yml
 yarnPath: .yarn/releases/yarn-4.1.1.cjs
-#leave nodeLinker as is, its 100% correct
+# leave nodeLinker as is, its 100% correct
 ```
 3. Update `package.json`
 ```json
-//remove the below given line from the package.json file
+// remove the below given line from the package.json file
 "packageManager": "yarn@4.1.1"
 ```
 4. Install Dependencies
 ```bash
-#install deps
+# install deps
 yarn install
 # run in development mode
 yarn tauri dev