Merge pull request #1 from Ajordat/dev

Finalize basic functionality
Ajordat · Nov 29, 2024 · 60405cb · 60405cb
2 parents f7526ca + 56c3cd1
commit 60405cb
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "alteredbuilder-extension",
     "version": "1.0.0",
-    "description": "",
+    "description": "Import decks from the Altered TCG Builder to the official website",
     "main": "index.js",
     "scripts": {
         "build": "webpack --mode production",

diff --git a/src/assets/icon.png b/src/assets/icon.png
diff --git a/src/background.js b/src/background.js
@@ -10,9 +10,12 @@ browser.runtime.onInstalled.addListener(() => {
 async function getNextAuthToken() {
     const response = await fetch("https://www.altered.gg/api/auth/session", { credentials: "include" });
     if (!response.ok) {
-        throw new Error("Failed to retrieve token");
+        throw new Error("Failed to authenticate.");
     }
     const data = await response.json();
+    if (data.accessToken == undefined) {
+        throw new Error("Failed to authenticate. Are you logged in?");
+    }
     return data.accessToken;
 }
 
@@ -30,15 +33,14 @@ async function createBaseDeck(deck, accessToken) {
     if (!response.ok) {
         throw new Error("Failed to import deck");
     }
-    console.log(response);
+
     const responseObject = await response.json()
-    console.log(responseObject)
     return responseObject.id;
 }
 
 async function addCards(deck, accessToken) {
 
-    const apiResponse = await fetch(`https://api.altered.gg/deck_user_lists/${deck.id}/add_cards`, {
+    const response = await fetch(`https://api.altered.gg/deck_user_lists/${deck.id}/add_cards`, {
         method: "PUT",
         headers: {
             "Content-Type": "application/json",
@@ -47,44 +49,55 @@ async function addCards(deck, accessToken) {
         body: JSON.stringify({ putOption: "update", cards: deck.cards }),
     });
 
-    if (!apiResponse.ok) {
-        throw new Error("Failed to import deck");
+    if (!response.ok) {
+        throw new Error("Failed to add cards. Is the format of each line correct?\n(e.g. \"3 ALT_CORE_B_LY_13_R1\")");
     }
-    console.log(apiResponse);
 }
 
-function parseDecklist(decklist, name, message) {
-    console.log(decklist);
+function parseDecklist(decklist, name, actions) {
+
+    // Convert the hero to the CORE set
+    let [faction, id, rarity] = decklist.split("\n", 1)[0].split("_").slice(3);
+
+    if (!["01", "02", "03"].includes(id) || rarity !== "C") {
+        console.error(`Invalid hero code ${decklist.split("\n", 1)[0].split(" ")[1]}`);
+        throw new Error("The first line must be a valid hero reference\n(e.g. \"1 ALT_CORE_B_MU_01_C\")");
+    }
+
+    let cardEntries = decklist.split("\n").slice(1);
+    if (actions.removeUniques) {
+        cardEntries = cardEntries.filter(entry => !entry.includes("_U_"));
+    }
 
     return {
-        hero: decklist.split("\n", 1)[0].split(" ")[1].replace("COREKS", "CORE"),
-        cards: decklist.split("\n").slice(1).map((x) => ({ quantity: parseInt(x.split(" ")[0]), card: `/cards/${x.split(" ")[1]}` })),
+        hero: `ALT_CORE_B_${faction}_${id}_${rarity}`,
+        cards: cardEntries.map((x) => ({ quantity: parseInt(x.split(" ")[0]), card: `/cards/${x.split(" ")[1]}` })),
         name: name,
         public: false
     }
 }
 
-browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
-    console.log("Received message");
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.action === "importDeck") {
-        console.log("Received importDeck action")
-
-        let deck = parseDecklist(message.decklist, message.deckName, message);
-        console.log(deck)
 
-        try {
-            const token = await getNextAuthToken();
+        (async () => {
+            try {
+                let deck = parseDecklist(message.decklist, message.deckName, message.actions);
+
+                const token = await getNextAuthToken();
+                deck.id = await createBaseDeck(deck, token);
+                await addCards(deck, token);
 
-            deck.id = await createBaseDeck(deck, token);
+                sendResponse({ success: true, url: `http://altered.gg/decks/${deck.id}` });
+                return;
 
-            await addCards(deck, token);
+            } catch (error) {
+                console.error("Error importing deck:", error);
+                sendResponse({ success: false, msg: error.message });
+            }
+        })();
 
-            console.log("Deck imported successfully");
-            sendResponse({ success: true });
-        } catch (error) {
-            console.error("Error importing deck:", error);
-            sendResponse({ success: false, error: error.message });
-        }
+        return true;
     }
     return false;
 });
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,8 +1,8 @@
 {
     "manifest_version": 3,
     "name": "Altered TCG Builder",
-    "version": "1.0",
-    "description": "Import decks from the Altered TCG Builder to the official website.",
+    "version": "1.0.0",
+    "description": "Import decks from the Altered TCG Builder to the official website",
     "permissions": [
         "scripting",
         "activeTab"

diff --git a/src/popup.html b/src/popup.html
@@ -11,30 +11,38 @@
         <div class="container p-3">
 
             <h1>Altered TCG Deck Importer</h1>
-            <div id="error-container">
+            <div id="invalid-location-container" class="d-none">
                 <div class="mt-3">
                     Go to the official deckbuilding site to import a deck.
                 </div>
                 <a class="btn mt-3" href="https://www.altered.gg/en-us/decks" target="_blank">Official site</a>
             </div>
             <div id="main-container">
                 <div class="mt-3">
-                    <input id="deck-name" type="text" class="form-control mb-2" aria-describedby="deck-name-validation"
-                        aria-label="Name of the deck" placeholder="Deck Name" required>
+                    <label class="form-label" for="deck-name">Deck Name</label>
+                    <input id="deck-name" type="text" class="form-control mb-2" aria-describedby="deck-name-validation" aria-label="Name of the deck" placeholder="Deck Name" required>
                     <div id="deck-name-validation" class="invalid-feedback ms-5">
                         Please write a name.
                     </div>
                 </div>
                 <div class="mt-3">
-                    <label class="form-label" for="decklist-text">Paste your decklist:</label>
-                    <textarea id="decklist-text" class="form-control" rows="7" aria-describedby="decklist-text-validation"
-                        placeholder="1 ALT_CORE_B_LY_01_C&#10;2 ALT_CORE_B_LY_06_C&#10;1 ALT_CORE_B_LY_06_R1&#10;3 ALT_CORE_B_LY_09_R1&#10;...">1 ALT_COREKS_B_MU_01_C&#10;1 ALT_CORE_B_LY_05_R2&#10;1 ALT_CORE_B_LY_24_R2</textarea>
+                    <label class="form-label" for="decklist-text">Decklist</label>
+                    <textarea id="decklist-text" class="form-control" rows="7" aria-describedby="decklist-text-validation" placeholder="1 ALT_CORE_B_LY_01_C&#10;2 ALT_CORE_B_LY_06_C&#10;1 ALT_CORE_B_LY_06_R1&#10;3 ALT_CORE_B_LY_09_R1&#10;..."></textarea>
                     <div id="decklist-text-validation" class="invalid-feedback ms-5">
                         Please paste a decklist.
                     </div>
                 </div>
+                <div class="mt-1">
+                    <input class="form-check-input me-1" type="checkbox" id="remove-uniques">
+                    <label class="form-check-label user-select-none" for="remove-uniques">Remove uniques</label>
+                </div>
                 <a id="import-button" class="btn mt-3">Import Deck</a>
             </div>
+            <div id="error-container" class="d-none">
+                <div class="mt-3">
+                    <span id="error-msg"></span>
+                </div>
+            </div>
 
         </div>
     </body>

diff --git a/src/popup.js b/src/popup.js
@@ -17,24 +17,30 @@ document.addEventListener("DOMContentLoaded", async () => {
         const currentTab = tabs[0];
         const currentUrl = new URL(currentTab.url);
 
-        let errorContainer = document.getElementById("error-container");
+        let invalidLocationContainer = document.getElementById("invalid-location-container");
         let mainContainer = document.getElementById("main-container");
+        let errorContainer = document.getElementById("error-container");
 
         if (currentUrl.hostname.includes(ALLOWED_DOMAINS)) {
-            errorContainer.classList.add("d-none");
+            invalidLocationContainer.classList.add("d-none");
             mainContainer.classList.remove("d-none");
         } else {
-            errorContainer.classList.remove("d-none");
+            invalidLocationContainer.classList.remove("d-none");
             mainContainer.classList.add("d-none");
         }
+        errorContainer.classList.add("d-none");
     });
 
     importButton.addEventListener("click", async () => {
         const deckNameEl = document.getElementById("deck-name");
         const decklistEl = document.getElementById("decklist-text");
+        const removeUniquesEl = document.getElementById("remove-uniques");
         let isInvalid = false;
 
-        if (deckNameEl.value.trim() === "") {
+        let decklist = decklistEl.value.trim();
+        let deckName = deckNameEl.value.trim();
+
+        if (deckName === "") {
             deckNameEl.classList.add("is-invalid");
             deckNameEl.classList.remove("is-valid");
             isInvalid = true;
@@ -43,7 +49,7 @@ document.addEventListener("DOMContentLoaded", async () => {
             deckNameEl.classList.remove("is-invalid");
         }
 
-        if (decklistEl.value.trim() === "") {
+        if (decklist === "") {
             decklistEl.classList.add("is-invalid");
             decklistEl.classList.remove("is-valid");
             isInvalid = true;
@@ -56,39 +62,20 @@ document.addEventListener("DOMContentLoaded", async () => {
             return;
         }
 
-        browser.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-            console.log(tabs);
-            console.log("decklist: " + decklistEl.value)
-            const currentTab = tabs[0];
-
-            browser.scripting.executeScript({
-                target: { tabId: currentTab.id },
-                func: importDeck,
-                args: [decklistEl.value, deckNameEl.value]
-            }).then(() => {
-                console.log("Script executed successfully")
-            }).catch((error) => {
-                console.error("Error executing script: ", error);
-            });
+        browser.runtime.sendMessage({
+            action: 'importDeck', decklist: decklist, deckName: deckName, actions: {removeUniques: removeUniquesEl.checked }
+        }).then(response => {
+            if (response.success === true) {
+                chrome.tabs.create({ url: response.url });
+            } else {
+                let errorContainer = document.getElementById("error-container");
+                let errorMsg = document.getElementById("error-msg");
+
+                errorMsg.innerText = response.msg;
+                errorContainer.classList.remove("d-none");
+            }
+        }).catch(error => {
+            console.error("Error sending message:", error);
         });
     });
 });
-
-async function importDeck(decklistText, deckName) {
-
-    console.log("inside:" + decklistText);
-    console.log("deck name: " + deckName);
-
-    if (typeof browser === "undefined") {
-        var browser = chrome;
-    }
-
-    browser.runtime.sendMessage({
-        action: 'importDeck', decklist: decklistText, deckName: deckName
-    }).then(response => {
-        console.log("Response from background script:", response);
-    }).catch(error => {
-        console.error("Error sending message:", error);
-    });
-    console.log("message sent");
-}
diff --git a/src/styles.css b/src/styles.css
@@ -21,6 +21,15 @@ body {
 textarea.form-control {
     border-bottom-right-radius: 0;
 }
+input.form-check-input {
+    border: var(--bs-border-width) solid var(--cta-border-color);
+    color: var(--bg-color);
+}
+input.form-check-input:checked {
+    background-color: var(--cta-border-color);
+    border-color: var(--cta-border-color);
+}
+
 
 a.btn {
     border-radius: var(--cta-border-radius);