feat:abyss

apps/abyss.js

@@ -0,0 +1,47 @@
+import { ZZZPlugin } from '../lib/plugin.js';
+import render from '../lib/render.js';
+import { rulePrefix } from '../lib/common.js';
+import settings from '../lib/settings.js';
+import _ from 'lodash';
+import { ZZZChallenge } from '../model/abyss.js';
+
+export class Abyss extends ZZZPlugin {
+  constructor() {
+    super({
+      name: '[ZZZ-Plugin]abyss',
+      dsc: 'zzz式舆防卫战',
+      event: 'message',
+      priority: _.get(settings.getConfig('priority'), 'abyss', 70),
+      rule: [
+        {
+          reg: `${rulePrefix}(式舆防卫战|式舆|深渊|防卫战|防卫)$`,
+          fnc: 'abyss',
+        },
+      ],
+    });
+  }
+  async abyss() {
+    const { api, deviceFp } = await this.getAPI();
+    if (!api) return false;
+    await this.getPlayerInfo();
+    const abyssData = await api.getFinalData(this.e, 'zzzChallenge', {
+      deviceFp,
+    });
+    if (!abyssData?.has_data) {
+      await this.reply('没有式舆防卫战数据');
+      return false;
+    }
+    const abyss = new ZZZChallenge(abyssData);
+    const timer = setTimeout(() => {
+      if (this?.reply) {
+        this.reply('查询成功，正在下载图片资源，请稍候。');
+      }
+    }, 3000);
+    await abyss.get_assets();
+    clearTimeout(timer);
+    const finalData = {
+      abyss,
+    };
+    await render(this.e, 'abyss/index.html', finalData, this);
+  }
+}

apps/challenge.js

@@ -1,30 +0,0 @@
-import { ZZZPlugin } from '../lib/plugin.js';
-import { rulePrefix } from '../lib/common.js';
-import settings from '../lib/settings.js';
-import _ from 'lodash';
-
-export class Challenge extends ZZZPlugin {
-  constructor() {
-    super({
-      name: '[ZZZ-Plugin]challenge',
-      dsc: 'zzz式舆防卫战',
-      event: 'message',
-      priority: _.get(settings.getConfig('priority'), 'challenge', 70),
-      rule: [
-        {
-          reg: `${rulePrefix}(式舆防卫战|式舆|深渊|防卫战|防卫)$`,
-          fnc: 'challenge',
-        },
-      ],
-    });
-  }
-  async challenge() {
-    const { api, deviceFp } = await this.getAPI();
-    if (!api) return false;
-    await this.getPlayerInfo();
-    const indexData = await api.getFinalData(this.e, 'zzzChallenge', {
-      deviceFp,
-    });
-    await this.reply('data:' + JSON.stringify(indexData));
-  }
-}

defSet/priority.yaml

@@ -1,5 +1,5 @@
 card: 70 # 玩家信息（卡片）
-challenge: 70 # 深渊
+abyss: 70 # 深渊
 gachalog: 70 # 抽卡
 guide: 70 # 攻略
 help: 70 # 帮助

guoba.support.js

@@ -101,7 +101,7 @@ export function supportGuoba() {
           },
         },
         {
-          field: 'priority.challenge',
+          field: 'priority.abyss',
           label: '深渊查询',
           bottomHelpMessage: '设置深渊查询指令优先级',
           component: 'InputNumber',

model/abyss.js

@@ -0,0 +1,371 @@
+import { element } from '../lib/convert.js';
+import { getSquareAvatar, getSquareBangboo } from '../lib/download.js';
+/**
+ * @typedef {Object} IChallengeAvatar
+ * @property {number} id
+ * @property {number} level
+ * @property {string} rarity
+ * @property {number} element_type
+ */
+
+/**
+ * @typedef {Object} IChallengeBangboo
+ * @property {number} id
+ * @property {string} rarity
+ * @property {number} level
+ */
+
+/**
+ * @typedef {Object} IHadalTime
+ * @property {number} year
+ * @property {number} month
+ * @property {number} day
+ * @property {number} hour
+ * @property {number} minute
+ * @property {number} second
+ */
+
+/**
+ * @typedef {Object} IMonsterInfo
+ * @property {number} id
+ * @property {string} name
+ * @property {number} weak_element_type
+ */
+
+/**
+ * @typedef {Object} IBuff
+ * @property {string} title
+ * @property {string} text
+ */
+
+/**
+ * @typedef {Object} IChallengeNode
+ * @property {IChallengeAvatar[]} avatars
+ * @property {IChallengeBangboo} buddy
+ * @property {number[]} element_type_list
+ * @property {IMonsterInfo} monster_info
+ */
+
+/**
+ * @typedef {Object} IFloorChallengeTime
+ * @property {number} year
+ * @property {number} month
+ * @property {number} day
+ * @property {number} hour
+ * @property {number} minute
+ * @property {number} second
+ */
+
+/**
+ * @typedef {Object} IFloorDetail
+ * @property {number} layer_index
+ * @property {string} rating
+ * @property {number} layer_id
+ * @property {IBuff[]} buffs
+ * @property {IChallengeNode} node_1
+ * @property {IChallengeNode} node_2
+ * @property {number} challenge_time
+ * @property {string} zone_name
+ * @property {IFloorChallengeTime} floor_challenge_time
+ */
+
+/**
+ * @typedef {Object} IRating
+ * @property {number} times
+ * @property {string} rating
+ */
+
+/**
+ * @typedef {Object} IZZZChallenge
+ * @property {number} schedule_id
+ * @property {number} begin_time
+ * @property {number} end_time
+ * @property {IRating[]} rating_list
+ * @property {boolean} has_data
+ * @property {IFloorDetail[]} all_floor_detail
+ * @property {number} fast_layer_time
+ * @property {number} max_layer
+ * @property {IHadalTime} hadal_begin_time
+ * @property {IHadalTime} hadal_end_time
+ */
+
+/**
+ * @class ChallengeAvatar.
+ */
+export class ChallengeAvatar {
+  /**
+   * @param {IChallengeAvatar} data
+   */
+  constructor(data) {
+    this.id = data.id;
+    this.level = data.level;
+    this.rarity = data.rarity;
+    this.element_type = data.element_type;
+  }
+
+  async get_assets() {
+    const result = await getSquareAvatar(this.id);
+    this.square_icon = result;
+  }
+
+  get element() {
+    return element.IDToElement(this.element_type);
+  }
+}
+
+/**
+ * @class ChallengeBangboo.
+ */
+export class ChallengeBangboo {
+  /**
+   * @param {IChallengeBangboo} data
+   */
+  constructor(data) {
+    this.id = data.id;
+    this.rarity = data.rarity;
+    this.level = data.level;
+  }
+
+  async get_assets() {
+    const result = await getSquareBangboo(this.id);
+    this.square_icon = result;
+  }
+}
+
+/**
+ * @class MonsterInfo.
+ */
+export class MonsterInfo {
+  /**
+   * @param {IMonsterInfo} data
+   */
+  constructor(data) {
+    this.id = data.id;
+    this.name = data.name;
+    this.weak_element_type = data.weak_element_type;
+  }
+}
+
+/**
+ * @class Buff.
+ */
+export class Buff {
+  /**
+   * @param {IBuff} data
+   */
+  constructor(data) {
+    this.title = data.title;
+    this.text = data.text;
+  }
+}
+
+/**
+ * @class ChallengeNode.
+ */
+export class ChallengeNode {
+  /**
+   * @param {IChallengeNode} data
+   */
+  constructor(data) {
+    /** @type {IChallengeAvatar[]} */
+    this.avatars = data?.avatars?.map(avatar => new ChallengeAvatar(avatar));
+    /** @type {IChallengeBangboo} */
+    this.buddy = data?.buddy && new ChallengeBangboo(data.buddy);
+    /** @type {number[]} */
+    this.element_type_list = data.element_type_list;
+    /** @type {MonsterInfo} */
+    this.monster_info =
+      data?.monster_info && new MonsterInfo(data.monster_info);
+  }
+
+  async get_assets() {
+    if (this.avatars) {
+      await Promise.all(this.avatars.map(avatar => avatar.get_assets()));
+    }
+    if (this.buddy) {
+      await this.buddy.get_assets();
+    }
+  }
+
+  get elements() {
+    return this.element_type_list.map(type => {
+      return element.IDToElement(type);
+    });
+  }
+}
+
+/**
+ * @class FloorChallengeTime.
+ */
+export class FloorChallengeTime {
+  /**
+   * @param {IFloorChallengeTime} data
+   */
+  constructor(data) {
+    /** @type {number} */
+    this.year = data.year;
+    /** @type {number} */
+    this.month = data.month;
+    /** @type {number} */
+    this.day = data.day;
+    /** @type {number} */
+    this.hour = data.hour;
+    /** @type {number} */
+    this.minute = data.minute;
+    /** @type {number} */
+    this.second = data.second;
+  }
+
+  /** @type {string} */
+  get formattedTime() {
+    return `${this.year}/${this.month}/${this.day} ${this.hour}:${this.minute}:${this.second}`;
+  }
+}
+
+/**
+ * @class FloorDetail.
+ */
+export class FloorDetail {
+  /**
+   * @param {IFloorDetail} data
+   */
+  constructor(data) {
+    /** @type {number} */
+    this.layer_index = data.layer_index;
+    /** @type {string} */
+    this.rating = data.rating;
+    /** @type {number} */
+    this.layer_id = data.layer_id;
+    /** @type {IBuff[]} */
+    this.buffs = data.buffs.map(buff => new Buff(buff));
+    /** @type {IChallengeNode} */
+    this.node_1 = data?.node_1 && new ChallengeNode(data.node_1);
+    /** @type {IChallengeNode} */
+    this.node_2 = data?.node_2 && new ChallengeNode(data.node_2);
+    /** @type {number} */
+    this.challenge_time = data.challenge_time;
+    /** @type {string} */
+    this.zone_name = data.zone_name;
+    /** @type {IFloorChallengeTime} */
+    this.floor_challenge_time = new FloorChallengeTime(
+      data.floor_challenge_time
+    );
+  }
+
+  async get_assets() {
+    if (this.node_1) {
+      await this.node_1.get_assets();
+    }
+    if (this.node_2) {
+      await this.node_2.get_assets();
+    }
+  }
+
+  /** @type {string} */
+  get formattedTime() {
+    return (
+      this.floor_challenge_time.year +
+      '年' +
+      this.floor_challenge_time.month +
+      '月' +
+      this.floor_challenge_time.day +
+      '日 ' +
+      this.floor_challenge_time.hour.toString().padStart(2, '0') +
+      ':' +
+      this.floor_challenge_time.minute.toString().padStart(2, '0') +
+      ':' +
+      this.floor_challenge_time.second.toString().padStart(2, '0')
+    );
+  }
+}
+
+/**
+ * @class Rating.
+ */
+export class Rating {
+  /**
+   * @param {IRating} data
+   */
+  constructor(data) {
+    this.times = data.times;
+    this.rating = data.rating;
+  }
+}
+
+/**
+ * @class ZZZChallenge.
+ */
+export class ZZZChallenge {
+  /**
+   * @param {IZZZChallenge} data
+   */
+  constructor(data) {
+    // 类型标注
+    /** @type {number} */
+    this.schedule_id = data.schedule_id;
+    /** @type {number} */
+    this._begin_time = data.begin_time;
+    /** @type {number} */
+    this._end_time = data.end_time;
+    /** @type {IRating[]} */
+    this.rating_list = data.rating_list.map(rating => new Rating(rating));
+    /** @type {boolean} */
+    this.has_data = data.has_data;
+    /** @type {IFloorDetail[]} */
+    this.all_floor_detail = data.all_floor_detail.map(
+      floorDetail => new FloorDetail(floorDetail)
+    );
+    /** @type {number} */
+    this.fast_layer_time = data.fast_layer_time;
+    /** @type {number} */
+    this.max_layer = data.max_layer;
+    /** @type {IHadalTime} */
+    this.hadal_begin_time = data.hadal_begin_time;
+    /** @type {IHadalTime} */
+    this.hadal_end_time = data.hadal_end_time;
+
+    /** @type {{
+     *  S: number;
+     *  A: number;
+     *  B: number;
+     * }} */
+    this.rate_count = {
+      S: this.rating_list.find(rating => rating.rating === 'S')?.times || 0,
+      A: this.rating_list.find(rating => rating.rating === 'A')?.times || 0,
+      B: this.rating_list.find(rating => rating.rating === 'B')?.times || 0,
+    };
+  }
+
+  async get_assets() {
+    await Promise.all(this.all_floor_detail.map(floor => floor.get_assets()));
+  }
+
+  get fast_layer_time_str() {
+    // 将秒数转换为 xx小时xx分钟xx秒 的格式，例如：234 -> 3分钟54秒
+    const seconds = this.fast_layer_time % 60;
+    const minutes = Math.floor(this.fast_layer_time / 60) % 60;
+    const hours = Math.floor(this.fast_layer_time / 3600);
+    return `${hours ? hours + '小时' : ''}${minutes ? minutes + '分钟' : ''}${
+      seconds ? seconds + '秒' : ''
+    }`;
+  }
+
+  /** @type {string} */
+  get begin_time() {
+    return new Date(Number(this._begin_time) * 1000).toLocaleDateString(
+      'en-US',
+      {
+        month: '2-digit',
+        day: '2-digit',
+      }
+    );
+  }
+
+  /** @type {string} */
+  get end_time() {
+    return new Date(Number(this._end_time) * 1000).toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit',
+    });
+  }
+}

resources/abyss/index.css

@@ -0,0 +1,230 @@
+.container {
+  background-image: url("./images/bg2.jpg");
+}
+
+.card {
+  margin: 0 1em;
+}
+.card .user-info {
+  margin: 0 1em;
+}
+.card .status {
+  background: url("./images/status.png") no-repeat center center;
+  background-size: 110% 160%;
+  aspect-ratio: 2.4;
+  overflow: hidden;
+  margin: 0 1em;
+  margin-bottom: 1.5em;
+  padding-top: 5.2em;
+  padding-left: 2em;
+  padding-right: 2em;
+  justify-content: space-around;
+}
+.card .status .info {
+  display: flex;
+  font-size: 2em;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.1em;
+  padding: 0 0.6em;
+}
+.card .status .info .time {
+  color: rgb(127, 127, 127);
+}
+.card .status .info .ranks {
+  display: flex;
+  gap: 0.5em;
+}
+.card .status .info .ranks .rank {
+  width: 1.5em;
+  position: relative;
+}
+.card .status .info .ranks .rank .count {
+  position: absolute;
+  bottom: -0.3em;
+  right: -0.5em;
+  font-size: 0.6em;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2em;
+  height: 1.2em;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.card .status .cost {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1.2em;
+}
+.card .status .cost .item {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5em;
+}
+.card .status .cost .item .label {
+  font-size: 0.68em;
+  margin-bottom: 0.1em;
+  color: rgb(176, 176, 176);
+}
+.card .item-card {
+  border-image-source: url("./images/BgFrame01.png");
+  border-image-slice: 200 100 70 280 fill;
+  border-image-width: 2em 1em 0.7em 2.8em;
+  border-image-outset: 0em 0em 0em 0em;
+  border-image-repeat: stretch stretch;
+  padding: 0.8em 0.5em;
+  margin-bottom: 1em;
+}
+.card .item-card .title {
+  display: flex;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  gap: 0.5em;
+  padding: 0.2em 0.5em;
+  font-size: 1.2em;
+  box-shadow: 0 0.1em 0.05em rgba(0, 0, 0, 0.5);
+}
+.card .item-card .title .rank-icon {
+  width: 1em;
+}
+.card .item-card .title .content {
+  z-index: 0;
+  position: relative;
+}
+.card .item-card .title .content::after {
+  content: attr(data-content);
+  -webkit-text-stroke: 0.22em #000;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+.card .item-card .title.a, .card .item-card .title.A {
+  color: rgb(195, 56, 240);
+}
+.card .item-card .title.b, .card .item-card .title.B {
+  color: rgb(93, 189, 246);
+}
+.card .item-card .title.s, .card .item-card .title.S {
+  color: rgb(240, 145, 53);
+}
+.card .item-card .team {
+  padding: 0.5em 2em;
+}
+.card .item-card .team .info {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.2);
+  align-items: center;
+  margin-bottom: 0.5em;
+}
+.card .item-card .team .info .label {
+  margin-right: auto;
+  padding: 0 0.5em;
+}
+.card .item-card .team .info .time {
+  background-color: rgba(23, 135, 255, 0.2);
+  padding: 0 0.2em;
+  font-size: 0.7em;
+  color: rgba(255, 255, 255, 0.8);
+}
+.card .item-card .team .info .advantage {
+  display: flex;
+  align-items: center;
+  margin-left: 0.3em;
+  font-size: 0.8em;
+  gap: 0.3em;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(0.1em);
+  height: 100%;
+  padding: 0.1em 0.4em;
+  border-radius: 0.4em 0 0 0.4em;
+  min-width: 5.5em;
+}
+.card .item-card .team .info .advantage .property {
+  width: 1em;
+}
+.card .item-card .team .list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 0.8fr;
+  align-items: flex-end;
+  gap: 2em;
+}
+.card .item-card .team .list .item {
+  width: 100%;
+  position: relative;
+}
+.card .item-card .team .list .item > * {
+  position: inherit;
+  z-index: 1;
+}
+.card .item-card .team .list .item.bangboo {
+  font-size: 0.8em;
+}
+.card .item-card .team .list .item::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0.2em;
+  left: -0.2em;
+  width: 100%;
+  height: 100%;
+  background: rgb(138, 51, 183);
+  z-index: 0;
+}
+.card .item-card .team .list .item .rank {
+  position: absolute;
+  top: 0.2em;
+  left: 0.1em;
+  width: 1.5em;
+  color: white;
+  z-index: 2;
+}
+.card .item-card .team .list .item.rankS::after {
+  background: rgb(230, 119, 51);
+}
+.card .item-card .team .list .item.rankB::after {
+  background: rgb(93, 183, 249);
+}
+.card .item-card .team .list .item .image {
+  width: 100%;
+  aspect-ratio: 0.8;
+  background-color: #e2e2e2;
+}
+.card .item-card .team .list .item .image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+.card .item-card .team .list .item .c-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgb(0, 0, 0);
+  color: white;
+  display: flex;
+  text-align: center;
+}
+.card .item-card .team .list .item .c-info .level {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+.card .item-card .team .list .item .property {
+  position: absolute;
+  top: 0.2em;
+  right: 0.1em;
+  width: 1.6em;
+  background-color: #000;
+  border-radius: 50%;
+  border: solid 0.1em #000;
+  color: white;
+  z-index: 2;
+}
+
+/*# sourceMappingURL=index.css.map */

resources/abyss/index.html

@@ -0,0 +1,140 @@
+{{extend defaultLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" href="{{@sys.currentPath}}/index.css">
+{{/block}}
+
+{{block 'main'}}
+<div class="card">
+  {{include sys.playerInfo}}
+  <div class="status">
+    <div class="info">
+      <div class="time">{{abyss.begin_time}}</div>
+      <div class="ranks">
+        <div class="rank">
+          <div class="rank-icon s"></div>
+          <div class="count">{{abyss.rate_count.S}}</div>
+        </div>
+        <div class="rank">
+          <div class="rank-icon a"></div>
+          <div class="count">{{abyss.rate_count.A}}</div>
+        </div>
+        <div class="rank">
+          <div class="rank-icon b"></div>
+          <div class="count">{{abyss.rate_count.B}}</div>
+        </div>
+      </div>
+      <div class="time">{{abyss.end_time}}</div>
+    </div>
+    <div class="cost">
+      <div class="item">
+        <div class="label">当期最快通关时间</div>
+        <div class="value">{{abyss.fast_layer_time_str}}</div>
+      </div>
+      <div class="item">
+        <div class="label">最高通关防线</div>
+        <div class="value">第{{abyss.max_layer}}防线</div>
+      </div>
+    </div>
+  </div>
+
+  <% include(sys.specialTitle, {en: 'ABYSS' , cn: '式舆防卫战' }) %>
+
+    {{each abyss.all_floor_detail floor i}}
+    <div class="item-card">
+      <div class="title {{floor.rating}}">
+        <div class="rank-icon {{floor.rating}}"></div>
+        <div class="content" data-content="{{floor.zone_name}}">{{floor.zone_name}}</div>
+      </div>
+      <div class="team">
+        <div class="info">
+          <div class="label">队伍1</div>
+          <div class="time">{{floor.formattedTime}}</div>
+          <div class="advantage">
+            <span>有利</span>
+            {{each floor.node_1.elements element i}}
+            <div class="property {{element}}"></div>
+            {{/each}}
+          </div>
+        </div>
+        <div class="list">
+          <% for(let i=0 ; i < 3 ; i++) { %>
+            {{if floor.node_1.avatars?.[i]}}
+            <div class="item char rank{{floor.node_1.avatars[i].rarity}}">
+              <div class="rank rank-icon {{floor.node_1.avatars[i].rarity}}"></div>
+              <div class="property {{floor.node_1.avatars[i].element}}"></div>
+              <div class="image">
+                <img src="{{floor.node_1.avatars[i].square_icon}}" alt="">
+              </div>
+              <div class="c-info">
+                <div class="level">等级{{floor.node_1.avatars[i].level}}</div>
+              </div>
+            </div>
+            {{else}}
+              <div class="item bangboo rankb"></div>
+              {{/if}}
+              <% } %>
+                {{if floor.node_1.buddy}}
+                <div class="item bangboo rank{{floor.node_1.buddy.rarity}}">
+                  <div class="rank rank-icon {{floor.node_1.buddy.rarity}}"></div>
+                  <div class="image">
+                    <img src="{{floor.node_1.buddy.square_icon}}" alt="">
+                  </div>
+                  <div class="c-info">
+                    <div class="level">等级{{floor.node_1.buddy.level}}</div>
+                  </div>
+                </div>
+                {{else}}
+                  <div class="item bangboo rankb"></div>
+                  {{/if}}
+        </div>
+      </div>
+
+      <div class="team">
+        <div class="info">
+          <div class="label">队伍2</div>
+          <div class="time">{{floor.formattedTime}}</div>
+          <div class="advantage">
+            <span>有利</span>
+            {{each floor.node_2.elements element i}}
+            <div class="property {{element}}"></div>
+            {{/each}}
+          </div>
+        </div>
+        <div class="list">
+          <% for(let i=0 ; i < 3 ; i++) { %>
+            {{if floor.node_2.avatars?.[i]}}
+            <div class="item char rank{{floor.node_2.avatars[i].rarity}}">
+              <div class="rank rank-icon {{floor.node_2.avatars[i].rarity}}"></div>
+              <div class="property {{floor.node_2.avatars[i].element}}"></div>
+              <div class="image">
+                <img src="{{floor.node_2.avatars[i].square_icon}}" alt="">
+              </div>
+              <div class="c-info">
+                <div class="level">等级{{floor.node_2.avatars[i].level}}</div>
+              </div>
+            </div>
+            {{else}}
+              <div class="item bangboo rankb"></div>
+              {{/if}}
+              <% } %>
+                {{if floor.node_2.buddy}}
+                <div class="item bangboo rank{{floor.node_2.buddy.rarity}}">
+                  <div class="rank rank-icon {{floor.node_2.buddy.rarity}}"></div>
+                  <div class="image">
+                    <img src="{{floor.node_2.buddy.square_icon}}" alt="">
+                  </div>
+                  <div class="c-info">
+                    <div class="level">等级{{floor.node_2.buddy.level}}</div>
+                  </div>
+                </div>
+                {{else}}
+                  <div class="item bangboo rankb"></div>
+                  {{/if}}
+        </div>
+      </div>
+    </div>
+    {{/each}}
+</div>
+
+{{/block}}

resources/abyss/index.scss

@@ -0,0 +1,235 @@
+.container {
+  background-image: url('./images/bg2.jpg');
+}
+.card {
+  margin: 0 1em;
+  .user-info {
+    margin: 0 1em;
+  }
+  .status {
+    background: url('./images/status.png') no-repeat center center;
+    background-size: 110% 160%;
+    aspect-ratio: 2.4;
+    overflow: hidden;
+    margin: 0 1em;
+    margin-bottom: 1.5em;
+    padding-top: 5.2em;
+    padding-left: 2em;
+    padding-right: 2em;
+    justify-content: space-around;
+    .info {
+      display: flex;
+      font-size: 2em;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1.1em;
+      padding: 0 0.6em;
+      .time {
+        color: rgb(127, 127, 127);
+      }
+      .ranks {
+        display: flex;
+        gap: 0.5em;
+        .rank {
+          width: 1.5em;
+          position: relative;
+          .count {
+            position: absolute;
+            bottom: -0.3em;
+            right: -0.5em;
+            font-size: 0.6em;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 1.2em;
+            height: 1.2em;
+            background-color: rgba(0, 0, 0, 0.5);
+          }
+        }
+      }
+    }
+    .cost {
+      display: flex;
+      justify-content: space-between;
+      font-size: 1.2em;
+      .item {
+        display: flex;
+        align-items: flex-end;
+        gap: 0.5em;
+        .label {
+          font-size: 0.68em;
+          margin-bottom: 0.1em;
+          color: rgb(176, 176, 176);
+        }
+      }
+    }
+  }
+  .item-card {
+    border-image-source: url('./images/BgFrame01.png');
+    border-image-slice: 200 100 70 280 fill;
+    border-image-width: 2em 1em 0.7em 2.8em;
+    border-image-outset: 0em 0em 0em 0em;
+    border-image-repeat: stretch stretch;
+    padding: 0.8em 0.5em;
+    margin-bottom: 1em;
+    .title {
+      display: flex;
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.5);
+      gap: 0.5em;
+      padding: 0.2em 0.5em;
+      font-size: 1.2em;
+      box-shadow: 0 0.1em 0.05em rgba(0, 0, 0, 0.5);
+      .rank-icon {
+        width: 1em;
+      }
+      .content {
+        z-index: 0;
+        position: relative;
+        &::after {
+          content: attr(data-content);
+          -webkit-text-stroke: 0.22em #000;
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: -1;
+        }
+      }
+      &.a,
+      &.A {
+        color: rgb(195, 56, 240);
+      }
+      &.b,
+      &.B {
+        color: rgb(93, 189, 246);
+      }
+      &.s,
+      &.S {
+        color: rgb(240, 145, 53);
+      }
+    }
+
+    .team {
+      padding: 0.5em 2em;
+      .info {
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.2);
+        align-items: center;
+        margin-bottom: 0.5em;
+        .label {
+          margin-right: auto;
+          padding: 0 0.5em;
+        }
+        .time {
+          background-color: rgba(23, 135, 255, 0.2);
+          padding: 0 0.2em;
+          font-size: 0.7em;
+          color: rgba(255, 255, 255, 0.8);
+        }
+        .advantage {
+          display: flex;
+          align-items: center;
+          margin-left: 0.3em;
+          font-size: 0.8em;
+          gap: 0.3em;
+          background-color: rgba(0, 0, 0, 0.6);
+          backdrop-filter: blur(0.1em);
+          height: 100%;
+          padding: 0.1em 0.4em;
+          border-radius: 0.4em 0 0 0.4em;
+          min-width: 5.5em;
+          .property {
+            width: 1em;
+          }
+        }
+      }
+      .list {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 0.8fr;
+        align-items: flex-end;
+        gap: 2em;
+        .item {
+          width: 100%;
+          position: relative;
+          > * {
+            position: inherit;
+            z-index: 1;
+          }
+          &.bangboo {
+            font-size: 0.8em;
+          }
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0.2em;
+            left: -0.2em;
+            width: 100%;
+            height: 100%;
+            background: rgb(138, 51, 183);
+            z-index: 0;
+          }
+          .rank {
+            position: absolute;
+            top: 0.2em;
+            left: 0.1em;
+            width: 1.5em;
+            color: white;
+            z-index: 2;
+          }
+          &.rankS {
+            &::after {
+              background: rgb(230, 119, 51);
+            }
+          }
+          &.rankB {
+            &::after {
+              background: rgb(93, 183, 249);
+            }
+          }
+          .image {
+            width: 100%;
+            aspect-ratio: 0.8;
+            background-color: #e2e2e2;
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+              display: block;
+            }
+          }
+          .c-info {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background: rgb(0, 0, 0);
+            color: white;
+            display: flex;
+            text-align: center;
+            .level {
+              flex-grow: 1;
+              flex-shrink: 1;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              text-align: center;
+            }
+          }
+          .property {
+            position: absolute;
+            top: 0.2em;
+            right: 0.1em;
+            width: 1.6em;
+            background-color: #000;
+            border-radius: 50%;
+            border: solid 0.1em #000;
+            color: white;
+            z-index: 2;
+          }
+        }
+      }
+    }
+  }
+}