#skip-ci improved clickable feedback

- added state store - clickables use now click cursor - various clickables now use `disable` - nav conditionally disabled
Drehmal-Team · Jan 4, 2024 · 2095951 · 2095951
1 parent df5d2b7
commit 2095951
Show file tree

Hide file tree

Showing 18 changed files with 203 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "drehmal-installer",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Drehmal, Minecraft map installer",
   "productName": "Drehmal Installer",
   "author": "majorlue",

diff --git a/scripts/base64.js b/scripts/base64.js
@@ -0,0 +1,15 @@
+const fs = require('fs');
+
+const imgPaths = [];
+
+const out = [];
+imgPaths.forEach((img) => {
+  const base64 = base64_encode(img);
+  out.push('data:image/png;base64,' + base64);
+});
+console.log(JSON.stringify(out));
+
+function base64_encode(file) {
+  const bitmap = fs.readFileSync(file);
+  return new Buffer(bitmap).toString('base64');
+}
diff --git a/...assets/images/small_button_arrow_grey.png → ...images/icons/buttons/down-button-grey.png b/...assets/images/small_button_arrow_grey.png → ...images/icons/buttons/down-button-grey.png
diff --git a/src/assets/images/icons/buttons/down-button-purple.png b/src/assets/images/icons/buttons/down-button-purple.png
diff --git a/src/assets/images/icons/buttons/down-button-yellow.png b/src/assets/images/icons/buttons/down-button-yellow.png
diff --git a/src/assets/images/icons/buttons/small-button-check.png b/src/assets/images/icons/buttons/small-button-check.png
diff --git a/src/components/BackButton.vue b/src/components/BackButton.vue
@@ -1,11 +1,45 @@
 <template>
-  <router-link :to="path">
-    <div class="nav-button"></div>
-  </router-link>
+  <div
+    class="nav-button"
+    :class="{
+      disabled:
+        processingShards ||
+        processingFabric ||
+        processingMods ||
+        disableNav ||
+        disableBackNav,
+    }"
+    @click="
+      if (
+        !(
+          processingShards ||
+          processingFabric ||
+          processingMods ||
+          disableNav ||
+          disableBackNav
+        )
+      )
+        nav(path);
+    "
+  ></div>
 </template>
 
 <script setup lang="ts">
+import { useStateStore } from 'src/stores/StateStore';
+import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
+const {
+  processingShards,
+  processingFabric,
+  processingMods,
+  disableNav,
+  disableBackNav,
+} = storeToRefs(useStateStore());
+
 defineProps(['path']);
+
+const router = useRouter();
+const nav = (path: string) => router.push(path);
 </script>
 
 <style scoped>
@@ -14,8 +48,16 @@ defineProps(['path']);
   width: 68px;
   background: url('src/assets/images/back-button-purple.png') no-repeat;
   display: inline-block;
+  cursor: pointer;
 }
 .nav-button:hover {
   background: url('src/assets/images/back-button-yellow.png') no-repeat;
 }
+.disabled:hover {
+  background: url('src/assets/images/back-button-grey.png') no-repeat;
+}
+.nav-button .disabled {
+  background: url('src/assets/images/next-button-grey.png') no-repeat;
+  cursor: default;
+}
 </style>
diff --git a/src/components/MapDownload.vue b/src/components/MapDownload.vue
@@ -29,6 +29,7 @@
             @click="downloadShards"
             :label="downloadShardsLabel"
             class="shards-btn"
+            :class="{ disabled: shardsDisabled }"
           />
         </div>
         <div>
@@ -39,6 +40,7 @@
             :percent="fabricProgress.percent"
             :img="fabricProgress.img"
             :buttonClick="fabricClick"
+            :buttonDisabled="fabricDisabled"
           />
         </div>
         <div>
@@ -49,6 +51,7 @@
             :percent="modsProgress.percent"
             :img="modsProgress.img"
             :buttonClick="modsClick"
+            :buttonDisabled="modsDisabled"
           />
         </div>
       </div>
@@ -73,13 +76,21 @@ import {
 } from 'src/providers/InstallFabric';
 import { useInstallerStore } from 'src/stores/InstallerStore';
 import { useSourcesStore } from 'src/stores/SourcesStore';
+import { useStateStore } from 'src/stores/StateStore';
 import { ref } from 'vue';
 const fs = require('fs');
 const path = require('path');
 
 const { map } = storeToRefs(useSourcesStore());
 const { minecraftDir, shardsDir } = storeToRefs(useInstallerStore());
