Unhide button instead of creating a new one

Signed-off-by: Victor Löfgren <[email protected]>
StuffOnTheInternet · Jan 17, 2025 · 63e32a1 · 63e32a1
1 parent 2abc363
commit 63e32a1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 20 deletions.
diff --git a/wikiweaver-ext/content/join-lobby.js b/wikiweaver-ext/content/join-lobby.js
@@ -1,22 +1,6 @@
-const fragment = document.createDocumentFragment();
-
-const div = document.createElement("div");
-div.classList.add("flex-horizontal-container")
-
-// TODO: There is probably a better way to do all this
-const btn = document.createElement("btn");
-btn.id = "join-lobby";
-btn.classList.add("button", "box", "text");
+const btn = document.getElementById("join-button");
 btn.onclick = HandleJoinLobbyClicked;
-btn.style = "margin-top: 0.5rem; background: var(--green);";
-btn.textContent = "join";
-
-const reference = document.getElementById("leaderboard-wrapper");
-const parent = document.getElementById("sidepane");
-
-fragment.appendChild(div);
-div.appendChild(btn);
-parent.insertBefore(fragment, reference);
+btn.hidden = false;
 
 async function HandleJoinLobbyClicked() {
   const { username } = await chrome.storage.local.get();

diff --git a/wikiweaver-web/index.html b/wikiweaver-web/index.html
@@ -55,6 +55,9 @@
                 <button id="redraw-button" class="button box text" onclick="HandleRedrawClicked()">redraw</button>
                 <button id="export-button" class="button box text" onclick="HandleExportClicked()">export</button>
             </div>
+            <div class="flex-horizontal-container">
+                <button id="join-button" class="button box text" hidden>join</button>
+            </div>
             <div id="leaderboard-wrapper">
                 <table id="leaderboard" class="text">
                     <tr>
@@ -87,4 +90,4 @@
     </div>
 </body>
 
-</html>
+</html>
diff --git a/wikiweaver-web/style.css b/wikiweaver-web/style.css
@@ -158,6 +158,11 @@ img {
   background: var(--blue);
 }
 
+#join-button {
+  background: var(--green);
+  margin-top: 0.5rem;
+}
+
 #leaderboard-wrapper {
   overflow-x: auto;
   flex-shrink: 0;
@@ -230,4 +235,4 @@ img {
 
 .button:hover {
   filter: brightness(85%);
-}
+}