updated to v1.0.2

Added Side Menu, Home Menu, Mods Menu, Game Controls Menu, Settings Menu.
Neuxs0 · Aug 26, 2024 · ff390da · ff390da
1 parent 680b731
commit ff390da
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 1.0.2
+- Added Side Menu
+- Added Home Menu
+- Added Mods Menu
+- Added Game Controls Menu
+- Added Settings Menu
+- Changed background color
+
 # 1.0.1
 - Added a button to open the BepInEx folder
 - Change Centered the buttons in the UI

diff --git a/main.py b/main.py
@@ -37,7 +37,7 @@ def check_program_files():
                         elif platform.system() == "Darwin":
                             gameDir = "/Applications/Assembly Line 2"
                         else:
-                            gameDir = "/home/user/.steam/steam/steamapps/common/Assembly Line 2"
+                            gameDir = "/home/user/.local/share/Steam/steamapps/common/Assembly Line 2/"
                         json.dump({"theme": "dark", "gameDir": f"{gameDir}"}, f, indent=4)
                 elif "." in os.path.basename(item):
                     with open(item, 'w') as f:

diff --git a/win/css/gameControlsMenu.css b/win/css/gameControlsMenu.css
@@ -0,0 +1,8 @@
+.btns {
+    position: relative;
+    width: 100%;
+    padding: 5px;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
diff --git a/win/css/homeMenu.css b/win/css/homeMenu.css
diff --git a/win/css/index.css b/win/css/index.css
@@ -8,17 +8,52 @@ body {
     overflow: hidden;
 }
 
-.content {
-    width: 100%;
+.side-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--side-menu-width);
     height: 100%;
+    background-color: var(--main-background-color);
+    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
+    z-index: 1;
 }
 
-#title {
+.side-menu button {
+    display: block;
     width: 100%;
-    text-align: center;
+    padding: 10px;
+    margin-bottom: 5px;
+    background-color: var(--secondary-background-color);
+    color: var(--main-text-color);
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.side-menu button:hover {
+    background-color: var(--main-background-color);
+}
+
+.side-menu button img {
+    width: 24px;
+    height: 24px;
+}
+
+.content {
+    position: absolute;
+    width: calc(100% - var(--side-menu-width));
+    height: 100%;
+    background-color: var(--secondary-background-color);
+    color: var(--main-text-color);
+    font-family: var(--main-text-font-family);
+    margin-left: var(--side-menu-width);
 }
 
-.btns {
+.title {
     width: 100%;
     text-align: center;
 }
diff --git a/win/css/modsMenu.css b/win/css/modsMenu.css
diff --git a/win/css/settingsMenu.css b/win/css/settingsMenu.css
diff --git a/win/css/variables.css b/win/css/variables.css
@@ -0,0 +1,9 @@
+:root {
+    --main-background-color: rgb(40, 40, 40);
+    --secondary-background-color: rgb(35, 35, 35);
+    --main-text-color: rgb(250, 250, 250);
+
+    --main-text-font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+    --side-menu-width: 80px;
+}
diff --git a/win/index.html b/win/index.html
@@ -2,18 +2,42 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
+        <link rel="stylesheet" href="./css/variables.css">
         <link rel="stylesheet" href="./css/index.css">
+        <link rel="stylesheet" href="./css/homeMenu.css">
+        <link rel="stylesheet" href="./css/modsMenu.css">
+        <link rel="stylesheet" href="./css/gameControlsMenu.css">
+        <link rel="stylesheet" href="./css/settingsMenu.css">
     </head>
     <body>
+        <div class="side-menu">
+            <button onclick="navigate('home')"><img src="svg/home.svg" alt="Home"></button>
+            <button onclick="navigate('mods')"><img src="svg/mods.svg" alt="Mods"></button>
+            <button onclick="navigate('game-controls')"><img src="svg/game-controls.svg" alt="Game Controls"></button>
+            <button onclick="navigate('settings')"><img src="svg/settings.svg" alt="Settings"></button>
+        </div>
         <div class="content">
-            <h1 id="title">AL2 Factory Mod Manager</h1>
-            <div class="btns">
-                <button onclick="install_bepinex()">Install BepInEx</button>
-                <button onclick="uninstall_bepinex()">Uninstall BepInEx</button>
-                <button onclick="open_game_folder()">Open Game Folder</button>
-                <button onclick="open_bepinex_folder()">Open BepInEx Folder</button>
+            <!-- Pages -->
+            <div id="home">
+                <h1 class="title">AL2 Factory Mod Manager</h1>
+            </div>
+            <div id="mods">
+                <h1 class="title">Mods</h1>
+            </div>
+            <div id="game-controls">
+                <h1 class="title">Game Controls</h1>
+                <div class="btns">
+                    <button onclick="install_bepinex()">Install BepInEx</button>
+                    <button onclick="uninstall_bepinex()">Uninstall BepInEx</button>
+                    <button onclick="open_game_folder()">Open Game Folder</button>
+                    <button onclick="open_bepinex_folder()">Open BepInEx Folder</button>
+                </div>
+            </div>
+            <div id="settings">
+                <h1 class="title">Settings</h1>
             </div>
         </div>
     </body>
 </html>
-<script src="./js/index.js"></script>
+<script src="./js/index.js"></script>
+<script src="./js/pageManager.js"></script>
diff --git a/win/js/pageManager.js b/win/js/pageManager.js
@@ -0,0 +1,17 @@
+function navigate(page) {
+    var pages = [
+        "home", "mods", "game-controls", "settings"
+    ]
+
+    if (page != null && pages.includes(page)) {
+        document.getElementById(page).style.display = "block"
+    }
+
+    pages.forEach(element => {
+        if (element != page) {
+            document.getElementById(element).style.display = "none"
+        }
+    });
+}
+
+navigate("home")
diff --git a/win/svg/game-controls.svg b/win/svg/game-controls.svg
diff --git a/win/svg/home.svg b/win/svg/home.svg
diff --git a/win/svg/mods.svg b/win/svg/mods.svg
diff --git a/win/svg/settings.svg b/win/svg/settings.svg