更新#角色部分样式及判断逻辑

This commit is contained in:
Kokomi 2023-02-11 15:24:44 +08:00
parent bf4c9ddbd7
commit 558bdae30a
14 changed files with 219 additions and 137 deletions

View File

@ -18,7 +18,7 @@ export async function renderAvatar (e, avatar, renderType = 'card') {
avatar = { id: char.id, name: char.name, detail: false }
} else {
let player = Player.create(e)
await player.refreshMysAvatar()
await player.refreshMysDetail()
await player.refreshTalent(char.id)
avatar = player.getAvatar(char.id)
if (!avatar) {

View File

@ -164,7 +164,7 @@ export async function pokeWife (e, components) {
}
async function getAvatarList (player, type, mys) {
await player.refreshMysAvatar()
await player.refreshMysDetail()
let list = []
player.forEachAvatar((avatar) => {
if (type !== false) {

View File

@ -1,6 +1,5 @@
import { Cfg, Common } from '../../components/index.js'
import { MysApi, Player, Character } from '../../models/index.js'
import moment from 'moment'
export async function profileStat (e) {
let isMatch = /^#(面板|喵喵|角色|武器|天赋|技能|圣遗物)练度统计?$/.test(e.original_msg || e.msg || '')
@ -32,7 +31,16 @@ export async function profileStat (e) {
sort: true
})
let talentNotice = ''
if (avatarRet.length === 0) {
e.reply(`暂未获得#${uid}角色数据请绑定CK或 #更新面板`)
return true
}
let talentNotice = []
if (!mys.isSelfCookie) {
talentNotice.push('未绑定CK信息可能展示不完全')
}
let faceChar = Character.get(player.face || avatarRet[0]?.id)
let face = {
@ -47,11 +55,11 @@ export async function profileStat (e) {
save_id: uid,
uid,
info: player.getInfo(),
isStat: !isAvatarList,
updateTime: player.getUpdateTime(),
isSelfCookie: e.isSelfCookie,
talentLvMap: '0,1,1,1,2,2,3,3,3,4,5'.split(','),
face,
avatars: avatarRet,
isSelf: e.isSelf,
talentNotice
}, { e, scale: 1.4 })
}

View File

@ -196,7 +196,7 @@ async function abyssTeam (e) {
return true
}
let player = Player.create(e)
await player.refreshMysAvatar()
await player.refreshMysDetail()
await player.refreshTalent()
let abyssData = await HutaoApi.getAbyssTeam()

View File

@ -14,34 +14,43 @@ export default class AvatarArtis extends Base {
this.artis = {}
}
setArtisData (ds = {}, source) {
if (!this.hasArtis || ArtisMark.hasAttr(ds) || !ArtisMark.hasAttr(this.artis)) {
setArtisData (ds = {}, profile = false) {
// let force = !this.hasArtis || ArtisMark.hasAttr(ds) || !ArtisMark.hasAttr(this.artis)
if (!profile || (profile && ArtisMark.hasAttr(ds))) {
for (let idx = 1; idx <= 5; idx++) {
if (ds[idx]) {
this.setArtis(idx, ds[idx] || ds[`arti${idx}`] || {})
if (ds[idx] || ds[`arti${idx}`]) {
this.setArtis(idx, ds[idx] || ds[`arti${idx}`], profile)
}
}
return true
}
return false
}
setArtis (idx = 1, ds = {}) {
setArtis (idx = 1, ds = {}, profile = false) {
idx = idx.toString().replace('arti', '')
let ret = {}
ret.name = ds.name || ArtifactSet.getArtiNameBySet(ds.set, idx) || ''
ret.set = ds.set || Artifact.getSetNameByArti(ret.name) || ''
ret.level = ds.level || 1
this.artis[idx] = this.artis[idx] || {}
let arti = this.artis[idx]
if (profile) {
arti.name = ds._name || ds.name || arti.name || ''
arti.set = ds._set || Artifact.getSetNameByArti(arti._name) || ds.set || ''
arti.level = ds._level || ds.level || 1
} else {
arti.name = ds.name || arti.name || ''
arti.set = ds.set || Artifact.getSetNameByArti(arti.name) || ''
arti.level = ds.level || 1
}
// 存在面板数据,更新面板数据
if (ds.main && ds.attrs) {
ret.main = ArtisMark.formatAttr(ds.main || {})
ret.attrs = []
arti._name = ds.name || arti.name
arti._set = ds.set || Artifact.getSetNameByArti(arti.name) || arti.set || ''
arti._level = ds.level || arti.level
arti.main = ArtisMark.formatAttr(ds.main || {})
arti.attrs = []
for (let attrIdx in ds.attrs || []) {
if (ds.attrs[attrIdx]) {
ret.attrs.push(ArtisMark.formatAttr(ds.attrs[attrIdx]))
arti.attrs.push(ArtisMark.formatAttr(ds.attrs[attrIdx]))
}
}
}
this.artis[idx] = ret
}
forEach (fn) {
@ -73,6 +82,8 @@ export default class AvatarArtis extends Base {
level: ds.level || 1
}
if (ds.main && ds.attrs) {
tmp._name = ds._name || null
tmp._level = ds._level || null
tmp.main = ds.main || null
tmp.attrs = []
for (let attrIdx in ds.attrs || []) {
@ -87,15 +98,15 @@ export default class AvatarArtis extends Base {
return ret
}
getDetail () {
getDetail (profile = false) {
let ret = {}
for (let idx = 1; idx <= 5; idx++) {
let ds = this.artis[idx]
if (ds) {
let artis = Artifact.get(ds.name)
let artis = Artifact.get(profile ? ds._name : ds.name)
let tmp = {
...artis?.getData('img,name,set'),
level: ds.level || 1
level: (profile ? ds._level : ds.level) || 1
}
if (ds.main && ds.attrs) {
tmp.main = ds.main || null
@ -171,20 +182,6 @@ export default class AvatarArtis extends Base {
return check
}
// 获取圣遗物数据
getArtisData () {
let ret = {}
this.forEach((ds, idx) => {
let arti = Artifact.get(ds.name)
ret[idx] = {
...ds,
name: arti.name,
img: arti.img
}
})
return ret
}
/**
* 获取圣遗物套装数据
* @returns {*|{imgs: *[], names: *[], sets: {}, abbrs: *[], sName: string, name: (string|*)}}
@ -195,10 +192,10 @@ export default class AvatarArtis extends Base {
* name: '组合名字' 若为4件套会使用套装完整名
* sName: '简写名字'若为4件套也会使用简写
*/
getSetData () {
getSetData (profile = false) {
let setCount = {}
this.forEach((arti, idx) => {
setCount[arti.set] = (setCount[arti.set] || 0) + 1
setCount[profile ? arti._set : arti.set] = (setCount[profile ? arti._set : arti.set] || 0) + 1
})
let sets = {}
let names = []

View File

@ -161,6 +161,17 @@ export default class Player extends Base {
return ret
}
getUpdateTime () {
let ret = {}
if (this._profile) {
ret.profile = MysAvatar.getDate(this._profile)
}
if (this._mys) {
ret.mys = MysAvatar.getDate(this._mys)
}
return ret
}
getInfo () {
let ret = {
...(this.info || {}),
@ -189,6 +200,7 @@ export default class Player extends Base {
}
ret.activeDay = msg
}
lodash.forEach(ret)
return ret
}
@ -198,8 +210,8 @@ export default class Player extends Base {
}
// 更新米游社数据
async refreshMysAvatar (force = false) {
return MysAvatar.refreshMysAvatar(this, force)
async refreshMysDetail (force = false) {
return MysAvatar.refreshMysDetail(this, force)
}
async refreshMysInfo (force = false) {
@ -224,7 +236,7 @@ export default class Player extends Base {
async refreshAndGetAvatarData (cfg) {
// 更新角色信息
await this.refreshMysAvatar(cfg.force)
await this.refreshMysDetail(cfg.force)
// 更新天赋信息
if (cfg.refreshTalent !== false) {

View File

@ -19,7 +19,7 @@ export default class ProfileArtis extends AvatarArtis {
this.profile = profile
this.elem = profile.elem || profile.char?.elem
if (artis) {
this.setArtisData(artis)
this.setArtisData(artis, true)
}
}

View File

@ -1,5 +1,6 @@
import lodash from 'lodash'
import { Common, Data } from '../../components/index.js'
import moment from 'moment'
const MysAvatar = {
/**
@ -9,7 +10,7 @@ const MysAvatar = {
* @param force
* @returns {Promise<boolean>}
*/
async refreshMysAvatar (player, force = false) {
async refreshMysDetail (player, force = false) {
let mys = player?.e?._mys
if (!mys) {
return false
@ -40,7 +41,7 @@ const MysAvatar = {
return false
}
let infoData = await mys.getIndex()
if (!infoData) {
if (!infoData || !infoData.role) {
return false
}
MysAvatar.setMysInfo(player, infoData)
@ -88,7 +89,7 @@ const MysAvatar = {
let role = infoData.role
// 设置角色信息
let homeLevel = ((infoData?.homes || [])[0])?.level
if(role) {
if (role) {
player.setBasicData({
level: role.level,
name: role.nickname
@ -216,6 +217,10 @@ const MysAvatar = {
return true
}
return false
},
getDate (time) {
return time ? moment(new Date(time)).format('MM-DD HH:mm') : ''
}
}
export default MysAvatar

View File

@ -41,8 +41,8 @@
color: #414e64;
}
#banner .user-info .name {
height: 32px;
line-height: 32px;
height: 34px;
line-height: 34px;
}
#banner .user-info .name strong {
font-size: 26px;
@ -51,27 +51,39 @@
padding-left: 5px;
}
#banner .user-info .uid {
height: 28px;
line-height: 28px;
height: 22px;
line-height: 22px;
font-size: 16px;
}
#banner .stat {
position: absolute;
right: 20px;
right: 0;
top: 0;
display: flex;
background: rgba(255, 255, 255, 0.5);
margin: 20px 5px;
border-radius: 10px;
margin: 16px;
border-radius: 29px;
height: 58px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
}
#banner .stat-li {
padding: 7px;
width: 70px;
height: 58px;
text-align: center;
position: relative;
}
#banner .stat-li:nth-child(even) {
background: rgba(225, 225, 225, 0.8);
}
#banner .stat-li:first-child {
width: 78px;
padding-left: 15px;
}
#banner .stat-li:last-child {
width: 78px;
padding-right: 15px;
}
#banner .stat-li strong {
font-size: 22px;
display: block;
@ -93,7 +105,7 @@
}
.exploration .item {
width: 93px;
height: 106.95px;
height: 116.25px;
background: url('./imgs/exploration.webp') no-repeat;
background-size: auto 100%;
border-radius: 4px;
@ -102,18 +114,19 @@
color: #fff;
}
.exploration .item strong {
font-size: 22px;
font-size: 24px;
display: block;
height: 26px;
line-height: 26px;
height: 30px;
line-height: 30px;
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.exploration .item span {
margin-top: 58px;
font-size: 12px;
height: 18px;
line-height: 18px;
font-size: 14px;
height: 20px;
line-height: 20px;
display: block;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}
.cont-title {
padding: 8px 15px;
@ -132,14 +145,23 @@
margin: 5px;
}
.cont-notice {
color: #888;
background: rgba(255, 255, 255, 0.4);
font-size: 13px;
text-align: center;
padding: 8px;
text-align: right;
}
.cont-notice strong {
color: #d3bc8e;
}
.cont-notice span {
padding: 0 3px;
color: #555;
color: #aaa;
}
.ck-notice {
text-align: center;
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
}
.ck-notice strong {
color: #d3bc8e;
padding: 0 2px;
font-weight: normal;
}
/*# sourceMappingURL=avatar-list.css.map */

View File

@ -14,10 +14,11 @@
<div class="user-info">
<div class="name">
<strong>{{face.name}}</strong>
{{if face.level}}<span> #{{uid}}</span>{{/if}}
{{if face.level}} Lv.{{face.level}}{{/if}}
</div>
<div class="uid">
{{if face.level}} Lv.{{face.level}}·{{/if}}
{{if uid}}<span> #{{uid}}</span>{{/if}}
{{ if info.activeDay}}{{info.activeDay}} {{/if}}
</div>
</div>
@ -32,6 +33,9 @@
{{/each}}
</div>
</div>
{{if !isSelfCookie}}
<div class="ck-notice">未绑定CK或CK失效信息可能不完全。发送<strong>#体力帮助</strong>查看CK绑定方法发送<strong>#更新面板</strong>更新游戏内角色展柜信息</div>
{{/if}}
<div id="avatar-list">
{{if info && info?.exploration['蒙德']}}
{{set citys = ['蒙德','龙脊雪山','璃月','层岩巨渊','稻妻','渊下宫','须弥'] }}
@ -52,11 +56,16 @@
<% include(_layout_path+'../tpl/avatar-card.html', [avatar,{_res_path, cardType:'mini'}]) %>
{{/each}}
</div>
</div>
{{if talentNotice}}
<p class="cont-notice">{{@talentNotice}}</p>
<div class="cont-footer cont-notice">
<strong>数据更新时间</strong>
{{if updateTime.profile}}
<span>面板:{{updateTime.profile}}</span>
{{/if}}
{{if updateTime.mys}}
<span>米游社:{{updateTime.mys}}</span>
{{/if}}
</div>
</div>
</div>

View File

@ -46,8 +46,8 @@
color: #414e64;
.name {
height: 32px;
line-height: 32px;
height: 34px;
line-height: 34px;
strong {
font-size: 26px;
@ -59,31 +59,49 @@
}
.uid {
height: 28px;
line-height: 28px;
height: 22px;
line-height: 22px;
font-size: 16px;
}
}
.stat {
position: absolute;
right: 20px;
right: 0;
top: 0;
display: flex;
background: rgba(255, 255, 255, .5);
margin: 20px 5px;
border-radius: 10px;
margin: 16px;
border-radius: 29px;
height: 58px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .4);
}
.stat-li {
@width: 70px;
@padding: 8px;
padding: 7px;
width: 70px;
width: @width;
height: 58px;
text-align: center;
position: relative;
&:nth-child(even) {
background: rgba(225, 225, 225, .8);
}
&:first-child {
width: @width+@padding;
padding-left: 7px+@padding;
}
&:last-child {
width: @width+@padding;
padding-right: 7px+@padding;
}
strong {
font-size: 22px;
@ -111,7 +129,7 @@
.item {
width: 93px;
height: 93*1.15px;
height: 93*1.25px;
background: url('./imgs/exploration.webp') no-repeat;
background-size: auto 100%;
border-radius: 4px;
@ -120,19 +138,20 @@
color: #fff;
strong {
font-size: 22px;
font-size: 24px;
display: block;
height: 26px;
line-height: 26px;
height: 30px;
line-height: 30px;
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .5);
}
span {
margin-top: 58px;
font-size: 12px;
height: 18px;
line-height: 18px;
font-size: 14px;
height: 20px;
line-height: 20px;
display: block;
text-shadow: 0 0 1px rgba(0, 0, 0, .5);
}
}
@ -160,14 +179,26 @@
}
.cont-notice {
color: #888;
background: rgba(255, 255, 255, .4);
font-size: 13px;
text-align: center;
padding: 8px;
text-align: right;
strong {
color: #d3bc8e;
}
span {
padding: 0 3px;
color: #555;
color: #aaa;
}
}
.ck-notice {
text-align: center;
color: rgba(255, 255, 255, .9);
font-size: 13px;
strong {
color: #d3bc8e;
padding: 0 2px;
font-weight: normal;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 236 KiB

View File

@ -138,7 +138,7 @@
background-color: #ff5722;
}
.avatar-card {
margin: 3px;
margin: 4.5px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
font-size: 19.5px;
border-radius: 10.5px;
@ -168,20 +168,20 @@
bottom: 0;
background: rgba(0, 0, 0, 0.6);
left: 0;
padding: 2px 5px 2px 3px;
border-radius: 0 4px 0 0;
padding: 3px 7.5px 3px 4.5px;
border-radius: 0 6px 0 0;
color: #fff;
}
.avatar-card .cons {
border-radius: 0 0 0 5px;
padding: 2px 5px;
border-radius: 0 0 0 7.5px;
padding: 3px 7.5px;
position: absolute;
right: 0;
top: 0;
}
.avatar-card .avatar-talent {
height: 30px;
padding: 3px 5px 2px;
padding: 4.5px 7.5px 3px;
font-size: 18px;
width: 100%;
color: #222;
@ -192,13 +192,13 @@
width: 30px;
height: 24px;
line-height: 25.5px;
margin: 0 2px;
margin: 0 3px;
text-align: center;
display: block;
background-size: contain;
opacity: 0.8;
position: relative;
border-radius: 3px;
border-radius: 4.5px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
}
.avatar-card .avatar-talent .talent-item.talent-plus {
@ -208,13 +208,13 @@
.avatar-card .avatar-talent .talent-item.talent-crown {
background: #d3bc8e;
color: #3a2702;
box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 3px 0 #000;
}
.avatar-card .avatar-talent.no-talent {
font-size: 18px;
color: rgba(100, 100, 100, 0.5);
text-align: center;
padding: 3px 0 2px;
padding: 4.5px 0 3px;
}
.avatar-card .avatar-talent.no-talent span {
transform: scale(0.75);
@ -226,7 +226,7 @@
display: none;
}
.avatar-card .avatar-name {
padding: 8px 0 0 5px;
padding: 12px 0 0 7.5px;
color: #333;
}
.avatar-card .avatar-name strong {
@ -238,7 +238,7 @@
.avatar-card .avatar-name .cons {
position: initial;
border-radius: 4px;
padding: 1px 3px;
padding: 1.5px 4.5px;
vertical-align: baseline;
}
.avatar-card.card-wide .mini {
@ -250,14 +250,14 @@
}
.avatar-card.card-wide .avatar-face {
height: 189px;
width: 76px;
width: 114px;
border-radius: 10.5px 0 0 10.5px;
}
.avatar-card.card-wide .img {
background-size: 100% auto;
background-position: 0 10%;
height: 135px;
margin-top: -9px;
margin-top: -13.5px;
}
.avatar-card.card-wide .avatar-info {
width: 105px;
@ -286,13 +286,14 @@
}
.avatar-card .avatar-detail {
display: flex;
padding: 0 1px 2px;
padding: 0 1.5px 3px 3px;
}
.avatar-card .avatar-detail .item {
width: 46.5px;
height: 46.5px;
border-radius: 4px;
margin: 1px;
border-radius: 4.5px;
margin: 1.5px;
overflow: hidden;
}
.avatar-card .avatar-weapon .icon {
border-radius: 4px;
@ -300,8 +301,8 @@
.avatar-card .avatar-weapon .cons {
top: initial;
bottom: 0;
padding: 1px 3px;
border-radius: 3px 0 0 0;
padding: 1.5px 4.5px;
border-radius: 4.5px 0 0 0;
}
.avatar-card .avatar-artis {
position: relative;

View File

@ -1,9 +1,7 @@
.avatar-card {
@px: 1.5px;
margin: 3px;
margin: @px*3;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
font-size: @px*13;
border-radius: @px*7;
@ -36,16 +34,16 @@
bottom: 0;
background: rgba(0, 0, 0, 0.6);
left: 0;
padding: 2px 5px 2px 3px;
border-radius: 0 4px 0 0;
padding: @px*2 @px*5 @px*2 @px*3;
border-radius: 0 @px*4 0 0;
color: #fff;
}
}
.cons {
border-radius: 0 0 0 5px;
padding: 2px 5px;
border-radius: 0 0 0 @px*5;
padding: @px*2 @px*5;
position: absolute;
right: 0;
top: 0;
@ -53,7 +51,7 @@
.avatar-talent {
height: @px*20;
padding: 3px 5px 2px;
padding: @px*3 @px*5 @px*2;
font-size: @px*12;
width: 100%;
color: #222;
@ -64,13 +62,13 @@
width: @px*20;
height: @px*16;
line-height: @px*17;
margin: 0 2px;
margin: 0 @px*2;
text-align: center;
display: block;
background-size: contain;
opacity: 0.8;
position: relative;
border-radius: 3px;
border-radius: @px*3;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
&.talent-plus {
@ -81,7 +79,7 @@
&.talent-crown {
background: #d3bc8e;
color: #3a2702;
box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 @px*2 0 #000;
}
}
@ -89,7 +87,7 @@
font-size: @px*12;
color: rgba(100, 100, 100, .5);
text-align: center;
padding: 3px 0 2px;
padding: @px*3 0 @px*2;
span {
transform: scale(.75);
@ -106,7 +104,7 @@
}
.avatar-name {
padding: 8px 0 0 5px;
padding: @px*8 0 0 @px*5;
color: #333;
strong {
@ -119,7 +117,7 @@
.cons {
position: initial;
border-radius: 4px;
padding: 1px 3px;
padding: @px @px*3;
vertical-align: baseline;
}
}
@ -136,7 +134,7 @@
.avatar-face {
height: @px * 126;
width: 76px;
width: @px*76;
border-radius: @px*7 0 0 @px*7;
}
@ -144,7 +142,7 @@
background-size: 100% auto;
background-position: 0 10%;
height: 135px;
margin-top: -9px;
margin-top: @px*-9;
}
.avatar-info {
@ -186,13 +184,14 @@
.avatar-detail {
display: flex;
padding: 0 1px 2px;
padding: 0 @px*1 @px*2 @px*2;
.item {
width: @px*31;
height: @px*31;
border-radius: 4px;
margin: 1px;
border-radius: @px*3;
margin: @px*1;
overflow: hidden;
}
}
@ -204,8 +203,8 @@
.cons {
top: initial;
bottom: 0;
padding: 1px 3px;
border-radius: 3px 0 0 0;
padding: @px @px*3;
border-radius: @px*3 0 0 0;
}
}
@ -233,7 +232,5 @@
}
}
}
}
}