/opening: Replace back button with breadcrumb trail of moves on each opening

[superuser-does]

Problem

/opening's back button currently takes the user back to the previous move only. For example, if you were on 1. e4 c5 2. d4, it would take you to 1. e4 c5

When browsing through openings in /opening, it would be better to easily be able to traverse through all previous moves in the sequence you are looking at.

Solution

There are two scenarios, which should be handled differently.

Scenario 1: Initial ply

For an initial move like 1. e4, the_ back button should change to "Return to starting position"

Scenario 2: Any ply after the initial ply

If even more more ply is played, e.g. 1. e4 c5, display a breadcrumb navigation of moves leading up to the current move. This should be marked up as an <ol> styled to be horizontal, per established practice. The breadcrumb should include the move numbers via CSS. Each move should have a link to that move's page.

Here is an example with 1. e4 c5 2. d4

More details/thoughts on solution

Here is what HTML output for scenario 2 might look like.

<nav aria-label="Sequence of moves">
<ol>
  <li data-icon=""><a href="https://lichess.org/opening/">Starting position</a></li>
  <li><a href="https://lichess.org/opening/e4">e4</a></li>
  <li><a href="https://lichess.org/opening/e4_c5">c5</a></li>
  <li><a href="#" aria-current="page">d4</a></li>
</ol>
</nav>

Notes:

• A Scala change would be needed to redirect links containing only moves like I showed above! If the opening has a a name associated, just entering a move does not automatically redirect you. So for 1. e4, the endpoint is not /opening/e4, but /opening/Kings_Pawn_Game/e4. Unless you can integrate these names into the logic, it may be easier just to add some kind of redirection.
• I used the same data-icon as studies, since you often see that icon in the context of setting up a chessboard.
• The <a> link is required on the last <li>, so we can also put on aria-current. Unlike the W3C's example implementation, I used href="#" to keep the user on the same page, because href="" would trigger a refresh.

It is possible to achieve this entirely by using CSS, by doing counter-increment on every X child, etc. The main complication arises with the starting position also being an item in the list, which it semantically is. It is best if it stays in the list. The mockup above was made with the help of AI as I'm not a CSS expert.

Possible stretch goal

When the user hovers over past moves, you could display a 1) mini board of the position and 2) name of the opening.

This would be nice, because chess players are much more used to visualising ahead rather than retrospectively. Of course, this would make this all much more complex.