live wpm and timer

Author: Bot

package-lock.json

@@ -27,6 +27,7 @@
     "cm-show-invisibles": "^3.1.0",
     "codemirror": "^5.58.1",
     "cors": "^2.8.5",
+    "countup.js": "^2.0.7",
     "debug": "^4.2.0",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
@@ -38,6 +39,7 @@
     "vue": "^2.6.12",
     "vue-chartjs": "^3.5.1",
     "vue-codemirror": "^4.0.6",
+    "vue-countup-v2": "^4.0.0",
     "vue-router": "^3.4.5",
     "vue-socket.io": "^3.0.10",
     "vue-socket.io-extended": "^4.0.4",

package.json

@@ -11,6 +11,7 @@
         class="codemirror"
         :class="{showInvisibles: codeInfo.language.name === 'Whitespace'}"
         :options="cmOptions"
+        @focus="onFocus"
         @ready="onCmReady"
         @blur="onUnFocus"
       />
@@ -76,6 +77,8 @@ export default {
       currentLine: 0,
       currentChar: 0,
       correctCharsInLine: 0,
+      freshCorrect: 0,
+      liveWpmInterval: null,
       currentChange: {},
       stats: {
         history: [],
@@ -122,6 +125,11 @@ export default {
       return {};
     },
   },
+  beforeDestroy() {
+    if (this.liveWpmInterval) {
+      clearInterval(this.liveWpmInterval);
+    }
+  },
   methods: {
     popUp(action, text = this.popUpText) {
       this.popUpText = text;
@@ -391,7 +399,9 @@ export default {
       }
       if (this.started && !this.stats.firstCharTime) {
         this.stats.firstCharTime = Date.now();
+        this.$emit('start');
       }
+
       this.currentChange = {
         time: this.timeElapsed(),
         type: 'initialType',
@@ -478,7 +488,9 @@ export default {
 
       if (this.currentChange.type !== 'initialType') {
         this.stats.history.push(this.currentChange);
-        if (this.options.selectedMode === 2 && this.currentChange.type !== 'correct') {
+        if (this.currentChange.type === 'correct') {
+          this.freshCorrect += 1;
+        } else if (this.options.selectedMode === 2) {
           if (this.stats.history.length < 30) {
             this.cm.setOption('readOnly', 'nocursor');
             this.popUp(true, 'Try again');
@@ -491,11 +503,21 @@ export default {
         console.log(JSON.parse(JSON.stringify(this.currentChange)));
       }
 
+
       this.currentChange = {};
     },
+    onFocus() {
+      console.log('cmFocus');
+      console.log(this.liveWpmInterval);
+      if (this.liveWpmInterval === null) {
+        this.liveWpmInterval = setInterval(this.updateLiveWpm, this.options.liveWpmRefreshRate);
+      }
+    },
     onUnFocus(_, ev) {
       if (ev) {
         if (DEV) ev.preventDefault();
+        clearInterval(this.liveWpmInterval);
+        this.liveWpmInterval = null;
         if (!this.isCompleted && this.popUpText !== 'Try again' && ev) {
           if (DEV) this.cm.focus();
           if (ev.relatedTarget !== null) {
@@ -535,6 +557,14 @@ export default {
     timeElapsed() {
       return Date.now() - this.stats.firstCharTime;
     },
+    updateLiveWpm() {
+      console.log('correct: ', this.freshCorrect);
+      const currentWpm = this.freshCorrect / (this.options.liveWpmRefreshRate / 1000 / 60) / 5;
+      console.blue(`wpm: ${currentWpm}`);
+      this.$emit('liveWpmUpdate', currentWpm || 0);
+
+      this.freshCorrect = 0;
+    },
     start(interval) {
       clearInterval(interval);
       this.cm.markText(
@@ -553,9 +583,6 @@ export default {
       this.started = true;
       this.cm.focus();
       console.log('START');
-      if (this.options.selectedMode === 1) {
-        this.$emit('start');
-      }
       this.stats.startTime = Date.now();
     },
     init() {
@@ -610,6 +637,8 @@ export default {
         this.$socket.client.emit('completed');
       }
 
+      clearInterval(this.liveWpmInterval);
+
       const complete = this.currentLine + 1 >= this.codeInfo.lines;
 
       const endMsgList = ['Too long, uh?', 'Time is over', 'Game over'];

src/components/CodeEditor.vue

@@ -12,6 +12,7 @@ const state = {
     selectedMode: 0,
     autoIndent: true,
     underScore: false,
+    liveWpmRefreshRate: 2000,
   },
 };
 

src/store/modules/options.js

@@ -15,9 +15,24 @@
           <p>{{ codeSource }}</p>
         </div>
       </div>
-      <h2 v-if="timer !== null && $route.path === '/run'" class="timer">
-        {{ timer }}
-      </h2>
+
+      <div v-show="!completed" class="counters">
+        <span v-show="!pause && timer !== null">
+          {{ timer > 120 ? Math.floor(timer / 60) + ' min ' + timer % 60 : timer }} s {{ options.selectedMode === 1 ? 'remaining' : '' }}
+        </span>
+        <span v-show="pause">paused</span>
+        <span v-show="timer === null">waiting</span>
+
+        <ICountUp
+          :key="resetEditorKey"
+          class="live-wpm"
+          :end-val="endWpm"
+          :options="liveWpmOptions"
+          @ready="onLiveWpmReady"
+        />
+      </div>
+
+
       <div class="buttons">
         <button v-show="!room.connected" class="reset" @click="reset">
           Restart
@@ -41,9 +56,10 @@
       :key="resetEditorKey"
       class="code-editor"
       @reset="reset"
-      @completed="completed"
+      @completed="onCompleted"
       @start="startTimer"
       @pause="(action) => {pause = action}"
+      @liveWpmUpdate="updateLiveWpm"
     />
 
     <div
@@ -62,13 +78,15 @@
 <script>
 import { mapGetters } from 'vuex';
 
+import ICountUp from 'vue-countup-v2';
 import CodeEditor from '@/components/CodeEditor.vue';
 
 const Results = () => import(/* webpackChunkName: "results" */ '@/views/Results.vue');
 
 export default {
   name: 'Run',
   components: {
+    ICountUp,
     CodeEditor,
     Results,
   },
@@ -77,13 +95,25 @@ export default {
       resetSelfKey: 1,
       resetEditorKey: 1,
       stats: false,
+      completed: false,
       timer: null,
       pause: false,
       intervalId: null,
+      endWpm: 0,
     };
   },
   computed: {
-    ...mapGetters(['codeInfo', 'room']),
+    ...mapGetters(['codeInfo', 'room', 'options']),
+    liveWpmOptions() {
+      return {
+        duration: this.options.liveWpmRefreshRate / 1000,
+        useEasing: false,
+        useGrouping: false,
+        decimalPlaces: 0,
+        decimal: '.',
+        suffix: ' WPM',
+      };
+    },
     codeSource() {
       if (this.codeInfo.name) {
         return this.codeInfo.source === 'own' ? 'Łukasz Wielgus archive' : this.codeInfo.source;
@@ -129,8 +159,10 @@ export default {
     reset() {
       this.stats = false;
       this.resetEditorKey += 1;
+      this.liveWpmInstance = null;
       if (this.intervalId) {
         window.clearInterval(this.intervalId);
+        this.timer = null;
       }
 
       if (this.$route.path === '/results') {
@@ -144,20 +176,39 @@ export default {
       }
     },
     startTimer() {
-      this.timer = 100;
-      this.intervalId = window.setInterval(() => {
-        if (this.timer === 0) {
-          this.$refs.codeEditor.completed();
-        } else if (!this.pause) {
-          this.timer -= 1;
+      console.log('timer start');
+      this.completed = false; // after reset or try again
+      this.timer = this.options.selectedMode === 1 ? 100 : 0;
+      this.intervalId = setInterval(() => {
+        if (!this.pause) {
+          if (this.options.selectedMode === 1) {
+            if (this.timer === 0) {
+              this.$refs.codeEditor.completed();
+            } else {
+              this.timer -= 1;
+            }
+          } else {
+            this.timer += 1;
+          }
         }
       }, 1000);
     },
+    onLiveWpmReady(instance) {
+      if (!this.liveWpmInstance) {
+        console.warn('LIVEWPM READY');
+        this.liveWpmInstance = instance;
+      }
+    },
+    updateLiveWpm(wpm) {
+      console.log(`updating to ${wpm}`);
+      this.liveWpmInstance.update(wpm);
+    },
     finish() {
       this.$refs.codeEditor.completed();
     },
-    completed(stats) {
+    onCompleted(stats) {
       this.stats = stats;
+      this.completed = true;
       if (this.intervalId) {
         window.clearInterval(this.intervalId);
       }
@@ -186,7 +237,7 @@ main
     max-width: none
 
   .code-editor
-    flex-grow: 1
+    flex-grow: 1 //dev
     margin: 1rem 0
 
 .top-bar
@@ -196,10 +247,10 @@ main
   animation: opacity-enter .5s ease-out forwards .7s
   animation-fill-mode: both
   position: relative
-
   .info
     display: flex
     align-items: center
+    flex-grow: 1
     flex-shrink: 2
     position: relative
     min-width: 0
@@ -213,25 +264,28 @@ main
         overflow: hidden
         text-overflow: ellipsis
 
-    .codeInfo
-      display: flex
-      justify-content: space-between
-      flex-direction: column
-      flex-shrink: 2
+  .codeInfo, .counters
+    display: flex
+    justify-content: space-between
+    flex-direction: column
+    flex-shrink: 2
+    min-width: 0
+
+    p, span
+      margin-bottom: $thin-gap
+      overflow: hidden
       min-width: 0
+      text-overflow: ellipsis
 
-      p
-        margin-bottom: $thin-gap
-        overflow: hidden
-        min-width: 0
-        text-overflow: ellipsis
+  .counters
+    text-align: right
 
   .buttons
     flex-shrink: 0
     button
       background: $navy-grey
       padding: 0 0.5em
-      margin-left: max(10px, calc(20vw - 210px))
+      margin-left: min(5em, max(1em, calc(20vw - 210px)))
       text-align: center
       height: 47px
       min-width: 150px

src/views/Run.vue

@@ -52,7 +52,6 @@ module.exports = {
     // config.plugins.delete('prefetch');
   },
   devServer: {
-    progress: true,
     clientLogLevel: 'info',
     headers: {
       'Access-Control-Allow-Origin': '*',