v2.0 ready

Leeous · Jul 24, 2020 · dc48538 · dc48538
1 parent 9a51313
commit dc48538
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -29,6 +29,8 @@ Common mistakes you should be aware of,
 
 * not being logged into Steam will obviously cause uploads to fail
 
+* you **must** have Garry's Mod installed to use this tool, since it utilizes `gmat.exe` and `gmpublish.exe` which can be found in `/GarrysMod/bin/` 
+
 Otherwise, [create an issue](https://github.com/Leeous/gmod-addon-tool/issues/new) or send me a tweet/DM.
 
 ### Social

diff --git a/index.html b/index.html
@@ -42,14 +42,14 @@ <h4 style="font-weight: 300; margin: 10px">Steam <b>must</b> be open!</h4>
             <h3>What would you like to do?</h3>
             <div id="addon_mgt_btn_grid">
                 <button id="create_addon_button" class="button_normal medium-text transition_button" data-divtoshow="#create_new_addon, #addonDirPrompt" data-divtohide="#addon_management_prompt" data-resize="500, 260" style="margin: 10px;">Create a new addon</button>
-                <button id="update_existing_addon_button" class="button_normal medium-text transition_button rowtwo" data-divtoshow="#update_existing_addon" data-divtohide="#addon_management_prompt" data-resize="500, 250" style="margin: 10px;">Loading... </button>
+                <button id="update_existing_addon_button" class="button_normal medium-text transition_button rowtwo" data-divtoshow="#update_existing_addon" data-divtohide="#addon_management_prompt" data-resize="450, 500" style="margin: 10px;">Loading... </button>
                 <button class="button_normal medium-text transition_button rowtwo" data-divtoshow="#extract_addon, #addon_extraction, #extract_addon_select" data-divtohide="#addon_management_prompt" data-resize="500, 250" style="margin: 10px;">Extract Addon</button>
             </div>
         </div>
         <div id="update_existing_addon" class="path_div">
             <div class="top">
                 <div>
-                    <button class="back_button transition_button" data-divtoshow="#addon_management_prompt" data-divtohide="#update_existing_addon" data-resize="500, 200">◀ Back</button>
+                    <button class="back_button transition_button" data-divtoshow="#addon_management_prompt" data-divtohide="#update_existing_addon" data-resize="500, 200, false">◀ Back</button>
                 </div>
                 <div>
                     <h3>Your addons</h3>

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "icon": "src/img/icon.png",
     "productName": "Garry's Mod Addon Tool",
     "linux": {
-      "target": "deb",
+      "target": "Snap",
       "icon": "src/img/icon.png",
       "synopsis": "A simple tool to update Garry's Mod workshop addons.",
       "description": "A simple tool to update Garry's Mod workshop addons.",

diff --git a/src/css/style.css b/src/css/style.css
@@ -10,7 +10,7 @@ body {
 }
 
 header, main, footer {
-    padding: 0 5px;    
+    padding: 0 5px;
 }
 
 header input[type="file"] {
@@ -279,23 +279,26 @@ header {
     cursor: pointer;
     font-size: .9em;
     padding: 5px 20px;
-    transform: ease 0.8s all;
     outline: none;
     border-radius: 0 5px 5px 0;
-    margin: 0;
     display: block;
+    transition: ease 0.2s all;
+}
+
+.back_button:hover {
+    background-color: rgb(246, 79, 79);
 }
 
 #addonPreviewDetails {
     margin: 10px auto;
 }
 
-#addonPreviewDetails th {
+#addonPreviewDetails th, #addonPreviewExisting th {
     padding: 5px;
     background-color: #024B7F;
 }
 
-#addonPreviewDetails td {
+#addonPreviewDetails td, #addonPreviewExisting td {
     padding: 5px 15px;
     background-color: #0261A5;
     max-width: 250px;
@@ -305,9 +308,49 @@ header {
     text-overflow: ellipsis; 
 }
 
+#addonPreviewExisting {
+    /* width: 100%; */
+    /* padding: 2; */
+    /* margin: 10px; */
+    background: rgb(0, 85, 146);
+    display: grid;
+    /* margin: 25px auto; */
+    justify-content: space-evenly;
+    grid-auto-flow: column;
+}
+
+div#addonPreviewExisting div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#addonPreviewExisting th {
+    width: 100;
+}
+
+#addonPreviewExisting td {
+    width: 100;
+}
+
+#addonHeader {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}
+
+#addonStats {
+    margin: auto;
+    text-align: center;
+}
+
 #yourAddons {
     overflow-y: scroll;
