Switched from using custom div components to using mostly Grid in the mui materials. This allows the whole component to scale smoothly with the window size (see the video below)
Adds check for if the mons doesn't have an evolution and returns the Does Not Evolve component like the below image.
Added a vertical component for those with small screens (mobile). When the parent element of scrollContent has a secondEvolution element, and the screen is smaller than 680 pixels, it will rotate the evolution graph onto its side for easier viewing. Examples can be seen in the below images.
[!Warning]
THIS VERTICAL COMPONENT DOES NOT WORK ON FIREFOX
Adds a check to see if the original evolution tree has more than just one evolution. This would signify a branching 1st evolution. Here is what that check does:
Description of the branching evo check
1. If the first mon in the branch has an evolution, then there is a 2 stage branching evolution. This usually means that both sides of the branch have a second evolution. Except for Mime Jr. If this is the case, then the 2nd mon in the branch is added to the first branch.
- This will result in a container that holds the 2 evolutions (see below) without needing to grab these separately. The evolution tree will look like this before and after adding the second evolution.
Closer Look At The Code
```js
const expected = {
pokemonId: 265,
evolutionDetails: null,
evolvesInto: [
{
evolutionDetails: {
formNos: [0],
levels: [7],
methodIds: [12],
methodParameters: [0],
monsNos: [266],
},
evolvesInto: [
{
evolutionDetails: {
formNos: [0],
levels: [10],
methodIds: [4],
methodParameters: [0],
monsNos: [267],
},
evolvesInto: [],
pokemonId: 267,
},
],
pokemonId: 266,
},
{
evolutionDetails: {
formNos: [0],
levels: [7],
methodIds: [13],
methodParameters: [0],
monsNos: [268],
},
evolvesInto: [
{
evolutionDetails: {
formNos: [0],
levels: [10],
methodIds: [4],
methodParameters: [0],
monsNos: [269],
},
evolvesInto: [],
pokemonId: 269,
},
],
pokemonId: 268,
},
],
};
```
```js
const expected = {
pokemonId: 265,
evolutionDetails: null,
evolvesInto: [
{
evolutionDetails: {
formNos: [0],
levels: [7],
methodIds: [12],
methodParameters: [0],
monsNos: [266],
},
evolvesInto: [
{
evolutionDetails: {
formNos: [0],
levels: [10],
methodIds: [4],
methodParameters: [0],
monsNos: [267],
},
evolvesInto: [],
pokemonId: 267,
},
{
evolutionDetails: {
formNos: [0],
levels: [10],
methodIds: [4],
methodParameters: [0],
monsNos: [269],
},
evolvesInto: [],
pokemonId: 269,
},
],
pokemonId: 266,
},
{
evolutionDetails: {
formNos: [0],
levels: [7],
methodIds: [13],
methodParameters: [0],
monsNos: [268],
},
evolvesInto: [
{
evolutionDetails: {
formNos: [0],
levels: [10],
methodIds: [4],
methodParameters: [0],
monsNos: [269],
},
evolvesInto: [],
pokemonId: 269,
},
],
pokemonId: 268,
},
],
};
```
2. There is another check with an `else if` to make sure that the first branch has nothing and that the second branch has 1 evo. If this is true, then there is a default evo added to the first branch and then the actual evolution (Mr. Rime is currently the only example of this).
- This will result in an empty container (see below) but will still follow the same rules as all of the other branching evolutions to keep parity. The evolution tree will go from the first example to the second:
Closer Look At The Code
```js
const expected = {
pokemonId: 439,
evolutionDetails: null,
evolvesInto: [
{
pokemonId: 122,
evolutionDetails: {
formNos: [0],
levels: [0],
methodIds: [21],
methodParameters: [102],
monsNos: [122],
},
evolvesInto: [],
},
{
pokemonId: 1083,
evolutionDetails: {
formNos: [1],
levels: [32],
methodIds: [8],
methodParameters: [849],
monsNos: [122],
},
evolvesInto: [
{
pokemonId: 866,
evolutionDetails: {
formNos: [0],
levels: [42],
methodIds: [4],
methodParameters: [0],
monsNos: [866],
},
evolvesInto: [],
},
],
},
],
};
```
```js
const expected = {
pokemonId: 439,
evolutionDetails: null,
evolvesInto: [
{
pokemonId: 122,
evolutionDetails: {
formNos: [0],
levels: [0],
methodIds: [21],
methodParameters: [102],
monsNos: [122],
},
evolvesInto: [
{
pokemonId: -1,
evolutionDetails: {
formNos: [-1],
levels: [-1],
methodIds: [-1],
methodParameters: [-1],
monsNos: [-1],
},
evolvesInto: [],
},
{
pokemonId: 866,
evolutionDetails: {
formNos: [0],
levels: [42],
methodIds: [4],
methodParameters: [0],
monsNos: [866],
},
],
},
{
pokemonId: 1083,
evolutionDetails: {
formNos: [1],
levels: [32],
methodIds: [8],
methodParameters: [849],
monsNos: [122],
},
evolvesInto: [
{
pokemonId: 866,
evolutionDetails: {
formNos: [0],
levels: [42],
methodIds: [4],
methodParameters: [0],
monsNos: [866],
},
evolvesInto: [],
},
],
},
],
};
```
All The Different Functions:
The next parts of the code can get quite complicated so I'll explain them each individually in the order that they're called.
renderEvolutionTree Function:
This first function that is called sets up the baseline of the entire component. In short, it takes the evolution tree that was given and renders a Box element for each of the mons and methods and puts them into a Grid element. Having all of the First and Second evolutions in their separate containers allows for greater control over the styling necessary for the evolutionGraph as a whole. Here's what this component does in more detail:
renderEvolutionTree Function Description
1. Finds the style of the Grid component that is to be made based on the methodIndex
2. Initializes the methods and images to be added to.
3. For each evolution in the immediate tree of the evolutionTree, it does the following:
1. Grabs all of the evolution details from the tree and gives them a variable.
2. Defines the method(s) of the evolution with the renderMethods function and adds them to the allMethods to be rendered at the end.
3. Check if the first methodId is -1 and adds a blank `Box` element for the pokemon's image to `allImages`. This is for the default evo object which was mentioned above for Mr. Mime's placeholder evolution.
4. The pokemonImages are then mapped from all of the monsNos pulled from the evolution tree. One quirk that needs to be checked with this is if a pokemon has multiple methods as that monsNo is added twice. In order to not display two of the same image on a pokemon, it checks that the index is 0. This is then added to the pokemonImages.
4. All of this is then added to the `Grid` element with the specific evolutionStyle (firstEvolution & secondEvolution)
5. The renderEvolutions function then uses the allMethods and allImages components and maps them out 1 to 1 for the methods to their respective pokemon Images
renderMethods Function:
This next function, as advertised, sets up the render for all of the methods column inside of the firstEvolution and secondEvolution components with Box elements. In short, it renders the image associated with the evolution method below the actual text of the method. And if there is multiple methods, it adds onto the bottom in the opposite order (image then method text). Here's a full description of what this function does:
renderMethods Function Description
1. Grabs the first methodID and checks if that is -1 (Mr. Mime again -_-) and returns an Empty Box if it is.
2. Grabs the firstMethodParameter and uses those as inputs to the getEvolutionMethodDetail function to get back the specific detail and method that was used for that evolution.
3. It then uses the firstMethodId, firstEvoMethod, and firstMethodParameter as inputs for the renderItemImage to get the associated image to the evolution method.
4. The method text and evoImage are then put inside of a `Box` element for easier shipping :wink:.
5. A check then occurs to see if there is more than one method and passes all of the necessary info to the renderSecondMethod function for it to be rendered in the same `Box` element.
renderSecondMethod Function:
This is basically just a rebranding of the renderMethods and grabs the same information and puts that into a blank element so it can be added to the Box element defined for the original method.
renderItemImage Function:
This function has a lot of conditional statements using the evolutionFunctions object constant to determine the function that should be used for getting the images. This could be an item, a TM image (for move evos), or a different pokemon. This returns the url to be used for the image of the method.
renderEvolutions function:
This function is quite simple, it takes all of the methods and pokemonImages and maps each of the method components to their respective pokemon image components. This is then put into the same Grid container for easier manipulation with css.
Other Changes:
Adds functions to get tm images and regular item images
Defaults the getPokemonImageFilename formNo to be 0
Fixed some of the EVOLUTION_METHOD_DETAILS names to be more accurate
Added evoMethod using the evolutionDetails constant as an object to more accurately track what the method used is.
EvolutionGraph Changes:
General Changes:
https://github.com/TeamLumi/luminescent-team/assets/125856819/79223d7f-c24a-4760-844b-0a88e8fe9bb3
Does Not Evolvecomponent like the below image.Added a vertical component for those with small screens (mobile). When the parent element of scrollContent has a secondEvolution element, and the screen is smaller than 680 pixels, it will rotate the evolution graph onto its side for easier viewing. Examples can be seen in the below images.
Vertical Evolution Graph Examples
     Adds a check to see if the original evolution tree has more than just one evolution. This would signify a branching 1st evolution. Here is what that check does:
