add search result name to portrait alt

mk360 · Sep 1, 2024 · 72e610c · 72e610c
1 parent fd57364
commit 72e610c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/script/index.js b/script/index.js
@@ -143,7 +143,8 @@
     }
 
     function addToBarracks() {
-        const newButtons = createHeroItem(this.dataset.unitId, true);
+        // const portraitImg = this.getElementsByClassName("portrait")[0];
+        // const newButtons = createHeroItem(this.dataset.unitId, true, portraitImg.alt);
         const deleteIcon = createDeleteIcon();
         const favoriteIcon = createFavoritesIcon(false);
         favoriteIcon.onclick = handleFavoriteHeroEvent(newButtons.heroButton, false);
@@ -186,11 +187,21 @@
 
             for (let elem of elements) {
                 const { wpn, mvt, id, name} = elem;
-                const { heroButton, iconsContainer } = createHeroItem(id, true);
+                const { heroButton, iconsContainer } = createHeroItem(id, true, name);
                 // const weaponTypeImage = document.createElement("img");
                 // const stringWeaponType = WEAPON_TYPES[wpn].replace(/ /g, "_");
-                // weaponTypeImage.src = `https://feheroes.fandom.com/wiki/Special:Filepath/Icon_Class_${stringWeaponType}.png`;
+                // weaponTypeImage.loading = "lazy";
+                // weaponTypeImage.src = `https://feheroes.fandom.com/wiki/Special:Redirect/file/Icon_Class_${stringWeaponType}.png`;
+                // weaponTypeImage.alt = stringWeaponType;
                 // weaponTypeImage.classList.add("top-left");
+
+                // const movementTypeImage = document.createElement("img");
+                // movementTypeImage.loading = "lazy";
+                // const stringMovementType = MOVEMENT_TYPES[mvt];
+                // movementTypeImage.src = `https://feheroes.fandom.com/wiki/Special:Redirect/file/Icon_Move_${stringMovementType}.png`;
+                // movementTypeImage.classList.add("top-right");
+
+                // iconsContainer.appendChild(movementTypeImage);
                 // iconsContainer.appendChild(weaponTypeImage);
                 SEARCH_RESULTS.appendChild(heroButton);
                 heroButton.onclick = addToBarracks;
@@ -215,11 +226,11 @@
         });
     }
 
-    function createHeroItem(heroId, addIcons) {
+    function createHeroItem(heroId, addIcons, alt) {
         const heroButton = document.createElement("button");
         heroButton.classList.add("hero-container");
         const frame = document.createElement("img");
-        frame.alt = "";
+        frame.alt = alt ?? "";
         frame.src = "./static/frame.webp";
         frame.classList.add("hero-frame");
 
@@ -256,7 +267,7 @@
     function createFavoritesIcon(initialState) {
         const img = document.createElement("img");
         img.src = initialState ? "./static/favorite-on.png" : "./static/favorite-off.png";
-        img.classList.add("favorite-button");
+        img.classList.add("top-left");
         return img;
     }
 

diff --git a/script/index.min.js b/script/index.min.js
diff --git a/static/index.css b/static/index.css
@@ -241,7 +241,7 @@ main {
     grid-template-rows: repeat(auto-fit, var(--cell-size));
 }
 
-.favorite-button {
+.top-left {
     z-index: 1;
     border: 0;
     outline: 1px solid transparent;
@@ -255,6 +255,16 @@ main {
     }
 }
 
+.top-right {
+    z-index: 1;
+    border: 0;
+    outline: 1px solid transparent;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2rem;
+}
+
 #search-query {
     width: 100%;
     height: 100%;
@@ -366,7 +376,7 @@ main {
         }
     }
 
-    .favorite-button {
+    .top-left, .top-right {
         height: 3rem;
     }