feat: add tft page

chrisheo
Commit 8db18b6902cf631a62806ea2eee08f540277125a 8db18b69 1 parent be0b4e56
Showing 3 changed files with 111 additions and 5 deletions
back/router/main.js
back/views/index.ejs → back/views/index_lol.ejs
back/views/index_tft.ejs
--- a/back/router/main.js
View file @8db18b6
+++ b/back/router/main.js
View file @8db18b6
@@ -9,7 +9,7 @@ module.exports = function (app) {
   });
-  app.get('tft/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}`
@@ -18,7 +18,7 @@ module.exports = function (app) {
       var info_summoner_json = JSON.parse(body);
       console.log('summoner', body);
       if (info_summoner_json.status?.status_code) {
-        return res.render('index', {
+        return res.render('index_tft', {
           title: req.params.username,
           error_message: info_summoner_json.status?.message
         });
@@ -45,7 +45,7 @@ module.exports = function (app) {
             });
             Promise.all(promiseList).then(matches => {
               console.log('matches', matches);
-              res.render('index', {
+              res.render('index_tft', {
                 title: req.params.username,
                 error_message: false,
                 c_matchList: matches, // 게임 데이터, array
@@ -54,7 +54,7 @@ module.exports = function (app) {
               });
             })
           } else {
-            res.render('index', {
+            res.render('index_tft', {
               title: req.params.username,
               error_message: false,
               c_matchList: [],
@@ -132,7 +132,7 @@ module.exports = function (app) {
               champ_pic[j] = temp_pic;
             }
           }
-          res.render('index', { title: req.params.username ,
+          res.render('index_lol', { title: req.params.username ,
           c_id: champ_id,
           c_name: champ_name,
           c_point: champ_point,
--- a/back/views/index.ejs → back/views/index_lol.ejs
View file @8db18b6
+++ b/back/views/index.ejs → back/views/index_lol.ejs
View file @8db18b6
--- a/back/views/index_tft.ejs 0 → 100644
View file @8db18b6
+++ b/back/views/index_tft.ejs 0 → 100644
View file @8db18b6
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title><%= title %></title>
+    <link rel="icon" href = "FindMelogo.png">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+    <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>
+      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();
+        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/>
+        </div>
+        <div class="center2">
+        <input type="text" class="input_text" placeholder="소환사 이름">
+        <span class="input-group-btn">
+          <button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">click!</button>
+        </span>
+        </div>
+        </div>
+
+      <br></br>
+      <% if (error_message) { %>
+        <h2><%= error_message %></h2>
+      <% } else { %>
+        <font size=10em>
+          <strong>
+            <%= c_summoner.name + "\n"%>    <!-- 소환사 object -->
+          </strong>
+        </font>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Tier</th>
+              <th>Win</th>
+              <th>Lose</th>
+              <th>승률</th>
+              <th>캐리력</th>
+            </tr>
+          </thead>
+          <% if (c_leagueList.length>0) { %>
+          <tbody>
+            <% 
+              c_leagueList.forEach(function(league){ %>
+              <tr>
+                <td><%= league.tier + " " + league.rank + " / " + league.leaguePoints + "점"%></td>
+                <td><%= league.wins %></td>
+                <td><%= league.losses %></td>
+                <td><%= ((league.wins/(league.wins+league.losses))*100).toFixed(2) + "%"  %></td>
+                <td><%= (league.wins/league.losses*2).toFixed(2) %></td>
+              </tr>
+            <% }); %>
+          </tbody>
+          <% } else { %>
+            <tbody>
+              <tr >
+                <td colspan="5" style="text-align: center;">no league</td>
+              </tr>
+            </tbody>
+          <% } %>
+      </table>
+      <% } %>
+    </div>
+</body>
+</html>