My Phase Four Project — Anime Fantasy
With the project guidelines and the late update of the many to many I had two ideas I wanted to work on and had to eliminate. This idea was inspired by my love for anime and sports. I always enjoyed the Yahoo and ESPN fantasy app with strategic thinking. I fused both of them to make this website, hence the name Anime Fantasy. My idea is legit taking the basic website/app flow of ESPN fantasy with a home page that displays information from other upcoming anime-related news (since there’s no news on live sports) and the league page to display the users leagues they’re active in with full CRUD control if available they are the creator of the league displayed. The tricky part f everything was to create the website with battling and drafting feature. I ended up taking out the drafting feature but kept the battling feature. With the anime characters had to create a join table so that there would be a many to many called league_characters. It creates a whole new array of characters that link them to each newly generated league. The battling took A LOT of thinking of the sequence, CSS, and math to incorporate different stats for each character. The finished product I created with this close deadline was actually pretty cool and fun and would love to make something like this in the future. With the full CRUD action on the leagues with the creator, they’re able to send invites to other users to join as members, delete their league or edit the name of the league.
For my websites, I split the styling work between CSS and tailwind. I will be honest I wanted to use a lot of bootstrap but with the newest version of react, it wasn’t cooperating. For the load of the login in feature, I decided to use useContext to handle all the login feathers (sign-in, sign-up, sign-out). Also, was great to use and time I need the current user on any component compared to passing down props every time. For the home page, I took the information from the endpoint of the API I wanted to use but wasn’t working. I created a component that had the set information in it and added links to the pages to finish reading the article. I put the information through a carding component called newsCards.js and did the styling through tailwind for the card look with its hovering features.
The league page fetches from the league's index route and will display only the leagues the current user is in (as a creator or member). The styling for this was all done with tailwind as well. The retrieved data is put through a card to illustrate the name of the league, the members of the league, and four buttons that complete the full CRUD features of the leagues (create, read, update, and delete). There’s a component with its own button to create your own new league. When clicked it will take you to a form with just a league name. With the generation of a new league, a league ID will be created with a new batch of characters for that league. When the name is typed and the button is clicked it will navigate the user back to the league page.
The league cards have four buttons that give the creator control of the full CRUD options. There’s the delete button that removes the league from the page, EDIT button that allows the creator to change the name of the league, INVITE button to invite other users, and GO PLAY is for the league with the members where you can battle.
The CREATE button navigates the user to create a league form and the form only contains one input field to enter the desired name of the league the user will be creating. After making the league name and hitting submit it will navigate you back to the ALHomePage component. When navigating back the user will the newly generated league. This brings us to the next feature, INVITE! With the invite button, you’ll be navigated to a different page with a drop-down menu that illustrates all users in the app to send invites to. After selecting the user’s username and clicking it in the drop-down it actually selects the username’s id to send to the backend fetch.
Then, there’s the EDIT feature which is a button that uses useNavigate to take you to another page where you’ll see the edit form for the league name. There’s a fetch call here for a PATCH connected to the submit in the form and will navigate you back to the page with all the league.
Finally, the most challenging and fun part of this website brings us to the GO PLAY button. With this click, it brings you to another page that simply displays the members in your league and has a START button. When clicking the start button it will take you to the next mode. I created a useState to navigate the user in between modes accordingly. When clicking start you go from “start” to “battle” which are two different components. The Battle has a few components to it to get the battling to work. For starters, the many to many my project has is here and comes from the roster of 20 different anime characters. When a new league is created a new roster of characters is created for each league through the join table league_characters on my backend. So for the league, you’re currently in and you click battle, the fetch goes to your league and your character is generated with an algorithm to produce a random character for you to use and fight against. Each character has its own unique stats and you’re in a turn-based battle between your random generated character and another. There’s a Character Summary component for each character's stats used in the battle, BattleAnnouncer component that illustrates the narration of the battle between the fighting, a battle menu that displays the attacking options, useAIOppenent for the opponent to randomly select their attack between their options, and useBattleSequence to regulate the sequence of the fighting between each click. That was a lot I know but I promise this is very fun.
There you have it for my Phase Four Project, Anime Fantasy! Enjoy!
I had to break down the tables with what I wanted to do. For the front end, I wanted to have a login component to pop up if there isn’t a current user signed into the sessions. The home page would have stored information on a component on the frontend. The League page is where the real breakdown of the tables come into play. I want to be able to invite your friends/users to the league you created and give the creator of the league to have full crud abilities. For my many to many requirements of this project, Users can have many leagues and have many characters through the league. League has many users through invitations as a foreign key of member and league has many characters through a join table called league characters. So every time a new league is created a new roster of 20 characters is generated for that league. Also, I used active record to carry the creation of these tables before going into edit them through “rails g resource _____ — no-test-framework” and made table for the user and sessions. Both of these are very necessary for the login features of the website.
After, creating my tables I had a good amount of seeding data to enter. I created my list of 20 characters and decided what would be a far power scaling dynamic between the anime characters from different types of shows and universes. I have fun creating the health, attack, and defense stats and found images to resize to make sure they were all the same size. I uploaded the images in a public folder called assets and added a img column to the characters. In the img column, I put the path to the proper image for each of the 20 characters, with a alt name. I created two leagues and made sure to make invites for the leagues. I made 5 active users to start with to make sure I had a nice pool to start with for my beginning features.
