feat: Add checkbox with tft search router

chrisheo
Commit be0b4e5621887317edf6836fd59f0986888d5699 be0b4e56 1 parent bd66f616
Showing 4 changed files with 130 additions and 9 deletions
back/router/main(1).js
back/router/main.js
back/views/index.ejs
back/views/main.ejs
--- a/back/router/main(1).js
View file @be0b4e5
+++ b/back/router/main(1).js
View file @be0b4e5
@@ -2,7 +2,7 @@ const express = require('express');
 const router = express.Router();
 const request = require("request");
 const urlenconde = require('urlencode');
-const apikey = "RGAPI-816bb9a0-615c-41e0-a01e-f5e0bb68c3a6"//api
+const apikey = "RGAPI-3f849a35-01f8-4915-a606-87cfc4800ef2"//api
 router.get('/search/summoner/:username/', function (req, res) {
   //롤 api url
   const name = req.params.username;
--- a/back/router/main.js
View file @be0b4e5
+++ b/back/router/main.js
View file @be0b4e5
@@ -2,13 +2,14 @@ module.exports = function (app) {
   var request = require("request");
   var urlenconde = require('urlencode');
-  var apikey = "RGAPI-899abd44-2f7c-4e2d-981e-7cad9e50d1cb"//api
+  var apikey = "RGAPI-3f849a35-01f8-4915-a606-87cfc4800ef2"//api
   app.get('/', function (req, res) {
     res.render('main', { title: 'R U TROLL?' });
   });
-  app.get('/search/:username/', function (req, res) {
+
+  app.get('tft/search/:username/', function (req, res) {
     // tft api url
     const summonerName = req.params.username;
     var nameUrl = `https://kr.api.riotgames.com/tft/summoner/v1/summoners/by-name/${summonerName}?api_key=${apikey}`
@@ -66,4 +67,80 @@ module.exports = function (app) {
       });
     });
   });
+
+  app.get('/search/:username/', function(req, res){
+    //롤 api url
+    name = req.params.username;
+    var nameUrl = "https://kr.api.riotgames.com/lol/summoner/v3/summoners/by-name/" + urlenconde(name)+"?api_key="+ apikey;
+    request(nameUrl,function(error,response,body){
+      var info_summoner_json = JSON.parse(body);
+      accountId = info_summoner_json["accountId"];
+      id = info_summoner_json["id"];
+      summoner = info_summoner_json["name"];
+      profileIconId = info_summoner_json["profileIconId"];
+      summonerLevel = info_summoner_json["summonerLevel"];
+      revisionDate = info_summoner_json["revisionDate"];
+      var rankedUrl = "https://kr.api.pvp.net/api/lol/kr/v2.5/league/by-summoner/"+ urlenconde(id)+ "?api_key=" + apikey;
+      var champUrl = "https://kr.api.pvp.net/api/lol/kr/v1.3/stats/by-summoner/" + urlenconde(id) + "/ranked?api_key=" + apikey;
+      request(champUrl,function(error,response,body){
+        var info_champ_json = JSON.parse(body);
+        var champions = info_champ_json["champions"];
+        var champ_point = new Array();
+        var champ_id = new Array();
+        var champ_name = new Array();
+        var champ_pic = new Array();
+        var champions_length = Object.keys(champions).length;
+        for(var i=0; i < champions_length; i++){
+          champ_point[i] = (champions[i]["stats"]["totalSessionsWon"]/champions[i]["stats"]["totalSessionsPlayed"]*200)
+          + ((champions[i]["stats"]["totalAssists"]+champions[i]["stats"]["totalChampionKills"])/champions[i]["stats"]["totalDeathsPerSession"]*100)
+          + (champions[i]["stats"]["totalSessionsPlayed"]*3);
+          champ_id[i] = champions[i]["id"];
+        }
+        var staticUrl = "https://global.api.pvp.net/api/lol/static-data/kr/v1.2/champion/?api_key=" + apikey;
+        request(staticUrl,function(error,response,body){
+          var info_static_champ_json = JSON.parse(body);
+          var champion = info_static_champ_json["data"];
+          for(var i=0; i < champ_id.length; i++){
+                for(js in champion){
+                  for(j in champion[js]){
+                    if(champion[js]["id"] == champ_id[i]){
+                      champ_name[i] = champion[js]["key"];
+                      champ_pic[i] = "https://opgg-static.akamaized.net/images/lol/champion/"+champ_name[i]+".png?image=c_scale,w_46";
+                    }
+                  }
+                }
+          }
+          champ_name[champ_name.length] = "total";
+          var temp_id;
+          var temp_name;
+          var temp_point;
+          var temp_pic;
+          for(var i=0; i < champ_id.length-1; i++){
+            for(var j=i+1;j <champ_id.length-1; j++)
+            if(champ_point[i] > champ_point[j]){
+              temp_id = champ_id[i];
+              temp_name = champ_name[i];
+              temp_point = champ_point[i];
+              temp_pic = champ_pic[i];
+              champ_id[i] = champ_id[j]
+              champ_name[i] = champ_name[j];
+              champ_point[i] = champ_point[j];
+              champ_pic[i] = champ_pic[j];
+              champ_id[j] = temp_id
+              champ_name[j] = temp_name;
+              champ_point[j] = temp_point;
+              champ_pic[j] = temp_pic;
+            }
+          }
+          res.render('index', { title: req.params.username ,
+          c_id: champ_id,
+          c_name: champ_name,
+          c_point: champ_point,
+          c_pic: champ_pic,
+          c_summoner: summoner
+          });
+        });
+      });
+    });
+  });
 };
--- a/back/views/index.ejs
View file @be0b4e5
+++ b/back/views/index.ejs
View file @be0b4e5
@@ -10,19 +10,44 @@
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
     <style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style>
     <script>
-    $(document).ready(function(){
+      function search() {
+
+        console.log("---------------------")
+        var tft_check = $("tft_check").val();
+        console.log(tft_check)
+
+        var name = $("input").val();
+        if (tft_check == 1) {
+          location.href = "http://localhost:3000/tft/search/" + name;
+
+        } else {
+          location.href = "http://localhost:3000/search/" + name;
+
+        }
+      }
+    $(document).ready(function(){
+      
       $("button#searchButton").click(function(){
+        console.log("---------------------")
+        var tft_check = $("tft_check").val();
+        console.log(tft_check)
+
         var name = $("input").val();
-        location.href = "http://localhost:3000/search/" + name;
+        if (tft_check == 1) {
+          location.href = "http://localhost:3000/tft/search/" + name;
+
+        } else {
+          location.href = "http://localhost:3000/search/" + name;
+
+        }
+        
       })
     });
     </script>
   </head>
   <body>
-
-
         <div class="imgOpacity">
         <div class="center">
           <img src= "/FindMelogo.png" width = 150, height = 150/>
--- a/back/views/main.ejs
View file @be0b4e5
+++ b/back/views/main.ejs
View file @be0b4e5
@@ -15,7 +15,21 @@
       $("button#searchButton").click(function(){
         var name = $("input").val();
-        location.href = "http://localhost:3000/search/" + name;
+        const checkbox = document.getElementById('tft_check');
+
+        // 2. checked 속성을 체크합니다.
+        const is_checked = checkbox.checked;
+        console.log("-------------------------------")
+        console.log(is_checked)
+        if(is_checked==1){
+          location.href = "http://localhost:3000/tft/search/" + name;
+
+        } else {
+          location.href = "http://localhost:3000/search/" + name;
+
+        }
+        
+        
       })
     });
     </script>
@@ -26,7 +40,12 @@
       <img src= "FindMelogo.png" width = 300, height = 300/>
     </div>
     <div class="center2">
-   	<input type="text" class="input_text" placeholder="소환사 이름">
+      <div>
+        <input type="text" class="input_text" placeholder="소환사 이름">
+        <input type="checkbox" id="tft_check" name="tft_check" checked>
+        <label for="tft_check">TFT</label>
+      </div>
+   	
     <span class="input-group-btn">
       <button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">click!</button>
     </span>