Display matrix

Display.vue

<template>
  <div class="display">
    <div class="row" v-for="row in display">
      <span v-for="char in row" @update="refreshDisplay()">
        {{ char }}
      </span>
    </div>
  </div> <!-- .display -->
</template>

<script>
import store from '@/store'
export default {
  name: 'display',
  computed: {
    display () {
      return store.state.display
    }
  }
}
</script>

index.js

import Vue from 'vue'
import Vuex from 'vuex'
const assert = require('assert')

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cursor: { x: 0, y: 0 },
    display: [
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', '', '', '',
        '', '', '', '', '', '', '', '', '', '']
    ]
  },
  mutations: {
    /**
     * Appends character to the display matrix and updates the cursor position
     * accordingly.
     * @param  {object} state         Our Vuex state object.
     * @param  {character} newChar    New character to be added.
     */
    append (state, newChar) {
      state.display[state.cursor.y][state.cursor.x] = newChar
      console.info(
        'New char appended at (' +
        state.cursor.y + ',',
        state.cursor.x + '):',
        state.display[state.cursor.y][state.cursor.x]
      )
      if (state.cursor.x === 19) {
        state.cursor.x = 0
        state.cursor.y += 1
      } else {
        state.cursor.x += 1
      }
    },
    /**
     * Removes the last character from the display matrix and updates the
     * cursor position accordingly.
     * @param  {object} state          Our Vuex state object.
     */
    backspace (state) {
      // Making sure we don't go past [0, 0] in our matrix.
      try {
        let endReached =
          (state.cursor.y === 0 && state.cursor.x > 0) ||
          (state.cursor.y > 0)

        // Testing to see if we can still go back.
        assert(endReached, "Can't go back any further!")

        // If so, remove the character at cursor position and move back.
        state.display[state.cursor.y][state.cursor.x] = ''
        if (state.cursor.x === 0) {
          state.cursor.x = 19
          state.cursor.y -= 1
        } else {
          state.cursor.x -= 1
        }
      } catch (err) {
        console.log(err.message)
      }
    }
  }
})