清空图表记录

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### v2.65 `2022-09-26`
 - 状图展示：击键、码长、速度
+- fix 记录重复数错误
+- 清空图表记录
 
 ### v2.64 `2022-09-23`
 - 展示当前跟打类型的统计数据

index.html

@@ -199,7 +199,9 @@
 
       <!--SCORE CHART-->
       <div class="score-statistics-container info-panel">
-         <div class="title">击键</div>
+         <div class="title">击键
+            <div onclick="engine.clearScoreOf('HitRate')" class="btn-img ml-1"><img src="./img/reset.png" alt="reset"></div>
+         </div>
          <div class="score-statistics-list">
             <div class="score-statistics-item hitrate level-1"><div class="chart-bar"><div class="process"></div></div><div class="label">1</div></div>
             <div class="score-statistics-item hitrate level-2"><div class="chart-bar"><div class="process"></div></div><div class="label">2</div></div>
@@ -218,7 +220,9 @@
 
       <!--SPEED CHART-->
       <div class="score-statistics-container info-panel">
-         <div class="title">速度 × 10</div>
+         <div class="title">速度 × 10
+            <div onclick="engine.clearScoreOf('Speed')"  class="btn-img ml-1"><img src="./img/reset.png" alt="reset"></div>
+         </div>
          <div class="score-statistics-list">
             <div class="score-statistics-item speed level-3"><div class="chart-bar"><div class="process"></div></div><div class="label">3</div></div>
             <div class="score-statistics-item speed level-6"><div class="chart-bar"><div class="process"></div></div><div class="label">6</div></div>
@@ -239,7 +243,9 @@
 
       <!--CODE LENGTH CHART-->
       <div class="score-statistics-container info-panel">
-         <div class="title">码长</div>
+         <div class="title">码长
+            <div onclick="engine.clearScoreOf('CodeLength')"  class="btn-img ml-1"><img src="./img/reset.png" alt="reset"></div>
+         </div>
          <div class="score-statistics-list">
             <div class="score-statistics-item codelength level-1"><div class="chart-bar"><div class="process"></div></div><div class="label">1</div></div>
             <div class="score-statistics-item codelength level-2"><div class="chart-bar"><div class="process"></div></div><div class="label">2</div></div>

js/class/Engine.js

@@ -1051,7 +1051,12 @@ define(
                $(`.score-statistics-item.speed.level-${suffix} .process`).style.height = `${speed * HEIGHT_BAR / speedMax}px`
             }
          })
+      }
 
+      // 清除某种类似文章的 某项数据
+      clearScoreOf(typeOfScore){
+         this.score.clearScoreFor(this.config.articleType, typeOfScore)
+         this.updateInfo()
       }
    }
 

js/class/Score.js

@@ -95,6 +95,30 @@ define(['Article', 'ArticleType'],function (Article, ArticleType) {
          }
       }
 
+      // 清除某种类似文章的 某项数据
+      clearScoreFor(articleType, typeOfScore){
+         switch (typeOfScore){
+            case 'HitRate':
+               for (let i = 0; i < 15; i++) {
+                  this[articleType]['hitRate' + (i + 1)] = 0
+               }
+               this.save()
+               break;
+            case 'Speed':
+               for (let i = 0; i < 14; i++) {
+                  this[articleType]['speed' + String((i + 1) * 30)] = 0
+               }
+               this.save()
+               break;
+            case 'CodeLength':
+               for (let i = 0; i < 10; i++) {
+                  this[articleType]['codeLength' + (i + 1)] = 0
+               }
+               this.save()
+               break;
+         }
+      }
+
       save(){
          localStorage.setItem(SCORE_NAME, JSON.stringify(this));
       }

scss/mixin/_score.scss

@@ -24,7 +24,7 @@
   .score{
     color: $text-main;
     font-family: 'JetBrainsMonoOnlyCharacter';
-    font-size: 14px;
+    font-size: 13px;
   }
   .desc{
     color: $text-comment;
@@ -35,7 +35,32 @@
 
 .score-statistics-container{
   .title{
+    cursor: pointer;
+    width: 100%;
     margin-bottom: 5px;
+    display: flex;
+    justify-content: flex-start;
+    .btn-img{
+      @include border-radius(20px);
+      opacity: 0;
+      @include transition(all 0.3s);
+      cursor: pointer;
+      width: 15px;
+      img{
+        display: block;
+        width: 100%;
+      }
+      &:active{
+        @include transform(rotate(-1080deg) !important);
+      }
+    }
+    &:hover{
+      .btn-img{
+        opacity: 1;
+        @include transition(all 0.3s);
+        @include transform(rotate(-360deg));
+      }
+    }
   }
   .score-statistics-list{
     display: flex;

scss/typepad.css

@@ -1333,7 +1333,7 @@ body.black .text-black {
 .score-info-item .score {
   color: #333;
   font-family: "JetBrainsMonoOnlyCharacter";
-  font-size: 14px;
+  font-size: 13px;
 }
 .score-info-item .desc {
   color: #999;
@@ -1342,7 +1342,48 @@ body.black .text-black {
 }
 
 .score-statistics-container .title {
+  cursor: pointer;
+  width: 100%;
   margin-bottom: 5px;
+  display: flex;
+  justify-content: flex-start;
+}
+.score-statistics-container .title .btn-img {
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+  opacity: 0;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -ms-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  transition: all 0.3s;
+  cursor: pointer;
+  width: 15px;
+}
+.score-statistics-container .title .btn-img img {
+  display: block;
+  width: 100%;
+}
+.score-statistics-container .title .btn-img:active {
+  -webkit-transform: rotate(-1080deg) !important;
+  -moz-transform: rotate(-1080deg) !important;
+  -ms-transform: rotate(-1080deg) !important;
+  -o-transform: rotate(-1080deg) !important;
+  transform: rotate(-1080deg) !important;
+}
+.score-statistics-container .title:hover .btn-img {
+  opacity: 1;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -ms-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  transition: all 0.3s;
+  -webkit-transform: rotate(-360deg);
+  -moz-transform: rotate(-360deg);
+  -ms-transform: rotate(-360deg);
+  -o-transform: rotate(-360deg);
+  transform: rotate(-360deg);
 }
 .score-statistics-container .score-statistics-list {
   display: flex;