Em1dio · Feb 9, 2021 · Feb 10, 2021 · Feb 17, 2021 · Feb 18, 2021 · Feb 19, 2021
diff --git a/app.py b/app.py
@@ -19,16 +19,43 @@
 }
 
 images = {
-    "SILVER": "Emblem_Silver.png",
-    "PLATINUM": "Emblem_Platinum.png",
-    "MASTER": "Emblem_Master.png",
-    "IRON": "Emblem_Iron.png",
-    "GRANDMASTER": "Emblem_Grandmaster.png",
-    "GOLD": "Emblem_Gold.png",
-    "DIAMOND": "Emblem_Diamond.png",
-    "CHALLENGER": "Emblem_Challenger.png",
-    "BRONZE": "Emblem_Bronze.png",
-    "UNRANKED": "Emblem_Unranked.png",
+    "IRON_I": "imgs/Emblem_Iron_I.png",
+    "IRON_II": "imgs/Emblem_Iron_II.png",
+    "IRON_III": "imgs/Emblem_Iron_III.png",
+    "IRON_IV": "imgs/Emblem_Iron_IV.png",
+    "BRONZE_I": "imgs/Emblem_Bronze_I.png",
+    "BRONZE_II": "imgs/Emblem_Bronze_II.png",
+    "BRONZE_III": "imgs/Emblem_Bronze_III.png",
+    "BRONZE_IV": "imgs/Emblem_Bronze_IV.png",
+    "SILVER_I": "imgs/Emblem_Silver_I.png",
+    "SILVER_II": "imgs/Emblem_Silver_II.png",
+    "SILVER_III": "imgs/Emblem_Silver_III.png",
+    "SILVER_IV": "imgs/Emblem_Silver_IV.png",
+    "GOLD_I": "imgs/Emblem_Gold_I.png",
+    "GOLD_II": "imgs/Emblem_Gold_II.png",
+    "GOLD_III": "imgs/Emblem_Gold_III.png",
+    "GOLD_IV": "imgs/Emblem_Gold_IV.png",
+    "DIAMOND_I": "imgs/Emblem_Diamond_I.png",
+    "DIAMOND_II": "imgs/Emblem_Diamond_II.png",
+    "DIAMOND_III": "imgs/Emblem_Diamond_III.png",
+    "DIAMOND_IV": "imgs/Emblem_Diamond_IV.png",
+    "PLATINUM_I": "imgs/Emblem_Platinum_I.png",
+    "PLATINUM_II": "imgs/Emblem_Platinum_II.png",
+    "PLATINUM_III": "imgs/Emblem_Platinum_III.png",
+    "PLATINUM_IV": "imgs/Emblem_Platinum_IV.png",
+    "MASTER_I": "imgs/Emblem_Master_I.png",
+    "MASTER_II": "imgs/Emblem_Master_II.png",
+    "MASTER_III": "imgs/Emblem_Master_III.png",
+    "MASTER_IV": "imgs/Emblem_Master_IV.png",
+    "GRANDMASTER_I": "imgs/Emblem_Grandmaster_I.png",
+    "GRANDMASTER_II": "imgs/Emblem_Grandmaster_II.png",
+    "GRANDMASTER_III": "imgs/Emblem_Grandmaster_III.png",
+    "GRANDMASTER_IV": "imgs/Emblem_Grandmaster_IV.png",
+    "CHALLENGER_I": "imgs/Emblem_Challenger_I.png",
+    "CHALLENGER_II": "imgs/Emblem_Challenger_II.png",
+    "CHALLENGER_III": "imgs/Emblem_Challenger_III.png",
+    "CHALLENGER_IV": "imgs/Emblem_Challenger_IV.png",
+    "UNRANKED": "imgs/Emblem_Unranked.png",
 }
 
 @app.route("/")
@@ -41,8 +68,12 @@ def showData():
     name = request.args.get('summoner')
     queue = request.args.get('queue')
     color = request.args.get('color')
