日历会展示本日可刷天赋角色列表

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 * `#日历` 页面样式微调，功能升级
     * 日历中会展示角色生日
-    * 日历会展示本日可刷天赋角色列表（暂未完成）
+    * 日历会展示本日可刷天赋角色列表
 * 一些已知问题修复
 
 # 2.0.1~2.0.2

apps/wiki/Calendar.js

@@ -1,6 +1,6 @@
 import fetch from 'node-fetch'
 import moment from 'moment'
-import { Character } from '../../models/index.js'
+import { Character, Material } from '../../models/index.js'
 import { Data } from '../../components/index.js'
 import lodash from 'lodash'
 
@@ -193,21 +193,46 @@ let Cal = {
 
   getCharData (dateList) {
     let charBirth = {}
+    let charTalent = {}
+    // 初始化生日数据
     lodash.forEach(dateList, (m) => {
       lodash.forEach(m.date, (d) => {
         charBirth[`${m.month}-${d}`] = []
       })
     })
+    // 初始化天赋数据
+    let now = moment(new Date())
+    if (now.hour() < 4) {
+      now = now.add(-1, 'days')
+    }
+    let week = now.weekday()
+    Material.forEach('talent', (material) => {
+      let data = material.getData('name,abbr,city,icon,week,cid')
+      data.chars = []
+      charTalent[material.name] = data
+    }, (ds) => ds.star === 4 && (week === 6 || ds.week === week % 3 + 1))
+    // 遍历角色数据
     Character.forEach((char) => {
-      if (charBirth[char.birth]) {
-        charBirth[char.birth].push(char.getData('id,sName,star,face'))
+      if (charBirth[char.birth] && (char.isRelease || char.birth !== '1-1')) {
+        charBirth[char.birth].push(char.getData('id,name:sName,star,face'))
       }
-    }, 'release')
+      let t = char.materials?.talent
+      if (t && charTalent[t] && !char.isTraveler) {
+        let data = char.getData('id,name:sName,star,face')
+        data.weekly = char.getMaterials('weekly')?.icon
+        charTalent[t].chars.push(data)
+      }
+    }, 'official')
     let charNum = 0
     lodash.forEach(charBirth, (charList) => {
       charNum = Math.max(charNum, charList.length)
     })
-    return { charBirth, charNum }
+    charTalent = lodash.values(charTalent)
+    charTalent = lodash.sortBy(charTalent, 'cid')
+    lodash.forEach(charTalent, (ds) => {
+      ds.chars = lodash.sortBy(ds.chars, ['star', 'id']).reverse()
+    })
+    return { charBirth, charNum, charTalent }
   },
 
   getList (ds, target, { startTime, endTime, totalRange, now, timeMap = {} }, isAct = false) {

models/Avatar.js

@@ -148,7 +148,9 @@ export default class Avatar extends Base {
         }
       }
       let ret = char.getAvatarTalent(talent, this.cons, 'original')
-      ret.id = id
+      if (ret) {
+        ret.id = id
+      }
       return ret
     }
     if (this.profile) {

models/Character.js

@@ -130,8 +130,8 @@ class Character extends Base {
     return CharMeta.getAttrList(meta.baseAttr, meta.growAttr, this.elemName)
   }
 
-  getMaterials () {
-    return CharMeta.getMaterials(this)
+  getMaterials (type = 'all') {
+    return CharMeta.getMaterials(this, type)
   }
 
   getLvStat () {
@@ -266,7 +266,7 @@ class Character extends Base {
       if (type === 'release' && !char.isRelease) {
         return true
       }
-      if (type === 'official' && !char.isCustom) {
+      if (type === 'official' && !char.isOfficial) {
         return true
       }
       return fn(char) !== false

models/Material.js

@@ -44,6 +44,10 @@ class Material extends Base {
     this.meta = meta
     this.type = meta.type
     this.star = meta.star
+    if (this.type === 'talent') {
+      let talentData = MaterialMeta.getTalentData(this.name)
+      lodash.extend(this, talentData)
+    }
     return this._cache()
   }
 
@@ -81,13 +85,28 @@ class Material extends Base {
     }
     return ''
   }
-}
 
-Material.get = function (name) {
-  if (mMap[name]) {
-    return new Material(name)
+  static get (name) {
+    if (mMap[name]) {
+      return new Material(name)
+    }
+    return false
+  }
+
+  static forEach (type = 'all', fn, filter = false) {
+    if (!lodash.isFunction(filter)) {
+      filter = () => true
+    }
+    lodash.forEach(mMap, (ds, name) => {
+      if (type !== 'all' && type !== ds.type) {
+        return true
+      }
+      let obj = new Material(name)
+      if (filter(obj)) {
+        return fn(obj) !== false
+      }
+    })
   }
-  return false
 }
 
 export default Material

models/character-lib/CharMeta.js

@@ -126,24 +126,27 @@ const CharMeta = {
     })
     return ret
   },
-  getMaterials (char) {
+  getMaterials (char, type = 'all') {
     let ds = char.meta.materials
     let ret = []
     lodash.forEach(mKeys, (cfg) => {
       let title = ds[cfg.key]
       let mat = Material.get(title)
       if (!mat) {
-        return
+        return true
       }
       if (cfg.check && !cfg.check(char)) {
-        return
+        return true
+      }
+      if (type !== 'all' && mat.type !== type) {
+        return true
       }
       ret.push({
         ...mat.getData('label,star,icon,type'),
         num: cfg.num || mat.getSource() || ''
       })
     })
-    return ret
+    return type === 'all' ? ret : ret[0]
   },
 
   getLvStat (char) {

models/character-lib/CharTalent.js

@@ -40,7 +40,10 @@ const CharTalent = {
       }
       ret[key] = { level, original }
     })
-    return lodash.isEmpty(ret) ? false : ret
+    if (lodash.isEmpty(ret)) {
+      return false
+    }
+    return ret
   }
 }
 export default CharTalent

