Pragmatic approach to interface navigation on gamepad?

Question

I've built a web game using html/react. It's on the canvas, however the interface is just DOM elements. Users can already play the game with a controller but I would like to design a way to also navigate the interface.

I was thinking of perhaps just creating objects that represent the interface items, and store an 'active' item. If submit was the active selection

submit: { 
 up: 'password',
 right: 'new',
 down: null,
 left: null
}

I am planning to just perform a getElementById('activeElement') and overlay an image on the element to represent it's selection.

Here comes the hard part. I would also need to check if the element being navigated to exists, and have a fallback element if it does not. Possibly some sort of array in case the fallback needs a fallback. This seems feasible, although I'm not entirely sure how to approach it.

Seemingly Poor Approach

One technique I was considering is to use a 2D array for each screen. For example, a login screen may appear as

It is not entirely intuative though. If you were on new and wanted to go up to password, you could not, without first pressing left.

This is further complicated when there are multiple components on screen. The 2D array would have to adapt to consider all elements for navigation. This sounds cumbersome.

Answer 1

I like your idea of using a path for every element. One idea expanding on that is using a matrix of doubly linked lists of objects. Each user interface screen could be represented by a data structure that would look like this

root - SideNav Button (sideNavBtn)
           |
        UserName (username)
           |
        Password (password)
           |
        Submit (submit)

Where - and | are links in both directions.

For example password could look like:

{
  up: username
  down: submit,
  left: null,
  right: null,
  data: {
    displayName: 'Password',
    domNode: document.querySelector('.password')
  }
}

Once you have a data structure like, updating the UI is a matter of moving up, down, left or right from the current node in the data structure when arrow key keyDown events fire. Once you have moved to the new right place in your matrix, do what needs to be done to update the ui, from the data in the node. For example focusing domNode.

For completeness sake, the root node would only be to indicate where to start in the data structure. It could simply look like:

{
  left: sideNavBtn
}

and would be the starting point given to someone who wan't to navigate the data structure (your screen)