#角色增加角色名片及宝箱展示

This commit is contained in:
Kokomi 2023-02-11 05:31:41 +08:00
parent c96c32f1fd
commit bcd44c7003
24 changed files with 270 additions and 34 deletions

View File

@ -1,5 +1,6 @@
import { Cfg, Common } from '../../components/index.js' import { Cfg, Common } from '../../components/index.js'
import { MysApi, Player } from '../../models/index.js' import { MysApi, Player, Character } from '../../models/index.js'
import moment from 'moment'
export async function profileStat (e) { export async function profileStat (e) {
let isMatch = /^#(面板|喵喵|角色|武器|天赋|技能|圣遗物)练度统计?$/.test(e.original_msg || e.msg || '') let isMatch = /^#(面板|喵喵|角色|武器|天赋|技能|圣遗物)练度统计?$/.test(e.original_msg || e.msg || '')
@ -33,12 +34,22 @@ export async function profileStat (e) {
let talentNotice = '' let talentNotice = ''
let faceChar = Character.get(player.face || avatarRet[0]?.id)
let face = {
banner: faceChar.imgs?.banner,
face: faceChar.imgs?.face,
name: player.name || `#${uid}`,
sign: player.sign,
level: player.level
}
return await Common.render(isAvatarList ? 'character/avatar-list' : 'character/profile-stat', { return await Common.render(isAvatarList ? 'character/avatar-list' : 'character/profile-stat', {
save_id: uid, save_id: uid,
uid, uid,
info: player.info || {}, info: player.getInfo(),
isStat: !isAvatarList, isStat: !isAvatarList,
talentLvMap: '0,1,1,1,2,2,3,3,3,4,5'.split(','), talentLvMap: '0,1,1,1,2,2,3,3,3,4,5'.split(','),
face,
avatars: avatarRet, avatars: avatarRet,
isSelf: e.isSelf, isSelf: e.isSelf,
talentNotice talentNotice

View File

@ -161,6 +161,37 @@ export default class Player extends Base {
return ret return ret
} }
getInfo () {
let ret = {
...(this.info || {}),
statMap: {
achievement: '成就数',
commonChest: '普通宝箱',
exquisiteChest: '精致宝箱',
preciousChest: '珍贵宝箱',
luxuriousChest: '豪华宝箱'
}
}
if (ret?.stats?.activeDay) {
let num = ret?.stats?.activeDay
let year = Math.floor(num / 365)
let month = Math.floor((num % 365) / 30.41)
let day = Math.floor((num % 365) % 30.41)
let msg = ''
if (year > 0) {
msg += year + '年'
}
if (month > 0) {
msg += month + '个月'
}
if (day > 0) {
msg += day + '天'
}
ret.activeDay = msg
}
return ret
}
// 更新面板 // 更新面板
async refreshProfile (force = true) { async refreshProfile (force = true) {
return await Profile.refreshProfile(this, force) return await Profile.refreshProfile(this, force)

View File

@ -5,6 +5,82 @@
.head-box { .head-box {
margin-top: 0; margin-top: 0;
} }
#banner {
height: 90px;
background-size: auto 100%;
background-position: right center;
background-repeat: no-repeat;
background-color: #f0ece4;
border-radius: 50px;
padding: 1px;
margin: 5px 0;
display: flex;
white-space: nowrap;
position: relative;
}
#banner .face {
width: 70px;
height: 70px;
margin: 10px;
border-radius: 50%;
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5);
border: 3px solid #fff;
overflow: hidden;
background: url('../common/item/bg5.png');
background-size: cover;
}
#banner .face span {
display: block;
width: 64px;
height: 64px;
background-size: auto 100%;
background-repeat: no-repeat;
}
#banner .user-info {
padding: 15px 5px;
color: #414e64;
}
#banner .user-info .name {
height: 32px;
line-height: 32px;
}
#banner .user-info .name strong {
font-size: 26px;
}
#banner .user-info .name span {
padding-left: 5px;
}
#banner .user-info .uid {
height: 28px;
line-height: 28px;
}
#banner .stat {
position: absolute;
right: 20px;
top: 0;
display: flex;
background: rgba(255, 255, 255, 0.5);
margin: 20px 5px;
border-radius: 10px;
}
#banner .stat-li {
padding: 7px;
width: 70px;
text-align: center;
position: relative;
}
#banner .stat-li:nth-child(even) {
background: rgba(225, 225, 225, 0.8);
}
#banner .stat-li strong {
font-size: 22px;
display: block;
}
#banner .stat-li span {
display: block;
font-size: 14px;
color: #414e64;
}
#avatar-list { #avatar-list {
width: calc(100% + 30px); width: calc(100% + 30px);
margin: 0 -15px -5px; margin: 0 -15px -5px;
@ -13,27 +89,27 @@
.exploration { .exploration {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 6px; padding: 16px;
} }
.exploration .item { .exploration .item {
width: 95px; width: 93px;
height: 106.4px; height: 106.95px;
background: url('./imgs/exploration.webp') no-repeat; background: url('./imgs/exploration.webp') no-repeat;
background-size: auto 100%; background-size: auto 100%;
border-radius: 4px; border-radius: 4px;
margin: 4px; margin: 3px;
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.exploration .item strong { .exploration .item strong {
font-size: 18px; font-size: 22px;
display: block; display: block;
height: 22px; height: 26px;
line-height: 22px; line-height: 26px;
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, 0.5);
} }
.exploration .item span { .exploration .item span {
margin-top: 60px; margin-top: 58px;
font-size: 12px; font-size: 12px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;

View File

@ -7,8 +7,30 @@
{{block 'main'}} {{block 'main'}}
<div class="head-box"> <div id="banner" style="background-image:url({{_res_path}}{{face?.banner}})">
<div class="title">#角色</div> <div class="face">
<span style="background-image:url({{_res_path}}{{face?.face}})"></span>
</div>
<div class="user-info">
<div class="name">
<strong>{{face.name}}</strong>
{{if face.level}}<span> #{{uid}}</span>{{/if}}
</div>
<div class="uid">
{{if face.level}} Lv.{{face.level}}·{{/if}}
{{ if info.activeDay}}{{info.activeDay}} {{/if}}
</div>
</div>
<div class="stat">
{{each info?.statMap title key}}
{{if info.stats[key] }}
<div class="stat-li">
<strong>{{info.stats[key]}}</strong>
<span>{{title}}</span>
</div>
{{/if}}
{{/each}}
</div>
</div> </div>
<div id="avatar-list"> <div id="avatar-list">
{{if info && info.exploration}} {{if info && info.exploration}}

View File

@ -8,6 +8,96 @@
margin-top: 0; margin-top: 0;
} }
#banner {
height: 90px;
background-size: auto 100%;
background-position: right center;
background-repeat: no-repeat;
background-color: #f0ece4;
border-radius: 50px;
padding: 1px;
margin: 5px 0;
display: flex;
white-space: nowrap;
position: relative;
.face {
width: 70px;
height: 70px;
margin: 10px;
border-radius: 50%;
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5);
border: 3px solid #fff;
overflow: hidden;
background: url('../common/item/bg5.png');
background-size: cover;
span {
display: block;
width: 64px;
height: 64px;
background-size: auto 100%;
background-repeat: no-repeat;
}
}
.user-info {
padding: 15px 5px;
color: #414e64;
.name {
height: 32px;
line-height: 32px;
strong {
font-size: 26px;
}
span {
padding-left: 5px;
}
}
.uid {
height: 28px;
line-height: 28px;
}
}
.stat {
position: absolute;
right: 20px;
top: 0;
display: flex;
background: rgba(255, 255, 255, .5);
margin: 20px 5px;
border-radius: 10px;
}
.stat-li {
padding: 7px;
width: 70px;
text-align: center;
position: relative;
&:nth-child(even) {
background: rgba(225, 225, 225, .8);
}
strong {
font-size: 22px;
display: block;
}
span {
display: block;
font-size: 14px;
color: #414e64;
}
}
}
#avatar-list { #avatar-list {
width: calc(100% + 30px); width: calc(100% + 30px);
margin: 0 -15px -5px; margin: 0 -15px -5px;
@ -17,28 +107,28 @@
.exploration { .exploration {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 6px; padding: 16px;
.item { .item {
width: 95px; width: 93px;
height: 95*1.12px; height: 93*1.15px;
background: url('./imgs/exploration.webp') no-repeat; background: url('./imgs/exploration.webp') no-repeat;
background-size: auto 100%; background-size: auto 100%;
border-radius: 4px; border-radius: 4px;
margin: 4px; margin: 3px;
text-align: center; text-align: center;
color: #fff; color: #fff;
strong { strong {
font-size: 18px; font-size: 22px;
display: block; display: block;
height: 22px; height: 26px;
line-height: 22px; line-height: 26px;
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .5); text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .5);
} }
span { span {
margin-top: 60px; margin-top: 58px;
font-size: 12px; font-size: 12px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

View File

@ -45,5 +45,5 @@
"talent": "「笃行」的哲学", "talent": "「笃行」的哲学",
"weekly": "空行的虚铃" "weekly": "空行的虚铃"
}, },
"eta": 1670382000000 "eta": 1670378400000
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 264 KiB

After

Width:  |  Height:  |  Size: 42 KiB

View File

@ -26,7 +26,7 @@
"talentKey": { "talentKey": {
"7631": "a", "7631": "a",
"7632": "e", "7632": "e",
"7639": "q" "7633": "q"
}, },
"talentId": { "talentId": {
"10761": 7631, "10761": 7631,
@ -45,5 +45,5 @@
"talent": "「诤言」的哲学", "talent": "「诤言」的哲学",
"weekly": "傀儡的悬丝" "weekly": "傀儡的悬丝"
}, },
"eta": 1670382000000 "eta": 1670378400000
} }

