feat: added logic for stopwatch

Author: Javier Diaz

src/components/Player.vue

@@ -7,11 +7,11 @@
  </div>
  <div class="player-controls grid">
  <div class="decrement">
- <button class="btn" @click.prevent="decrement">-</button>
+ <button class="btn" @click.prevent="decrement" :disabled="!isRunning">-</button>
  </div>
  <span class="score">{{ score }}</span>
  <div class="increment">
- <button class="btn" @click.prevent="increment">+</button>
+ <button class="btn" @click.prevent="increment" :disabled="!isRunning">+</button>
  </div>
  </div>
  </div>
@@ -48,6 +48,7 @@ export default {
  computed: {
  ...mapGetters([
  'highestScore',
+ 'isRunning',
  ]),
  isHighest() {
  return this.highestScore === this.score;

src/components/Stopwatch.vue

@@ -1,16 +1,59 @@
 <template>
  <div class="stopwatch">
  <h2 class="title">Stopwatch</h2>
- <span class="stopwatch-time">7</span>
+ <span class="stopwatch-time">{{ seconds }}</span>
  <div class="stopwatch-controls">
- <button class="btn handler">Start</button>
- <button class="btn">Reset</button>
+ <button class="btn handler" @click.prevent="toogleHandler">
+ {{ isRunning ? 'Stop' : 'Start' }}
+ </button>
+ <button class="btn" @click.prevent="reset">Reset</button>
  </div>
  </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
  name: 'Stopwatch',
+ data() {
+ return {
+ elapsedTime: 0,
+ previousTime: 0,
+ intervalId: null,
+ };
+ },
+ mounted() {
+ this.intervalId = setInterval(() => this.tick(), 100);
+ },
+ beforeDestroy() {
+ clearInterval(this.intervalId);
+ },
+ methods: {
+ toogleHandler() {
+ const status = this.isRunning;
+ this.$store.dispatch('STATUS_GAME', !status);
+ this.previousTime = Date.now();
+ },
+ tick() {
+ if (this.isRunning) {
+ const now = Date.now();
+ const time = this.elapsedTime;
+ this.elapsedTime = time + (now - this.previousTime);
+ this.previousTime = now;
+ }
+ },
+ reset() {
+ this.elapsedTime = 0;
+ },
+ },
+ computed: {
+ ...mapGetters([
+ 'isRunning',
+ ]),
+ seconds() {
+ return Math.floor(this.elapsedTime / 1000);
+ },
+ },
 };
 </script>

src/store.js

@@ -27,6 +27,9 @@ export default new Vuex.Store({
  REMOVE_POINT: ({ commit }, { playerIndex }) => {
  commit('DECREMENT', playerIndex);
  },
+ STATUS_GAME: ({ commit }, status) => {
+ commit('STATUS_GAME', status);
+ },
  },
  mutations: {
  SET_PLAYER: (state, { name }) => {
@@ -44,6 +47,9 @@ export default new Vuex.Store({
  state.players[index].points -= 1;
  }
  },
+ STATUS_GAME: (state, status) => {
+ state.isRunning = status;
+ },
  },
  getters: {
  players: state => state.players,
@@ -57,5 +63,6 @@ export default new Vuex.Store({
  }
  return null;
  },
+ isRunning: state => state.isRunning,
  },
 });