Fix: 幻想真境剧诗改版解析 (#814)

* Fix header

* Add more detailed info

* Add total_use_time & adjust css

models/RoleCombat.js

@@ -15,11 +15,25 @@ export default class RoleCombat extends Base {
   constructor (data) {
     super()
     this.rounds = {}
+    function getSplendourBuffSummary(level) {
+      return {
+        'total_level': level,
+        'hp_increase': level * 800,
+        'atk_increase': level * 50,
+        'def_increase': level * 50,
+        'em_increase': level * 20
+      }
+    }
     lodash.forEach(data.detail.rounds_data, (round) => {
       let tmp = {
         is_get_medal: round.is_get_medal,
         choice_cards: round.choice_cards,
-        buffs: round.buffs
+        buffs: round.buffs, // TODO: 改版之后这个 buffs 似乎都返回一个空的 list 了
+        enemies: round.enemies,
+        splendour_buff: {
+          summary: getSplendourBuffSummary(round.splendour_buff.summary.total_level),
+          buffs: round.splendour_buff.buffs
+        }
       }
       let time = moment(new Date(round.finish_time * 1000))
       tmp.finish_time = time.format('MM-DD HH:mm:ss')
@@ -42,6 +56,7 @@ export default class RoleCombat extends Base {
     })
     this.stat = data.stat
     this.month = data.schedule.start_date_time.month
+    this.stat.total_use_time = data.detail.fight_statisic.total_use_time
   }
 
   getData () {

resources/stat/role-summary.css

@@ -41,11 +41,11 @@ body,
 }
 .role-stat .cont {
   margin: 5px 10px 5px 5px;
-  width: 175px;
+  width: 150px;
-  height: 90px;
+  height: 82px;
 }
 .role-stat .cont.star-display {
-  width: 230px;
+  width: 300px;
 }
 .role-stat strong {
   text-shadow: 0 0 3px #000;
@@ -62,7 +62,7 @@ body,
   display: block;
   font-weight: normal;
   font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
-  font-size: 24px;
+  font-size: 20px;
 }
 .role-stat .stat-title strong {
   display: block;
@@ -82,8 +82,7 @@ body,
   justify-content: flex-start;
 }
 .role-stat .stat-msg .stat-star-container {
-  flex: 0 0 11%;
+  flex: 0 0 10%;
-  /* 23% 是为了在有间隙的情况下，四个元素一行 */
   margin-bottom: 10px;
 }
 .role-stat .stat-msg .stat-star-container .stat-star {
@@ -134,26 +133,53 @@ body,
 }
 .role-buff .role-choice-cards-container {
   width: 100%;
-  height: 46%;
+  height: 100%;
   background-color: #e7e5d9;
   display: flex;
   border-radius: 10px;
   overflow: hidden;
   flex-direction: column;
 }
-.role-buff .role-choice-cards-container .role-choice-cards-header {
+.role-buff .role-enemy-container {
+  width: 20%;
+  height: 100%;
+  background-color: #e7e5d9;
+  display: flex;
+  border-radius: 10px;
+  overflow: hidden;
+  flex-direction: column;
+}
+.role-buff .role-splendour-container {
+  width: 40%;
+  height: 100%;
+  background-color: #e7e5d9;
+  display: flex;
+  border-radius: 10px;
+  overflow: hidden;
+  flex-direction: column;
+}
+.role-buff .role-splendour-buff-container {
+  width: 40%;
+  height: 100%;
+  background-color: #e7e5d9;
+  display: flex;
+  border-radius: 10px;
+  overflow: hidden;
+  flex-direction: column;
+}
+.role-buff .role-choice-cards-header {
   width: 100%;
   height: 30px;
   background-color: #8b8b83;
   padding: 5px;
   font-size: 18px;
 }
-.role-buff .role-choice-cards-container .role-choice-cards-content {
+.role-buff .role-choice-cards-content {
   width: 100%;
   padding: 5px;
   display: flex;
 }
-.role-buff .role-choice-cards-container .role-choice-cards-content .role-content-container {
+.role-buff .role-choice-cards-content .role-content-container {
   width: 40px;
   display: flex;
   margin-top: 5px;
@@ -162,14 +188,20 @@ body,
   align-items: center;
   margin-right: 5px;
 }
-.role-buff .role-choice-cards-container .role-choice-cards-content .role-content-icon {
+.role-buff .role-choice-cards-content .role-content-icon {
   width: 40px;
   height: 40px;
   background-size: cover;
   background-color: black;
   border-radius: 50%;
 }
-.role-buff .role-choice-cards-container + .role-choice-cards-container {
+.role-buff .role-buff-line {
+  width: 100%;
+  height: 46%;
+  display: flex;
+  flex-direction: row;
+}
+.role-buff .role-buff-line + .role-buff-line {
   margin-top: 4%;
   /* 两个子元素之间的间距4% */
 }

resources/stat/role-summary.html

@@ -7,7 +7,7 @@
 {{/block}}
 
 {{block 'main'}}
-{{ set difficultyName = {1:'简单', 2:'普通', 3:'困难'} }}
+{{ set difficultyName = {1:'简单', 2:'普通', 3:'困难', 4:'卓越'} }}
 <div class="head-box type">
   <div class="title">#幻想真境剧诗<span>{{role.month}}月 · {{difficultyName[role.stat.difficulty_id]}}模式</span></div>
   <div class="uid">UID:{{uid}}</div>
@@ -31,6 +31,14 @@
           {{/each}}
         </div>
       </div>
+      <div class="cont" style="width:120px">
+        <div class="stat-title">
+          <span>总耗时</span>
+        </div>
+        <div class="stat-msg">
+          <strong>{{role.stat.total_use_time}} 秒</strong>
+        </div>
+      </div>
       <div class="cont">
         <div class="stat-title">
           <span>消耗幻剧之花</span>
@@ -56,6 +64,8 @@
         </div>
       </div>
     </div>
+  </div>
+      
 
   </div>
   {{set cardTypes={1:['wide wide2'],2:['wide','wide'],3:['wide','mini','mini'],4:['mini','mini','mini','mini']} }}
@@ -80,26 +90,54 @@
         </div>
         <div class="line"></div>
         <div class="role-buff">
-          {{set buffs=round?.buffs }}
+          <div class="role-buff-line">
-          <div class="role-choice-cards-container">
+            {{set enemies=round?.enemies }}
-            <div class="role-choice-cards-header">奇妙助益</div>
+            <div class="role-enemy-container">
-            <div class="role-choice-cards-content">
+              <div class="role-choice-cards-header">选择敌人</div>
-              {{each buffs buff}}
+              <div class="role-choice-cards-content">
+                {{set display_enemy = enemies?.[0]}}
+                <div class="role-content-container">
+                  <div class="role-content-icon" style="background-image:url({{display_enemy.icon}})"></div>
+                </div>
+              </div>
+            </div>
+            {{set splendour_summary=round?.splendour_buff?.summary}}
+            <div class="role-splendour-container">
+              <div class="role-choice-cards-header">辉彩祝福</div>
+              <div class="role-choice-cards-content" style="flex-direction: column">
+                  <div style="color: #0D0D0D">等级 {{splendour_summary?.total_level}}</div>
+                  <div style="color: #0D0DFF">生命值 +{{splendour_summary?.hp_increase}}
+                    <span style="color: #FD0D0D">攻击力 +{{splendour_summary?.atk_increase}}</span>
+                  </div>
+                  <div style="color: #A0A00D">防御力 +{{splendour_summary?.def_increase}}
+                    <span style="color: #00A000">元素精通 +{{splendour_summary?.em_increase}}</span>
+                  </div>
+              </div>
+            </div>
+            {{set buffs=round?.splendour_buff?.buffs}}
+            <div class="role-splendour-buff-container">
+              <div class="role-choice-cards-header">辉彩祝福 buff</div>
+              <div class="role-choice-cards-content">
+                {{each buffs buff}}             
                 <div class="role-content-container">
                   <div class="role-content-icon" style="background-image:url({{buff.icon}})"></div>
+                  <div style="color: black">Lv. {{buff.level}}</div>
                 </div>
-              {{/each}}
+                {{/each}}
+              </div>
             </div>
           </div>
-          {{set choice_cards=round?.choice_cards }}
+          <div class="role-buff-line">
-          <div class="role-choice-cards-container">
+            {{set choice_cards=round?.choice_cards }}
-            <div class="role-choice-cards-header">神秘收获</div>
+            <div class="role-choice-cards-container">
-            <div class="role-choice-cards-content">
+              <div class="role-choice-cards-header">神秘收获</div>
-              {{each choice_cards choice_card}}
+              <div class="role-choice-cards-content">
-                <div class="role-content-container">
+                {{each choice_cards choice_card}}
-                  <div class="role-content-icon" style="background-image:url({{choice_card.icon}})"></div>
+                  <div class="role-content-container">
-                </div>
+                    <div class="role-content-icon" style="background-image:url({{choice_card.icon}})"></div>
-              {{/each}}
+                  </div>
+                {{/each}}
+              </div>
             </div>
           </div>
         </div>

resources/stat/role-summary.less

@@ -47,12 +47,12 @@ body,
   .cont {
     // position: relative;
     margin: 5px 10px 5px 5px;
-    width: 175px;
+    width: 150px;
-    height: 90px;
+    height: 82px;
   }
 
   .cont.star-display {
-    width: 230px;
+    width: 300px;
   }
 
   strong {
@@ -71,7 +71,7 @@ body,
       display: block;
       font-weight: normal;
       .font-NZBZ;
-      font-size: 24px;
+      font-size: 20px;
     }
 
     strong {
@@ -94,8 +94,7 @@ body,
     justify-content: flex-start;
 
     .stat-star-container {
-      flex: 0 0 11%;
+      flex: 0 0 10%;
-      /* 23% 是为了在有间隙的情况下，四个元素一行 */
       margin-bottom: 10px;
 
       .stat-star {
@@ -156,47 +155,84 @@ body,
 
   .role-choice-cards-container {
     width: 100%;
-    height: 46%;
+    height: 100%;
     background-color: rgb(231, 229, 217);
     display: flex;
     border-radius: 10px;
     overflow: hidden;
     flex-direction: column;
+  }
 
-    .role-choice-cards-header {
+  .role-enemy-container {
-      width: 100%;
+    width: 20%;
-      height: 30px;
+    height: 100%;
-      background-color: rgb(139, 139, 131);
+    background-color: rgb(231, 229, 217);
-      padding: 5px;
+    display: flex;
-      font-size: 18px;
+    border-radius: 10px;
+    overflow: hidden;
+    flex-direction: column;
+  }
+
+  .role-splendour-container {
+    width: 40%;
+    height: 100%;
+    background-color: rgb(231, 229, 217);
+    display: flex;
+    border-radius: 10px;
+    overflow: hidden;
+    flex-direction: column;
+  }
+
+  .role-splendour-buff-container {
+    width: 40%;
+    height: 100%;
+    background-color: rgb(231, 229, 217);
+    display: flex;
+    border-radius: 10px;
+    overflow: hidden;
+    flex-direction: column;
+  }
+
+  .role-choice-cards-header {
+    width: 100%;
+    height: 30px;
+    background-color: rgb(139, 139, 131);
+    padding: 5px;
+    font-size: 18px;
+  }
+
+  .role-choice-cards-content {
+    width: 100%;
+    padding: 5px;
+    display: flex;
+
+    .role-content-container {
+      width: 40px;
+      display: flex;
+      margin-top: 5px;
+      margin-left: 5px;
+      flex-direction: column;
+      align-items: center;
+      margin-right: 5px
     }
 
-    .role-choice-cards-content {
+    .role-content-icon {
-      width: 100%;
+      width: 40px;
-      padding: 5px;
+      height: 40px;
-      display: flex;
+      background-size: cover;
-
+      background-color: black;
-      .role-content-container {
+      border-radius: 50%;
-        width: 40px;
-        display: flex;
-        margin-top: 5px;
-        margin-left: 5px;
-        flex-direction: column;
-        align-items: center;
-        margin-right: 5px
-      }
-
-      .role-content-icon {
-        width: 40px;
-        height: 40px;
-        background-size: cover;
-        background-color: black;
-        border-radius: 50%;
-      }
     }
   }
 
-  .role-choice-cards-container + .role-choice-cards-container {
+  .role-buff-line {
+    width: 100%;
+    height: 46%;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .role-buff-line + .role-buff-line {
     margin-top: 4%;
     /* 两个子元素之间的间距4% */
   }