Merge pull request #8 from Lego-Fan9/Prepare-v1.1.1

Prepare v1.1.1

Author: Lego-Fan9

.github/workflows/docker-publish.yml

@@ -26,11 +26,9 @@
         <div id="announcement-bar" style="display: none;">
             <div id="announcement-content">
                 <div class="announcement-text-wrapper">
-                    <span>Version 1.1.0 is now out!</span><br>
-                    <span>This version brings 2 new upload options!</span><br>
-                    <span>Because of those new upload options we have updates or Terms of Service</span><br>
-                    <span>Another change is that Relic 0 will no longer display a relic badge at all</span><br>
-                    <span>Credit to Hyredrum for thinking of that change</span>
+                    <span>Version 1.1.1 is now out!</span><br>
+                    <span>This version fixes a couple UI elements</span><br>
+                    <span>It also now outputs images as webp instead of png</span>
                 </div>
                 <button id="close-banner" onclick="closeAnnouncementBar()"
                     aria-label="Close announcement">&times;</button>
@@ -40,12 +38,13 @@
         <h1>SWGOH Portrait Maker</h1>
     </header>
     <main>
-        <h1 id="uploadText">Upload Your Image Here:</h1>
+        <h1 class="uploadText">Upload Your Image Here:</h1>
         <div>
             <div>
                 <label for="upload" class="file-upload">Choose Image</label>
                 <input type="file" id="upload" accept="image/*">
             </div>
+            <div style="height: 10px;"></div>
             <div>
                 <label for="urlInput" class="input-labels">Image URL:</label>
                 <span class="input-image">
@@ -74,6 +73,7 @@ <h1 id="uploadText">Upload Your Image Here:</h1>
                 <button id="loadDiscordBtn">Load Discord Avatar</button>
             </div>
         </div>
+        <h1 class="uploadText">Now select the options you want on the image</h1>
         <div class="input-container">
             <div class="input-group">
                 <label for="zetaCount">Zetas:</label>
@@ -109,6 +109,7 @@ <h1 id="uploadText">Upload Your Image Here:</h1>
         <br>
         <button onclick="stackImages()" id="generateButton">Generate!</button>
         <br><br>
+        <h1 class="uploadText">Move it around until you are happy</h1>
         <canvas id="canvas"></canvas>
         <div style="height: 30px;"></div>
         <div class="imgControlers">
@@ -126,6 +127,8 @@ <h1 id="uploadText">Upload Your Image Here:</h1>
         </div>
         <button id="resetAll" style="display: none;" onclick="fakeRefresh()">Reset Page</button>
         <div style="height: 30px;"></div>
+        <h1 class="uploadText" id="imageDownloadText" style="display: none;">Now download your image!</h1>
+        <div style="height: 40px;"></div>
         <a id="downloadLink" style="display: none; text-decoration: none;">Download Result(PC)</a>
         <div style="height: 50px;"></div>
         <a id="downloadLinkM" onclick="mobileDownload()" style="display: none;">Download Result(Mobile)</a>

.github/workflows/docker-push.yml

@@ -4,6 +4,7 @@ const uploadInput = document.getElementById('upload');
 const downloadLink = document.getElementById('downloadLink');
 const downloadLinkM = document.getElementById('downloadLinkM');
 const downloadLinkMDesc = document.getElementById('downloadLinkMDesc');
+const downloadLinkText = document.getElementById('imageDownloadText');
 const resetAll = document.getElementById('resetAll');
 const urlInput = document.getElementById('urlInput');
 const loadUrlBtn = document.getElementById('loadUrlBtn');
@@ -29,11 +30,11 @@ const discordServerStartUrl = "https://legofan9-discord-hash-getter.onrender.com
 fetch(discordServerStartUrl)
 
 const unwantedEntries = {
-    'dismissedAnnouncementVersion': ['1.0.0'],
+    'dismissedAnnouncementVersion': ['1.0.0', '1.1.0'],
     "agreedToTerms": ['1.0.0']
 };
 
-const CURRENT_ANNOUNCEMENT_VERSION = '1.1.0';
+const CURRENT_ANNOUNCEMENT_VERSION = '1.1.1';
 const CURRENT_TERMS_VERSION = '1.1.0';
 
 Object.entries(unwantedEntries).forEach(([key, valuesToRemove]) => {
@@ -311,12 +312,13 @@ async function doGenerate() {
     ctx.drawImage(img, 0, 0);
     // will add back later canvas.classList.add('loaded')
 
-    downloadLink.href = canvas.toDataURL();
-    downloadLink.download = "swgoh-portrait-image.png";
+    downloadLink.href = canvas.toDataURL('image/webp');
+    downloadLink.download = "swgoh-portrait-image.webp";
     downloadLink.textContent = "Download Result (PC)";
     downloadLink.style.display = "inline";
     downloadLinkM.style.display = "inline";
     downloadLinkM.textContent = "Download Result (Mobile)";
+    downloadLinkText.style.display = "inline";
     resetAll.style.display = "inline";
 }
 
@@ -327,7 +329,7 @@ function mobileDownload() {
     if (oldPreview) oldPreview.remove();
 
     const imgPreview = document.createElement('img');
-    imgPreview.src = canvas.toDataURL();
+    imgPreview.src = canvas.toDataURL('image/webp');
     imgPreview.style.maxWidth = "100%";
     imgPreview.id = "imgPreview";
     mainEl.appendChild(imgPreview);
@@ -432,7 +434,7 @@ async function renderCanvasFromDOM() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.drawImage(img, 0, 0);
 
-    downloadLink.href = canvas.toDataURL();
+    downloadLink.href = canvas.toDataURL('image/webp');
 }
 
 function zoomIn() {
@@ -518,7 +520,7 @@ function fakeRefresh() {
     downloadLink.style.display = "none";
     downloadLink.href = "#";
     downloadLink.textContent = "";
-
+    downloadLinkText.style.display = "none";
     downloadLinkM.style.display = "none";
     downloadLinkM.textContent = "";
     downloadLinkMDesc.style.display = "none";

swgoh-portrait-maker/index.html

@@ -10,7 +10,7 @@ h1 {
     color: #333;
 }
 
-#uploadText {
+.uploadText {
     font-size: 20px
 }
 

swgoh-portrait-maker/script.js

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="A basic HTML template with meta tags and favicon.">
+    <meta name="description" content="SWGoH Updates - A automatic datamine tool for SWGoH">
     <meta name="author" content="LegoFan9">
     <link rel="icon" href="swgoh-updates-icon.webp">
     <title>SWGoH Updates</title>