models/material-lib/MaterialMeta.js

@@ -2,20 +2,20 @@ import lodash from 'lodash'
 import { Data } from '../../components/index.js'
 
 const talentMeta = {
-  自由: { week: 1, city: '蒙德' },
-  繁荣: { week: 1, city: '璃月' },
-  浮世: { week: 1, city: '稻妻' },
-  诤言: { week: 1, city: '须弥' },
+  自由: { week: 1, city: '蒙德', cid: 1 },
+  繁荣: { week: 1, city: '璃月', cid: 2 },
+  浮世: { week: 1, city: '稻妻', cid: 3 },
+  诤言: { week: 1, city: '须弥', cid: 4 },
 
-  抗争: { week: 2, city: '蒙德' },
-  勤劳: { week: 2, city: '璃月' },
-  风雅: { week: 2, city: '稻妻' },
-  巧思: { week: 2, city: '须弥' },
+  抗争: { week: 2, city: '蒙德', cid: 1 },
+  勤劳: { week: 2, city: '璃月', cid: 2 },
+  风雅: { week: 2, city: '稻妻', cid: 3 },
+  巧思: { week: 2, city: '须弥', cid: 4 },
 
-  诗文: { week: 3, city: '蒙德' },
-  黄金: { week: 3, city: '璃月' },
-  天光: { week: 3, city: '稻妻' },
-  笃行: { week: 3, city: '须弥' },
+  诗文: { week: 3, city: '蒙德', cid: 1 },
+  黄金: { week: 3, city: '璃月', cid: 2 },
+  天光: { week: 3, city: '稻妻', cid: 3 },
+  笃行: { week: 3, city: '须弥', cid: 4 }
 }
 
 const talentReg = new RegExp(`(${lodash.keys(talentMeta).join('|')})`)

resources/wiki/calendar.css

@@ -345,4 +345,106 @@ body {
 .list-mode .now-line {
   display: none;
 }
+.daily-talent {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 5px 10px 0;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 10px 9px 10px;
+  border-radius: 10px;
+}
+.daily-talent .item-icon {
+  overflow: visible;
+}
+.daily-talent .card {
+  width: 87px;
+  height: 105px;
+  margin: 10px 0 15px;
+}
+.daily-talent .card .item-icon {
+  width: 77px;
+  margin: 0 6px;
+  height: 82px;
+  padding-top: 5px;
+}
+.daily-talent .card .img {
+  width: 77px;
+  height: 77px;
+}
+.daily-talent .card .weekly {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  bottom: -10px;
+  right: -3px;
+  background-color: rgba(232, 226, 216, 0.9);
+  box-shadow: 0 0 2px 0 #000;
+  overflow: visible;
+}
+.daily-talent .card .weekly .weekly-icon {
+  width: 30px;
+  height: 30px;
+  margin: -3px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.daily-talent .card .banner {
+  height: 20px;
+  padding-top: 1px;
+  line-height: 20px;
+  color: #fff;
+  position: relative;
+  margin-bottom: 8px;
+}
+.daily-talent .card .banner .title {
+  margin-right: -50px;
+  width: calc(100% + 50px);
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8);
+  padding-left: 45px;
+  font-size: 18px;
+}
+.daily-talent .card .banner .icon {
+  width: 40px;
+  height: 40px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  top: -8px;
+}
+.daily-talent .card .banner .line {
+  height: 6px;
+  width: 100%;
+  margin-top: 13px;
+}
+.daily-talent .card .banner .line.first {
+  margin-left: 35%;
+  width: 65%;
+  border-radius: 3px 0 0 3px;
+}
+.daily-talent .card .banner .line.last {
+  width: 94%;
+  border-radius: 0 3px 3px 0;
+}
+.daily-talent .card .banner.city-1 .line {
+  background: #37c9b8;
+}
+.daily-talent .card .banner.city-2 .line {
+  background: #bca244;
+}
+.daily-talent .card .banner.city-3 .line {
+  background: #ac60c9;
+}
+.daily-talent .card .banner.city-4 .line {
+  background: #54b640;
+}
 /*# sourceMappingURL=calendar.css.map */

resources/wiki/calendar.html

@@ -29,7 +29,7 @@
           <div class="card">
             <div class="item-icon star{{char.star}}">
               <div class="img" style="background-image:url({{_res_path}}{{char.face}})"></div>
-              <span class="char-name">{{char.sName.length>=4?char.sName:`${char.sName}生日`}}</span>
+              <span class="char-name">{{char.name.length>=4?char.name:`${char.name}生日`}}</span>
             </div>
           </div>
           {{char.name}}
@@ -92,4 +92,28 @@
 <div class="now-time">
   <span>当前时间：{{nowTime}}</span>
 </div>
+<div class="daily-talent">
+  {{each charTalent talent}}
+
+  {{each talent.chars char idx}}
+  <div class="card">
+    <div class="banner city-{{talent.cid}}">
+      {{if idx===0}}
+      <div class="title">
+        <div class="icon" style="background-image:url({{_res_path}}{{talent.icon}})"></div>
+        <span>{{talent.city}}·{{talent.abbr}}</span>
+      </div>
+      {{/if}}
+      <div class="line {{idx===0?'first':(idx===talent.chars.length-1?'last':'')}}"></div>
+    </div>
+    <div class="item-icon star{{char.star}}">
+      <div class="img" style="background-image:url({{_res_path}}{{char.face}})"></div>
+      <div class="weekly">
+        <div class="weekly-icon" style="background-image:url({{_res_path}}{{char.weekly}})"></div>
+      </div>
+    </div>
+  </div>
+  {{/each}}
+  {{/each}}
+</div>
 {{/block}}

resources/wiki/calendar.less

@@ -454,3 +454,120 @@ body {
     display: none;
   }
 }
+
+@width: 77px;
+
+.daily-talent {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 5px 10px 0;
+  background: rgba(0, 0, 0, .5);
+  padding: 10px 9px 10px;
+  border-radius: 10px;
+
+
+  .item-icon {
+    overflow: visible;
+  }
+
+  .card {
+    width: @width + 10px;
+    height: @width + 28px;
+    margin: 10px 0 15px;
+
+
+    .item-icon {
+      width: @width;
+      margin: 0 6px;
+      height: @width + 5px;
+      padding-top: 5px;
+    }
+
+    .img {
+      width: @width;
+      height: @width;
+    }
+
+    .weekly {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      bottom: -10px;
+      right: -3px;
+      background-color: rgba(232, 226, 216, 0.9);
+      box-shadow: 0 0 2px 0 #000;
+      overflow: visible;
+
+      .weekly-icon {
+        width: 30px;
+        height: 30px;
+        margin: -3px;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+
+    .banner {
+      height: 20px;
+      padding-top: 1px;
+      line-height: 20px;
+      color: #fff;
+      position: relative;
+      margin-bottom: 8px;
+
+      .title {
+        margin-right: -50px;
+        width: calc(100% + 50px);
+        display: flex;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        text-shadow: 0 0 1px rgba(0, 0, 0, .8), 1px 1px 2px rgba(0, 0, 0, .8);
+        padding-left: 45px;
+        font-size: 18px;
+      }
+
+      .icon {
+        width: 40px;
+        height: 40px;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        top: -8px;
+      }
+
+      .line {
+        height: 6px;
+        width: 100%;
+        margin-top: 13px;
+
+        &.first {
+          margin-left: 35%;
+          width: 65%;
+          border-radius: 3px 0 0 3px;
+        }
+
+        &.last {
+          width: 94%;
+          border-radius: 0 3px 3px 0;
+        }
+      }
+
+      .city(@name, @bg) {
+        &.city-@{name} .line {
+          background: @bg;
+        }
+      }
+      .city(1, #37c9b8);
+      .city(2, #bca244);
+      .city(3, #ac60c9);
+      .city(4, #54b640);
+    }
+  }
+}