Description of the branching evo check
1. If the first mon in the branch has an evolution, then there is a 2 stage branching evolution. This usually means that both sides of the branch have a second evolution. Except for Mime Jr. If this is the case, then the 2nd mon in the branch is added to the first branch. - This will result in a container that holds the 2 evolutions (see below) without needing to grab these separately. The evolution tree will look like this before and after adding the second evolution.Closer Look At The Code
```js const expected = { pokemonId: 265, evolutionDetails: null, evolvesInto: [ { evolutionDetails: { formNos: [0], levels: [7], methodIds: [12], methodParameters: [0], monsNos: [266], }, evolvesInto: [ { evolutionDetails: { formNos: [0], levels: [10], methodIds: [4], methodParameters: [0], monsNos: [267], }, evolvesInto: [], pokemonId: 267, }, ], pokemonId: 266, }, { evolutionDetails: { formNos: [0], levels: [7], methodIds: [13], methodParameters: [0], monsNos: [268], }, evolvesInto: [ { evolutionDetails: { formNos: [0], levels: [10], methodIds: [4], methodParameters: [0], monsNos: [269], }, evolvesInto: [], pokemonId: 269, }, ], pokemonId: 268, }, ], }; ``` ```js const expected = { pokemonId: 265, evolutionDetails: null, evolvesInto: [ { evolutionDetails: { formNos: [0], levels: [7], methodIds: [12], methodParameters: [0], monsNos: [266], }, evolvesInto: [ { evolutionDetails: { formNos: [0], levels: [10], methodIds: [4], methodParameters: [0], monsNos: [267], }, evolvesInto: [], pokemonId: 267, }, { evolutionDetails: { formNos: [0], levels: [10], methodIds: [4], methodParameters: [0], monsNos: [269], }, evolvesInto: [], pokemonId: 269, }, ], pokemonId: 266, }, { evolutionDetails: { formNos: [0], levels: [7], methodIds: [13], methodParameters: [0], monsNos: [268], }, evolvesInto: [ { evolutionDetails: { formNos: [0], levels: [10], methodIds: [4], methodParameters: [0], monsNos: [269], }, evolvesInto: [], pokemonId: 269, }, ], pokemonId: 268, }, ], }; ```Closer Look At The Code
```js const expected = { pokemonId: 439, evolutionDetails: null, evolvesInto: [ { pokemonId: 122, evolutionDetails: { formNos: [0], levels: [0], methodIds: [21], methodParameters: [102], monsNos: [122], }, evolvesInto: [], }, { pokemonId: 1083, evolutionDetails: { formNos: [1], levels: [32], methodIds: [8], methodParameters: [849], monsNos: [122], }, evolvesInto: [ { pokemonId: 866, evolutionDetails: { formNos: [0], levels: [42], methodIds: [4], methodParameters: [0], monsNos: [866], }, evolvesInto: [], }, ], }, ], }; ``` ```js const expected = { pokemonId: 439, evolutionDetails: null, evolvesInto: [ { pokemonId: 122, evolutionDetails: { formNos: [0], levels: [0], methodIds: [21], methodParameters: [102], monsNos: [122], }, evolvesInto: [ { pokemonId: -1, evolutionDetails: { formNos: [-1], levels: [-1], methodIds: [-1], methodParameters: [-1], monsNos: [-1], }, evolvesInto: [], }, { pokemonId: 866, evolutionDetails: { formNos: [0], levels: [42], methodIds: [4], methodParameters: [0], monsNos: [866], }, ], }, { pokemonId: 1083, evolutionDetails: { formNos: [1], levels: [32], methodIds: [8], methodParameters: [849], monsNos: [122], }, evolvesInto: [ { pokemonId: 866, evolutionDetails: { formNos: [0], levels: [42], methodIds: [4], methodParameters: [0], monsNos: [866], }, evolvesInto: [], }, ], }, ], }; ```All The Different Functions:
The next parts of the code can get quite complicated so I'll explain them each individually in the order that they're called.
renderEvolutionTreeFunction:This first function that is called sets up the baseline of the entire component. In short, it takes the evolution tree that was given and renders a
Boxelement for each of the mons and methods and puts them into aGridelement. Having all of the First and Second evolutions in their separate containers allows for greater control over the styling necessary for the evolutionGraph as a whole. Here's what this component does in more detail:renderEvolutionTree Function Description
1. Finds the style of the Grid component that is to be made based on the methodIndex 2. Initializes the methods and images to be added to. 3. For each evolution in the immediate tree of the evolutionTree, it does the following: 1. Grabs all of the evolution details from the tree and gives them a variable. 2. Defines the method(s) of the evolution with the renderMethods function and adds them to the allMethods to be rendered at the end. 3. Check if the first methodId is -1 and adds a blank `Box` element for the pokemon's image to `allImages`. This is for the default evo object which was mentioned above for Mr. Mime's placeholder evolution. 4. The pokemonImages are then mapped from all of the monsNos pulled from the evolution tree. One quirk that needs to be checked with this is if a pokemon has multiple methods as that monsNo is added twice. In order to not display two of the same image on a pokemon, it checks that the index is 0. This is then added to the pokemonImages. 4. All of this is then added to the `Grid` element with the specific evolutionStyle (firstEvolution & secondEvolution) 5. The renderEvolutions function then uses the allMethods and allImages components and maps them out 1 to 1 for the methods to their respective pokemon ImagesrenderMethodsFunction:This next function, as advertised, sets up the render for all of the methods column inside of the firstEvolution and secondEvolution components with
Boxelements. In short, it renders the image associated with the evolution method below the actual text of the method. And if there is multiple methods, it adds onto the bottom in the opposite order (image then method text). Here's a full description of what this function does:renderMethods Function Description
1. Grabs the first methodID and checks if that is -1 (Mr. Mime again -_-) and returns an Empty Box if it is. 2. Grabs the firstMethodParameter and uses those as inputs to the getEvolutionMethodDetail function to get back the specific detail and method that was used for that evolution. 3. It then uses the firstMethodId, firstEvoMethod, and firstMethodParameter as inputs for the renderItemImage to get the associated image to the evolution method. 4. The method text and evoImage are then put inside of a `Box` element for easier shipping :wink:. 5. A check then occurs to see if there is more than one method and passes all of the necessary info to the renderSecondMethod function for it to be rendered in the same `Box` element.renderSecondMethodFunction:This is basically just a rebranding of the renderMethods and grabs the same information and puts that into a blank element so it can be added to the
Boxelement defined for the original method.renderItemImageFunction:This function has a lot of conditional statements using the evolutionFunctions object constant to determine the function that should be used for getting the images. This could be an item, a TM image (for move evos), or a different pokemon. This returns the url to be used for the image of the method.
renderEvolutionsfunction:This function is quite simple, it takes all of the methods and pokemonImages and maps each of the method components to their respective pokemon image components. This is then put into the same
Gridcontainer for easier manipulation with css.Other Changes: