diff --git a/apps/card.js b/apps/card.js new file mode 100644 index 0000000..f876e3b --- /dev/null +++ b/apps/card.js @@ -0,0 +1,40 @@ +import { ZZZPlugin } from '../lib/plugin.js'; +import _ from 'lodash'; +import render from '../lib/render.js'; +import { rulePrefix } from '../lib/common.js'; +import { ZZZIndexResp } from '../model/index.js'; + +export class Card extends ZZZPlugin { + constructor() { + super({ + name: '[ZZZ-Plugin]Card', + dsc: 'zzzcard', + event: 'message', + priority: 100, + rule: [ + { + reg: `${rulePrefix}card$`, + fnc: 'card', + }, + ], + }); + } + async card() { + const { api, deviceFp } = await this.getAPI(); + const userData = await this.getPlayerInfo(); + if (!userData) return false; + let indexData = await api.getData('zzzIndex', { deviceFp }); + indexData = await api.checkCode(this.e, indexData, 'zzzIndex', {}); + if (!indexData || indexData.retcode !== 0) { + await this.reply('[zzznote]Index数据获取失败'); + return false; + } + indexData = indexData.data; + indexData = new ZZZIndexResp(indexData); + this.e.playerCard.player.region_name = indexData.stats.world_level_name; + const data = { + card: indexData, + }; + await render(this.e, 'card/index.html', data); + } +} diff --git a/apps/gachalog.js b/apps/gachalog.js index 52205d5..4d1be34 100644 --- a/apps/gachalog.js +++ b/apps/gachalog.js @@ -71,6 +71,12 @@ export class GachaLog extends ZZZPlugin { this.getLog(key); } async getLog(key) { + const lastQueryTime = await redis.get(`ZZZ:GACHA:${uid}:LASTTIME`); + if (lastQueryTime && Date.now() - lastQueryTime < 1000 * 60 * 5) { + await this.reply('1分钟内只能刷新一次，请稍后重试'); + return false; + } + await redis.set(`ZZZ:GACHA:${uid}:LASTTIME`, Date.now()); const uid = await this.getUID(); const data = await updateGachaLog(key, uid); let msg = `抽卡记录更新成功，共${Object.keys(data).length}个卡池`; diff --git a/apps/note.js b/apps/note.js index d78d3cf..f7d1451 100644 --- a/apps/note.js +++ b/apps/note.js @@ -3,6 +3,7 @@ import _ from 'lodash'; import render from '../lib/render.js'; import { ZZZNoteResp } from '../model/note.js'; import { rulePrefix } from '../lib/common.js'; +import { ZZZIndexResp } from '../model/index.js'; export class Note extends ZZZPlugin { constructor() { @@ -19,35 +20,21 @@ export class Note extends ZZZPlugin { ], }); } - async note(e) { + async note() { const { api, deviceFp } = await this.getAPI(); - if (!api) return false; - let userData = await api.getData('zzzUser'); - if (!userData?.data || _.isEmpty(userData.data.list)) { - await e.reply('[zzznote]玩家信息获取失败'); - return false; - } - userData = userData?.data?.list[0]; + const userData = await this.getPlayerInfo(); + if (!userData) return false; let noteData = await api.getData('zzzNote', { deviceFp }); - noteData = await api.checkCode(e, noteData, 'zzzNote', {}); + noteData = await api.checkCode(this.e, noteData, 'zzzNote', {}); if (!noteData || noteData.retcode !== 0) { - await e.reply('[zzznote]每日数据获取失败'); + await this.reply('[zzznote]每日数据获取失败'); return false; } noteData = noteData.data; noteData = new ZZZNoteResp(noteData); - let avatar = this.e.bot.avatar; - // 头像 - if (this.e.member?.getAvatarUrl) { - avatar = await this.e.member.getAvatarUrl(); - } else if (this.e.friend?.getAvatarUrl) { - avatar = await this.e.friend.getAvatarUrl(); - } const finalData = { - avatar, - player: userData, note: noteData, }; - await render(e, 'note/index.html', finalData); + await render(this.e, 'note/index.html', finalData); } } diff --git a/lib/common.js b/lib/common.js index 8613eae..61753e9 100644 --- a/lib/common.js +++ b/lib/common.js @@ -1,7 +1,7 @@ import User from '../../genshin/model/user.js'; import { getStoken } from './authkey.js'; -export const rulePrefix = '((#|\\*)?(zzz|ZZZ|绝区零)|\\*|＊)'; +export const rulePrefix = '((#|\\%)?(zzz|ZZZ|绝区零)|\\*|＊)'; export async function getCk(e, s = false) { e.isSr = true; diff --git a/lib/convert.js b/lib/convert.js new file mode 100644 index 0000000..80d0252 --- /dev/null +++ b/lib/convert.js @@ -0,0 +1 @@ +export * as element from './convert/element.js'; diff --git a/lib/convert/element.js b/lib/convert/element.js new file mode 100644 index 0000000..5071799 --- /dev/null +++ b/lib/convert/element.js @@ -0,0 +1,15 @@ +const ELEMENT_TYPE = { + 203: 'thunder', + 205: 'dungeon', + 202: 'ice', + 200: 'physdmg', + 201: 'fire', +}; +/** + * + * @param {keyof ELEMENT_TYPE} id + * @returns + */ +export const IDToElement = id => { + return ELEMENT_TYPE[id]; +}; diff --git a/lib/plugin.js b/lib/plugin.js index b5888c3..2aeed96 100644 --- a/lib/plugin.js +++ b/lib/plugin.js @@ -47,4 +47,26 @@ export class ZZZPlugin extends plugin { } return { api, uid, deviceFp }; } + async getPlayerInfo() { + const { api } = await this.getAPI(); + if (!api) return false; + let userData = await api.getData('zzzUser'); + if (!userData?.data || _.isEmpty(userData.data.list)) { + await this.reply('[zzznote]玩家信息获取失败'); + return false; + } + userData = userData?.data?.list[0]; + let avatar = this.e.bot.avatar; + // 头像 + if (this.e.member?.getAvatarUrl) { + avatar = await this.e.member.getAvatarUrl(); + } else if (this.e.friend?.getAvatarUrl) { + avatar = await this.e.friend.getAvatarUrl(); + } + this.e.playerCard = { + avatar: avatar, + player: userData, + }; + return userData; + } } diff --git a/lib/render.js b/lib/render.js index fdcfe06..7990f8f 100644 --- a/lib/render.js +++ b/lib/render.js @@ -36,6 +36,8 @@ function render(e, renderPath, renderData = {}, cfg = {}) { const layoutPath = data.pluResPath + 'common/layout/'; const renderPathFull = data.pluResPath + renderPath.split('/')[0] + '/'; return { + player: e?.playerCard?.player, + avatar: e?.playerCard?.avatar, ...data, _res_path: resPath, _layout_path: layoutPath, @@ -44,6 +46,7 @@ function render(e, renderPath, renderData = {}, cfg = {}) { scale: pct, resourcesPath: resPath, currentPath: renderPathFull, + playerInfo: path.join(layoutPathFull, 'playerinfo.html'), copyright: `Created By ${version.name}${version.yunzai} & ${pluginName}${version.version}`, createdby: `Created By ${pluginName} & Powered By ZZZure`, }, diff --git a/model/avatar.js b/model/avatar.js index a4c0735..f3df15a 100644 --- a/model/avatar.js +++ b/model/avatar.js @@ -1,3 +1,8 @@ +import { element } from '../lib/convert.js'; +import { Equip, Weapon } from './equip.js'; +import { Property } from './property.js'; +import { Skill } from './skill.js'; + /** * @class */ @@ -42,6 +47,8 @@ export class Avatar { this.hollow_icon_path = hollow_icon_path; this.rank = rank; this.is_chosen = is_chosen; + + this.element_str = element.IDToElement(element_type); } } @@ -100,6 +107,8 @@ export class ZZZAvatarBasic { this.icon_paths = icon_paths; this.rank = rank; this.is_chosen = is_chosen; + + this.element_str = element.IDToElement(element_type); } } @@ -128,41 +137,44 @@ export class Rank { */ export class ZZZAvatarInfo { /** - * @param {number} id - * @param {number} level - * @param {string} name_mi18n - * @param {string} full_name_mi18n - * @param {number} element_type - * @param {string} camp_name_mi18n - * @param {number} avatar_profession - * @param {string} rarity - * @param {string} group_icon_path - * @param {string} hollow_icon_path - * @param {Equip[]} equip - * @param {Weapon} weapon - * @param {Property[]} properties - * @param {Skill[]} skills - * @param {number} rank - * @param {Rank[]} ranks + * @param {{ + * id: number; + * level: number; + * name_mi18n: string; + * full_name_mi18n: string; + * element_type: number; + * camp_name_mi18n: string; + * avatar_profession: number; + * rarity: string; + * group_icon_path: string; + * hollow_icon_path: string; + * equip: Equip[]; + * weapon: Weapon; + * properties: Property[]; + * skills: Skill[]; + * rank: number; + * ranks: Rank[]; + * }} data */ - constructor( - id, - level, - name_mi18n, - full_name_mi18n, - element_type, - camp_name_mi18n, - avatar_profession, - rarity, - group_icon_path, - hollow_icon_path, - equip, - weapon, - properties, - skills, - rank, - ranks - ) { + constructor(data) { + const { + id, + level, + name_mi18n, + full_name_mi18n, + element_type, + camp_name_mi18n, + avatar_profession, + rarity, + group_icon_path, + hollow_icon_path, + equip, + weapon, + properties, + skills, + rank, + ranks, + } = data; this.id = id; this.level = level; this.name_mi18n = name_mi18n; @@ -179,6 +191,8 @@ export class ZZZAvatarInfo { this.skills = skills; this.rank = rank; this.ranks = ranks; + + this.element_str = element.IDToElement(element_type); } } diff --git a/model/bangboo.js b/model/bangboo.js index 7a4b30f..cb75030 100644 --- a/model/bangboo.js +++ b/model/bangboo.js @@ -1,3 +1,26 @@ +/** + * @class + */ +export class Buddy { + /** + * @param {{ + * id: number; + * name: string; + * rarity: string; + * level: number; + * star: number; + * }} data + */ + constructor(data) { + const { id, name, rarity, level, star } = data; + this.id = id; + this.name = name; + this.rarity = rarity; + this.level = level; + this.star = star; + } +} + /** * @class */ diff --git a/model/index.js b/model/index.js index 7486a57..90b9625 100644 --- a/model/index.js +++ b/model/index.js @@ -1,22 +1,5 @@ -/** - * @class - */ -export class Buddy { - /** - * @param {number} id - * @param {string} name - * @param {string} rarity - * @param {number} level - * @param {number} star - */ - constructor(id, name, rarity, level, star) { - this.id = id; - this.name = name; - this.rarity = rarity; - this.level = level; - this.star = star; - } -} +import { ZZZAvatarInfo } from './avatar.js'; +import { Buddy } from './bangboo.js'; /** * @class @@ -51,7 +34,7 @@ export class ZZZIndexResp { /** * @param {{ * stats: Stats; - * avatar_list: Avatar[]; + * avatar_list: ZZZAvatarInfo[]; * cur_head_icon_url: string; * buddy_list: Buddy[]; * }} data @@ -59,8 +42,8 @@ export class ZZZIndexResp { constructor(data) { const { stats, avatar_list, cur_head_icon_url, buddy_list } = data; this.stats = stats; - this.avatar_list = avatar_list; + this.avatar_list = avatar_list.map(item => new ZZZAvatarInfo(item)); this.cur_head_icon_url = cur_head_icon_url; - this.buddy_list = buddy_list; + this.buddy_list = buddy_list.map(item => new Buddy(item)); } } diff --git a/model/property.js b/model/property.js index 4bf41bb..0117285 100644 --- a/model/property.js +++ b/model/property.js @@ -1,7 +1,7 @@ /** * @class */ -class Property { +export class Property { /** * @param {string} property_name * @param {number} property_id diff --git a/resources/card/images/IconDungeonBuffEther.png b/resources/card/images/IconDungeonBuffEther.png new file mode 100644 index 0000000..da2de46 Binary files /dev/null and b/resources/card/images/IconDungeonBuffEther.png differ diff --git a/resources/card/images/IconFire.png b/resources/card/images/IconFire.png new file mode 100644 index 0000000..65ee97a Binary files /dev/null and b/resources/card/images/IconFire.png differ diff --git a/resources/card/images/IconIce.png b/resources/card/images/IconIce.png new file mode 100644 index 0000000..921a74c Binary files /dev/null and b/resources/card/images/IconIce.png differ diff --git a/resources/card/images/IconPhysDmg.png b/resources/card/images/IconPhysDmg.png new file mode 100644 index 0000000..a30fff0 Binary files /dev/null and b/resources/card/images/IconPhysDmg.png differ diff --git a/resources/card/images/IconThunder.png b/resources/card/images/IconThunder.png new file mode 100644 index 0000000..fe436ce Binary files /dev/null and b/resources/card/images/IconThunder.png differ diff --git a/resources/card/images/RANK_A.png b/resources/card/images/RANK_A.png new file mode 100644 index 0000000..b8210ca Binary files /dev/null and b/resources/card/images/RANK_A.png differ diff --git a/resources/card/images/RANK_B.png b/resources/card/images/RANK_B.png new file mode 100644 index 0000000..5e06d32 Binary files /dev/null and b/resources/card/images/RANK_B.png differ diff --git a/resources/card/images/RANK_S.png b/resources/card/images/RANK_S.png new file mode 100644 index 0000000..6963cca Binary files /dev/null and b/resources/card/images/RANK_S.png differ diff --git a/resources/card/images/status.png b/resources/card/images/status.png new file mode 100644 index 0000000..762e2e4 Binary files /dev/null and b/resources/card/images/status.png differ diff --git a/resources/card/index.css b/resources/card/index.css new file mode 100644 index 0000000..787eab8 --- /dev/null +++ b/resources/card/index.css @@ -0,0 +1,175 @@ +.card { + margin: 0 1em; +} +.card .user-info { + margin: 0 1em; +} +.card > .title { + width: 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + display: flex; + align-items: stretch; + padding: 0 2.4em; + position: relative; + margin: 0.5em 0; +} +.card > .title .parallelograms { + display: flex; + flex-wrap: nowrap; + align-items: flex-end; + position: inherit; + padding-bottom: 0.4em; + z-index: 1; +} +.card > .title .parallelograms span { + width: 1.3em; + height: 80%; + background-color: rgb(246, 202, 69); + margin-right: -0.2em; + -webkit-clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%); + clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%); +} +.card > .title .bg-content { + position: absolute; + bottom: -0.1em; + left: 50%; + transform: translate(-50%, 0) skewX(-8deg); + color: rgba(255, 255, 255, 0.1); + font-size: 2.7em; +} +.card > .title .content { + flex-grow: 1; + flex-shrink: 1; + font-size: 1.5em; + text-align: center; + position: inherit; + z-index: 1; +} +.card .status { + display: flex; + align-items: center; + 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: 4em; + padding-left: 3em; + padding-right: 3em; + padding-bottom: 3.5em; + justify-content: space-around; +} +.card .status .item { + display: flex; + flex-direction: column; + align-items: center; +} +.card .status .item .value { + font-size: 1.8em; +} +.card .status .item .label { + font-size: 0.95em; + color: #e2e2e2; +} +.card .list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1em; + padding: 0.5em 3em; + margin-bottom: 1.5em; +} +.card .list .item { + width: 100%; + position: relative; +} +.card .list .item * { + position: inherit; + z-index: 1; +} +.card .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 .list .item .rank { + position: absolute; + top: 0.2em; + left: 0.1em; + width: 1.5em; + aspect-ratio: 1; + background: url("./images/RANK_A.png") no-repeat center center; + background-size: contain; + color: white; + z-index: 2; +} +.card .list .item.rankS::after { + background: rgb(230, 119, 51); +} +.card .list .item.rankS .rank { + background-image: url("./images/RANK_S.png"); +} +.card .list .item.rankB::after { + background: rgb(93, 183, 249); +} +.card .list .item.rankB .rank { + background-image: url("./images/RANK_B.png"); +} +.card .list .item .image { + width: 100%; + aspect-ratio: 0.8; + background-color: #e2e2e2; +} +.card .list .item .image img { + width: 100%; + display: block; +} +.card .list .item .level { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background: rgb(0, 0, 0); + color: white; + text-align: center; +} +.card .list .item .property { + position: absolute; + top: 0.2em; + right: 0.1em; + width: 1.6em; + aspect-ratio: 1; + background-color: #000; + border-radius: 50%; + border: solid 0.1em #000; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + color: white; + z-index: 2; +} +.card .list .item .property.fire { + background-image: url("./images/IconFire.png"); +} +.card .list .item .property.ice { + background-image: url("./images/IconIce.png"); +} +.card .list .item .property.physdmg { + background-image: url("./images/IconPhysDmg.png"); +} +.card .list .item .property.thunder { + background-image: url("./images/IconThunder.png"); +} +.card .list .item .property.dungeon { + background-image: url("./images/IconDungeonBuffEther.png"); +} + +/*# sourceMappingURL=index.css.map */ diff --git a/resources/card/index.html b/resources/card/index.html new file mode 100644 index 0000000..b64bf3c --- /dev/null +++ b/resources/card/index.html @@ -0,0 +1,86 @@ +{{extend defaultLayout}} + +{{block 'css'}} + +{{/block}} + +{{block 'main'}} +
+ {{include sys.playerInfo}} +
+
+
{{card.stats.active_days}}
+
活跃天数
+
+
+
{{card.stats.avatar_num}}
+
获得代理人
+
+
+
{{card.stats.buddy_num}}
+
获得邦布
+
+
+
{{card.stats.cur_period_zone_layer_count}}
+
式舆防卫战
+
+
+
+
+ AGENT +
+
+ +
+
+ 代理人信息 +
+
+ +
+
+ + +
+ {{each card.avatar_list char i}} +
+
+
+
+ +
+
等级{{char.level}}
+
+ {{/each}} +
+ + +
+
+ BANGBOO +
+
+ +
+
+ 邦布信息 +
+
+ +
+
+ + +
+ {{each card.buddy_list bangboo i}} +
+
+
+ +
+
等级{{bangboo.level}}
+
+ {{/each}} +
+
+{{/block}} diff --git a/resources/card/index.scss b/resources/card/index.scss new file mode 100644 index 0000000..049a2d0 --- /dev/null +++ b/resources/card/index.scss @@ -0,0 +1,188 @@ +.card { + margin: 0 1em; + .user-info { + margin: 0 1em; + } + > .title { + width: 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + display: flex; + align-items: stretch; + padding: 0 2.4em; + position: relative; + margin: 0.5em 0; + .parallelograms { + $pwidth: 0.7em; + display: flex; + flex-wrap: nowrap; + align-items: flex-end; + position: inherit; + padding-bottom: 0.4em; + z-index: 1; + span { + width: 1.3em; + height: 80%; + background-color: rgb(246, 202, 69); + margin-right: -0.2em; + -webkit-clip-path: polygon( + $pwidth 0%, + 100% 0%, + calc(100% - $pwidth) 100%, + 0% 100% + ); + clip-path: polygon( + $pwidth 0%, + 100% 0%, + calc(100% - $pwidth) 100%, + 0% 100% + ); + } + } + .bg-content { + position: absolute; + bottom: -0.1em; + left: 50%; + transform: translate(-50%, 0) skewX(-8deg); + color: rgba(255, 255, 255, 0.1); + font-size: 2.7em; + } + .content { + flex-grow: 1; + flex-shrink: 1; + font-size: 1.5em; + text-align: center; + position: inherit; + z-index: 1; + } + } + .status { + display: flex; + align-items: center; + 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: 4em; + padding-left: 3em; + padding-right: 3em; + padding-bottom: 3.5em; + justify-content: space-around; + .item { + display: flex; + flex-direction: column; + align-items: center; + .value { + font-size: 1.8em; + } + .label { + font-size: 0.95em; + color: #e2e2e2; + } + } + } + .list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1em; + padding: 0.5em 3em; + margin-bottom: 1.5em; + .item { + width: 100%; + position: relative; + * { + position: inherit; + z-index: 1; + } + &::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; + aspect-ratio: 1; + background: url('./images/RANK_A.png') no-repeat center center; + background-size: contain; + color: white; + z-index: 2; + } + &.rankS { + &::after { + background: rgb(230, 119, 51); + } + .rank { + background-image: url('./images/RANK_S.png'); + } + } + &.rankB { + &::after { + background: rgb(93, 183, 249); + } + .rank { + background-image: url('./images/RANK_B.png'); + } + } + .image { + width: 100%; + aspect-ratio: 0.8; + background-color: #e2e2e2; + img { + width: 100%; + display: block; + } + } + .level { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background: rgb(0, 0, 0); + color: white; + text-align: center; + } + .property { + position: absolute; + top: 0.2em; + right: 0.1em; + width: 1.6em; + aspect-ratio: 1; + background-color: #000; + border-radius: 50%; + border: solid 0.1em #000; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + color: white; + z-index: 2; + &.fire { + background-image: url('./images/IconFire.png'); + } + &.ice { + background-image: url('./images/IconIce.png'); + } + &.physdmg { + background-image: url('./images/IconPhysDmg.png'); + } + &.thunder { + background-image: url('./images/IconThunder.png'); + } + &.dungeon { + background-image: url('./images/IconDungeonBuffEther.png'); + } + } + } + } +} diff --git a/resources/note/images/SuitBg.png b/resources/common/images/SuitBg.png similarity index 100% rename from resources/note/images/SuitBg.png rename to resources/common/images/SuitBg.png diff --git a/resources/note/images/UIDBg.png b/resources/common/images/UIDBg.png similarity index 100% rename from resources/note/images/UIDBg.png rename to resources/common/images/UIDBg.png diff --git a/resources/common/layout/playerinfo.css b/resources/common/layout/playerinfo.css new file mode 100644 index 0000000..5a13862 --- /dev/null +++ b/resources/common/layout/playerinfo.css @@ -0,0 +1,76 @@ +.user-info { + display: flex; + align-items: center; + gap: 1em; + padding: 0 1em; + padding-bottom: 1em; + padding-top: 1.7em; +} +.user-info .avatar { + width: 4em; + height: 4em; + border-radius: 50%; + border-image: url("../images/SuitBg.png"); + border-image-width: 0; + border-image-outset: 0.4em; + border-image-repeat: round; + border-image-slice: 1 fill; + overflow: hidden; +} +.user-info .avatar img { + width: 100%; + height: 100%; + object-fit: contain; + display: block; +} +.user-info .info-bar { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1; + gap: 0.2em; +} +.user-info .info-bar .info { + width: 100%; + display: flex; + overflow: hidden; + gap: 0.5em; + padding-left: 0.5em; +} +.user-info .info-bar .info .nickname { + font-size: 1.2em; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.user-info .info-bar .info .label { + -webkit-clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em); + clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em); + padding: 0 0.4em; + font-size: 0.9em; + display: flex; + justify-content: center; + align-items: center; + color: rgb(43, 38, 40); + margin: 0.1em 0; +} +.user-info .info-bar .info .label.level { + background-color: rgb(243, 203, 69); +} +.user-info .info-bar .info .label.server { + background-color: rgb(81, 177, 253); +} +.user-info .info-bar .uid { + border-image: url("../images/UIDBg.png"); + border-image-slice: 0 100 0 100 fill; + border-image-width: 0em 1.6em 0em 1.6em; + border-image-outset: 0; + border-image-repeat: stretch stretch; + padding: 0.3em 1.6em; + font-size: 0.9em; + color: rgba(255, 255, 255, 0.6); +} + +/*# sourceMappingURL=playerinfo.css.map */ diff --git a/resources/common/layout/playerinfo.html b/resources/common/layout/playerinfo.html new file mode 100644 index 0000000..29bc3f4 --- /dev/null +++ b/resources/common/layout/playerinfo.html @@ -0,0 +1,14 @@ + +
+
+ Avatar +
+
+
+
{{player.nickname}}
+
Lv{{player.level}}
+
{{player.region_name}}
+
+
UID {{player.game_uid}}
+
+
diff --git a/resources/common/layout/playerinfo.scss b/resources/common/layout/playerinfo.scss new file mode 100644 index 0000000..51bf938 --- /dev/null +++ b/resources/common/layout/playerinfo.scss @@ -0,0 +1,95 @@ +.user-info { + display: flex; + align-items: center; + gap: 1em; + padding: 0 1em; + padding-bottom: 1em; + padding-top: 1.7em; + .avatar { + width: 4em; + height: 4em; + border-radius: 50%; + border-image: url('../images/SuitBg.png'); + border-image-width: 0; + border-image-outset: 0.4em; + border-image-repeat: round; + border-image-slice: 1 fill; + overflow: hidden; + img { + width: 100%; + height: 100%; + object-fit: contain; + display: block; + } + } + .info-bar { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1; + gap: 0.2em; + .info { + width: 100%; + display: flex; + overflow: hidden; + gap: 0.5em; + padding-left: 0.5em; + .nickname { + font-size: 1.2em; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .label { + $label-width: 0.2em; + -webkit-clip-path: polygon( + $label-width 0%, + calc(100% - $label-width) 0%, + 100% $label-width, + 100% calc(100% - $label-width), + calc(100% - $label-width) 100%, + $label-width 100%, + 0% calc(100% - $label-width), + 0% $label-width + ); + clip-path: polygon( + $label-width 0%, + calc(100% - $label-width) 0%, + 100% $label-width, + 100% calc(100% - $label-width), + calc(100% - $label-width) 100%, + $label-width 100%, + 0% calc(100% - $label-width), + 0% $label-width + ); + padding: 0 0.4em; + font-size: 0.9em; + display: flex; + justify-content: center; + align-items: center; + color: rgb(43, 38, 40); + margin: 0.1em 0; + + &.level { + background-color: rgb(243, 203, 69); + } + + &.server { + background-color: rgb(81, 177, 253); + } + } + } + .uid { + border-image: url('../images/UIDBg.png'); + border-image-slice: 0 100 0 100 fill; + border-image-width: 0em 1.6em 0em 1.6em; + border-image-outset: 0; + border-image-repeat: stretch stretch; + padding: 0.3em 1.6em; + font-size: 0.9em; + color: rgba(255, 255, 255, 0.6); + } + } +} diff --git a/resources/note/index.css b/resources/note/index.css index a8adda6..a5fbdfd 100644 --- a/resources/note/index.css +++ b/resources/note/index.css @@ -11,80 +11,6 @@ overflow: hidden; padding: 5em 2.2em 2.2em 2.2em; } -.card .user-info { - display: flex; - align-items: center; - margin-bottom: 1em; - margin-top: 1.7em; - gap: 1em; - padding: 0 1em; -} -.card .user-info .avatar { - width: 4em; - height: 4em; - border-radius: 50%; - border-image: url("./images/SuitBg.png"); - border-image-width: 0; - border-image-outset: 0.4em; - border-image-repeat: round; - border-image-slice: 1 fill; - overflow: hidden; -} -.card .user-info .avatar img { - width: 100%; - height: 100%; - object-fit: contain; - display: block; -} -.card .user-info .info-bar { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - flex: 1; - gap: 0.2em; -} -.card .user-info .info-bar .info { - width: 100%; - display: flex; - overflow: hidden; - gap: 0.5em; - padding-left: 0.5em; -} -.card .user-info .info-bar .info .nickname { - font-size: 1.2em; - font-weight: bold; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.card .user-info .info-bar .info .label { - -webkit-clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em); - clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em); - padding: 0 0.4em; - font-size: 0.9em; - display: flex; - justify-content: center; - align-items: center; - color: rgb(43, 38, 40); - margin: 0.1em 0; -} -.card .user-info .info-bar .info .label.level { - background-color: rgb(243, 203, 69); -} -.card .user-info .info-bar .info .label.server { - background-color: rgb(81, 177, 253); -} -.card .user-info .info-bar .uid { - border-image: url("./images/UIDBg.png"); - border-image-slice: 0 100 0 100 fill; - border-image-width: 0em 1.6em 0em 1.6em; - border-image-outset: 0; - border-image-repeat: stretch stretch; - padding: 0.3em 1.6em; - font-size: 0.9em; - color: rgba(255, 255, 255, 0.6); -} .card > .title { width: 100%; background-size: contain; diff --git a/resources/note/index.html b/resources/note/index.html index 0828758..d6542a8 100644 --- a/resources/note/index.html +++ b/resources/note/index.html @@ -6,19 +6,7 @@ {{block 'main'}}
-
-
- Avatar -
-
-
-
{{player.nickname}}
-
Lv{{player.level}}
-
{{player.region_name}}
-
-
UID {{player.game_uid}}
-
-
+ {{include sys.playerInfo}}
STAMINA diff --git a/resources/note/index.scss b/resources/note/index.scss index 36f9150..b6a415b 100644 --- a/resources/note/index.scss +++ b/resources/note/index.scss @@ -9,101 +9,6 @@ min-height: 30em; overflow: hidden; padding: 5em 2.2em 2.2em 2.2em; - .user-info { - display: flex; - align-items: center; - margin-bottom: 1em; - margin-top: 1.7em; - gap: 1em; - padding: 0 1em; - .avatar { - width: 4em; - height: 4em; - border-radius: 50%; - border-image: url('./images/SuitBg.png'); - border-image-width: 0; - border-image-outset: 0.4em; - border-image-repeat: round; - border-image-slice: 1 fill; - overflow: hidden; - img { - width: 100%; - height: 100%; - object-fit: contain; - display: block; - } - } - .info-bar { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - flex: 1; - gap: 0.2em; - .info { - width: 100%; - display: flex; - overflow: hidden; - gap: 0.5em; - padding-left: 0.5em; - .nickname { - font-size: 1.2em; - font-weight: bold; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .label { - $label-width: 0.2em; - -webkit-clip-path: polygon( - $label-width 0%, - calc(100% - $label-width) 0%, - 100% $label-width, - 100% calc(100% - $label-width), - calc(100% - $label-width) 100%, - $label-width 100%, - 0% calc(100% - $label-width), - 0% $label-width - ); - clip-path: polygon( - $label-width 0%, - calc(100% - $label-width) 0%, - 100% $label-width, - 100% calc(100% - $label-width), - calc(100% - $label-width) 100%, - $label-width 100%, - 0% calc(100% - $label-width), - 0% $label-width - ); - padding: 0 0.4em; - font-size: 0.9em; - display: flex; - justify-content: center; - align-items: center; - color: rgb(43, 38, 40); - margin: 0.1em 0; - - &.level { - background-color: rgb(243, 203, 69); - } - - &.server { - background-color: rgb(81, 177, 253); - } - } - } - .uid { - border-image: url('./images/UIDBg.png'); - border-image-slice: 0 100 0 100 fill; - border-image-width: 0em 1.6em 0em 1.6em; - border-image-outset: 0; - border-image-repeat: stretch stretch; - padding: 0.3em 1.6em; - font-size: 0.9em; - color: rgba(255, 255, 255, 0.6); - } - } - } > .title { width: 100%; background-size: contain;