View File

@ -821,7 +821,8 @@
"3": { "3": {
"name": "漫行灵圃", "name": "漫行灵圃",
"desc": [ "desc": [
"非想风天的技能等级提高3级。至多提升至15级。" "<h3>非想风天的技能等级提高3级。</h3>",
"至多提升至15级。"
] ]
}, },
"4": { "4": {
@ -834,7 +835,8 @@
"5": { "5": {
"name": "繁想奇境", "name": "繁想奇境",
"desc": [ "desc": [
"抟风秘道的技能等级提高3级。至多提升至15级。" "<h3>抟风秘道的技能等级提高3级。</h3>",
"至多提升至15级。"
] ]
}, },
"6": { "6": {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 264 KiB

After

Width:  |  Height:  |  Size: 33 KiB

View File

@ -45,5 +45,5 @@
"talent": "「勤劳」的哲学", "talent": "「勤劳」的哲学",
"weekly": "空行的虚铃" "weekly": "空行的虚铃"
}, },
"eta": 1674010800000 "eta": 1674007200000
} }

View File

@ -1013,7 +1013,8 @@
"3": { "3": {
"name": "墩墩善道", "name": "墩墩善道",
"desc": [ "desc": [
"云台团团降芦菔的技能等级提高3级。至多提升至15级。" "云台团团降芦菔的技能等级提高3级。",
"至多提升至15级。"
] ]
}, },
"4": { "4": {
@ -1025,7 +1026,8 @@
"5": { "5": {
"name": "恻隐本义", "name": "恻隐本义",
"desc": [ "desc": [
"玉颗珊珊月中落的技能等级提高3级。至多提升至15级。" "玉颗珊珊月中落的技能等级提高3级。",
"至多提升至15级。"
] ]
}, },
"6": { "6": {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 267 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 64 KiB

View File

@ -45,5 +45,5 @@
"talent": "「巧思」的哲学", "talent": "「巧思」的哲学",
"weekly": "傀儡的悬丝" "weekly": "傀儡的悬丝"
}, },
"eta": 1667358000000 "eta": 1667354400000
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 262 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -45,5 +45,5 @@
"talent": "「巧思」的哲学", "talent": "「巧思」的哲学",
"weekly": "无心的渊镜" "weekly": "无心的渊镜"
}, },
"eta": 1674010800000 "eta": 1674007200000
} }

View File

@ -1370,7 +1370,8 @@
"3": { "3": {
"name": "遮诠", "name": "遮诠",
"desc": [ "desc": [
"共相·理式摹写的技能等级提高3级。至多提升至15级。" "共相·理式摹写的技能等级提高3级。",
"至多提升至15级。"
] ]
}, },
"4": { "4": {
@ -1385,7 +1386,8 @@
"5": { "5": {
"name": "智度", "name": "智度",
"desc": [ "desc": [
"殊境·显象缚结的技能等级提高3级。至多提升至15级。" "殊境·显象缚结的技能等级提高3级。",
"至多提升至15级。"
] ]
}, },
"6": { "6": {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 267 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 61 KiB

View File

@ -45,5 +45,5 @@
"talent": "「巧思」的哲学", "talent": "「巧思」的哲学",
"weekly": "无心的渊镜" "weekly": "无心的渊镜"
}, },
"eta": 1667358000000 "eta": 1667354400000
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 262 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

@ -275,4 +275,4 @@ let eta = {
迪希雅: '2023-03-01', 迪希雅: '2023-03-01',
米卡: '2023-03-01' 米卡: '2023-03-01'
} }
await down('迪希雅,米卡', true) await down('艾尔海森,珐露珊,莱依拉,流浪者,纳西妲,瑶瑶', true)