Partially address 3-deep branches being incorrect

Author: MilesBHuff

README.md

@@ -93,9 +93,11 @@ I also went to lengths to try to ensure I did not infringe upon Nintendo's intel
 #### Trunks of treevolutions
 
 Evolutions display correctly for both fully linear evolutions *and* 2-long branches of treevolutions.  
-Treevolutions display a random path that can be randomly changed with a button.  3-long branches are static, meaning that they are always wrong for Pokémon like, for example, Dustox.  
+Treevolutions and 3-long branches display a random path that can be randomly changed with a button.  A warning is also displayed for these.  
 I might eventually implement a proper tree view.  If I were to do this, I would probably do it in a modal, and replace the normal line view with a button to open that modal.  
 
+One solution for 3-long branches could be to also work backwards from the current ID, instead of always working forward from the earliest evolution in the chain.
+
 #### Automated unit testing
 
 I did not do the bonus objective that called for unit-testing the application.  Time constraints being what they were, I decided to triage this, since I know the company does not generally use automated unit testing in its UI (instead relying on a mixture of manual QA and end-to-end testing).  I did, however, ensure that [Jest](https://jestjs.io) was at least present and ready to go (by integrating `vite-template-redux` into the project).  

frontend/app/src/widgets/evolutions/evolution-line.tsx

@@ -54,31 +54,33 @@ const chainToLine = (
 
         // Set the next link.
         if(link.evolves_to.length < 1) return; // End of the line.
-        let nextInLine: ChainLink = link.evolves_to[0]!;
+        let nextInLine: ChainLink | void;
 
         // If we haven't matched the ID yet, check the current ID.
         if(!idFound) {
             idFound = isValidNumber(id) && id === urlToId(link.species.url);
         }
 
-        // If we've matched the ID before or now, then we can choose the next node at random, if there are more than one of them.
-        if(idFound) {
-            if(link.evolves_to.length > 1) { //WARN:  The below is only a rough approximation of tree evolutions;  please use `EvolutionTree` instead of `EvolutionLine` to properly display evolution trees.
-                const index = Math.floor(Math.random() * link.evolves_to.length); // Choosing a random index to at least get some variety.
-                nextInLine = link.evolves_to[index]!;
+        // If even the current ID wasn't a match, try looking deeper
+        if(!idFound) {
+            for(let i = 0; i < link.evolves_to.length; i++) {
+                if(urlToId(link.evolves_to[i]!.species.url) === id) {
+                    idFound = true;
+                    nextInLine = link.evolves_to[i]!;
+                    break;
+                }
             }
-        } else {
+            //BUG:  If the match is one level deeper, this won't find it, and we'll end-up going with a random index...
+            //TODO:  Make this recursive somehow, to fix the above bug.
+        }
 
-            // If even the current ID wasn't a match, try looking deeper
-            if(!idFound) {
-                for(let i = 1; i < link.evolves_to.length; i++) {
-                    if(urlToId(link.evolves_to[i]!.species.url) === id) {
-                        idFound = true;
-                        nextInLine = link.evolves_to[i]!;
-                        break;
-                    }
-                }
-                //BUG:  If the match is one level deeper, this won't find it, and we'll end-up going with the `0` index...
+        // If we have no next-in-line at this point, then we can choose the next node at random.
+        if(!nextInLine) {
+            if(link.evolves_to.length > 1) { //WARN:  This is only a rough approximation of tree evolutions;  please use `EvolutionTree` instead of `EvolutionLine` to properly display evolution trees.
+                const index = Math.floor(Math.random() * link.evolves_to.length); // Choosing a random index to at least get some variety.
+                nextInLine = link.evolves_to[index]!;
+            } else {
+                nextInLine = link.evolves_to[0]!;
             }
         }