M-Track

M-Track is a web application designed to track and display detailed statistics for League of Legends players. It provides valuable insights into match history, player performance, and more.

Table of Contents

• THIS PROJECT IS STILL UNDER HEAVY DEVELOPMENT
• M-Track
  • Table of Contents
  • Features
  • Getting Started
    • Prerequisites
    • Installation
  • Personal Notes

Features

• Match History: View detailed information about your recent League of Legends matches.
• Player Stats: Analyze your performance with statistics on kills, deaths, assists, and more.
• Summoner Search: Look up other players' profiles by summoner name.
• Data Updates: Keep your match history up-to-date with on demand data fetching.

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Python
• Flask
• MySQL (or another supported database)

Installation

1. Clone the repository:

   git clone https://github.com/noahpop77/M-Track.git

2. Move into the directory:

   cd M-Track

3. Install the requirements:

   pip install -r requirements.txt

4. Run the flask server:

   cd flask
   python3 routes.py

Personal Notes

To start the app go into the correct directory and run the routes.py file.

sawa@sawa:~/mainShare/devenv/gitrepos/M-Track/flask$ sudo python3 routes.py

This spawns from the projects web server to refine the process of performign all of the API and SQL calls in the back end and making the front end more digestable. Also revise the data schema in the backend.

• Working out of my ubuntu server for now.
• This is a great tool for working with the data to format it
  • https://jsonformatter.curiousconcept.com/#
• Riot games developer portal
  • https://developer.riotgames.com/
• Riot developer website page on riotIDs and summoner names
  • https://developer.riotgames.com/docs/lol#summoner-names-to-riot-ids
    • https://developer.riotgames.com/apis#account-v1/GET_getByRiotId
    • https://developer.riotgames.com/docs/lol#data-dragon_items
• All League of Legends visual assets (splashes, tiles, runes, everything)
  • https://riot-api-libraries.readthedocs.io/en/latest/ddragon.html
• Riot IDs that I can use for testing:
  • https://www.op.gg/summoners/na/Chaddam-NA1
    • Chaddam#NA1
    • Uday#6666
  • https://www.op.gg/summoners/na/Scyrnn-NA1
    • Scyrnn#NA1
• Sprite Sheet maker
  • https://www.codeandweb.com/free-sprite-sheet-packer

Future Ideas

• Scalable Cloud Infrastructure
  • AWS RDS for database
  • Host web server
  • Containerize webapp for scalability
• FAST API
  • Faster performing API (look into testing it)
• On hover item description
• Clicking on a team mates name will take you to their profile
• Function to filter match history for specific champion
  • Dropdown
  • List
  • Search Bar
  • whatever
• Profile Stat Card
  • (Like the stats on the left )

TODO

Few things need to be done to the PostgreSQL deployment:

• There is complete case sensitivity in how it determines what to save
• "Mingle Dingle#MID" and "mingle Dingle#MID" are two separate entries
  • In both matchHistory and other tables
• IT WORKS but we want this to be resolved cause we dont want users creating more entries than they need.

---

New fix for CORS problem experienced when using https://mtrack.lol vs https://www.mtrack.lol. The actual requests need to be changed. The line that contains the value for Access-Control-Allow-Origin needs to be *.

Not working line:

await fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "https://www.mtrack.lol/",
        "Access-Control-Allow-Credentials": "true"
    },
    body: JSON.stringify(requestBody)
})

Hypothesized working line:

await fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Credentials": "true"
    },
    body: JSON.stringify(requestBody)
})