@sjtdev/koishi-plugin-dota2tracker 1.1.10-hotfix → 1.2.0-hotfix

package/lib/index.js

@@ -43,12 +43,16 @@ var import_koishi = require("koishi");
 var utils_exports = {};
 __export(utils_exports, {
   CONFIGS: () => CONFIGS,
+  HeroDescType: () => HeroDescType,
+  ImageFormat: () => ImageFormat,
   ImageType: () => ImageType,
+  formatHeroDesc: () => formatHeroDesc,
   formatNumber: () => formatNumber,
   getFormattedMatchData: () => getFormattedMatchData,
   getImageUrl: () => getImageUrl,
   playerisValid: () => playerisValid,
   query: () => query,
+  queryHeroFromValve: () => queryHeroFromValve,
   readDirectoryFilesSync: () => readDirectoryFilesSync,
   roundToDecimalPlaces: () => roundToDecimalPlaces,
   sec2time: () => sec2time,
@@ -513,6 +517,17 @@ async function query(query_str) {
   });
 }
 __name(query, "query");
+async function queryHeroFromValve(heroId) {
+  return (await http.get(`https://www.dota2.com/datafeed/herodata?language=schinese&hero_id=${heroId}`)).result.data.heroes[0];
+}
+__name(queryHeroFromValve, "queryHeroFromValve");
+var HeroDescType = /* @__PURE__ */ ((HeroDescType2) => {
+  HeroDescType2["Normal"] = "normal";
+  HeroDescType2["Facet"] = "facet";
+  HeroDescType2["Scepter"] = "scepter";
+  HeroDescType2["Shard"] = "shard";
+  return HeroDescType2;
+})(HeroDescType || {});
 var ImageType = /* @__PURE__ */ ((ImageType2) => {
   ImageType2["Icons"] = "icons";
   ImageType2["IconsFacets"] = "icons/facets";
@@ -523,7 +538,12 @@ var ImageType = /* @__PURE__ */ ((ImageType2) => {
   ImageType2["Local"] = "local";
   return ImageType2;
 })(ImageType || {});
-function getImageUrl(image, type = "local" /* Local */) {
+var ImageFormat = /* @__PURE__ */ ((ImageFormat2) => {
+  ImageFormat2["png"] = "png";
+  ImageFormat2["svg"] = "svg";
+  return ImageFormat2;
+})(ImageFormat || {});
+function getImageUrl(image, type = "local" /* Local */, format = "png" /* png */) {
   if (type === "local" /* Local */) {
     try {
       const imageData = import_fs.default.readFileSync(`./node_modules/@sjtdev/koishi-plugin-dota2tracker/template/images/${image}.png`);
@@ -534,7 +554,7 @@ function getImageUrl(image, type = "local" /* Local */) {
       return "";
     }
   } else
-    return `https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/${type}/${image}.png`;
+    return `https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/${type}/${image}.${format}`;
 }
 __name(getImageUrl, "getImageUrl");
 function getFormattedMatchData(match) {
@@ -600,7 +620,7 @@ function getFormattedMatchData(match) {
       if (!match.party[player.partyId])
         match.party[player.partyId] = party_mark[party_index++];
     }
-    if (match.parsedDateTime) {
+    if (player.stats.matchPlayerBuffEvent) {
       const maxStackCountsByAbilityOrItem = player.stats.matchPlayerBuffEvent.reduce((acc, event) => {
         const key = event.abilityId !== null ? `ability-${event.abilityId}` : `item-${event.itemId}`;
         if (!acc[key] || event.stackCount > acc[key].stackCount) {
@@ -843,6 +863,34 @@ function roundToDecimalPlaces(number, decimalPlaces) {
   return Math.round(number * factor) / factor;
 }
 __name(roundToDecimalPlaces, "roundToDecimalPlaces");
+function formatHeroDesc(template, special_values, type = "normal" /* Normal */) {
+  return template.replace(/%%|%([^%]+)%/g, (match, p1) => {
+    if (match === "%%") {
+      return "%";
+    } else {
+      const specialValue = special_values.find((sv) => {
+        const match2 = /bonus_(.*)/.exec(p1);
+        return sv.name === p1 || sv.name === match2?.[1];
+      });
+      if (specialValue) {
+        let valuesToUse = "";
+        if (type == "facet" /* Facet */) {
+          valuesToUse = specialValue.facet_bonus.name ? specialValue.facet_bonus.values.join(" / ") : specialValue.values_float.join(" / ");
+        } else if (type == "scepter" /* Scepter */) {
+          valuesToUse = specialValue.values_scepter.length ? specialValue.values_scepter.join(" / ") : specialValue.values_float.join(" / ");
+        } else if (type == "shard" /* Shard */) {
+          valuesToUse = specialValue.values_shard.length ? specialValue.values_shard.join(" / ") : specialValue.values_float.join(" / ");
+        } else {
+          valuesToUse = specialValue.values_float.join(" / ");
+        }
+        return `<span class="value">${valuesToUse}</span>`;
+      } else {
+        return match;
+      }
+    }
+  });
+}
+__name(formatHeroDesc, "formatHeroDesc");
 
 // src/index.ts
 var import_fs2 = __toESM(require("fs"));
@@ -954,8 +1002,8 @@ var rank = {
   "7": "超凡入圣",
   "8": "冠绝一世"
 };
-var roles = { CARRY: "核心", ESCAPE: "逃生", NUKER: "爆发", INITIATOR: "先手", DURABLE: "耐久", DISABLER: "控制", JUNGLER: "打野", SUPPORT: "辅助", PUSHER: "推进" };
-var primary_attrs = { all: "hero_universal", str: "hero_strength", agi: "hero_agility", int: "hero_intelligence" };
+var roles = ["核心", "辅助", "爆发", "控制", "打野", "耐久", "逃生", "推进", "先手"];
+var primary_attrs = { "3": "hero_universal", "0": "hero_strength", "1": "hero_agility", "2": "hero_intelligence" };
 var behavior = {
   "Unit Target": "单位目标",
   Channeled: "持续施法",
@@ -1402,29 +1450,103 @@ async function apply(ctx, config) {
       }
     }
   });
-  ctx.command("查询英雄 <input_data>", "查询英雄技能/面板信息").usage("查询英雄的技能说明与各项数据，生成图片发布。\n参数可输入英雄ID、英雄名、英雄常用别名").example("-查询英雄 15").example("-查询英雄 雷泽").example("-查询英雄 电魂").action(async ({ session }, input_data) => {
+  ctx.command("查询英雄 <input_data>", "查询英雄技能/面板信息").usage("查询英雄的技能说明与各项数据，生成图片发布。\n参数可输入英雄ID、英雄名、英雄常用别名").option("random", "-r 随机选择英雄").option("refresh", "-f 忽略缓存刷新数据").example("-查询英雄 15").example("-查询英雄 雷泽").example("-查询英雄 电魂").action(async ({ session, options }, input_data) => {
+    if (options.random)
+      input_data = random.pick(Object.keys(HEROES_CHINESE));
     if (input_data) {
-      let fhero = findingHero(input_data);
-      if (!fhero) {
+      let hero = findingHero(input_data);
+      if (!hero) {
         session.send("未找到输入的英雄，请确认后重新输入。");
         return;
       }
       try {
-        let AbilitiesConstantsCN;
-        let queryConstants = (await query(CURRENT_GAMEVERSION())).data.constants;
-        AbilitiesConstantsCN = (await ctx.database.get("dt_constants_abilities_cn", [1]))[0];
-        if (!AbilitiesConstantsCN || AbilitiesConstantsCN.gameVersionId < queryConstants.gameVersions[0].id) {
-          session.send("初次使用或版本更新，正在更新英雄技能数据中……");
-          AbilitiesConstantsCN = { data: (await query(ALL_ABILITIES_CHINESE_NAME())).data.constants };
-          await ctx.database.upsert("dt_constants_abilities_cn", (row) => [{ id: 1, data: AbilitiesConstantsCN, gameVersionId: queryConstants.gameVersions[0].id, gameVersionName: queryConstants.gameVersions[0].name }]);
+        const tempHero = await ctx.database.get("dt_hero_data_cache", hero.id);
+        if (tempHero.length && !options.refresh) {
+          const gameVersionId = (await query(CURRENT_GAMEVERSION())).data.constants.gameVersions[0].id;
+          if (tempHero[0].gameVersionId >= gameVersionId) {
+            hero = tempHero[0].hero;
+          }
+        } else {
+          const queryHero = await queryHeroFromValve(hero.id);
+          Object.assign(hero, queryHero);
+          hero.facet_abilities.forEach((fa, i) => {
+            if (fa.abilities.length) {
+              fa.abilities.forEach((ab) => {
+                if (!hero.facets[i].abilities)
+                  hero.facets[i].abilities = [];
+                if (hero.facets[i].description_loc !== ab.desc_loc)
+                  hero.facets[i].abilities.push({ id: ab.id, name: ab.name, name_loc: ab.name_loc, description_ability_loc: formatHeroDesc(ab.desc_loc, ab.special_values, "facet" /* Facet */) });
+                else
+                  hero.facets[i].description_loc = formatHeroDesc(hero.facets[i].description_loc, ab.special_values, "facet" /* Facet */);
+                hero.abilities.push(ab);
+              });
+            }
+          });
+          const all_special_values = [...hero.abilities.flatMap((ab) => ab.special_values), ...hero.facet_abilities.flatMap((fas) => fas.abilities.flatMap((fa) => fa.special_values))];
+          hero.abilities.forEach((ab) => {
+            ab.facets_loc.forEach((facet, i) => {
+              if (facet) {
+                if (!hero.facets[i].abilities)
+                  hero.facets[i].abilities = [];
+                hero.facets[i].abilities.push({ id: ab.id, name: ab.name, name_loc: ab.name_loc, description_ability_loc: formatHeroDesc(facet, all_special_values, "facet" /* Facet */), attributes: [] });
+              }
+            });
+            hero.facets.forEach((facet) => {
+              const svs = ab.special_values.filter((sv) => sv.facet_bonus.name === facet.name);
+              svs.forEach((sv) => {
+                if (sv.heading_loc) {
+                  facet.abilities.find((ability) => ab.id == ability.id)?.attributes.push({ heading_loc: sv.heading_loc, values: [...sv.facet_bonus.values] });
+                }
+              });
+            });
+            ab.desc_loc = formatHeroDesc(ab.desc_loc, all_special_values);
+            ab.notes_loc = ab.notes_loc.map((note) => formatHeroDesc(note, all_special_values));
+            if (ab.ability_has_scepter)
+              ab.scepter_loc = formatHeroDesc(ab.scepter_loc, ab.special_values, "scepter" /* Scepter */);
+            if (ab.ability_has_shard)
+              ab.shard_loc = formatHeroDesc(ab.shard_loc, ab.special_values, "shard" /* Shard */);
+          });
+          hero.talents.forEach((talent) => {
+            const regex = /\{s:(.*?)\}/g;
+            let match;
+            while ((match = regex.exec(talent.name_loc)) !== null) {
+              const specialValueName = match[1];
+              const target = talent.special_values?.find((sv) => sv.name === specialValueName);
+              if (target) {
+                talent.name_loc = talent.name_loc.replace(match[0], target.values_float.join("/"));
+              } else {
+                const ability = hero.abilities.find((ability2) => ability2.special_values.some((specialValue) => specialValue.bonuses.some((bonus) => bonus.name === talent.name)));
+                if (ability) {
+                  const specialValues = ability.special_values.filter((specialValue) => specialValue.bonuses.some((bonus) => bonus.name === talent.name));
+                  const regex2 = /{s:bonus_(.*?)}/g;
+                  let match2;
+                  const replacements = [];
+                  while ((match2 = regex2.exec(talent.name_loc)) !== null) {
+                    const specialValue = specialValues.find((sv) => sv.name === String(match2[1]));
+                    const replacement = specialValue?.bonuses.find((bonus) => bonus.name === talent.name)?.value;
+                    if (replacement !== void 0) {
+                      replacements.push({ original: match2[0], replacement });
+                    }
+                  }
+                  replacements.forEach(({ original, replacement }) => {
+                    talent.name_loc = talent.name_loc.replace(original, replacement);
+                  });
+                }
+              }
+            }
+          });
+          try {
+            const gameVersionId = (await query(CURRENT_GAMEVERSION())).data.constants.gameVersions[0].id;
+            await ctx.database.upsert("dt_hero_data_cache", (row) => [{ id: hero.id, hero, gameVersionId }]);
+          } catch (error) {
+            ctx.logger.error(error);
+            await session.send("数据缓存失败。");
+          }
         }
-        let hero = (await query(HERO_INFO(fhero.id))).data.constants.hero;
-        hero.talents.forEach((talent) => talent.name_cn = AbilitiesConstantsCN.data.abilities?.find((item) => item.id == talent.abilityId)?.language?.displayName);
         await session.send(await ctx.puppeteer.render(genImageHTML(hero, config.template_hero, "hero" /* Hero */)));
       } catch (error) {
         ctx.logger.error(error);
-        session.send("获取数据失败");
-        return;
+        await session.send("获取数据失败");
       }
     } else {
       session.send("请输入参数。");
@@ -1466,8 +1588,7 @@ async function apply(ctx, config) {
     let dc_heroes = Object.values(dotaconstants3.heroes).map((hero) => ({
       id: hero["id"],
       name: hero["name"],
-      shortName: hero["name"].match(/^npc_dota_hero_(.+)$/)[1],
-      localized_name: hero["localized_name"].toLowerCase().replace(/\s+/g, "")
+      shortName: hero["name"].match(/^npc_dota_hero_(.+)$/)[1]
     }));
     let cn_heroes = Object.keys(HEROES_CHINESE).map((key) => ({
       id: parseInt(key),
@@ -1487,157 +1608,6 @@ async function apply(ctx, config) {
     return heroes3.find((hero) => hero.names_cn.some((cn) => cn.toLowerCase() == input.toLowerCase()) || hero.shortName === input.toLowerCase() || hero.id == input);
   }
   __name(findingHero, "findingHero");
-  ctx.command("7.36 <input_data>", "查询7.36改动").option("refresh", "-r 重新获取数据").usage("可查询英雄改动并生成图片返回").example("7.36 小松许").action(async ({ session, options }, input_data) => {
-    if (!("dt_7_36" in ctx.database.tables))
-      await ctx.model.extend("dt_7_36", { id: "integer", data: "string" });
-    const tem = await ctx.database.get("dt_7_36", void 0, ["id"]);
-    if (!tem.length || options.refresh) {
-      try {
-        session.send((!tem.length ? "初次使用，" : "") + "正在获取数据……");
-        await ctx.model.extend("dt_7_36", { id: "integer", data: "string" });
-        const page = await ctx.puppeteer.page();
-        await page.setExtraHTTPHeaders({
-          "Accept-Language": "zh-CN,zh;q=0.9"
-        });
-        await page.goto("https://www.dota2.com/patches/7.36");
-        await page.waitForSelector("body > div:nth-of-type(2) > div:first-of-type > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(5) > div:nth-of-type(2) > div:nth-of-type(1)");
-        await page.evaluate(() => {
-          const scripts = document.querySelectorAll("script");
-          scripts.forEach((script) => script.remove());
-        });
-        const result = await page.evaluate(() => {
-          try {
-            const divs = document.querySelectorAll("body > div:nth-of-type(2) > div:first-of-type > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(5) > div:nth-of-type(2) > div");
-            const divArray = [];
-            divs.forEach((div) => {
-              const subDiv = div.querySelector("a > div");
-              console.log(subDiv);
-              const match = subDiv?.style.backgroundImage.match(/\/apps\/dota2\/images\/dota_react\/heroes\/([^"]+)\.png"\)/);
-              console.log(match);
-              divArray.push({ heroName: match[1], div: div.outerHTML });
-            });
-            document.querySelectorAll("body > div:nth-of-type(2) > div:first-of-type > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(5) > div:nth-of-type(2) > div:not(:first-of-type)").forEach((node) => node.remove());
-            document.querySelector("body > div:nth-of-type(2) > div:first-of-type > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(5) > div:nth-of-type(2) > div").classList.add("placeholder");
-            const prepareToRemovesNodes = [
-              document.querySelector("body > div:first-of-type"),
-              document.querySelector("body > div:nth-of-type(2) > div:first-of-type > div:first-of-type"),
-              document.querySelector("body > div:nth-of-type(2) > div:first-of-type > div:nth-of-type(2) > div:nth-of-type(1)"),
-              document.querySelector("body > div:nth-of-type(2) > div:first-of-type > div:nth-of-type(2) > div:nth-of-type(2)"),
-              document.querySelector("body > div:nth-of-type(2) > div:first-of-type > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(5) > div:nth-of-type(1)"),
-              ...document.querySelectorAll("body > div:nth-of-type(2) > div:first-of-type > div:nth-of-type(2) > div:nth-of-type(3) > div:not(:last-of-type)")
-            ];
-            prepareToRemovesNodes.forEach((node) => node?.remove());
-            const remainingContent = document.documentElement.outerHTML;
-            return {
-              divArray,
-              remainingContent
-            };
-          } catch (error) {
-            console.error(error);
-          }
-        });
-        page.close();
-        const heroes3 = [];
-        result.divArray.forEach((hero) => {
-          const res = Object.values(dotaconstants3.heroes).find((Chero) => Chero.name.match(/^npc_dota_hero_(.+)$/)[1] == hero.heroName);
-          heroes3.push({ id: res.id, data: hero.div });
-        });
-        heroes3.push({ id: 0, data: result.remainingContent });
-        await ctx.database.upsert("dt_7_36", (row) => heroes3);
-        await session.send("数据获取完成。");
-      } catch (error) {
-        ctx.logger.error(error);
-        session.send("数据获取失败。");
-        return;
-      }
-    }
-    if (input_data) {
-      try {
-        const hero = findingHero(input_data);
-        if (!hero) {
-          session.send("英雄参数输入有误，请检查后重试。");
-          return;
-        }
-        session.send("正在查询，请耐心等待……");
-        const page = await ctx.puppeteer.page();
-        await page.setRequestInterception(false);
-        const [wrapperHTML, newHeroHTML] = (await ctx.database.get("dt_7_36", [0, hero.id])).map((data) => data.data);
-        await page.setContent(wrapperHTML);
-        await page.waitForSelector("div.placeholder");
-        const placeholder = await page.$("div.placeholder");
-        await page.waitForSelector("div.placeholder");
-        await page.evaluate(
-          (element, html) => {
-            element.outerHTML = html;
-          },
-          placeholder,
-          newHeroHTML
-        );
-        await page.evaluate(async () => {
-          const images = Array.from(document.querySelectorAll("img"));
-          const backgroundImages = Array.from(document.querySelectorAll("*")).filter((element) => {
-            const bg = window.getComputedStyle(element).backgroundImage;
-            return bg && bg !== "none";
-          });
-          await Promise.all([
-            ...images.map((img) => {
-              if (img.complete)
-                return Promise.resolve();
-              else {
-                return new Promise((resolve) => {
-                  img.onload = resolve;
-                  img.onerror = () => {
-                    const placeholderSrc = "https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/icons/innate_icon.png";
-                    img.src = placeholderSrc;
-                    img.onload = resolve;
-                    img.onerror = resolve;
-                  };
-                });
-              }
-            }),
-            ...backgroundImages.map((element) => {
-              const bg = window.getComputedStyle(element).backgroundImage;
-              const urlMatch = bg.match(/url\(["']?([^"')]+)["']?\)/);
-              if (urlMatch && urlMatch[1]) {
-                const src = urlMatch[1];
-                return new Promise((resolve) => {
-                  const img = new Image();
-                  img.onload = resolve;
-                  img.onerror = () => {
-                    const placeholderSrc = "https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/icons/innate_icon.png";
-                    img.src = placeholderSrc;
-                    img.onload = resolve;
-                    img.onerror = resolve;
-                  };
-                  img.src = src;
-                });
-              } else
-                return Promise.resolve();
-            })
-          ]);
-          await new Promise((resolve) => setTimeout(resolve, 500));
-        });
-        const testE = await page.$("body > div > div > div > div > div > div > div");
-        const res = await testE.screenshot();
-        const base64String = Buffer.from(res).toString("base64");
-        const imgTag = `<img src="data:image/png;base64,${base64String}" alt="Image" />`;
-        if (process.env.NODE_ENV === "development")
-          import_fs2.default.writeFileSync("./node_modules/@sjtdev/koishi-plugin-dota2tracker/temp.png", res);
-        if (process.env.NODE_ENV === "development")
-          import_fs2.default.writeFileSync("./node_modules/@sjtdev/koishi-plugin-dota2tracker/temp.html", await page.content());
-        session.send(imgTag);
-        page.close();
-      } catch (error) {
-        ctx.logger.error(error);
-        session.send("查询改动失败。");
-      }
-    } else
-      session.send("https://www.dota2.com/patches/7.36");
-  });
-  ctx.command("test <input_data>").option("a", "a").action(async ({ session, options }, input_data) => {
-    console.log(session);
-    ctx.broadcast(["kook:9510442027074966"], "test");
-  });
   ctx.on("ready", async () => {
     const tables = await ctx.database.tables;
     if (!("dt_subscribed_guilds" in tables)) {
@@ -1652,8 +1622,8 @@ async function apply(ctx, config) {
     if (!("dt_previous_query_results" in tables)) {
       ctx.model.extend("dt_previous_query_results", { matchId: "unsigned", data: "json", queryTime: "timestamp" }, { primary: "matchId" });
     }
-    if (!("dt_constants_abilities_cn" in tables)) {
-      ctx.model.extend("dt_constants_abilities_cn", { id: "unsigned", data: "json", gameVersionId: "unsigned", gameVersionName: "string" }, { primary: "id" });
+    if (!("dt_hero_data_cache" in tables)) {
+      ctx.model.extend("dt_hero_data_cache", { id: "unsigned", gameVersionId: "unsigned", hero: "json" });
     }
     ctx.cron("0 */6 * * *", () => {
       const oneMonthAgo = (0, import_moment.default)().subtract(1, "months").toDate();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sjtdev/koishi-plugin-dota2tracker",
   "description": "koishi插件-追踪群友的DOTA2对局",
-  "version": "1.1.10-hotfix",
+  "version": "1.2.0-hotfix",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [
@@ -26,7 +26,7 @@
     "dota2"
   ],
   "dependencies": {
-    "dotaconstants": "^8.7.0",
+    "dotaconstants": "^8.8.0",
     "ejs": "^3.1.10",
     "moment": "^2.30.1"
   },

package/template/hero/hero_1.ejs

@@ -131,21 +131,42 @@
                 line-height: 1.25;
             }
 
+            .details .hype .npe {
+                color: #a5e0f3;
+                font-weight: bold;
+                line-height: 2;
+            }
+
             .talents {
-                display: flex; /* 启用Flex布局 */
-                flex-wrap: wrap; /* 允许元素换行 */
-                justify-content: center; /* 水平居中整体内容 */
+                display: grid;
+                grid-template-rows: repeat(4, 35px);
+                gap: 10px;
                 border: #444 10px solid;
-                /* background-color: ; */
-                /* padding: 10px; */
                 box-sizing: border-box;
+                position: relative; /* 添加相对定位 */
+            }
+
+            .talents::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: #444;
+                pointer-events: none; /* 使伪元素不可点击 */
+                box-sizing: border-box;
+                width: 395px;
+                transform: translate(-10px, -10px); /* 调整伪元素的位置 */
             }
 
             .talents .talent {
                 width: 375px;
-                line-height: 35px;
                 text-align: center;
                 display: flex;
+                align-items: center;
+                background: #000; /* 设置背景颜色以覆盖伪元素的背景 */
+                position: relative; /* 添加相对定位 */
             }
 
             .talents .talent .left,
@@ -154,13 +175,9 @@
                 font-size: 12px;
             }
 
-            .talents .talent:not(:last-child) {
-                border-bottom: 10px solid #444;
-            }
-
             .talents .talent .level {
-                flex: 0 0 auto; /* 第二个元素不伸缩，保持自身宽度 */
-                width: 35px; /* 给中间元素一个固定宽度 */
+                flex: 0 0 auto;
+                width: 35px;
                 height: 35px;
                 font-size: 18px;
                 line-height: 35px;
@@ -170,8 +187,6 @@
                 color: #e7d292;
                 text-shadow: 0px 0px 8px #ff531c;
                 background-color: #444;
-                /* font-family: Reaver, serif;
-                font-weight: bold; */
             }
 
             .details .list {
@@ -186,6 +201,128 @@
                 background-color: #333;
             }
 
+            .facets {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px; /* 可选：设置项目之间的间距 */
+            }
+
+            .facet {
+                flex: 1 1 calc(50% - 10px); /* 每行两个项目 */
+                box-sizing: border-box; /* 包含padding和border在宽度和高度的计算中 */
+                background-color: #181f24;
+                position: relative;
+                border: 1px solid #2b2f33;
+            }
+
+            .facet:nth-child(odd):last-child {
+                flex-basis: 100%; /* 最后一个奇数项目占据整行 */
+            }
+            .facet > .name_back {
+                position: absolute;
+                height: 50px;
+                width: 100%;
+            }
+            .facet > .name_back.type_0 {
+                background: linear-gradient(to right, #9f3c3c, #4a2026);
+            }
+            .facet > .name_line.type_0 {
+                filter: invert(22%) sepia(100%) saturate(100%) hue-rotate(316deg) brightness(98%) contrast(100%);
+            }
+            .facet > .name_back.type_1 {
+                background: linear-gradient(to right, #c8a45c, #6f3d21);
+            }
+            .facet > .name_line.type_1 {
+                filter: invert(54%) sepia(99%) saturate(100%) hue-rotate(0deg) brightness(97%) contrast(100%);
+            }
+            .facet > .name_back.type_2 {
+                background: linear-gradient(to right, #a2b23e, #2d5a18);
+            }
+            .facet > .name_line.type_2 {
+                filter: invert(57%) sepia(100%) saturate(100%) hue-rotate(32deg) brightness(93%) contrast(100%);
+            }
+            .facet > .name_back.type_3 {
+                background: linear-gradient(to right, #547ea6, #2a385e);
+            }
+            .facet > .name_line.type_3 {
+                filter: invert(39%) sepia(100%) saturate(99%) hue-rotate(167deg) brightness(99%) contrast(100%);
+            }
+            .facet > .name_back.type_4 {
+                background: linear-gradient(to right, #675cae, #261c44);
+            }
+            .facet > .name_line.type_4 {
+                filter: invert(33%) sepia(100%) saturate(100%) hue-rotate(207deg) brightness(99%) contrast(100%);
+            }
+            .facet > .name_back.type_5 {
+                background: linear-gradient(to right, #adb6be, #4e5557);
+            }
+            .facet > .name_line.type_5 {
+                filter: invert(73%) sepia(23%) saturate(99%) hue-rotate(166deg) brightness(93%) contrast(94%);
+            }
+            .facet > .name_line {
+                position: absolute;
+                background-size: cover;
+                height: 50px;
+                width: 100%;
+                background-image: url("https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/icons/facets/ripple_texture.png");
+            }
+            .facet > .name {
+                height: 50px;
+                line-height: 50px;
+                z-index: 1;
+                position: relative;
+                display: flex;
+            }
+            .facet > .name > img {
+                width: 24px;
+                padding: 13px;
+                background-color: #0003;
+            }
+            .facet > .name > span {
+                margin-left: 16px;
+                letter-spacing: 2px;
+                text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3), 4px 4px 6px rgba(0, 0, 0, 0.2), 6px 6px 9px rgba(0, 0, 0, 0.1);
+            }
+            .facet > .content {
+                padding: 12px;
+
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+            .facet > .content > .ability {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+            .facet > .content > .ability > .name {
+                background: linear-gradient(to right, #9bcdff17 0%, #9bcdff09 30%, #d0e8ff00 100%);
+                line-height: 1;
+            }
+            .facet > .content > .ability > .name > img {
+                width: 30px;
+            }
+            .facet > .content > .ability > .name > span {
+                margin-left: 10px;
+                font-size: 14px;
+                /* font-weight: bold; */
+            }
+            .facet > .content .description {
+                color: #9ab0cd;
+            }
+            .facet > .content > .ability > .attributes {
+                font-size: 12px;
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+            }
+            .facet > .content > .ability > .attributes .item {
+                color: #737373;
+            }
+            .facet > .content .value {
+                color: #fff;
+            }
+
             .skills {
                 width: 800px;
                 display: flex;
@@ -209,8 +346,19 @@
                 background-color: #1f272b;
                 padding: 8px;
                 font-weight: 100;
+            }
+            .skill > .title > .name {
                 font-family: "KaiTi", "楷体", "楷体_GB2312", "STKaiti", serif;
             }
+            .skill > .title > .is_innate {
+                font-size: 14px;
+                line-height: 18px;
+                width: auto;
+                display: inline;
+                padding: 2px 8px;
+                box-sizing: content-box;
+                background-color: #5b93d1;
+            }
 
             .skill img.scepter,
             .skill img.shard {
@@ -272,6 +420,14 @@
                 margin-bottom: 32px;
             }
 
+            .skill .facet {
+                padding-left: 0;
+            }
+
+            .skill .value{
+                color: #fff;
+            }
+
             .skill .aghanim_description {
                 padding-left: 0;
                 color: #9bb1ce;
@@ -293,7 +449,7 @@
                 display: block;
             }
 
-            .skill .aghanim_description img{
+            .skill .aghanim_description img {
                 position: unset;
                 transform: none;
             }
@@ -317,6 +473,10 @@
                 color: #4b525d;
             }
 
+            .skill .attributes .values > img {
+                width: 16px;
+            }
+
             .skill .attributes {
                 margin-bottom: 12px;
             }
@@ -365,45 +525,46 @@
         <div class="wrapper">
             <%- `
             <div class="hero" id="${hero.id}">
-                <img src="${utils.getImageUrl(hero.shortName, ImageType.Heroes)}" alt="" />
-                <img class="pri_attr" src="${utils.getImageUrl(d2a.primary_attrs[dotaconstants.heroes[hero.id].primary_attr], ImageType.Icons)}" alt="" />
+                <img src="${utils.getImageUrl(hero.shortName, ImageType.Heroes)}"/>
+                <img class="pri_attr" src="${utils.getImageUrl(d2a.primary_attrs[hero.primary_attr], ImageType.Icons)}"/>
                 <div class="info">
-                    <p class="name">${hero.language.displayName}</p>
+                    <p class="name">${hero.name_loc}</p>
                     <p class="roles">
-                        ${hero.roles.map((item) => `<span class="role level${item.level}">${d2a.roles[item.roleId]}</span>`).join("")}
+                        ${hero.role_levels.map((item, index) => item>0?`<span class="role level${item}">${d2a.roles[index]}</span>`:"").join("")}
                     </p>
                     <p class="attrs">
-                        <span class="str">${dotaconstants.heroes[hero.id].base_str} <span class="gain">+${dotaconstants.heroes[hero.id].str_gain.toFixed(1)}</span></span>
-                        <span class="agi">${dotaconstants.heroes[hero.id].base_agi} <span class="gain">+${dotaconstants.heroes[hero.id].agi_gain.toFixed(1)}</span></span>
-                        <span class="int">${dotaconstants.heroes[hero.id].base_int} <span class="gain">+${dotaconstants.heroes[hero.id].int_gain.toFixed(1)}</span></span>
+                        <span class="str">${hero.str_base} <span class="gain">+${hero.str_gain.toFixed(1)}</span></span>
+                        <span class="agi">${hero.agi_base} <span class="gain">+${hero.agi_gain.toFixed(1)}</span></span>
+                        <span class="int">${hero.int_base} <span class="gain">+${hero.int_gain.toFixed(1)}</span></span>
                     </p>
                 </div>
             </div>
             <div class="details">
                 <div class="hype_talents">
                     <div class="hype">
-                        ${hero.language.hype}
+                        <p class="npe">${hero.npe_desc_loc}</p>
+                        ${hero.hype_loc}
                     </div>
                     <div class="talents">
                         <div class="talent">
-                            <div class="left">${hero.talents[7].name_cn}</div>
+                            <div class="left">${hero.talents[7].name_loc}</div>
                             <div class="level">25</div>
-                            <div class="right">${hero.talents[6].name_cn}</div>
+                            <div class="right">${hero.talents[6].name_loc}</div>
                         </div>
                         <div class="talent">
-                            <div class="left">${hero.talents[5].name_cn}</div>
+                            <div class="left">${hero.talents[5].name_loc}</div>
                             <div class="level">20</div>
-                            <div class="right">${hero.talents[4].name_cn}</div>
+                            <div class="right">${hero.talents[4].name_loc}</div>
                         </div>
                         <div class="talent">
-                            <div class="left">${hero.talents[3].name_cn}</div>
+                            <div class="left">${hero.talents[3].name_loc}</div>
                             <div class="level">15</div>
-                            <div class="right">${hero.talents[2].name_cn}</div>
+                            <div class="right">${hero.talents[2].name_loc}</div>
                         </div>
                         <div class="talent">
-                            <div class="left">${hero.talents[1].name_cn}</div>
+                            <div class="left">${hero.talents[1].name_loc}</div>
                             <div class="level">10</div>
-                            <div class="right">${hero.talents[0].name_cn}</div>
+                            <div class="right">${hero.talents[0].name_loc}</div>
                         </div>
                     </div>
                 </div>
@@ -411,36 +572,27 @@
                     <tbody>
                         <tr>
                             <td>初始生命值</td>
-                            <td>${dotaconstants.heroes[hero.id].base_health + dotaconstants.heroes[hero.id].base_str * 22}</td>
+                            <td>${hero.max_health}</td>
                         </tr>
                         <tr>
                             <td>初始生命回复</td>
-                            <td>${dotaconstants.heroes[hero.id].base_health_regen}</td>
+                            <td>${hero.health_regen.toFixed(2)}</td>
                         </tr>
                         <tr>
                             <td>初始魔法值</td>
-                            <td>${dotaconstants.heroes[hero.id].base_mana + dotaconstants.heroes[hero.id].base_int * 12}</td>
+                            <td>${hero.max_mana}</td>
                         </tr>
                         <tr>
                             <td>初始魔法回复</td>
-                            <td>${dotaconstants.heroes[hero.id].base_mana_regen}</td>
+                            <td>${hero.mana_regen.toFixed(2)}</td>
                         </tr>
                         <tr>
                             <td>初始攻击力</td>
-                            <td>${dotaconstants.heroes[hero.id].base_mr + Math.round(dotaconstants.heroes[hero.id].primary_attr == "all" ? 
-                                (dotaconstants.heroes[hero.id].base_str + dotaconstants.heroes[hero.id].base_agi + dotaconstants.heroes[hero.id].base_int) * 0.7
-                                : dotaconstants.heroes[hero.id]["base_" + dotaconstants.heroes[hero.id].primary_attr])}
-                                （${dotaconstants.heroes[hero.id].base_attack_min + Math.round(dotaconstants.heroes[hero.id].primary_attr == "all" ?
-                                (dotaconstants.heroes[hero.id].base_str + dotaconstants.heroes[hero.id].base_agi + dotaconstants.heroes[hero.id].base_int) * 0.7
-                                : dotaconstants.heroes[hero.id]["base_" + dotaconstants.heroes[hero.id].primary_attr])}
-                                ~${dotaconstants.heroes[hero.id].base_attack_max + Math.round(dotaconstants.heroes[hero.id].primary_attr == "all" ?
-                                (dotaconstants.heroes[hero.id].base_str + dotaconstants.heroes[hero.id].base_agi + dotaconstants.heroes[hero.id].base_int) * 0.7
-                                : dotaconstants.heroes[hero.id]["base_" + dotaconstants.heroes[hero.id].primary_attr])}）
-                            </td>
+                            <td>${hero.damage_min}~${hero.damage_max}</td>
                         </tr>
                         <tr>
                             <td>基础攻击间隔</td>
-                            <td>${dotaconstants.heroes[hero.id].attack_rate.toFixed(1)}</td>
+                            <td>${hero.attack_capability.toFixed(1)}</td>
                         </tr>
                         <tr>
                             <td>基础攻击前摇</td>
@@ -448,96 +600,163 @@
                         </tr>
                         <tr>
                             <td>攻击范围</td>
-                            <td>${dotaconstants.heroes[hero.id].attack_range}</td>
+                            <td>${hero.attack_range}</td>
                         </tr>
                         <tr>
                             <td>护甲</td>
-                            <td>${(Math.round((dotaconstants.heroes[hero.id].base_armor + dotaconstants.heroes[hero.id].base_agi * 0.167) * 10) / 10).toFixed(1)}</td>
+                            <td>${hero.armor.toFixed(1)}</td>
                         </tr>
                         <tr>
                             <td>移动速度</td>
-                            <td>${dotaconstants.heroes[hero.id].move_speed}</td>
+                            <td>${hero.movement_speed}</td>
                         </tr>
                         <tr>
                             <td>视野范围</td>
-                            <td>${dotaconstants.heroes[hero.id].day_vision}（${dotaconstants.heroes[hero.id].night_vision}）</td>
+                            <td>${hero.sight_range_day}（${hero.sight_range_night}）</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
+            <div class="facets">
+                ${hero.facets.map(facet=>`
+                <div class="facet">
+                    <div class="name_back type_${facet.color}"></div>
+                    <div class="name_line type_${facet.color}"></div>
+                    <p class="name">
+                        <img src="${utils.getImageUrl(facet.icon, ImageType.IconsFacets)}"/>
+                        <span>${facet.title_loc}</span>
+                    </p>
+                    <div class="content">
+                        ${facet.description_loc ?`<p class="description">${facet.description_loc}</p>`:""}
+                        ${facet.abilities?facet.abilities.map(ability=>
+                        `<div class="ability">
+                            <div class="name">
+                                <img src="${utils.getImageUrl(ability.name, ImageType.Abilities)}" onerror="this.onerror=null; this.src='${utils.getImageUrl(`innate_icon`,ImageType.Icons)}';"/>
+                                <span>${ability.name_loc}</span>
+                            </div>
+                            ${ability.description_ability_loc?`<div class="description">${ability.description_ability_loc}</div>`:""}
+                            ${ability.attributes&&ability.attributes?.length ? ability.attributes.map(attr=>
+                            `<div class="attributes">
+                                <p><span class="item">${attr.heading_loc}</span><span class="values">${attr.values.join(" / ")}</span></p>
+                            </div>`).join(""):""}
+                        </div>`).join("")
+                        :""}
+                    </div>
+                </div>
+                `).join("")}
+            </div>
             <div class="skills">
-                ${hero.abilities.filter((item) => dotaconstants.abilities[item.ability.name].behavior != "Hidden")
+                ${hero.abilities//.filter((item) => dotaconstants.abilities[item.name].behavior != "Hidden")
                 .map((item) => `
-                <div class="skill">
+                <div class="skill" data-ability="${item.ability_is_innate}">
                     <p class="title">
-                        <span>${item.ability.language.displayName}</span>
-                        ${item.ability.stat.isGrantedByScepter ?`<img src="${utils.getImageUrl("scepter")}" alt="" class="scepter"></p>`:""}
-                        ${item.ability.stat.isGrantedByShard ?`<img src="${utils.getImageUrl("shard")}" alt="" class="shard"></p>`:""}
+                        <span class="name">${item.name_loc}</span>
+                        ${item.ability_is_innate?`<span class="is_innate">先天技能</span>`:""}
+                        ${item.ability_is_granted_by_scepter ?`<img src="${utils.getImageUrl("scepter")}" class="scepter">`:""}
+                        ${item.ability_is_granted_by_shard ?`<img src="${utils.getImageUrl("shard")}" class="shard">`:""}
                     </p>
-                <div class="img_stats">
-                    <img src="${utils.getImageUrl(item.ability.name, ImageType.Abilities)}" alt="" />
-                    <div class="stats">
-                        <p class="behavior">技能：${(Array.isArray(dotaconstants.abilities[item.ability.name].behavior) ? dotaconstants.abilities[item.ability.name].behavior : [dotaconstants.abilities[item.ability.name].behavior])
-                            .filter((beh) => beh !== "Hidden" || !(item.ability.stat.isGrantedByShard || item.ability.stat.isGrantedByScepter))
-                            .map((beh) => d2a.behavior[beh])
-                            .join("/")}</p>
-                        ${dotaconstants.abilities[item.ability.name].target_team
-                                ? `<p class="target_team">影响：${(Array.isArray(dotaconstants.abilities[item.ability.name].target_team)
-                                ? dotaconstants.abilities[item.ability.name].target_team
-                                : [dotaconstants.abilities[item.ability.name].target_team])
-                                .map((tt) => d2a.target_team[tt])
-                                .join("/")}</p>`
-                                : ""}
-                        ${!Array.isArray(dotaconstants.abilities[item.ability.name].dmg_type) && dotaconstants.abilities[item.ability.name].dmg_type
-                                ? `<p class="dmg_type ${dotaconstants.abilities[item.ability.name].dmg_type}">伤害类型：</p>`
-                                : ""}
-                        ${dotaconstants.abilities[item.ability.name].dispellable
-                                ? `<p class="dispellable ${dotaconstants.abilities[item.ability.name].dispellable == "Strong Dispels Only" ? "Strong" : dotaconstants.abilities[item.ability.name].dispellable}">能否驱散：</p>`
-                                : ""}
-                        ${!Array.isArray(dotaconstants.abilities[item.ability.name].bkbpierce) && dotaconstants.abilities[item.ability.name].bkbpierce
-                                ? `<p class="bkbpierce">无视减益免疫： ${dotaconstants.abilities[item.ability.name].bkbpierce == "Yes" ? "是" : "否"}</p>`
-                                : ""}
+                    <div class="img_stats">
+                        <img src="${utils.getImageUrl(item.name, ImageType.Abilities)}" onerror="this.onerror=null; this.src='${utils.getImageUrl(`innate_icon`,ImageType.Icons)}';"/>
+                        <div class="stats">
+                            <p class="behavior">技能：${(Array.isArray(dotaconstants.abilities[item.name].behavior) ? dotaconstants.abilities[item.name].behavior : [dotaconstants.abilities[item.name].behavior])
+                                .filter((beh) => beh !== "Hidden" || !(item.ability_is_granted_by_shard || item.ability_is_granted_by_scepter))
+                                .map((beh) => d2a.behavior[beh])
+                                .join("/")}</p>
+                            ${dotaconstants.abilities[item.name].target_team
+                                    ? `<p class="target_team">影响：${(Array.isArray(dotaconstants.abilities[item.name].target_team)
+                                    ? dotaconstants.abilities[item.name].target_team
+                                    : [dotaconstants.abilities[item.name].target_team])
+                                    .map((tt) => d2a.target_team[tt])
+                                    .join("/")}</p>`
+                                    : ""}
+                            ${!Array.isArray(dotaconstants.abilities[item.name].dmg_type) && dotaconstants.abilities[item.name].dmg_type
+                                    ? `<p class="dmg_type ${dotaconstants.abilities[item.name].dmg_type}">伤害类型：</p>`
+                                    : ""}
+                            ${dotaconstants.abilities[item.name].dispellable
+                                    ? `<p class="dispellable ${dotaconstants.abilities[item.name].dispellable == "Strong Dispels Only" ? "Strong" : dotaconstants.abilities[item.name].dispellable}">能否驱散：</p>`
+                                    : ""}
+                            ${!Array.isArray(dotaconstants.abilities[item.name].bkbpierce) && dotaconstants.abilities[item.name].bkbpierce
+                                    ? `<p class="bkbpierce">无视减益免疫： ${dotaconstants.abilities[item.name].bkbpierce == "Yes" ? "是" : "否"}</p>`
+                                    : ""}
+                        </div>
                     </div>
-                </div>
-                ${item.ability.language.description.map((desc) => `<p class="description">${desc}</p>`).join("")}
-                ${item.ability.language.aghanimDescription
-                ? `<p class="aghanim_description">
-                    <span class="title"><img src="${utils.getImageUrl("scepter")}" alt="" class="scepter">阿哈利姆神杖</span>
-                    <span class="desc">${item.ability.language.aghanimDescription}</span>
-                </p>` : ""}
-                ${item.ability.language.shardDescription
-                ? `<p class="aghanim_description">
-                    <span class="title"><img src="${utils.getImageUrl("shard")}" alt="" class="shard">阿哈利姆魔晶</span>
-                    <span class="desc">${item.ability.language.shardDescription}</span>
-                </p>` : ""}
-                <div class="notes"${!item.ability.language.notes.length ? ` style="display:none;"` : ""}>
-                    ${item.ability.language.notes.map((note) => `<p>${note}</p>`).join("")}
-                </div>
-                <div class="attributes">
-                ${item.ability.language.attributes
-                    .map((attr) => {
-                        const parts = attr.split("：");
-                        return `<p><span class="item">${parts[0]}</span><span class="values">${parts[1]}</span></p>`;
-                    })
-                    .join("")}
-                </div>
-                <p>
-                    ${dotaconstants.abilities[item.ability.name].cd ?
-                    `<span class="cooldown"> ${(Array.isArray(dotaconstants.abilities[item.ability.name].cd)
-                        ? dotaconstants.abilities[item.ability.name].cd
-                        : [dotaconstants.abilities[item.ability.name].cd]).join(" / ")}
-                    </span>` : ""}
-                    ${dotaconstants.abilities[item.ability.name].mc ?
-                    `<span class="mana_cost"> ${(Array.isArray(dotaconstants.abilities[item.ability.name].mc)
-                        ? dotaconstants.abilities[item.ability.name].mc
-                        : [dotaconstants.abilities[item.ability.name].mc]).join(" / ")}
-                    </span>` : ""}
-                </p>
-                <p class="lore"${!item.ability.language.lore ? ` style="display:none;"` : ""}>${item.ability.language.lore}</p>
-            </div>`).join("")}
+                    <p class="description">${item.desc_loc}</p>
+                    ${item.facets_loc.map((facet_loc,index)=>(facet_loc!=""?`
+                    <div class="facet">
+                        <div class="name_back type_${hero.facets[index].color}"></div>
+                        <div class="name_line type_${hero.facets[index].color}"></div>
+                        <p class="name">
+                            <img src="${utils.getImageUrl(hero.facets[index].icon, ImageType.IconsFacets)}" />
+                            <span>${hero.facets[index].title_loc}</span>
+                        </p>
+                        <div class="content">
+                            <div class="ability">
+                                <div class="description">${hero.facets[index].abilities.find(ab=>ab.id==item.id)?.description_ability_loc}</div>
+                            </div>
+                        </div>
+                    </div>
+                    `:"")).join("")}
+                    ${item.ability_has_scepter&&!item.ability_is_granted_by_scepter
+                    ? `<p class="aghanim_description">
+                        <span class="title"><img src="${utils.getImageUrl("scepter")}"class="scepter">阿哈利姆神杖</span>
+                        <span class="desc">${item.scepter_loc}</span>
+                    </p>` : ""}
+                    ${item.ability_has_shard&&!item.ability_is_granted_by_shard
+                    ? `<p class="aghanim_description">
+                        <span class="title"><img src="${utils.getImageUrl("shard")}"class="shard">阿哈利姆魔晶</span>
+                        <span class="desc">${item.shard_loc}</span>
+                    </p>` : ""}
+                    <div class="notes"${!item.notes_loc.length ? ` style="display:none;"` : ""}>
+                        ${item.notes_loc.map((note) => `<p>${note}</p>`).join("")}
+                    </div>
+                    <div class="attributes">
+                    ${item.special_values
+                        .filter(sv => sv.heading_loc)
+                        .map((sv) => `<p><span class="item">${sv.heading_loc}</span><span class="values">${sv.values_float.map(value=>value+(sv.is_percentage?"%":"")).join(" / ")}${sv.bonuses.map(bonus=>` (<img src="${utils.getImageUrl("talents","icons","svg")}"/>${(bonus.value>0?"+":"")+bonus.value+(sv.is_percentage?"%":"")})`).join(" ")}</span></p>`)
+                        .join("")}
+                    </div>
+                    <p>
+                        ${item.special_values.find(sv=>sv.name=="AbilityCooldown").values_float.length && !(item.special_values.find(sv=>sv.name=="AbilityCooldown").values_float.length === 1 && item.special_values.find(sv=>sv.name=="AbilityCooldown").values_float[0] === 0) ?
+                        `<span class="cooldown"> ${item.special_values.find(sv=>sv.name=="AbilityCooldown").values_float.join(" / ")}
+                        </span>` : ""}
+                        ${item.special_values.find(sv=>sv.name=="AbilityManaCost").values_float.length && !(item.special_values.find(sv=>sv.name=="AbilityManaCost").values_float.length === 1 && item.special_values.find(sv=>sv.name=="AbilityManaCost").values_float[0] === 0) ?
+                        `<span class="mana_cost"> ${item.special_values.find(sv=>sv.name=="AbilityManaCost").values_float.join(" / ")}
+                        </span>` : ""}
+                    </p>
+                    <p class="lore"${!item.lore_loc ? ` style="display:none;"` : ""}>${item.lore_loc}</p>
+                </div>`).join("")}
+            </div>
+            <div class="lore">
+                ${hero.bio_loc}
+            </div>` %>
         </div>
-        <div class="lore">
-            ${hero.language.lore}
-        </div>` %>
     </body>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const items = document.querySelectorAll('.skills > .skill');
+            items.forEach(item => {
+                // const name = item.getAttribute('data-name');
+                const abilityIsInnate = item.getAttribute('data-ability') === 'true';
+                const img = item.querySelector('.img_stats > img');
+                const imageUrl = img.src;
+
+                // Check if image exists
+                const image = new Image();
+                image.src = imageUrl;
+                image.onload = function() {
+                    // Image exists, do nothing
+                };
+                image.onerror = function() {
+                    // Image doesn't exist
+                    if (abilityIsInnate) {
+                        item.style.order = -1;
+                        item.style.flexBasis = "100%";
+                        img.src = '<%- utils.getImageUrl("innate_icon",ImageType.Icons) %>';  // Set backup image URL
+                        // item.querySelector(".cooldown").style.display = "none";
+                        // item.querySelector(".mana_cost").style.display = "none";
+                    }
+                };
+            });
+        });
+    </script>
 </html>