-    data = define_map(get(region, name), queue)
-    return render_template('template.html', data = data[queue], color = color)
+    hasBg = request.args.get('hasBg')
+    if(queue == 'RANKED_TFT'):
+        data = define_map(getTFT(region, name), queue)
+    else:
+        data = define_map(get(region, name), queue)
+    return render_template('template.html', data = data[queue], color = color, hasBg = hasBg)
 
 
 def requestLink(url):
@@ -60,12 +91,21 @@ def get(country, name):
     response = requestLink(url)
     return response
 
+def getTFT(country, name):
+    url = f"https://{links[country]}/lol/summoner/v4/summoners/by-name/{name}"
+    response = requestLink(url)
+    id = response["id"]
+    url = f"https://{links[country]}/tft/league/v1/entries/by-summoner/{id}"
+    response = requestLink(url)
+    return response
+
 def define_map(response, queue):
     lista = {}
     if(len(response) > 0):
+        print(response)
         for res in response:
             map = {
-                    "tier": images[res["tier"]],
+                    "tier": images[res["tier"] + "_" + res["rank"]],
                     "rank": res["rank"],
                     "leaguePoints": res["leaguePoints"],
                     "percentWin": float(res["wins"] / res["wins"] + res["losses"]),

diff --git a/static/Emblem_Bronze.png b/static/Emblem_Bronze.png
diff --git a/static/Emblem_Challenger.png b/static/Emblem_Challenger.png
diff --git a/static/Emblem_Diamond.png b/static/Emblem_Diamond.png
diff --git a/static/Emblem_Gold.png b/static/Emblem_Gold.png
diff --git a/static/Emblem_Grandmaster.png b/static/Emblem_Grandmaster.png
diff --git a/static/Emblem_Iron.png b/static/Emblem_Iron.png
diff --git a/static/Emblem_Master.png b/static/Emblem_Master.png
diff --git a/static/Emblem_Platinum.png b/static/Emblem_Platinum.png
diff --git a/static/Emblem_Silver.png b/static/Emblem_Silver.png
diff --git a/static/Emblem_Unranked.png b/static/Emblem_Unranked.png
diff --git a/static/css/index.css b/static/css/index.css
@@ -64,7 +64,15 @@ body {
     align-items: center;
     justify-content: center;
     padding-left: 10px;
+}
+
+.pRevert{
+    padding-left: revert;
+}
 
+.off{
+background-color: #B01717;
+initial-value: "OFF";
 }
 
 .region{

diff --git a/static/css/main.css b/static/css/main.css
@@ -9,6 +9,9 @@ body {
 }
 
 .info {
+    border-radius: 20px;
+    border-style: groove;
+    border-width: 0.6ch;
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/static/imgs/Emblem_Bronze_I.png b/static/imgs/Emblem_Bronze_I.png
diff --git a/static/imgs/Emblem_Bronze_II.png b/static/imgs/Emblem_Bronze_II.png
diff --git a/static/imgs/Emblem_Bronze_III.png b/static/imgs/Emblem_Bronze_III.png
diff --git a/static/imgs/Emblem_Bronze_IV.png b/static/imgs/Emblem_Bronze_IV.png
diff --git a/static/imgs/Emblem_Challenger_I.png b/static/imgs/Emblem_Challenger_I.png
diff --git a/static/imgs/Emblem_Challenger_II.png b/static/imgs/Emblem_Challenger_II.png
diff --git a/static/imgs/Emblem_Challenger_III.png b/static/imgs/Emblem_Challenger_III.png
diff --git a/static/imgs/Emblem_Challenger_IV.png b/static/imgs/Emblem_Challenger_IV.png
diff --git a/static/imgs/Emblem_Diamond_I.png b/static/imgs/Emblem_Diamond_I.png
diff --git a/static/imgs/Emblem_Diamond_II.png b/static/imgs/Emblem_Diamond_II.png
diff --git a/static/imgs/Emblem_Diamond_III.png b/static/imgs/Emblem_Diamond_III.png
diff --git a/static/imgs/Emblem_Diamond_IV.png b/static/imgs/Emblem_Diamond_IV.png
diff --git a/static/imgs/Emblem_Gold_I.png b/static/imgs/Emblem_Gold_I.png
diff --git a/static/imgs/Emblem_Gold_II.png b/static/imgs/Emblem_Gold_II.png
diff --git a/static/imgs/Emblem_Gold_III.png b/static/imgs/Emblem_Gold_III.png
diff --git a/static/imgs/Emblem_Gold_IV.png b/static/imgs/Emblem_Gold_IV.png
diff --git a/static/imgs/Emblem_Grandmaster_I.png b/static/imgs/Emblem_Grandmaster_I.png
diff --git a/static/imgs/Emblem_Grandmaster_II.png b/static/imgs/Emblem_Grandmaster_II.png
diff --git a/static/imgs/Emblem_Grandmaster_III.png b/static/imgs/Emblem_Grandmaster_III.png
diff --git a/static/imgs/Emblem_Grandmaster_IV.png b/static/imgs/Emblem_Grandmaster_IV.png
diff --git a/static/imgs/Emblem_Iron_I.png b/static/imgs/Emblem_Iron_I.png
diff --git a/static/imgs/Emblem_Iron_II.png b/static/imgs/Emblem_Iron_II.png
diff --git a/static/imgs/Emblem_Iron_III.png b/static/imgs/Emblem_Iron_III.png
diff --git a/static/imgs/Emblem_Iron_IV.png b/static/imgs/Emblem_Iron_IV.png
diff --git a/static/imgs/Emblem_Master_I.png b/static/imgs/Emblem_Master_I.png
diff --git a/static/imgs/Emblem_Master_II.png b/static/imgs/Emblem_Master_II.png
diff --git a/static/imgs/Emblem_Master_III.png b/static/imgs/Emblem_Master_III.png
diff --git a/static/imgs/Emblem_Master_IV.png b/static/imgs/Emblem_Master_IV.png
diff --git a/static/imgs/Emblem_Platinum_I.png b/static/imgs/Emblem_Platinum_I.png
diff --git a/static/imgs/Emblem_Platinum_II.png b/static/imgs/Emblem_Platinum_II.png
diff --git a/static/imgs/Emblem_Platinum_III.png b/static/imgs/Emblem_Platinum_III.png
diff --git a/static/imgs/Emblem_Platinum_IV.png b/static/imgs/Emblem_Platinum_IV.png
diff --git a/static/imgs/Emblem_Silver_I.png b/static/imgs/Emblem_Silver_I.png
diff --git a/static/imgs/Emblem_Silver_II.png b/static/imgs/Emblem_Silver_II.png
diff --git a/static/imgs/Emblem_Silver_III.png b/static/imgs/Emblem_Silver_III.png
diff --git a/static/imgs/Emblem_Silver_IV.png b/static/imgs/Emblem_Silver_IV.png
diff --git a/static/imgs/Emblem_Unranked.png b/static/imgs/Emblem_Unranked.png
diff --git a/templates/index.html b/templates/index.html
@@ -7,7 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LoL Witch</title>
     <link rel="stylesheet" href="./../static/css/index.css">
-
 </head>
 
 <body>
@@ -37,6 +36,7 @@
                                 <option value="RANKED_FLEX_SR">Flex</option>
                                 <option value="RANKED_SOLO_5x5">Solo 5v5</option>
                                 <option value="RANKED_TEAM_5x5">Team 5v5</option>
+                                <option value="RANKED_TFT">TFT</option>
                             </select>
                         </div>
                         <div class="formDivInput">
@@ -55,19 +55,42 @@
                                 <option value="RU">Russia</option>
                             </select>
                         </div>
+                        <div class="formDivInput">
+                            <label for="bg">Background</label>
+                            <input id='bg' class="formInput pRevert" name="bg" type="button" value="ON" onclick="toggle(this)">
+                            <input id='hasBg' class="formInput" name="hasBg" type="text" style="display: none;">
+                        </div>
                         <div class="formDivInput">
                             <label for="color">Color</label>
                             <input class="formInput color" name="color" type="color" value="#32D74B">
                         </div>
                     </div>
                 </div>
 
-                <button>Go!</button>
+                <button onclick="checkBG()">Go!</button>
 
             </form>
 
         </div>
+        <script>
+            function checkBG() {
+                const bg = document.getElementById("bg");
+                const bgText = document.getElementById("hasBg");
 
+                if (bg.value == 'ON') {
+                    bgText.value = true;
+                } else
+                    bgText.value = false;
+            }
+            function toggle(el) {
+                el.classList.toggle("off");
+                if (el.classList.contains('off')) {
+                    el.value = "OFF";
+                } else if (!el.classList.contains('off')) {
+                    el.value = "ON";
+                }
+            }
+        </script>
         <footer>
             <a href="https://www.twitch.tv/em1dio">Twitch: @Em1Dio</a>
             <a href="http://github.com/caio-emidio/">Github: caio-emidio</a>

diff --git a/templates/template.html b/templates/template.html
@@ -1,31 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="refresh" content="60">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LoL Witch</title>
     <style>
         p {
-            font-size: 6.2em;
-            font-weight: 500;
-            margin: 1px;
-            color: 
-            {{color}};
+            font-size: 2.2em;
+            font-weight: 700;
+            margin: 5px;
         }
     </style>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
 </head>
+
 <body>
     <div class="lolwitch">
         <div class="images">
-            <img src="{{url_for('static', filename=data.tier)}}" />
+            <img id="badge" src="{{url_for('static', filename=data.tier)}}" />
         </div>
-        <div class="info">
-            <p>Rank: {{data.rank}}</p>
+        <div id="PDLs">
             <p>{{data.leaguePoints}} PDLs</p>
         </div>
     </div>
+    <script>
+        const params = Object.fromEntries(new URLSearchParams(location.search));
+        const elementP = document.getElementsByTagName('p')[0];
+        const elementBadge = document.getElementById('badge');
+        const elementPDLs = document.getElementById('PDLs');
+        elementP.style.color = params.color;
+
+        if (params.hasBg == 'true') {
+            elementPDLs.classList.add("info");
+            checkTier();
+        }
+        function checkTier() {
+            elementPDLs.classList.add("info")
+
+            if (elementBadge.src.toLowerCase().includes('iron')) {
+                elementPDLs.style.backgroundColor = "#5f5757";
+                elementPDLs.style.borderColor = "#575151";
+            }
+            else if (elementBadge.src.toLowerCase().includes('silver')) {
+                elementPDLs.style.backgroundColor = "#687c82";
+                elementPDLs.style.borderColor = "#62767b";
+            }
+            else if (elementBadge.src.toLowerCase().includes('gold')) {
+                elementPDLs.style.backgroundColor = "#ba782f";
+                elementPDLs.style.borderColor = "#1a6b30";
+            }
+            else if (elementBadge.src.toLowerCase().includes('diamond')) {
+                elementPDLs.style.backgroundColor = "#4d83b3";
+                elementPDLs.style.borderColor = "#da7bf7";
+            }
+            else if (elementBadge.src.toLowerCase().includes('platynum')) {
+                elementPDLs.style.backgroundColor = "#52908d";
+                elementPDLs.style.borderColor = "#332f35";
+            }
+            else if (elementBadge.src.toLowerCase().includes('_master')) {
+                elementPDLs.style.backgroundColor = "#b381d6";
+                elementPDLs.style.borderColor = "#592c2f";
+            }
+            else if (elementBadge.src.toLowerCase().includes('grandmaster')) {
+                elementPDLs.style.backgroundColor = "#c1b2bb";
+                elementPDLs.style.borderColor = "#cd1c22";
+            }
+            else if (elementBadge.src.toLowerCase().includes('challenger')) {
+                elementPDLs.style.backgroundColor = "#fbeedf";
+                elementPDLs.style.borderColor = "#fddb83";
+            }
+            else {
+                elementPDLs.style.backgroundColor = "#1e2328";
+                elementPDLs.style.borderColor = "#040d16";
+            }
+        }
+
+    </script>
 </body>
 
 </html>