Merge branch 'focus'

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+### v2.61 `2022-09-21`
+add:
+- 新历史记录样式：LIST
+- 极简跟打模式，只保留跟打信息
+
 ### v2.60 `2022-09-16`
 - 重新布局
 

README.md

@@ -48,7 +48,7 @@ __目前不支持不在编辑区输入编码的输入法__
 - 配置使用 `localStorage` 存储
 - 使用 `service-worker` 处理离线请求
 
-该工具参考了添雨跟打器的一些功能
+该工具参考了添雨跟打器的一些功能，最初也是在QQ群里用添雨跟打器练字的。
 > [添雨跟打器 旧版](https://github.com/taliove/tygdq)
 
 
@@ -66,3 +66,7 @@ __目前不支持不在编辑区输入编码的输入法__
 
 ![JetBrains](https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg?_ga=2.54620846.401568951.1648434626-301403838.1648434626)
 
+
+## 六、历史
+
+2020.05.17 ~ 2022.09.21

index.html

@@ -135,6 +135,13 @@
                <label class="switch" for="bigCharacter"></label>
             </div>
          </div>
+         <div class="switch-item">
+            <div class="label">历史样式</div>
+            <div class="wrapper">
+               <input id="historyListMode" type="checkbox" onchange="engine.historyListMode()">
+               <label class="switch" for="historyListMode"></label>
+            </div>
+         </div>
       </div>
 
       <!--HELP INFO : KEYS-->
@@ -197,8 +204,8 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
          </div>
          <div class="copyright">
             <a target="_blank" href="https://kylebing.cn" class="link">KyleBing</a>
-            <p>v2.60</p>
-            <p>2022/09/16</p>
+            <p>v2.61</p>
+            <p>2022/09/21</p>
          </div>
       </div>
 
@@ -311,18 +318,18 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
             <div class="btn"><span class="btn-speed"></span> 字/分</div>
          </div>
 
-         <!--专注模式-->
+         <!--极简模式-->
          <div class="btn-group">
-            <div class="btn" onclick="engine.enterStandAloneMode()" title="专注模式">专注模式</div>
+            <div class="btn hidden-sm" onclick="engine.enterStandAloneMode()" title="极简模式">极简模式</div>
          </div>
-
-
       </div>
 
+
+<!--      TYPE PAD-->
       <div class="type-pad">
          <div class="tool-bar">
             <div class="btn-group">
-               <div class="btn" onclick="engine.leaveStandAloneMode()" title="专注模式">退出专注模式</div>
+               <div class="btn" onclick="engine.leaveStandAloneMode()" title="退出极简模式">退出</div>
             </div>
          </div>
 
@@ -336,19 +343,25 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
             <label for="pad" class="hidden"></label>
             <textarea class="text" id="pad" rows="3"></textarea>
          </div>
-
-         <!--跟打记录 - 新-->
-         <div class="record-container">
-            <div class="record-item">
-               <div class="speed"></div>
-               <div class="meta">
-                  <div class="hit-rate"></div>
-                  <div class="code-length"></div>
-               </div>
-            </div>
+         <div class="standalone-speed-info">
+            <div class="speed">0</div>
+            <div class="count-key-rate">0</div>
+            <div class="count-key-length">0</div>
+            <div class="count-key-backspace">0</div>
          </div>
       </div>
 
+      <!--跟打记录 - 新-->
+      <div class="record-container hidden">
+         <!--            <div class="record-item">-->
+         <!--               <div class="speed"></div>-->
+         <!--               <div class="meta">-->
+         <!--                  <div class="hit-rate"></div>-->
+         <!--                  <div class="code-length"></div>-->
+         <!--               </div>-->
+         <!--            </div>-->
+      </div>
+
       <!--成绩列表-->
       <div class="table-container">
          <table class="table">

js/class/Config.js

@@ -8,51 +8,56 @@ define(['Article', 'ArticleType'],function (Article, ArticleType) {
       constructor() {
          if (this.hasSavedData()){
             let config = JSON.parse(localStorage.getItem(CONFIG_NAME));
-            this.chapter            = config.chapter;
-            this.chapterTotal       = config.chapterTotal;
-            this.isShuffle          = config.isShuffle;
-            this.isInEnglishMode    = config.isInEnglishMode;
-            this.count              = config.count;
-            this.articleIdentifier  = config.articleIdentifier;
-            this.articleName        = config.articleName;
-            this.article            = config.article;
-            this.darkMode           = config.darkMode;
-            this.articleType        = config.articleType;
-            this.IDBIndex           = config.IDBIndex;
+            this.chapter              = config.chapter;
+            this.chapterTotal         = config.chapterTotal;
+            this.isShuffle            = config.isShuffle;
+            this.isInEnglishMode      = config.isInEnglishMode;
+            this.count                = config.count;
+            this.articleIdentifier    = config.articleIdentifier;
+            this.articleName          = config.articleName;
+            this.article              = config.article;
+            this.darkMode             = config.darkMode;
+            this.articleType          = config.articleType;
+            this.IDBIndex             = config.IDBIndex;
             // v2.1 自动发文
-            this.isAutoNext         = config.isAutoNext;
-            this.isAutoRepeat       = config.isAutoRepeat;
-            this.isShuffleRepeat    = config.isShuffleRepeat;
-            this.repeatCountTotal   = config.repeatCountTotal || 1;
-            this.repeatCountCurrent = config.repeatCountCurrent || 1;
+            this.isAutoNext           = config.isAutoNext;
+            this.isAutoRepeat         = config.isAutoRepeat;
+            this.isShuffleRepeat      = config.isShuffleRepeat;
+            this.repeatCountTotal     = config.repeatCountTotal || 1;
+            this.repeatCountCurrent   = config.repeatCountCurrent || 1;
             // v2.3 自定义内容
-            this.customizedContent  = config.customizedContent || '';
-            this.customizedTitle    = config.customizedTitle || '';
+            this.customizedContent    = config.customizedContent || '';
+            this.customizedTitle      = config.customizedTitle || '';
             // v2.43 大单字练习模式
-            this.isBigCharacter     = config.isBigCharacter;
+            this.isBigCharacter       = config.isBigCharacter;
+            // v2.61 新历史记录样式
+            this.isHistoryInListMode  = config.isHistoryInListMode;
+
          } else {
-            this.chapter            = 1;                      // 当前段号
-            this.chapterTotal       = 1;                      // 总段数
-            this.isShuffle          = false;                  // 是否乱序模式
-            this.isInEnglishMode    = false;                  // 是否处于英文打字状态
-            this.count              = '15';                   // 单条数量
-            this.articleName        = Article.top500.name;    // 文章名称
-            this.articleIdentifier  = 'top500';               // 文章标识
-            this.article            = Article.top500.content; // 文章内容
-            this.darkMode           = false;                  // 暗黑模式
-            this.articleType        = ArticleType.character;  // 文章类型
-            this.IDBIndex           = 1;                      // IndexDB    序号
+            this.chapter              = 1;                      // 当前段号
+            this.chapterTotal         = 1;                      // 总段数
+            this.isShuffle            = false;                  // 是否乱序模式
+            this.isInEnglishMode      = false;                  // 是否处于英文打字状态
+            this.count                = '15';                   // 单条数量
+            this.articleName          = Article.top500.name;    // 文章名称
+            this.articleIdentifier    = 'top500';               // 文章标识
+            this.article              = Article.top500.content; // 文章内容
+            this.darkMode             = false;                  // 暗黑模式
+            this.articleType          = ArticleType.character;  // 文章类型
+            this.IDBIndex             = 1;                      // IndexDB    序号
             // v2.1 自动发文
-            this.isAutoNext         = false;                  // 自动发文
-            this.isAutoRepeat       = false;                  // 重复发文
-            this.isShuffleRepeat    = false;                  // 重复发文时乱序
-            this.repeatCountTotal   = 1;                      // 总重复数
-            this.repeatCountCurrent = 1;                      // 当前重复数
+            this.isAutoNext           = false;                  // 自动发文
+            this.isAutoRepeat         = false;                  // 重复发文
+            this.isShuffleRepeat      = false;                  // 重复发文时乱序
+            this.repeatCountTotal     = 1;                      // 总重复数
+            this.repeatCountCurrent   = 1;                      // 当前重复数
             // v2.3 自定义内容
-            this.customizedTitle    =  '';                    // 自定义文章标题
-            this.customizedContent  =  '';                    // 自定义文章内容
+            this.customizedTitle      = '';                     // 自定义文章标题
+            this.customizedContent    = '';                     // 自定义文章内容
             // v2.43 大单字练习模式
-            this.isBigCharacter     = false;
+            this.isBigCharacter       = false;
+            // v2.61 新历史记录样式
+            this.isHistoryInListMode  = false;
          }
 
          // 更新处理
@@ -78,4 +83,4 @@ define(['Article', 'ArticleType'],function (Article, ArticleType) {
 
 function $(selector){
    return document.querySelector(selector)
-}
+}

js/class/Database.js

@@ -57,6 +57,7 @@ define(['Utility', 'ArticleType'], function (Utility, ArticleType) {
 
             // RECORD LIST
             let div = document.createElement('div');
+            div.classList.add('record-item')
             div.innerHTML = record.getHtmlForRecord(config);
             let recordContainer = $('.record-container');
             recordContainer.insertBefore(div, recordContainer.firstChild);

js/class/Engine.js

@@ -100,9 +100,11 @@ define(['Reg','ArticleType','Article', 'Config', 'Record', 'Database', 'KeyCount
          }
       }
 
-      // 进入专注模式
+      // 进入极简模式
       enterStandAloneMode(){
+         let screenHeight = innerHeight
          $('.type-pad').classList.add('type-pad-standalone')
+         // document.documentElement.requestFullscreen()
       }
       leaveStandAloneMode(){
          $('.type-pad-standalone').classList.remove('type-pad-standalone')
@@ -116,6 +118,7 @@ define(['Reg','ArticleType','Article', 'Config', 'Record', 'Database', 'KeyCount
          $('input[type=checkbox]#autoRepeat').checked = this.config.isAutoRepeat;
          $('input[type=checkbox]#shuffleRepeat').checked = this.config.isShuffleRepeat;
          $('input[type=checkbox]#bigCharacter').checked = this.config.isBigCharacter;
+         $('input[type=checkbox]#historyListMode').checked = this.config.isHistoryInListMode;
          let radioNodes = document.querySelectorAll('input[name=count][type=radio]');
          let radios = [...radioNodes];
          radios.forEach(item => {
@@ -128,6 +131,15 @@ define(['Reg','ArticleType','Article', 'Config', 'Record', 'Database', 'KeyCount
             this.englishModeEnter()
          }
 
+         // History Mode: LIST | TABLE
+         if (this.config.isHistoryInListMode){
+            $('.record-container').classList.remove('hidden')
+            $('.table-container').classList.add('hidden')
+         } else {
+            $('.table-container').classList.remove('hidden')
+            $('.record-container').classList.add('hidden')
+         }
+
          // Repeat Status
          this.setRepeatStatus(this.config);
 
@@ -417,6 +429,19 @@ define(['Reg','ArticleType','Article', 'Config', 'Record', 'Database', 'KeyCount
          this.config.save();
       }
 
+      // 历史记录显示样式： list | table
+      historyListMode(){
+         this.config.isHistoryInListMode = $('#historyListMode').checked;
+         if (this.config.isHistoryInListMode){
+            $('.record-container').classList.remove('hidden')
+            $('.table-container').classList.add('hidden')
+         } else {
+            $('.record-container').classList.add('hidden')
+            $('.table-container').classList.remove('hidden')
+         }
+         this.config.save();
+      }
+
       // 更新重复状态
       setRepeatStatus(config){
          if (config.isAutoRepeat){
@@ -818,6 +843,13 @@ define(['Reg','ArticleType','Article', 'Config', 'Record', 'Database', 'KeyCount
 
             // backspace count
             $('.count-key-backspace').innerText = this.keyCount.backspace;
+
+            // StandAlone Mode Speed Info
+            $('.standalone-speed-info .speed').innerText = this.record.speed;
+            $('.standalone-speed-info .count-key-length').innerText = this.record.codeLength;
+            $('.standalone-speed-info .count-key-rate').innerText = this.record.hitRate;
+            $('.standalone-speed-info .count-key-backspace').innerText = this.keyCount.backspace;
+
          }
 
          // OPTION

js/class/Record.js

@@ -56,13 +56,12 @@ define(['Utility', 'ArticleType'], function (Utility,ArticleType) {
             case ArticleType.customize : textClass = 'text-roseo';break;
             default: break;
          }
-         return `<div class="record-item">
+         return `
                <div class="speed lv-${level}">${this.speed}</div>
                <div class="meta">
                   <div class="hit-rate">${this.hitRate}</div>
                   <div class="code-length">${this.codeLength}</div>
-               </div>
-            </div>`;
+               </div>`;
       }
    }
 

scss/mixin/_record.scss

@@ -1,35 +1,42 @@
 .record-container{
+  overflow-y: auto;
   margin-top: $gap-block;
-  display: flex;
-  justify-content: space-around;
+  justify-content: flex-start;
   flex-flow: row wrap;
+  align-items: flex-start;
+  display: flex;
 }
 
 .record-item{
   margin-right: $gap-block - 5;
   margin-bottom: $gap-block - 5;
-  padding: 6px 10px;
+  padding: 4px 7px;
   background-color: white;
-  @include border-radius($radius-main);
+  @include border-radius(5px);
   border: 1px solid $color-border;
   display: flex;
   align-items: center;
   font-family: 'JetBrains Mono';
+  //font-family: 'Galvji';
   .speed{
-    padding-right: 10px;
-    width: 5rem;
+    //font-family: 'JetBrains Mono';
+    padding-right: 8px;
+    width: 15px * 4.5;
     text-align: right;
-    font-size: 16px;
+    font-size: 15px;
   }
   .meta{
+    width: 10px * 4;
+    text-align: right;
     border-left: 1px solid $color-border;
-    padding-left: 10px;
-    font-size: $fz-info;
+    padding-left: 8px;
+    font-size: 10px;
     line-height: 1.1;
     .hit-rate{
 
     }
     .code-length{
+      //color: $text-comment
 
     }
   }