Add SWGoH Asset downloads to portrait maker

Author: Lego-Fan9

site/src/portraitMaker.js

@@ -10,6 +10,8 @@ const urlInput = document.getElementById('urlInput');
 const loadUrlBtn = document.getElementById('loadUrlBtn');
 const discordIdInput = document.getElementById('discordIdInput');
 const loadDiscordBtn = document.getElementById('loadDiscordBtn');
+const loadSwgohAsset = document.getElementById("loadSwgohAsset");
+const loadSwgohAssetBtn = document.getElementById("loadSwgohAssetBtn");
 
 function isTrueWebKit() {
     const ua = navigator.userAgent;
@@ -45,6 +47,92 @@ Object.entries(unwantedEntries).forEach(([key, valuesToRemove]) => {
     }
 });
 
+let assetVersionPromise;
+
+async function GetAssetVersionGithub() {
+    // this function is slightly stolen from swgoh-ae2
+
+    if (!assetVersionPromise) {
+        assetVersionPromise = (async () => {
+            const versionGetterUrl = "https://raw.githubusercontent.com/swgoh-utils/gamedata/refs/heads/main/meta.json";
+
+            const versionResponse = await fetch(versionGetterUrl);
+
+            if (versionResponse.status === 200) {
+                const metaDataShort = await versionResponse.json();
+                const versionResult = metaDataShort.data.assetVersion;
+
+                console.log("Found AssetVersion:", versionResult);
+
+                return versionResult;
+            }
+
+            console.error("Failed to get github version");
+            throw new Error("Failed to fetch asset version");
+        })();
+    }
+
+    return assetVersionPromise;
+}
+
+const __assetVersion = await GetAssetVersionGithub();
+
+const swgohAssetExtractor = "https://legofan-swgoh-ae2.onrender.com";
+
+async function wakeAE() {
+    const assetVersion = await GetAssetVersionGithub();
+    fetch(`${swgohAssetExtractor}/Asset/list?version=${assetVersion}`);
+}
+
+wakeAE();
+setTimeout(wakeAE, 300000);
+
+let loadSwgohAssetLoaded = false;
+loadSwgohAsset.addEventListener("focus", async () => {
+    if (loadSwgohAssetLoaded) {
+        return;
+    }
+
+    loadSwgohAsset.innerHTML = "";
+
+    const loadOption = document.createElement("option");
+    loadOption.value = "loading...";
+    loadOption.textContent = "loading...";
+    loadSwgohAsset.appendChild(loadOption);
+
+    const assetVersion = await GetAssetVersionGithub();
+
+    const response = await fetch(`${swgohAssetExtractor}/Asset/list?version=${assetVersion}`);
+    const data = await response.json()
+
+    loadSwgohAsset.innerHTML = "";
+
+    data.forEach(item => {
+        const option = document.createElement("option");
+        option.value = item;
+        option.textContent = item;
+        loadSwgohAsset.appendChild(option);
+    });
+});
+
+loadSwgohAssetBtn.addEventListener('click', async () => {
+    const selectedAsset = loadSwgohAsset.options[loadSwgohAsset.selectedIndex].text;
+
+    const assetVersion = await GetAssetVersionGithub();
+
+    const response = await fetch(`${swgohAssetExtractor}/Asset/single?version=${assetVersion}&assetName=${selectedAsset}`);
+    if (!response.ok) {
+        console.error("Failed to fetch asset")
+    }
+
+    const blob = await response.blob()
+    const reader = new FileReader();
+    reader.onload = function (event) {
+        userImageDataURL = event.target.result;
+    };
+    reader.readAsDataURL(blob);
+});
+
 uploadInput.addEventListener('change', (e) => {
     const file = e.target.files[0];
     if (!file) return;
@@ -580,6 +668,7 @@ function setupHelpTooltip(btnId, tooltipId) {
 }
 setupHelpTooltip('discordHelpBtn', 'discordHelpTooltip');
 setupHelpTooltip('urlHelpBtn', 'urlHelpTooltip');
+setupHelpTooltip('swgohAssethelpBtn', 'swgohAssetHelpTooltip');
 
 function showErrorPopup(message) {
     document.getElementById('popupMessage').textContent = message;

site/swgoh-portrait-maker/index.html

@@ -32,6 +32,19 @@ <h1 class="uploadText">Upload Your Image Here:</h1>
                 <input type="file" id="upload" accept="image/*">
             </div>
             <div style="height: 10px;"></div>
+            <div>
+                <label for="loadSwgohAsset" class="input-labels" style="margin-right: 7px;">SWGoH Asset:</label>
+                <span class="input-image">
+                    <select id="loadSwgohAsset">
+                        <option>Click to load options...</option>
+                    </select>
+                    <button id="swgohAssethelpBtn" class="help-btn" type="button" tabindex="0">?</button>
+                    <span class="help-tooltip" id="swgohAssetHelpTooltip" style="display:none;">
+                        Download a SWGoH Asset. Limited, may be slow.
+                    </span>
+                </span>
+                <button id="loadSwgohAssetBtn">Load SWGoH Asset</button>
+            </div>
             <div>
                 <label for="urlInput" class="input-labels">Image URL:</label>
                 <span class="input-image">

site/swgoh-portrait-maker/style.css

@@ -56,6 +56,7 @@ canvas.loaded {
 #downloadLinkM,
 #generateButton,
 #resetPos,
+#loadSwgohAssetBtn,
 .file-upload,
 .termsButton {
     display: inline-block;
@@ -79,6 +80,7 @@ canvas.loaded {
 #resetPos:hover,
 .file-upload:hover,
 .gl-checkbox-label:hover,
+#loadSwgohAssetBtn:hover,
 .termsButton:hover {
     box-shadow: 0 0 0 2px black;
     background-color: #0056b3
@@ -633,14 +635,16 @@ canvas.loaded {
     }
 
     .input-image input[type="text"],
-    .input-image input[type="number"] {
+    .input-image input[type="number"],
+    .input-image select {
         width: 100%;
         box-sizing: border-box;
     }
 }
 
 .input-image input[type="text"],
-.input-image input[type="number"] {
+.input-image input[type="number"],
+.input-image select {
     padding: 10px 14px;
     border: 2px solid #007BFF;
     border-radius: 6px;
@@ -653,6 +657,11 @@ canvas.loaded {
     margin: 6px 0;
 }
 
+.input-image select {
+    width: 225.6px;
+    height: 41.6px;
+}
+
 input[type="text"]:focus,
 input[type="number"]:focus {
     border-color: #0056b3;