Aearsears / marvel_machine_sim

Roll the marvel machine and test your luck!
https://aearsears.github.io/marvel_machine_sim/
GNU General Public License v3.0
3 stars 1 forks source link

migrate to react #5

Open WiIIiamTang opened 3 years ago

WiIIiamTang commented 3 years ago

Moving over the frontend to a framework like react would allow for much more extensible features. It'd also be easier to hook it up to a backend where we get item data - that way it doesn't have to be hard-coded and any updates will only need to happen through a few automated scripts (the long list of items that is copy-pasted twice in the index file would go away). In the long term it would be easier to maintain over pure javascript.

Here is a quick mockup of a single page webapp that includes spaces for the features of the original website. It is easily scalable by adding more "pages" downwards.

Eventually, the idea would be that the slot machine component connects to the marvel api to fetch all items for each wheel. The visualization page would also display a list of all items from the api when you select an item. Since there are more than 300 items, this may have an effect on performance (although you could create a component that loads all items at the start one time, and passes it to the others as props).

Aearsears commented 3 years ago

ok lets do it you lead the way

WiIIiamTang commented 3 years ago

For hosting, a new branch should probably be made to hold the build (and then point the github pages to build from there)

WiIIiamTang commented 3 years ago

updated react navigation page: https://marvel-machine-sim-6z47hu796-wiiiiamtang.vercel.app/ (on 'react' branch). need to fill in the sections with app content (slot and visual).