Leveraging keypress() for managing all Vue interactions

Question

Leveraging keypress() for managing all Vue interactions

I am in the process of converting a game from Javascript/jQuery to Vue. This particular game is entirely controlled by keyboard input, with no mouse interaction involved.

Players navigate through the game using the "up" and "down" arrow keys to cycle through buttons, the "enter" key to select options, and the "back" arrow key to go back.

When a player selects an option, relevant data is stored in a "game" array so that during gameplay, the correct game and players can be displayed.

My question is, what would be the most effective way to implement this functionality in Vue?

I've come across information suggesting that using jQuery for DOM manipulation in a Vue project is not ideal. However, I'm unsure how to achieve the same functionality as keypress() does in jQuery across all pages without it.

This is the current structure of the page (designed to work with Javascript/jQuery):

// Initial page seen by the player
<div class="page1">
    <div class="button button_selected" data-link="choosegame">Choose a game</div>
    <div class="button" data-link="highscores">Highscores</div>
    <div class="button" data-link="settings">Settings</div>
</div>

// If "Choose a game" is selected, display this page:
<div class="choosegame">
    <div class="button" data-link="chooseplayers" data-options="{game:'checkers',players:'2',playersmax:'2'}">Checkers</div>
    <div class="button" data-link="chooseplayers" data-options="{game:'bingo',playersmin:'2',playersmax:'4'}">Bingo</div>
    <div class="button" data-link="chooseplayers" data-options="{game:'scrabble',players:'2',playersmax:'2'}">Scrabble</div>
</div>

// If a specific game is selected (e.g., checkers), display this page:
<div class="chooseplayers">
    <div class="button" data-link="playgame" data-options="{player:'Jimmy'}">Jimmy</div>
    <div class="button" data-link="playgame" data-options="{player:'Billy'}">Billy</div>
    <div class="button" data-link="playgame" data-options="{player:'Arnold'}">Arnold</div>
</div>

// After players are selected, show this page:
<div class="playgame">
    PLAYING!
</div>

javascript oop vue.js

Answer 1

Answer №1

Below is a comprehensive example that addresses your query. Due to its length, feel free to seek clarification by asking questions.

This code snippet sets up an event listener on the window object and manages it using Vue logic.

new Vue({
  el: '#app',
  data: {
    buttons: [
      {
        'choosegame': 'Choose a game',
        'highscores': 'Highscores',
        'settings': 'Settings'
      },
      {
        'Checkers': { game: 'checkers', players: '2', playersmax: '2' },
        'Bingo': { game: 'bingo', playersmin: '2', playersmax: '4' },
        'Scrabble': { game: 'scrabble', players: '2', playersmax: '2' }
      },
      {
        'Jimmy': 'Jimmy',
        'Billy': 'Billy',
        'Arnold': 'Arnold'
      },
    ],
    page: 0, // currentPage
    selectedButton: 'choosegame',
    game: null, // chosen game and player
    player: null
  },
  methods: {
    handleKeyPress: function (e) {
      const keyCode = String(e.keyCode || e.code || e.keyIdentifier);
      if (keyCode === '13') { // enter
        if (this.page < 3) {
          if (this.page === 1) this.game = this.selectedButton;
          if (this.page === 2) this.player = this.selectedButton;
          if (this.page === 0 && this.selectedButton !== 'choosegame') {
            console.log('not implemented yet. choose a game instead');
          } else {
            this.page++;
            this.selectedButton = Object.keys(this.currentButtons)[0];
          }
        }
      } else if (keyCode === '38' || keyCode === '40') { // navigate up or down
        const buttons = this.buttons[this.page];
        const pageKeys = Object.keys(buttons);
        const currIndex = pageKeys.findIndex(key => this.selectedButton === key);
        const newIndex = (keyCode == 38) // up
          ? (currIndex === 0)
            ? pageKeys.length - 1
            : currIndex - 1
          : (keyCode == 40) // down
            ? (currIndex === (pageKeys.length - 1))
              ? 0
              : currIndex + 1
            : currIndex;
        this.selectedButton = pageKeys[newIndex]
      }
    }
  },
  computed: {
    currentButtons: function () {
      return this.buttons[this.page] || [] // current buttons object 
    }
  },
  mounted: function () {
    // add an event listener for keypress
    window.addEventListener('keypress', this.handleKeyPress)
  }
});