-
+const {
+  processingShards,
+  processingFabric,
+  processingMods,
+  disableNav,
+  disableBackNav,
+  disableNextNav,
+} = storeToRefs(useStateStore());
 const versionFileName = map.value.versionName
   .toLowerCase()
   .split(' ')
@@ -89,6 +100,10 @@ const shardsArr: Shard[] = [];
 const downloadShardsLabel = ref('Download map');
 let downloadShardsClicked = ref(false);
 
+const shardsDisabled = ref(false);
+const fabricDisabled = ref(false);
+const modsDisabled = ref(false);
+
 map.value.shards.forEach((shard, i) =>
   shardsArr.push({
     index: i,
@@ -104,17 +119,20 @@ const fabricProgress = ref<ProgressBoxType>({
   label: 'Fabric - Waiting . . .',
   percent: 0,
   progress: 0,
-  img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAhCAYAAAB0v5O6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAOCSURBVFhH7ZlLaBNBGID/yW4eTTYxEbRFhVrtSUS8+apY0ZsgxWsPivakHvTitUVFCh6sNwXBs1gN2h70Ymx9gUYQQRH0oFQEldrmsUm6j6z/v9nUTdrspskmacCvGXYyO03mn3z7z2zCotFYmEksyvOufmAMQNMAAI/4aIe6hkdVyY9s6hWusMvDY7Ht23b2h8MdwFzUq71QlDykkjl4HX/xkE3em9YEwasHEokEjS7tw9xcCrS8BolEDtjk/WdaMOjVA/H4OOB9LqNb/ZwbeAmpeRmyigo3JvogFPEYZ5xBzqiQyyqQTIowP5eFkpE7GQixOSLA1rVBCHrcRouzuP2cUSvg7OgrQZdiEy5H22AYZjiPx1Ox3Lz4CU72T8HxA0/hzfSfknPMiMDHcXB+4BWcwn6DfTHIilDSr5pC47DDMhgOB+F2WyvSJXRAL6q0Meg3WpbSKfh03aiEvHxNHxKNwy4gy2CqmY0i1LWazM65ajfbbjwl2cwfLv0UeJ4Hl82b3x39DB+ez+oZ60cyCxr+qbiQnb20A/Yd7jJ6AVwdfAtiQoZfYg7SkqK3ZWUVbj0+CGuqzHKKokA+nzeeFUjNLiyfzeqhg+dQI2FRuUpzuD7ggy2Y5agINSpXCceCMUMDrNZQ2pQ4hWOamcmRcilUjvZNWM5UUO5nOgcZGZXDwDOk3CNr5ZqmmRkfKkcaUfbaYKEcZbke7NcTRuU89SvXkGDM6ANsknIN0cyMOcvljSy3dxnlfosLkJJkva1SlmuJZmbKs1wl1gW8i1kugMrVQsODKWcF6/CKabhmlK2OXeiF3Yf+qXX6yBTeGkj6zSJd/BxuHb7Oi3B9Yv/qy2Zm8L5JL2YogK04eaQeBeIUTdeskTREM9FQa0+ZWsk5CTejDLrDAeDw+A3VGrNRy0xLNKNrgYoZUou0omxFgRBlXermv2ZmiprR3qqQtTqNMya1cAvQHSmoNZPMwLUHtX25UZdmqqoaNXtoU0krvJlFtXDRLKpFfWrRi16fihWWwdA/S5JkPGstsizbBmOpWb2MnXgPmaQC31Gt0fFdEHL49YnmLZrGekj3NM7nrqWUBEPfELYTC+nS8bKJ8WnN73cD7+YgFApgU3EGaVpXfz2REOlXAEinJWDRO7ERBmw43Oa/AmjAhlg8HnfPfEmN43pytI4Jal0dwY3s0LuPT27/BQ2FAKlZsC2xAAAAAElFTkSuQmCC',
+  img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB50lEQVRYhd2YTU7bYBCGn7GyoF0Eu17EpyARS1hEogeI1IXbs/QAvUpJFogcAESkwhIBvQRUMna9ABaQr4tgk9j5lSd1zLNybI8y7ze/shx3z+j4bfq9gaGCdPy29HsDxBhDvzcwIoLtfCjbr5WIwkeMMXT8tshx98wAWJawbVdLyN/okeFwlEg1AOfTx/Sh69bL8WpFgiBODz68fxgJSUhEbNVrecsN4il+xnXrBEGc3rOyL226CJjuo4WU4Ik2Apa8AyUC1KDY+PD3TiZ+9y4+r9VuFoULouU56fXVbbh2u1kUFvL9aBeAH18uaXlOetKzTtjfO0GApudwfRvSLRiJBPUW1fIcru+iuc9TFMtTTch4ZJoNOxeZb/unDI2h5Tn8/hPx89eB1l8Dkp8jWkycPLDTsNN7yVqhh9FPrWzNfN0/xbxG4uYu4vBcMxJvFBayqLibDTu9Hpp8JBbZL4tK+53WPscjM68mZtmvikqNLGo+L+o1kUelRua5mURm3VhT0rZyGKOUWpaUv3iqrSjZJXAZRISuUjtWmyPZAbgMGt0qQX1FKYu1rSj/m5yQp/i5DD9WYpqPE6kVBDGuW6+EmPEvKPAqJLx/AEbft7IvbDKJ3zBKrfKHQHEkSS0BzLjCCiEA/wAmNq0sQ6WYFQAAAA5lWElmTU0AKgAAAAgAAAAAAAAA0lOTAAAAAElFTkSuQmCC',
 });
 const modsProgress = ref<ProgressBoxType>({
   label: 'Mods - Waiting . . .',
   percent: 0,
   progress: 0,
-  img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAhCAYAAAB0v5O6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAOCSURBVFhH7ZlLaBNBGID/yW4eTTYxEbRFhVrtSUS8+apY0ZsgxWsPivakHvTitUVFCh6sNwXBs1gN2h70Ymx9gUYQQRH0oFQEldrmsUm6j6z/v9nUTdrspskmacCvGXYyO03mn3z7z2zCotFYmEksyvOufmAMQNMAAI/4aIe6hkdVyY9s6hWusMvDY7Ht23b2h8MdwFzUq71QlDykkjl4HX/xkE3em9YEwasHEokEjS7tw9xcCrS8BolEDtjk/WdaMOjVA/H4OOB9LqNb/ZwbeAmpeRmyigo3JvogFPEYZ5xBzqiQyyqQTIowP5eFkpE7GQixOSLA1rVBCHrcRouzuP2cUSvg7OgrQZdiEy5H22AYZjiPx1Ox3Lz4CU72T8HxA0/hzfSfknPMiMDHcXB+4BWcwn6DfTHIilDSr5pC47DDMhgOB+F2WyvSJXRAL6q0Meg3WpbSKfh03aiEvHxNHxKNwy4gy2CqmY0i1LWazM65ajfbbjwl2cwfLv0UeJ4Hl82b3x39DB+ez+oZ60cyCxr+qbiQnb20A/Yd7jJ6AVwdfAtiQoZfYg7SkqK3ZWUVbj0+CGuqzHKKokA+nzeeFUjNLiyfzeqhg+dQI2FRuUpzuD7ggy2Y5agINSpXCceCMUMDrNZQ2pQ4hWOamcmRcilUjvZNWM5UUO5nOgcZGZXDwDOk3CNr5ZqmmRkfKkcaUfbaYKEcZbke7NcTRuU89SvXkGDM6ANsknIN0cyMOcvljSy3dxnlfosLkJJkva1SlmuJZmbKs1wl1gW8i1kugMrVQsODKWcF6/CKabhmlK2OXeiF3Yf+qXX6yBTeGkj6zSJd/BxuHb7Oi3B9Yv/qy2Zm8L5JL2YogK04eaQeBeIUTdeskTREM9FQa0+ZWsk5CTejDLrDAeDw+A3VGrNRy0xLNKNrgYoZUou0omxFgRBlXermv2ZmiprR3qqQtTqNMya1cAvQHSmoNZPMwLUHtX25UZdmqqoaNXtoU0krvJlFtXDRLKpFfWrRi16fihWWwdA/S5JkPGstsizbBmOpWb2MnXgPmaQC31Gt0fFdEHL49YnmLZrGekj3NM7nrqWUBEPfELYTC+nS8bKJ8WnN73cD7+YgFApgU3EGaVpXfz2REOlXAEinJWDRO7ERBmw43Oa/AmjAhlg8HnfPfEmN43pytI4Jal0dwY3s0LuPT27/BQ2FAKlZsC2xAAAAAElFTkSuQmCC',
+  img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB50lEQVRYhd2YTU7bYBCGn7GyoF0Eu17EpyARS1hEogeI1IXbs/QAvUpJFogcAESkwhIBvQRUMna9ABaQr4tgk9j5lSd1zLNybI8y7ze/shx3z+j4bfq9gaGCdPy29HsDxBhDvzcwIoLtfCjbr5WIwkeMMXT8tshx98wAWJawbVdLyN/okeFwlEg1AOfTx/Sh69bL8WpFgiBODz68fxgJSUhEbNVrecsN4il+xnXrBEGc3rOyL226CJjuo4WU4Ik2Apa8AyUC1KDY+PD3TiZ+9y4+r9VuFoULouU56fXVbbh2u1kUFvL9aBeAH18uaXlOetKzTtjfO0GApudwfRvSLRiJBPUW1fIcru+iuc9TFMtTTch4ZJoNOxeZb/unDI2h5Tn8/hPx89eB1l8Dkp8jWkycPLDTsNN7yVqhh9FPrWzNfN0/xbxG4uYu4vBcMxJvFBayqLibDTu9Hpp8JBbZL4tK+53WPscjM68mZtmvikqNLGo+L+o1kUelRua5mURm3VhT0rZyGKOUWpaUv3iqrSjZJXAZRISuUjtWmyPZAbgMGt0qQX1FKYu1rSj/m5yQp/i5DD9WYpqPE6kVBDGuW6+EmPEvKPAqJLx/AEbft7IvbDKJ3zBKrfKHQHEkSS0BzLjCCiEA/wAmNq0sQ6WYFQAAAA5lWElmTU0AKgAAAAgAAAAAAAAA0lOTAAAAAElFTkSuQmCC',
 });
 
 const downloadShards = async () => {
   if (downloadShardsClicked.value) return;
+  shardsDisabled.value = true;
+  processingShards.value = true;
+  disableBackNav.value = true;
 
   downloadShardsClicked.value = true;
   downloadShardsLabel.value = 'Downloading';
@@ -147,6 +165,7 @@ const downloadShards = async () => {
 
         if (extracted === map.value.shards.length) {
           downloadShardsLabel.value = 'Complete!';
+          processingShards.value = false;
           downloadResourcePack(mapDir);
         }
       });
@@ -155,14 +174,22 @@ const downloadShards = async () => {
 };
 
 const fabricClick = async () => {
+  processingFabric.value = true;
+  disableBackNav.value = true;
+
+  fabricDisabled.value = true;
   fabricProgress.value.img =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAhCAYAAAB0v5O6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAMGSURBVFhH7Zm7b9NAGMC/i+2kcZzE2RmZoCL9E7pSiYoOTDB2ZWklxKOo4aFKiIFKCKkTLGVAlEZAWYlUxIIygBAPITZmVBLbSRo7Nvc5Dlyi+JU4TSPll1i+xHfxfeefv7MdUiyWZNIkRZ6PzQMhAJYFAHRN35NQtui6ZZiFEyelDXJ3fbM0e2puXpaTQGJYa7IwDBOUagM+lN+/Insv9i1JStiB5HJpp8rkcHCggGVaUKk0gOztvrPS6YQdSHyGA34m5lQbnnsbm6BpNTBaLbixtgIpKeVsiQa91oJG3YBqVYM/B3Xo6nmUgSDZbAZychbigtD2PGIEkXNKbaLtvRtHdCp2aSbKdAR7IDTDCTiyLjzdfg6fP30Bk2aVi5cuQH5u1tkC8PDBFtRqddDo0mw27e9QucLtqyCFVE7XdTtz9aL8PuyvWS8cx3kGgkiiaKuU9uhcSkzadXBJxL1/zw3sBw6sF57B+DVmwZpBqhMyuNl+/fHUjOd5iMW8d/5y9w18//aD5nsDFE2jkxn4KofKIDptE0Y53Idpms6nNoE1CwMGnsu2VfJTTqZZDpf4gMq5EVkwLMHljJbINGMxjBZVTg2lHCq07qPckWnGwvNcaOWECJQbSTDjYiSasQTNcrU6TqzeWW4smrGwWS7joZyYZLKcz0TtxlQzFj/NdN2AxaWzcCb/X607t+6DplL1KHgkcGavVBW4fnP1+GUzFgtfPdeHcib971otzCWTH1PNWPpphhPhuaUFyPdTix4JPDJB1WIZi2a2VW5qOefIKJhqxtLRDCe6xfMLNGuddrb0V6uqqHBtbSWwWixDadait7iBoSmr97a2n1r9bn2DgO382noGg4079+7jxu0ZAIunZsOy9egx1Ol1l6KqsHrlMqRSorMlOo500kRME0d0ML3C0BUMPiEcGSOI5VDt7i95vbNviaIAvMBBJoMZprNXPGGPf7lS0fBfAFDVJpDis1KBAFmXJ/xfAAvIMimXy8Kvn8oOnU8Whxig8ZUp9JRc/vj17ZO/pGkNRRTwc1YAAAAASUVORK5CYII=';
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAByklEQVRYhd2YTVLCQBCFX6dYqIsIztyHI7DjGpYuRV2ouNTyGGRFbgD3yRDMAlhQtIs4KfKHhEwS4rcKSaboN6+7pys0ncwwGPbhOnNGCxkM++Q6cxAzw3XmTETo9i6bjqsQS38NZsZg2CeaTmYMAJZFuO62S8j3co3dLkykDgD0bq6ih0LYzURVEKWCaOP9xSoUotEiLuxOeuUZsQm2EMKGUkF0z0q+dO4igOwYLVADkZiGAIv+gRIC0AHKHR+jh6fY7/H7a6Xr8ihdEFLK6NrzvMrX5UGuM+NuL2y/QtgnF/vnx1csqLwd1k5IKeF53slObIJt1LWW/qq8I0mklFBKHXxeBcYc0eQ58zh6BjNHQt/GL6X+J+7IOn2OmCK580KI6B6z6fmUzTui0c4opYw6oTFeI7p484pWCBFdZznx1/pjMdJ+s9rn3f0tgNCZQ07krS9KZTWyj/maSFP5hKidqRqrhs2qHGZDqUXU/OBZOrV06iSHwGMgImPt2FiNnDJ6mOhWGmNC6irqPGppv3WQErIJtk3EUYisGGOppVQAIexWiNn/ggL8CvEXKwDh963kC+eMjhsIU6v5Q6A8pFOLAPC+whZBAPAD4SrOvdEMgKQAAAAOZVhJZk1NACoAAAAIAAAAAAAAANJTkwAAAABJRU5ErkJggg==';
   installFabric(fabricProgress);
   return;
 };
 const modsClick = async () => {
+  processingMods.value = true;
+  disableBackNav.value = true;
+
+  modsDisabled.value = true;
   modsProgress.value.img =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAhCAYAAAB0v5O6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAMGSURBVFhH7Zm7b9NAGMC/i+2kcZzE2RmZoCL9E7pSiYoOTDB2ZWklxKOo4aFKiIFKCKkTLGVAlEZAWYlUxIIygBAPITZmVBLbSRo7Nvc5Dlyi+JU4TSPll1i+xHfxfeefv7MdUiyWZNIkRZ6PzQMhAJYFAHRN35NQtui6ZZiFEyelDXJ3fbM0e2puXpaTQGJYa7IwDBOUagM+lN+/Insv9i1JStiB5HJpp8rkcHCggGVaUKk0gOztvrPS6YQdSHyGA34m5lQbnnsbm6BpNTBaLbixtgIpKeVsiQa91oJG3YBqVYM/B3Xo6nmUgSDZbAZychbigtD2PGIEkXNKbaLtvRtHdCp2aSbKdAR7IDTDCTiyLjzdfg6fP30Bk2aVi5cuQH5u1tkC8PDBFtRqddDo0mw27e9QucLtqyCFVE7XdTtz9aL8PuyvWS8cx3kGgkiiaKuU9uhcSkzadXBJxL1/zw3sBw6sF57B+DVmwZpBqhMyuNl+/fHUjOd5iMW8d/5y9w18//aD5nsDFE2jkxn4KofKIDptE0Y53Idpms6nNoE1CwMGnsu2VfJTTqZZDpf4gMq5EVkwLMHljJbINGMxjBZVTg2lHCq07qPckWnGwvNcaOWECJQbSTDjYiSasQTNcrU6TqzeWW4smrGwWS7joZyYZLKcz0TtxlQzFj/NdN2AxaWzcCb/X607t+6DplL1KHgkcGavVBW4fnP1+GUzFgtfPdeHcib971otzCWTH1PNWPpphhPhuaUFyPdTix4JPDJB1WIZi2a2VW5qOefIKJhqxtLRDCe6xfMLNGuddrb0V6uqqHBtbSWwWixDadait7iBoSmr97a2n1r9bn2DgO382noGg4079+7jxu0ZAIunZsOy9egx1Ol1l6KqsHrlMqRSorMlOo500kRME0d0ML3C0BUMPiEcGSOI5VDt7i95vbNviaIAvMBBJoMZprNXPGGPf7lS0fBfAFDVJpDis1KBAFmXJ/xfAAvIMimXy8Kvn8oOnU8Whxig8ZUp9JRc/vj17ZO/pGkNRRTwc1YAAAAASUVORK5CYII=';
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAByklEQVRYhd2YTVLCQBCFX6dYqIsIztyHI7DjGpYuRV2ouNTyGGRFbgD3yRDMAlhQtIs4KfKHhEwS4rcKSaboN6+7pys0ncwwGPbhOnNGCxkM++Q6cxAzw3XmTETo9i6bjqsQS38NZsZg2CeaTmYMAJZFuO62S8j3co3dLkykDgD0bq6ih0LYzURVEKWCaOP9xSoUotEiLuxOeuUZsQm2EMKGUkF0z0q+dO4igOwYLVADkZiGAIv+gRIC0AHKHR+jh6fY7/H7a6Xr8ihdEFLK6NrzvMrX5UGuM+NuL2y/QtgnF/vnx1csqLwd1k5IKeF53slObIJt1LWW/qq8I0mklFBKHXxeBcYc0eQ58zh6BjNHQt/GL6X+J+7IOn2OmCK580KI6B6z6fmUzTui0c4opYw6oTFeI7p484pWCBFdZznx1/pjMdJ+s9rn3f0tgNCZQ07krS9KZTWyj/maSFP5hKidqRqrhs2qHGZDqUXU/OBZOrV06iSHwGMgImPt2FiNnDJ6mOhWGmNC6irqPGppv3WQErIJtk3EUYisGGOppVQAIexWiNn/ggL8CvEXKwDh963kC+eMjhsIU6v5Q6A8pFOLAPC+whZBAPAD4SrOvdEMgKQAAAAOZVhJZk1NACoAAAAIAAAAAAAAANJTkwAAAABJRU5ErkJggg==';
   downloadMods(modsProgress);
   return;
 };

diff --git a/src/components/NextButton.vue b/src/components/NextButton.vue
@@ -1,11 +1,45 @@
 <template>
-  <router-link :to="path">
-    <div class="nav-button"></div>
-  </router-link>
+  <div
+    class="nav-button"
+    :class="{
+      disabled:
+        processingShards ||
+        processingFabric ||
+        processingMods ||
+        disableNav ||
+        disableNextNav,
+    }"
+    @click="
+      if (
+        !(
+          processingShards ||
+          processingFabric ||
+          processingMods ||
+          disableNav ||
+          disableNextNav
+        )
+      )
+        nav(path);
+    "
+  ></div>
 </template>
 
 <script setup lang="ts">
+import { useStateStore } from 'src/stores/StateStore';
+import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
+const {
+  processingShards,
+  processingFabric,
+  processingMods,
+  disableNav,
+  disableNextNav,
+} = storeToRefs(useStateStore());
+
 defineProps(['path']);
+
+const router = useRouter();
+const nav = (path: string) => router.push(path);
 </script>
 
 <style scoped>
@@ -14,8 +48,16 @@ defineProps(['path']);
   width: 68px;
   background: url('src/assets/images/next-button-purple.png') no-repeat;
   display: inline-block;
+  cursor: pointer;
 }
 .nav-button:hover {
   background: url('src/assets/images/next-button-yellow.png') no-repeat;
 }
+.disabled:hover {
+  background: url('src/assets/images/next-button-grey.png') no-repeat;
+}
+.nav-button .disabled {
+  background: url('src/assets/images/next-button-grey.png') no-repeat;
+  cursor: default;
+}
 </style>
diff --git a/src/components/ProgressBox.vue b/src/components/ProgressBox.vue
@@ -16,19 +16,20 @@
         label="Download Shards"
         class="this-btn"
       /> -->
-      <span class="this-btn"
-        ><div
+      <span class="this-btn">
+        <!-- <div
           class="nav-button"
           :style="{ 'background-image': 'url(' + img + ')' }"
-          @click="
-            {
-              if (!clicked) {
-                click();
-              }
-            }
-          "
-        ></div
-      ></span>
+          @click="if (!clicked) click();"
+        /> -->
+        <img
+          :src="hover && !isClicked ? hoverImg : img"
+          :class="{ clickable: !isClicked, disabled: buttonDisabled }"
+          @mouseenter="if (!isClicked) hover = true;"
+          @mouseleave="if (!isClicked) hover = false;"
+          @click="if (!isClicked) click();"
+        />
+      </span>
     </div>
   </div>
 </template>
@@ -42,10 +43,24 @@ const props = defineProps([
   'percent',
   'buttonClick',
   'img',
+  'buttonDisabled',
 ]);
-let clicked = ref(false);
+
+let isClicked = ref(false);
+let hover = ref(false);
+const defaultImg =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB50lEQVRYhd2YTU7bYBCGn7GyoF0Eu17EpyARS1hEogeI1IXbs/QAvUpJFogcAESkwhIBvQRUMna9ABaQr4tgk9j5lSd1zLNybI8y7ze/shx3z+j4bfq9gaGCdPy29HsDxBhDvzcwIoLtfCjbr5WIwkeMMXT8tshx98wAWJawbVdLyN/okeFwlEg1AOfTx/Sh69bL8WpFgiBODz68fxgJSUhEbNVrecsN4il+xnXrBEGc3rOyL226CJjuo4WU4Ik2Apa8AyUC1KDY+PD3TiZ+9y4+r9VuFoULouU56fXVbbh2u1kUFvL9aBeAH18uaXlOetKzTtjfO0GApudwfRvSLRiJBPUW1fIcru+iuc9TFMtTTch4ZJoNOxeZb/unDI2h5Tn8/hPx89eB1l8Dkp8jWkycPLDTsNN7yVqhh9FPrWzNfN0/xbxG4uYu4vBcMxJvFBayqLibDTu9Hpp8JBbZL4tK+53WPscjM68mZtmvikqNLGo+L+o1kUelRua5mURm3VhT0rZyGKOUWpaUv3iqrSjZJXAZRISuUjtWmyPZAbgMGt0qQX1FKYu1rSj/m5yQp/i5DD9WYpqPE6kVBDGuW6+EmPEvKPAqJLx/AEbft7IvbDKJ3zBKrfKHQHEkSS0BzLjCCiEA/wAmNq0sQ6WYFQAAAA5lWElmTU0AKgAAAAgAAAAAAAAA0lOTAAAAAElFTkSuQmCC';
+// TODO: replace with yellow hover button
+const hoverImg =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACCUlEQVRYhd2YPXPaQBCGnxUUQQWxowq3TpMZjDWeJC0/gY5k/AM9gcr8A9OSxOMQu5NqKhlHhfBMbF2KizR8Bmt0jFCeSl/L7Xu7e7ecXPau6HTbDPpDRQnpdNsy6A8RpRSD/lCJCAeHtaL9ysTDdIZSik63LXLZu1IAliW8PiiXkF8PM+JYJ1IV4PCNnb50nHoxXmUkCMJ04qf3kRaSkIh4Va+uWu4Rj+ETjlMnCML0mbX80b6LgPU+WkgBnphGwJL/QIkAVci3fTTG5wv3k9bFTu02kbsgbHeUXkc3H7PZxRaIIvrxIa8b+YX4sQfAsfUW2x3RuNEzvWmGG+NzpPIMJxDdnjFpfoFWXi/WrFp5mY/Qpve15rW+ic0Nb2yt3RaZo7suKq7AKUQ/z5g0e0YioRHzEUlYjkzt5Br79Gs6sFmUuYgkrERm/FmnkAvR+L2uiabpUQ2kVrKMbipuu/Utl/1LyZ1atjsCWd2L/NhLozO7c/FjT0djnb0BzNSI2pLzzxUjw/wLMzWyJiIJfuztpCaWsVQp/+AuopSh1JLqbxM/kwszLco7OLr9pDe8lyIKlOC3PCMbo7F9pNb6ntkmS5O5DeMtSiaMtSg7aBqLYkXIY/hUhB+ZWOfjQmoFQYjj1EshZv4EBf4Kmd5HgD7fWv5gn0n8Bp1a5T99AElSSwA1r7BECMAf+ce1GhZxP3cAAAAOZVhJZk1NACoAAAAIAAAAAAAAANJTkwAAAABJRU5ErkJggg==';
+const clickedImg =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAAByklEQVRYhd2YTVLCQBCFX6dYqIsIztyHI7DjGpYuRV2ouNTyGGRFbgD3yRDMAlhQtIs4KfKHhEwS4rcKSaboN6+7pys0ncwwGPbhOnNGCxkM++Q6cxAzw3XmTETo9i6bjqsQS38NZsZg2CeaTmYMAJZFuO62S8j3co3dLkykDgD0bq6ih0LYzURVEKWCaOP9xSoUotEiLuxOeuUZsQm2EMKGUkF0z0q+dO4igOwYLVADkZiGAIv+gRIC0AHKHR+jh6fY7/H7a6Xr8ihdEFLK6NrzvMrX5UGuM+NuL2y/QtgnF/vnx1csqLwd1k5IKeF53slObIJt1LWW/qq8I0mklFBKHXxeBcYc0eQ58zh6BjNHQt/GL6X+J+7IOn2OmCK580KI6B6z6fmUzTui0c4opYw6oTFeI7p484pWCBFdZznx1/pjMdJ+s9rn3f0tgNCZQ07krS9KZTWyj/maSFP5hKidqRqrhs2qHGZDqUXU/OBZOrV06iSHwGMgImPt2FiNnDJ6mOhWGmNC6irqPGppv3WQErIJtk3EUYisGGOppVQAIexWiNn/ggL8CvEXKwDh963kC+eMjhsIU6v5Q6A8pFOLAPC+whZBAPAD4SrOvdEMgKQAAAAOZVhJZk1NACoAAAAIAAAAAAAAANJTkwAAAABJRU5ErkJggg==';
+const finishedImg =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAACXBIWXMAAAsTAAALEwEAmpwYAAACqElEQVRYhdVYzY7SUBT+Tu1CTWRaG4UncKMOxOWMhhg37khYwBgT43P4ADyIiSawMLBzA0LUWRLGv4VPwMwECjVhiJYeF6W1pTBD7+2Mw7e67b0993733HvOd0r1ahuFUh6NWoexgSiU8tSodUDMjEatw0QETb/2v9cVCyPzBMyMQilPVK+2GQAUhbClbRaR8egEjuMeJBUA9JvX/U7DSElP8OJp59T+1+/z0nMMBpa/8eZw4hLx4JG4mlKjX8ZALqOv7Ov1TWn7U8uGYaQwGFj+u4hFkUnKO02/zQBq+09OHb+324LDDFpz/LI1Ti079E4FxbKxFPfSGq6Qa+jn8NeZ47fTmt/u9U35BRCgkgST8m4TzPF39NW7B6HnZw9bmDkc244HAqC4zhVDNq1DIXmX3r+tQVXk7Ciyi0jgZCYCKSIOMxTJnfRAkp4VioOVYhffjsZ4++mx0KSlQJQjANX53agUu+j1TaG7IhzQbccR/TSUZw4OE4haIHEiIijvtsDMyGV0KY9GwRdLJBvIHw4nK7YTIbI332lvaYtnPOiJ78djvPmYlCf+IREiwUz95XAU6c+mNZ/kzDmfsicRIl6mrhS72E5roagEuES/Ho1Q/SyWudeBMBFVWZ2CglGJ4YZYGSm0DqhebbNXjxhGKpb6fZnvYPLHjtyJSrHrtw/6pp8nVqG00wQRYnlsatm+jDeHE7nMfse4kYjWymV0Xz2L4lzC76K6vQjIi8ZLohqlPOLtvFeXeDhLKy1GNdE6JIhEjlY2HdBOa1R8yWutJUSmlh27bl+8E88ffcDM4YgMUYjgsHglGFzjIkIrHgwsGEZq6cA4uHtra+n737MZfhxb0vYBhP6gAPM84j0E/29tAszhxG8ruDzVqgzIO1oEgIMMNwgEAH8Bhif2yStQayoAAAAOZVhJZk1NACoAAAAIAAAAAAAAANJTkwAAAABJRU5ErkJggg==';
+// let img = ref(defaultImg);
+
 const click = async () => {
-  clicked.value = true;
+  isClicked.value = true;
   props.buttonClick();
 };
 </script>
@@ -72,17 +87,6 @@ const click = async () => {
   margin: auto;
   width: 90%;
 }
-.nav-button {
-  height: 33px;
-  width: 51px;
-  background: url('src/assets/images/small-next-button-purple.png') no-repeat;
-  display: inline-block;
-  border: 1px solid #511f95;
-  border-radius: 3px;
-}
-.nav-button:hover {
-  background: url('src/assets/images/small-next-button-yellow.png') no-repeat;
-}
 .label {
   text-align: left;
   padding-left: 5%;