feat: 练度统计

apps/guide.js

@@ -95,13 +95,13 @@ export class Guide extends ZZZPlugin {
     group = Number(group);
     if (group > this.maxNum) {
       await this.reply(`超过攻略数量（${this.maxNum}）`);
-      return;
+      return false;
     }
     const name = atlasToName(atlas);
 
     if (!name) {
       await this.reply('该角色不存在');
-      return;
+      return false;
     }
 
     if (group === 0) {

apps/manage.js

@@ -142,7 +142,7 @@ export class Panel extends ZZZPlugin {
     if (!this.e.isMaster) return false;
     await this.reply('【注意】正在删除所有资源图片，后续使用需要重新下载！');
     if (fs.existsSync(imageResourcesPath)) {
-      fs.rmdirSync(imageResourcesPath, { recursive: true });
+      fs.rmSync(imageResourcesPath, { recursive: true });
     }
     await this.reply('资源图片已删除！');
   }

apps/panel.js

@@ -4,8 +4,6 @@ import { rulePrefix } from '../lib/common.js';
 import { getPanelList, refreshPanel, getPanel } from '../lib/avatar.js';
 import settings from '../lib/settings.js';
 import _ from 'lodash';
-import { getMapData } from '../utils/file.js';
-const skilldict = getMapData('SkillData');
 
 export class Panel extends ZZZPlugin {
   constructor() {
@@ -68,6 +66,10 @@ export class Panel extends ZZZPlugin {
     const uid = await this.getUID();
     if (!uid) return false;
     const result = getPanelList(uid);
+    if (!result) {
+      await this.reply('未找到面板数据，请先%刷新面板');
+      return false;
+    }
     await this.getPlayerInfo();
     const timer = setTimeout(() => {
       if (this?.reply) {
@@ -112,20 +114,45 @@ export class Panel extends ZZZPlugin {
     const uid = await this.getUID();
     if (!uid) return false;
     const result = getPanelList(uid);
-
+    if (!result) {
+      await this.reply('未找到面板数据，请先%刷新面板');
+      return false;
+    }
+    await this.getPlayerInfo();
     result.sort((a, b) => {
       return b.proficiency_score - a.proficiency_score;
     });
-
+    const WeaponCount = result.filter(item => item?.weapon).length,
-    result.forEach(item => {
+      SWeaponCount = result.filter(
-      logger.debug(item.name_mi18n, item.proficiency_score);
+        item => item?.weapon && item.weapon.rarity === 'S'
-    });
+      ).length;
-
+    const general = {
+      total: result.length,
+      SCount: result.filter(item => item.rarity === 'S').length,
+      SWeaponRate: (SWeaponCount / WeaponCount) * 100,
+      SSSCount: result.reduce((acc, item) => {
+        if (item.equip) {
+          acc += item.equip.filter(
+            equip => equip.comment === 'SSS' || equip.comment === 'ACE'
+          ).length;
+        }
+        return acc;
+      }, 0),
+      highRank: result.filter(item => item.rank > 4).length,
+    };
+    const timer = setTimeout(() => {
+      if (this?.reply) {
+        this.reply('查询成功，正在下载图片资源，请稍候。');
+      }
+    }, 3000);
+    for (const item of result) {
+      await item.get_small_basic_assets();
+    }
+    clearTimeout(timer);
     const finalData = {
-      count: result?.length || 0,
+      general,
       list: result,
     };
-
+    await render(this.e, 'proficiency/index.html', finalData);
-    // await render(this.e, 'panel/proficiency.html', finalData);
   }
 }

lib/download.js

@@ -7,6 +7,10 @@ import { char, equip, weapon } from './convert.js';
 import { getResourceRemotePath } from './assets.js';
 
 const ZZZ_SQUARE_AVATAR_PATH = path.join(imageResourcesPath, 'square_avatar');
+const ZZZ_SMALL_SQUARE_AVATAR_PATH = path.join(
+  imageResourcesPath,
+  'role_general'
+);
 const ZZZ_SQUARE_BANGBOO_PATH = path.join(
   imageResourcesPath,
   'bangboo_square_avatar'
@@ -65,6 +69,24 @@ export const getSquareAvatar = async charID => {
   return download;
 };
 
+/**
+ * 获取角色头像（小方形）
+ * @param {string | number} charID
+ * @returns Promise<string>
+ * @returns {Promise<string>}
+ */
+export const getSmallSquareAvatar = async charID => {
+  const sprite = char.IDToCharSprite(charID);
+  if (!sprite) return null;
+  const filename = `IconRoleGeneral${sprite}.png`;
+  const avatarPath = path.join(ZZZ_SMALL_SQUARE_AVATAR_PATH, filename);
+  if (fs.existsSync(avatarPath)) return avatarPath;
+  const url = await getResourceRemotePath('role_general', filename);
+  const savePath = avatarPath;
+  const download = await downloadFile(url, savePath);
+  return download;
+};
+
 /**
  * 获取邦布头像（方形）
  * @param {string | number} bangbooId

model/avatar.js

@@ -1,5 +1,9 @@
 import { element, property } from '../lib/convert.js';
-import { getRoleImage, getSquareAvatar } from '../lib/download.js';
+import {
+  getRoleImage,
+  getSmallSquareAvatar,
+  getSquareAvatar,
+} from '../lib/download.js';
 import { imageResourcesPath } from '../lib/path.js';
 import { Equip, Weapon } from './equip.js';
 import { Property } from './property.js';
@@ -210,41 +214,41 @@ export class ZZZAvatarInfo {
       ranks,
       isNew,
     } = data;
-    /** @type {number} */
+    /** @type {number} 角色ID */
     this.id = id;
-    /** @type {number} */
+    /** @type {number} 角色等级 */
     this.level = level;
-    /** @type {string} */
+    /** @type {string} 角色名称 */
     this.name_mi18n = name_mi18n;
-    /** @type {string} */
+    /** @type {string} 角色全名 */
     this.full_name_mi18n = full_name_mi18n;
-    /** @type {number} */
+    /** @type {number} 元素种类 */
     this.element_type = element_type;
     /** @type {string} */
     this.camp_name_mi18n = camp_name_mi18n;
     /** @type {number} */
     this.avatar_profession = avatar_profession;
-    /** @type {string} */
+    /** @type {string} 稀有度 */
     this.rarity = rarity;
     /** @type {string} */
     this.group_icon_path = group_icon_path;
     /** @type {string} */
     this.hollow_icon_path = hollow_icon_path;
-    /** @type {Equip[]} */
+    /** @type {Equip[]} 驱动盘 */
     this.equip =
       (equip &&
         (Array.isArray(equip)
           ? equip.map(equip => new Equip(equip))
           : new Equip(equip))) ||
       [];
-    /** @type {Weapon} */
+    /** @type {Weapon} 武器 */
     this.weapon = weapon ? new Weapon(weapon) : null;
-    /** @type {Property[]} */
+    /** @type {Property[]} 属性 */
     this.properties =
       properties && properties.map(property => new Property(property));
-    /** @type {Skill[]} */
+    /** @type {Skill[]} 技能 */
     this.skills = skills && skills.map(skill => new Skill(skill));
-    /** @type {number} */
+    /** @type {number} 影 */
     this.rank = rank;
     /** @type {Rank[]} */
     this.ranks = ranks && ranks.map(rank => new Rank(rank));
@@ -254,6 +258,8 @@ export class ZZZAvatarInfo {
     this.element_str = element.IDToElement(element_type);
     /** @type {boolean} */
     this.isNew = isNew;
+    /** @type {number}  等级级别（取十位数字）*/
+    this.level_rank = Math.floor(this.level / 10);
     for (const equip of this.equip) {
       equip.get_score(this.id);
     }
@@ -467,12 +473,31 @@ export class ZZZAvatarInfo {
     return score;
   }
 
+  /**
+   * 获取基础资源
+   * @returns {Promise<void>}
+   */
   async get_basic_assets() {
     const result = await getSquareAvatar(this.id);
     /** @type {string} */
     this.square_icon = result;
   }
 
+  /**
+   * 获取基础小资源
+   * @returns {Promise<void>}
+   */
+  async get_small_basic_assets() {
+    const result = await getSmallSquareAvatar(this.id);
+    /** @type {string} */
+    this.small_square_icon = result;
+    await this?.weapon?.get_assets?.();
+  }
+
+  /**
+   * 获取详细资源
+   * @returns {Promise<void>}
+   */
   async get_detail_assets() {
     const custom_panel_images = path.join(
       imageResourcesPath,
@@ -501,6 +526,8 @@ export class ZZZAvatarInfo {
 
   async get_assets() {
     await this.get_basic_assets();
+    await this.get_detail_assets();
+    await this.get_small_basic_assets();
   }
 }
 

model/equip.js

@@ -342,6 +342,8 @@ export class Weapon {
     this.talent_title = talent_title;
     this.talent_content = talent_content;
     this.profession = profession;
+    /** @type {number} 等级级别（取十位数字） */
+    this.level_rank = Math.floor(level / 10);
   }
 
   async get_assets() {

resources/common/style/index.css

@@ -195,10 +195,12 @@
 .special-title .bg-content {
   position: absolute;
   bottom: -0.1em;
-  left: 50%;
+  left: 0;
-  transform: translate(-50%, 0) skewX(-8deg);
+  transform: skewX(-8deg);
   color: rgba(255, 255, 255, 0.1);
   font-size: 2.7em;
+  width: 100%;
+  text-align: center;
 }
 .special-title .content {
   flex-grow: 1;

resources/common/style/index.scss

@@ -222,10 +222,12 @@
   .bg-content {
     position: absolute;
     bottom: -0.1em;
-    left: 50%;
+    left: 0;
-    transform: translate(-50%, 0) skewX(-8deg);
+    transform: skewX(-8deg);
     color: rgba(255, 255, 255, 0.1);
     font-size: 2.7em;
+    width: 100%;
+    text-align: center;
   }
   .content {
     flex-grow: 1;

resources/panel/list.html

@@ -31,6 +31,4 @@
     {{/each}}
   </div>
 </div>
-{{/block}}
+{{/block}}
-
-</html>

resources/panel/refresh.html

@@ -34,6 +34,4 @@
     {{/each}}
   </div>
 </div>
-{{/block}}
+{{/block}}
-
-</html>

resources/proficiency/index.css

@@ -0,0 +1,296 @@
+.user-info {
+  margin: 0 2em;
+  font-size: 0.9em;
+}
+
+.general-info {
+  border-image: url("./images/BgFrame.png");
+  border-image-slice: 105 82.5 162.5 82.5 fill;
+  border-image-width: 3em 1em 1em 1em;
+  border-image-outset: 0em 0em 0em 0em;
+  border-image-repeat: stretch;
+  overflow: hidden;
+  padding: 4.2em 1em 1em 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: space-around;
+  margin: 0 2em;
+}
+.general-info .item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8em;
+}
+.general-info .item .value {
+  background-color: rgb(214, 188, 62);
+  color: rgb(0, 0, 0);
+  padding: 0.1em 0.5em;
+  border-radius: 0.3em;
+  font-size: 1.2em;
+}
+
+.special-title {
+  margin: 1em auto;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  padding: 0 2em;
+  margin-bottom: 1.5em;
+}
+.list .skew {
+  transform: skewX(-25deg);
+}
+.list .skew .content {
+  transform: skewX(25deg);
+}
+.list .item {
+  border-width: 0.1em;
+  border-style: solid;
+  margin: 0 0.5em;
+  border-radius: 0.5em;
+  overflow: hidden;
+}
+.list .item.s, .list .item.S {
+  border-color: rgb(233, 190, 79);
+}
+.list .item.a, .list .item.A {
+  border-color: rgb(164, 41, 210);
+}
+.list .item .content {
+  display: flex;
+  position: relative;
+}
+.list .item .content .tag {
+  position: absolute;
+  z-index: 1;
+  background-color: rgb(107, 107, 107);
+  font-size: 0.6em;
+  padding: 0.1em 1em;
+  border-radius: 0.5em;
+  white-space: nowrap;
+}
+.list .item .content .ranks {
+  top: 0;
+  left: 0.4em;
+}
+.list .item .content .level {
+  bottom: 0;
+  left: 8em;
+}
+.list .item .content .property {
+  width: 0.8em;
+  position: absolute;
+  z-index: 1;
+  left: 6.9em;
+  top: 0.1em;
+}
+.list .item .content .avatar {
+  border-left: 0.1em solid;
+  border-right: 0.1em solid;
+  overflow: hidden;
+  margin-left: 1.2em;
+}
+.list .item .content .avatar .content {
+  width: 4.9em;
+  height: 2em;
+}
+.list .item .content .avatar .content img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.list .item .content .skills {
+  margin-left: 1.5em;
+  width: 10em;
+  height: 1.9em;
+  background: url("./images/skill_bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 0.1em;
+  padding-left: 0.05em;
+}
+.list .item .content .skills .skill {
+  width: 1.42em;
+  aspect-ratio: 1;
+  margin-right: 1.1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.6em;
+}
+.list .item .content .weapon {
+  border-left: 0.1em solid;
+  border-right: 0.1em solid;
+  overflow: hidden;
+  margin-left: -0.5em;
+}
+.list .item .content .weapon .content {
+  width: 4.5em;
+  height: 2em;
+}
+.list .item .content .weapon .content img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.list .item .content .weapon_info {
+  font-size: 0.6em;
+  margin-left: 0.5em;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 6.5em;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.list .item .content .weapon_info .empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(218, 218, 218);
+  height: 100%;
+}
+.list .item .content .weapon_info .base {
+  display: flex;
+  gap: 0.1em;
+  margin-top: 0.1em;
+}
+.list .item .content .weapon_info .base .rarity-icon {
+  width: 1.5em;
+}
+.list .item .content .weapon_info .base .name {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.list .item .content .weapon_info .tags {
+  display: flex;
+  gap: 0.05em;
+  font-size: 1.7em;
+  margin-left: -1.1em;
+}
+.list .item .content .weapon_info .tags .tag {
+  position: relative;
+}
+.list .item .content .equip {
+  border-left: 0.1em solid;
+  overflow: hidden;
+  flex-grow: 1;
+  margin-left: 0.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.list .item .content .equip .content {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.6em;
+  justify-content: center;
+  align-items: center;
+  text-wrap: nowrap;
+  white-space: nowrap;
+}
+.list .item .content .equip .content .comment {
+  font-size: 1.2em;
+}
+.list .item .content .equip .content.c .comment, .list .item .content .equip .content.C .comment {
+  background: linear-gradient(0deg, rgba(39, 211, 30, 0.3), rgb(39, 211, 30));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.list .item .content .equip .content.b .comment, .list .item .content .equip .content.B .comment {
+  background: linear-gradient(0deg, rgba(94, 189, 249, 0.3), rgb(94, 189, 249));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.list .item .content .equip .content.a .comment, .list .item .content .equip .content.A .comment {
+  background: linear-gradient(0deg, rgba(210, 86, 255, 0.3), rgb(210, 86, 255));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.list .item .content .equip .content.s .comment, .list .item .content .equip .content.S .comment {
+  background: linear-gradient(0deg, rgba(255, 218, 190, 0.3), rgb(255, 218, 190));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.list .item .content .equip .content.ss .comment, .list .item .content .equip .content.SS .comment {
+  background: linear-gradient(0deg, rgba(255, 225, 116, 0.4), rgb(255, 225, 116));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.list .item .content .equip .content.sss .comment, .list .item .content .equip .content.SSS .comment {
+  background: linear-gradient(0deg, rgba(255, 163, 59, 0.4), rgb(255, 163, 59));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.list .item .content .equip .content.ace .comment, .list .item .content .equip .content.ACE .comment {
+  background: linear-gradient(0deg, rgba(255, 59, 59, 0.4), rgb(255, 59, 59));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.list .item .content .r0 {
+  background: rgb(102, 102, 102);
+}
+.list .item .content .r1 {
+  background: rgb(58, 116, 43);
+}
+.list .item .content .r2 {
+  background: rgb(61, 132, 214);
+}
+.list .item .content .r3 {
+  background: rgb(223, 118, 118);
+}
+.list .item .content .r4 {
+  background: rgb(51, 54, 161);
+}
+.list .item .content .r5 {
+  background: rgb(102, 127, 19);
+}
+.list .item .content .r6 {
+  background: rgb(218, 48, 32);
+}
+.list .item .content .r7 {
+  background: rgb(187, 96, 10);
+}
+.list .item .content .r8 {
+  background: rgb(2, 88, 122);
+}
+.list .item .content .r9 {
+  background: rgb(186, 10, 10);
+}
+.list .item.s .avatar,
+.list .item.s .weapon,
+.list .item.s .equip, .list .item.S .avatar,
+.list .item.S .weapon,
+.list .item.S .equip {
+  border-color: rgb(233, 190, 79);
+}
+.list .item.a .avatar,
+.list .item.a .weapon,
+.list .item.a .equip, .list .item.A .avatar,
+.list .item.A .weapon,
+.list .item.A .equip {
+  border-color: rgb(164, 41, 210);
+}
+
+/*# sourceMappingURL=index.css.map */

resources/proficiency/index.html

@@ -0,0 +1,91 @@
+{{extend defaultLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" href="{{@sys.currentPath}}/index.css">
+{{/block}}
+
+{{block 'main'}}
+{{include sys.playerInfo}}
+<div class="general-info">
+  <div class="item">
+    <div class="value">{{general.SCount}}/{{general.total}}</div>
+    <div class="label">S级代理人</div>
+  </div>
+  <div class="item">
+    <div class="value">{{general.SWeaponRate.toFixed(1)}}%</div>
+    <div class="label">S级音擎率</div>
+  </div>
+  <div class="item">
+    <div class="value">{{general.highRank}}/{{general.total}}</div>
+    <div class="label">高影代理人</div>
+  </div>
+  <div class="item">
+    <div class="value">{{general.SSSCount}}</div>
+    <div class="label">SSS+驱动盘</div>
+  </div>
+</div>
+<% include(sys.specialTitle, {en: 'Avatar List' , cn: '练度统计' }) %>
+  <div class="list">
+    {{each list item}}
+    <div class="item skew {{item.rarity}}">
+      <div class="content">
+        <div class="tag skew ranks r{{item.rank}}">
+          <div class="content">{{item.rank}}影</div>
+        </div>
+        <div class="tag skew level r{{item.level_rank}}">
+          <div class="content">Lv{{item.level}}</div>
+        </div>
+        <div class="property ice"></div>
+        <div class="avatar skew">
+          <div class="content">
+            <img src="{{item.small_square_icon}}" alt="">
+          </div>
+        </div>
+        <div class="skills">
+          <div class="skill">{{item.skills[0].level}}</div>
+          <div class="skill">{{item.skills[2].level}}</div>
+          <div class="skill">{{item.skills[5].level}}</div>
+          <div class="skill">{{item.skills[1].level}}</div>
+          <div class="skill">{{item.skills[3].level}}</div>
+          <div class="skill">{{item.skills[4].level}}</div>
+        </div>
+        <div class="weapon skew">
+          <div class="content">
+            {{if item.weapon}}
+            <img src="{{item.weapon.square_icon}}" alt="">
+            {{/if}}
+          </div>
+        </div>
+        <div class="weapon_info">
+          {{if item.weapon}}
+          <div class="base">
+            <div class="rarity-icon {{item.weapon.rarity}}"></div>
+            <div class="name">{{item.weapon.name}}</div>
+          </div>
+          <div class="tags">
+            <div class="tag skew r{{item.weapon.star}}">
+              <div class="content">{{item.weapon.star}}精</div>
+            </div>
+            <div class="tag skew r{{item.weapon.level_rank}}">
+              <div class="content">Lv{{item.weapon.level}}</div>
+            </div>
+          </div>
+          {{else}}
+            <div class="empty">
+              未装配
+            </div>
+            {{/if}}
+        </div>
+        <div class="equip skew">
+          <div class="content {{item.equip_comment}}">
+            <div>驱动盘</div>
+            {{if item.equip_comment}}
+            <div class="comment">{{item.equip_comment}}</div>
+            {{/if}}
+          </div>
+        </div>
+      </div>
+    </div>
+    {{/each}}
+  </div>
+  {{/block}}

resources/proficiency/index.scss

@@ -0,0 +1,344 @@
+.user-info {
+  margin: 0 2em;
+  font-size: 0.9em;
+}
+.general-info {
+  border-image: url('./images/BgFrame.png');
+  border-image-slice: 105 82.5 162.5 82.5 fill;
+  border-image-width: 3em 1em 1em 1em;
+  border-image-outset: 0em 0em 0em 0em;
+  border-image-repeat: stretch;
+  overflow: hidden;
+  padding: 4.2em 1em 1em 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: space-around;
+  margin: 0 2em;
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8em;
+    .value {
+      background-color: rgb(214, 188, 62);
+      color: rgb(0, 0, 0);
+      padding: 0.1em 0.5em;
+      border-radius: 0.3em;
+      font-size: 1.2em;
+    }
+  }
+}
+.special-title {
+  margin: 1em auto;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  padding: 0 2em;
+  margin-bottom: 1.5em;
+  .skew {
+    transform: skewX(-25deg);
+    .content {
+      transform: skewX(25deg);
+    }
+  }
+  .item {
+    border-width: 0.1em;
+    border-style: solid;
+    margin: 0 0.5em;
+    border-radius: 0.5em;
+    overflow: hidden;
+    &.s,
+    &.S {
+      border-color: rgb(233, 190, 79);
+    }
+    &.a,
+    &.A {
+      border-color: rgb(164, 41, 210);
+    }
+    .content {
+      display: flex;
+      position: relative;
+      .tag {
+        position: absolute;
+        z-index: 1;
+        background-color: rgb(107, 107, 107);
+        font-size: 0.6em;
+        padding: 0.1em 1em;
+        border-radius: 0.5em;
+        white-space: nowrap;
+      }
+      .ranks {
+        top: 0;
+        left: 0.4em;
+      }
+      .level {
+        bottom: 0;
+        left: 8em;
+      }
+      .property {
+        width: 0.8em;
+        position: absolute;
+        z-index: 1;
+        left: 6.9em;
+        top: 0.1em;
+      }
+      .avatar {
+        border-left: 0.1em solid;
+        border-right: 0.1em solid;
+        overflow: hidden;
+        margin-left: 1.2em;
+        .content {
+          width: 4.9em;
+          height: 2em;
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+      .skills {
+        margin-left: 1.5em;
+        width: 10em;
+        height: 1.9em;
+        background: url('./images/skill_bg.png');
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        display: flex;
+        align-items: flex-end;
+        padding-bottom: 0.1em;
+        padding-left: 0.05em;
+        .skill {
+          width: 1.42em;
+          aspect-ratio: 1;
+          margin-right: 1.1em;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 0.6em;
+        }
+      }
+      .weapon {
+        border-left: 0.1em solid;
+        border-right: 0.1em solid;
+        overflow: hidden;
+        margin-left: -0.5em;
+        .content {
+          width: 4.5em;
+          height: 2em;
+          img {
+            width: 100%;
+            height: 100%;
+            display: block;
+            object-fit: cover;
+          }
+        }
+      }
+      .weapon_info {
+        font-size: 0.6em;
+        margin-left: 0.5em;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 6.5em;
+        flex-grow: 0;
+        flex-shrink: 0;
+        .empty {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: rgb(218, 218, 218);
+          height: 100%;
+        }
+        .base {
+          display: flex;
+          gap: 0.1em;
+          margin-top: 0.1em;
+          .rarity-icon {
+            width: 1.5em;
+          }
+          .name {
+            flex-grow: 1;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .tags {
+          display: flex;
+          gap: 0.05em;
+          font-size: 1.7em;
+          margin-left: -1.1em;
+          .tag {
+            position: relative;
+          }
+        }
+      }
+      .equip {
+        border-left: 0.1em solid;
+        overflow: hidden;
+        flex-grow: 1;
+        margin-left: 0.5em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .content {
+          display: flex;
+          flex-direction: column;
+          font-size: 0.6em;
+          justify-content: center;
+          align-items: center;
+          text-wrap: nowrap;
+          white-space: nowrap;
+          .comment {
+            font-size: 1.2em;
+          }
+          &.c,
+          &.C {
+            .comment {
+              background: linear-gradient(
+                0deg,
+                rgba(39, 211, 30, 0.3),
+                rgba(39, 211, 30, 1)
+              );
+              -webkit-background-clip: text;
+              background-clip: text;
+              color: transparent;
+            }
+          }
+          &.b,
+          &.B {
+            .comment {
+              background: linear-gradient(
+                0deg,
+                rgba(94, 189, 249, 0.3),
+                rgba(94, 189, 249, 1)
+              );
+              -webkit-background-clip: text;
+              background-clip: text;
+              color: transparent;
+            }
+          }
+          &.a,
+          &.A {
+            .comment {
+              background: linear-gradient(
+                0deg,
+                rgba(210, 86, 255, 0.3),
+                rgb(210, 86, 255)
+              );
+              -webkit-background-clip: text;
+              background-clip: text;
+              color: transparent;
+            }
+          }
+          &.s,
+          &.S {
+            .comment {
+              background: linear-gradient(
+                0deg,
+                rgba(255, 218, 190, 0.3),
+                rgba(255, 218, 190, 1)
+              );
+              -webkit-background-clip: text;
+              background-clip: text;
+              color: transparent;
+            }
+          }
+          &.ss,
+          &.SS {
+            .comment {
+              background: linear-gradient(
+                0deg,
+                rgba(255, 225, 116, 0.4),
+                rgba(255, 225, 116, 1)
+              );
+              -webkit-background-clip: text;
+              background-clip: text;
+              color: transparent;
+            }
+          }
+          &.sss,
+          &.SSS {
+            .comment {
+              background: linear-gradient(
+                0deg,
+                rgba(255, 163, 59, 0.4),
+                rgba(255, 163, 59, 1)
+              );
+              -webkit-background-clip: text;
+              background-clip: text;
+              color: transparent;
+            }
+          }
+          &.ace,
+          &.ACE {
+            .comment {
+              background: linear-gradient(
+                0deg,
+                rgba(255, 59, 59, 0.4),
+                rgb(255, 59, 59)
+              );
+              -webkit-background-clip: text;
+              background-clip: text;
+              color: transparent;
+            }
+          }
+        }
+      }
+      .r0 {
+        background: rgb(102, 102, 102);
+      }
+      .r1 {
+        background: rgb(58, 116, 43);
+      }
+      .r2 {
+        background: rgb(61, 132, 214);
+      }
+      .r3 {
+        background: rgb(223, 118, 118);
+      }
+      .r4 {
+        background: rgb(51, 54, 161);
+      }
+      .r5 {
+        background: rgb(102, 127, 19);
+      }
+      .r6 {
+        background: rgb(218, 48, 32);
+      }
+      .r7 {
+        background: rgb(187, 96, 10);
+      }
+      .r8 {
+        background: rgb(2, 88, 122);
+      }
+      .r9 {
+        background: rgb(186, 10, 10);
+      }
+    }
+    &.s,
+    &.S {
+      .avatar,
+      .weapon,
+      .equip {
+        border-color: rgb(233, 190, 79);
+      }
+    }
+    &.a,
+    &.A {
+      .avatar,
+      .weapon,
+      .equip {
+        border-color: rgb(164, 41, 210);
+      }
+    }
+  }
+}