Use locked HTML input field for showing gamepath

instead of its own custom HTML element

3 files changed, 13 insertions, 5 deletions

diff --git a/dist/css/main.css b/dist/css/main.css
index 5dd9c4c7..97ac9a43 100644
--- a/dist/css/main.css
+++ b/dist/css/main.css
@@ -99,3 +99,11 @@ button {
 .locked {
   cursor: not-allowed;
 }
+
+/**
+ * Stupid way to make text input field containing game_path big enough to show whole path.
+ * Optimally, this should be done dynamically
+ */
+input {
+  width: 400px;
+}
diff --git a/dist/index.html b/dist/index.html
index bdc7fd5c..533387fc 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -15,7 +15,7 @@
       The functionality it serves and what it displays is based on the current state of the application
     -->
     <button id="omni-button", class="locked">Loading...</button>
-    <install-location-holder>Couldn't find Titanfall2 install</install-location-holder>
+    <input value="Couldn't find Titanfall2 install" id="install-location-holder" disabled></input>
     <!-- <div class="hello">Click for Hello</div> -->
     <!-- <counter-button>ADD</counter-button> -->
     <!-- <counter-result>.</counter-result> -->
diff --git a/src-ui/src/main.ts b/src-ui/src/main.ts
index 0bd22c58..39ddf2dd 100644
--- a/src-ui/src/main.ts
+++ b/src-ui/src/main.ts
@@ -48,8 +48,8 @@ async function manually_find_titanfall2_install(omniButtonEl: HTMLElement) {
         if (is_valid_titanfall2_install) {
             globalState.gamepath = selected;
 
-            let installLocationHolderEl = $("install-location-holder") as HTMLElement;
-            installLocationHolderEl.textContent = globalState.gamepath;
+            let installLocationHolderEl = document.getElementById("install-location-holder") as HTMLInputElement;
+            installLocationHolderEl.value = globalState.gamepath;
 
             // Update omni-button
             omniButtonEl.textContent = button_install_string;
@@ -71,7 +71,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     // let counterResultEl = $("counter-result") as HTMLElement;
     let pingEl = $("backend-ping")! as HTMLElement;
     let panicButtonEl = $("panic-button") as HTMLElement;
-    let installLocationHolderEl = $("install-location-holder") as HTMLElement;
+    let installLocationHolderEl = document.getElementById("install-location-holder") as HTMLInputElement;
     let versionNumberHolderEl = $("version-number-holder") as HTMLElement;
     let omniButtonEl = document.getElementById("omni-button") as HTMLElement;
     let hostOsHolderEl = $("host-os-holder") as HTMLElement;
@@ -139,7 +139,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     // Change omni-button content based on whether game install was found
     if (install_location && install_location.length > 0) {
         omniButtonEl.textContent = button_install_string;
-        installLocationHolderEl.textContent = install_location;
+        installLocationHolderEl.value = install_location;
         globalState.gamepath = install_location;
 
         // Check installed Northstar version if found