.button_selected {
  background-color: red;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div v-if="page == 0">
    <div class="button"
      v-for="(button, index) in currentButtons" 
      :key="index" 
      :class="{'button_selected': index === selectedButton}">{{ button }}
    </div>
  <div v-if="page == 1 || page == 2">
    <div class="button"
      v-for="(button, index) in currentButtons" 
      :key="index" 
      :class="{'button_selected': index === selectedButton}">{{ index }}
    </div>
  </div>
  <div v-if="page == 3">
    You made it here! {{ player }} is going to play {{ game }}
  </div>
</div>

Answer 2

Below is a comprehensive example that addresses your query. Due to its length, feel free to seek clarification by asking questions.

This code snippet sets up an event listener on the window object and manages it using Vue logic.

new Vue({
  el: '#app',
  data: {
    buttons: [
      {
        'choosegame': 'Choose a game',
        'highscores': 'Highscores',
        'settings': 'Settings'
      },
      {
        'Checkers': { game: 'checkers', players: '2', playersmax: '2' },
        'Bingo': { game: 'bingo', playersmin: '2', playersmax: '4' },
        'Scrabble': { game: 'scrabble', players: '2', playersmax: '2' }
      },
      {
        'Jimmy': 'Jimmy',
        'Billy': 'Billy',
        'Arnold': 'Arnold'
      },
    ],
    page: 0, // currentPage
    selectedButton: 'choosegame',
    game: null, // chosen game and player
    player: null
  },
  methods: {
    handleKeyPress: function (e) {
      const keyCode = String(e.keyCode || e.code || e.keyIdentifier);
      if (keyCode === '13') { // enter
        if (this.page < 3) {
          if (this.page === 1) this.game = this.selectedButton;
          if (this.page === 2) this.player = this.selectedButton;
          if (this.page === 0 && this.selectedButton !== 'choosegame') {
            console.log('not implemented yet. choose a game instead');
          } else {
            this.page++;
            this.selectedButton = Object.keys(this.currentButtons)[0];
          }
        }
      } else if (keyCode === '38' || keyCode === '40') { // navigate up or down
        const buttons = this.buttons[this.page];
        const pageKeys = Object.keys(buttons);
        const currIndex = pageKeys.findIndex(key => this.selectedButton === key);
        const newIndex = (keyCode == 38) // up
          ? (currIndex === 0)
            ? pageKeys.length - 1
            : currIndex - 1
          : (keyCode == 40) // down
            ? (currIndex === (pageKeys.length - 1))
              ? 0
              : currIndex + 1
            : currIndex;
        this.selectedButton = pageKeys[newIndex]
      }
    }
  },
  computed: {
    currentButtons: function () {
      return this.buttons[this.page] || [] // current buttons object 
    }
  },
  mounted: function () {
    // add an event listener for keypress
    window.addEventListener('keypress', this.handleKeyPress)
  }
});

.button_selected {
  background-color: red;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div v-if="page == 0">
    <div class="button"
      v-for="(button, index) in currentButtons" 
      :key="index" 
      :class="{'button_selected': index === selectedButton}">{{ button }}
    </div>
  <div v-if="page == 1 || page == 2">
    <div class="button"
      v-for="(button, index) in currentButtons" 
      :key="index" 
      :class="{'button_selected': index === selectedButton}">{{ index }}
    </div>
  </div>
  <div v-if="page == 3">
    You made it here! {{ player }} is going to play {{ game }}
  </div>
</div>

Answer 3

Answer №2

Utilizing key events on any DOM element with focus is a possibility. Typically, this applies to input fields; however, if you enable focus on a div (by setting its tabindex attribute to -1) and set the focus on it (or have focus on an element within it that doesn't interrupt event bubbling), then keyboard events can be managed.

One strategy is as follows: I establish a keyBus where the main app dispatches events to the bus based on the pressed key. The component (menu, game, etc.) receives the bus as a prop and reacts to the events.

Regrettably, key events can lead to scrolling, which may be unavoidable. It's advisable to keep all overflows hidden.

new Vue({
  el: '#app',
  data: {
    keyBus: new Vue()
  },
  methods: {
    handleEnter() {
      this.keyBus.$emit('enter');
    },
    handleUp() {
      this.keyBus.$emit('up');
    },
    handleDown() {
      this.keyBus.$emit('down');
    }
  },
  components: {
    menuComponent: {
      template: '#menu-template',
      props: ['keyBus'],
      data() {
        return {
          ups: 0,
          downs: 0,
          enters: 0
        }
      },
      mounted() {
        this.keyBus.$on('up', () => ++this.ups);
        this.keyBus.$on('down', () => ++this.downs);
        this.keyBus.$on('enter', () => ++this.enters);
      }
    }
  },
  mounted() {
    this.$el.focus();
  }
});

#app {
  height: 300px;
  width: 300px;
  background-color: #eee;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app" tabindex="-1" @keyup.enter="handleEnter" @keyup.up="handleUp" @keyup.down="handleDown">
  <menu-component :key-bus="keyBus">
  </menu-component>
</div>

<template id="menu-template">
<div>
Ups: {{ups}} <br>
Downs: {{downs}} <br>
Enters: {{enters}} <br>
</div>
</template>

Answer 4

Utilizing key events on any DOM element with focus is a possibility. Typically, this applies to input fields; however, if you enable focus on a div (by setting its tabindex attribute to -1) and set the focus on it (or have focus on an element within it that doesn't interrupt event bubbling), then keyboard events can be managed.

One strategy is as follows: I establish a keyBus where the main app dispatches events to the bus based on the pressed key. The component (menu, game, etc.) receives the bus as a prop and reacts to the events.

Regrettably, key events can lead to scrolling, which may be unavoidable. It's advisable to keep all overflows hidden.

new Vue({
  el: '#app',
  data: {
    keyBus: new Vue()
  },
  methods: {
    handleEnter() {
      this.keyBus.$emit('enter');
    },
    handleUp() {
      this.keyBus.$emit('up');
    },
    handleDown() {
      this.keyBus.$emit('down');
    }
  },
  components: {
    menuComponent: {
      template: '#menu-template',
      props: ['keyBus'],
      data() {
        return {
          ups: 0,
          downs: 0,
          enters: 0
        }
      },
      mounted() {
        this.keyBus.$on('up', () => ++this.ups);
        this.keyBus.$on('down', () => ++this.downs);
        this.keyBus.$on('enter', () => ++this.enters);
      }
    }
  },
  mounted() {
    this.$el.focus();
  }
});

#app {
  height: 300px;
  width: 300px;
  background-color: #eee;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app" tabindex="-1" @keyup.enter="handleEnter" @keyup.up="handleUp" @keyup.down="handleDown">
  <menu-component :key-bus="keyBus">
  </menu-component>
</div>

<template id="menu-template">
<div>
Ups: {{ups}} <br>
Downs: {{downs}} <br>
Enters: {{enters}} <br>
</div>
</template>

Leveraging keypress() for managing all Vue interactions

Answer №1

Answer №2

Similar questions

What is the best way to utilize RxJs for streaming HostListener events?

Fixed position toolbar within a container positioned beside a dynamically sized sidebar navigation

Stop a hacker from obtaining the usernames from a system

Is this included in the total number of reads?

Is it possible for browsers to handle PUT requests using multipart/form data?

``The error 'Uncaught SyntaxError' is thrown during the production build of

Combine the promises from multiple Promise.all calls by chaining them together using the array returned from

I'm having trouble with the colors not displaying correctly on my NextJS Tailwind navbar

Effortlessly retrieving the id attribute from an HTML tag using jQuery

Adjust the appearance of matSelect when the selection menu is activated

Exploring the World of D3.js with an Interactive Example

Steps for removing an item from an array using lodash

Could the slow loading time of the React site be attributed to an overload of static assets?

Displaying results of data from a cross domain request

Version 5.3 of Laravel combined with Vue 2

What is the best way to retrieve the name of an element or component using JavaScript

Invoking a function within another function in Python

Struggling with rendering components in REACT?

Using the v-for directive to create sequential lists

Error encountered when executing the npm run dev script