-    height: 65%;
+    max-height: 81.2%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 #jsonTags {
@@ -319,32 +362,61 @@ header {
     padding-top: 15px;
 }
 
-.addon_existing {
-    font-weight: 500;
-    background-color: #048CEC;
+.publishedAddon {
+    display: flex;
+    /* height: 100%; */
+    user-select: none;
+    flex-direction: column;
+    /* width: 100%; */
+    /* background-color: #024b7f; */
+}
+
+.publishedStats {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
     padding: 10px 0;
-    transition: ease 0.5s all;
+    background-color: #024b7f;
 }
 
-.addon_existing:hover {
-    background-color: #43A3E8;
-    padding: 15px 0;
+.publishedStats p {
+    padding: 0 10px 10px 10px;
+    margin: 10px 0 0 0;
+    cursor: default;
 }
 
-.addon_existing .title {
+.publishedTitle h1 {
     margin: 0;
-    cursor: default;
+    padding: 10px;
+    text-shadow: 0px 0px 4px black;
 }
 
-.addon_link {
-    display: none;
-    margin-top: 5px;
-    margin-bottom: 0;
+.publishedControls {
+    display: flex;
+    padding: 0;
 }
 
-.addon_link a {
-    padding: 3px;
+.publishedControls p {
+    width: 50%;
+    margin: 0;
+}
+
+.publishedControls p a {
+    border: none;
+    background-color: #0261A5;
     color: white;
+    display: block;
+    font-weight: 800;
+    padding: 10px;
+    transition: ease 0.2s all;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+}
+
+.publishedControls p a:hover {
+    background-color: #43a3e8;
+    letter-spacing: 1.5px;
 }
 
 .removeBackOption {
@@ -397,7 +469,6 @@ header {
 
 #jsonIgnore p {
     font-weight: 700;
-    /* padding-right: 9px; */
 }
 
 #jsonIgnore input[type="text"] {
@@ -411,15 +482,12 @@ header {
 .jsonSectionHeader {
     font-weight: 700;
     width: 55px;
-    /* margin-top: 0; */
     padding-left: 15px;
     letter-spacing: 1px;
-    /* white-space: nowrap; */
 }
 
 .jsonGrid {
     display: grid;
-    /* margin-left: 10px; */
     grid-template-columns: auto auto auto auto auto;
 }
 

diff --git a/src/img/favs.png b/src/img/favs.png
diff --git a/src/img/subs.png b/src/img/subs.png
diff --git a/src/img/views.png b/src/img/views.png
diff --git a/src/js/script.js b/src/js/script.js
@@ -241,6 +241,10 @@ $(document).ready(() => {
         }
     });
 
+    $(".viewAddon").click((e) => {
+        console.log($(e.target).data("viewAddon"));
+    });
+
     $(".back_button").click((event) => {
         var target = event.target;
         var divToGoBack = $(target).data("forwards");
@@ -256,7 +260,6 @@ $(document).ready(() => {
         var target = event.target;
         var divToGoBack = $(target).data("divtohide");
         var divToShow = $(target).data("divtoshow");
-        console.log(divToGoBack, divToShow)
         // Checks for resize data, if it exists, pass it to goBack()
         if ($(target).data("resize") != null) {
             var resizeInfo = JSON.parse("[" + $(target).data("resize") + "]");
@@ -296,10 +299,8 @@ $(document).ready(() => {
     $("#yourAddons").on("click", ".updateAddon", (event) => {
         var target = event.target;
         existingAddonId = $(target).data("id");
-        $("#update_existing_addon").fadeOut(() => {
-            $("#create_new_addon .top div h3").text("Updating addon");
-            $("#create_new_addon, #addonDirPrompt").fadeIn();
-        });
+        $("#create_new_addon .top div h3").text("Updating addon");
+        goBack("#update_existing_addon", "#create_new_addon, #addonDirPrompt", [500, 250] )
     });
 
     // Tells server to create the GMA
@@ -454,7 +455,11 @@ $(document).ready(() => {
                         var addon = response.publishedfiledetails[i];
                         var addonObject = {
                             "title": addon.title,
-                            "id": addon.publishedfileid
+                            "id": addon.publishedfileid,
+                            "icon": addon.preview_url,
+                            "views": addon.views,
+                            "lifesubs": addon.lifetime_subscriptions,
+                            "favs": addon.favorited
                         }
                         queuePosition++;
                         addon_data.push(addonObject);
@@ -488,6 +493,7 @@ $(document).ready(() => {
                     width: resizeInfo[0],
                     height: resizeInfo[1]
                 });
+                // if (resizeInfo[2] != null) {win.setResizable(resizeInfo[2])}
             }
             $(divToFadeIn).fadeIn();
         })
@@ -499,7 +505,32 @@ $(document).ready(() => {
         // This check is done to make sure this only gets executed once
         if (!donePopulatingAddonList) {
             for (let i = 0; i < array.length; i++) {
-                $("#yourAddons").append("<div class='addon_existing'><p class='title'>" + array[i].title + "</p><p class='addon_link'><a href='steam://url/CommunityFilePage/" + array[i].id + "'>View</a><a href='#' class='updateAddon' data-id='" + array[i].id + "'>Update</a></p></div>");
+                console.log(array)
+                $("#yourAddons").append(`
+                <section class="publishedAddon">
+                    <aside class="publishedTitle">
+                        <h1>${array[i].title}</h1>
+                    </aside>
+                    <aside class="publishedStats">
+                        <div>
+                            <img src="src/img/views.png" alt="Views"/>
+                            <p>${array[i].views}</p>
+                        </div>
+                        <div>
+                            <img src="src/img/subs.png" alt="Downloads"/>
+                            <p>${array[i].lifesubs}</p>
+                        </div>
+                        <div>
+                            <img src="src/img/favs.png" alt="Favorites"/>
+                            <p>${array[i].favs}</p>
+                        </div>
+                    </aside>
+                    <footer class="publishedControls">
+                        <p><a href="steam://url/CommunityFilePage/${array[i].id}">View</a></p>
+                        <p><a class="transition_button updateAddon" data-resize="500, 260" data-id="${array[i].id}"/a>Update</p>
+                    </footer>
+                </section>
+                `);
                 donePopulatingAddonList = true;
             }
 
@@ -511,21 +542,6 @@ $(document).ready(() => {
                 donePopulatingAddonList = true;
                 errorNote("Steam API: HTTP 429 error. Try again later.");
             }
-
-            $(".addon_existing").hover((event) => {
-                var target = $(event.target);
-                var targetLink = $(target).find(".addon_link");
-                $(targetLink).css("opacity", 0).slideDown("fast").animate({ opacity: 1 }, { queue: false, duration: "slow" });
-            }, (event) => {
-                var target = $(event.target);
-                var targetLink = $(target).find(".addon_link");
-                $(targetLink).slideUp("fast").animate({ opacity: 0 }, { queue: false, duration: "slow" });
-            });
-
-            if (0 == addon_data.length) {
-                $("#yourAddons").append("<p style='background-color: #0f0f0f; padding: 15px 10px; margin: 10px 15px; border-radius: 5px;'><b>No addons found!</b><br/><br/>Either you don't have Steam open or haven't uploaded anything public.</p>");
-                donePopulatingAddonList = true;
-            }
         }
     }