LI WENHAO / kartrider

Go to a project
Toggle navigation Toggle navigation pinning
김명주
707f6a9d 1 parent 9a0f8dfb

Modify div location, size 

and Change variable name
Inline Side-by-side
Showing 7 changed files with 301 additions and 316 deletions
1 - 1 +body{
2 -html, body{ 2 + background-image:url("metadata/image/home.png");
3 - width: 100%; 3 + background-repeat: repeat-x;
4 - height: 100%;
5 - margin:0;
6 } 4 }
5 +#ent_frame{
6 + width: 1600px;
7 + height: 900px;
8 + margin: auto;
9 +}
10 +
7 .line 11 .line
8 { 12 {
9 height: 40px; 13 height: 40px;
...@@ -45,7 +49,6 @@ html, body{ ...@@ -45,7 +49,6 @@ html, body{
45 width: 100%; 49 width: 100%;
46 height: 45%; 50 height: 45%;
47 top:5%; 51 top:5%;
48 - background-color: skyblue;
49 } 52 }
50 53
51 #btn1 54 #btn1
......
...@@ -3,82 +3,94 @@ ...@@ -3,82 +3,94 @@
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>Home Page</title> 5 <title>Home Page</title>
6 - <link rel="stylesheet" type="text/css" href="main_home.css"/> 6 + <link rel="stylesheet" type="text/css" href="main_home.css" />
7 </head> 7 </head>
8 +
8 <body> 9 <body>
9 <img id="logo" src="metadata/image/logo.png"> 10 <img id="logo" src="metadata/image/logo.png">
10 - <A id="link" href= "https://kart.nexon.com/Main/Index.aspx" target="_blank">공식 홈페이지 바로가기</A> 11 + <A id="link" href="https://kart.nexon.com/Main/Index.aspx" target="_blank">공식 홈페이지 바로가기</A>
12 + <div id="ent_frame">
11 <div id="select_div"> 13 <div id="select_div">
12 - <button id="btn1" onClick="location.href='test'"> <img src="metadata/image/btn1.png"><br><text id="test">성향 테스트</text></button> 14 + <button id="btn1" onClick="location.href='test'"> <img src="metadata/image/btn1.png">
13 - <button id="btn2" onClick="location.href='search'"> <img src="metadata/image/btn2.png"><br><text id="search">전적 검색</text></button> 15 + <br><text id="test">성향 테스트</text></button>
16 + <button id="btn2" onClick="location.href='search'"> <img src="metadata/image/btn2.png">
17 + <br><text id="search">전적 검색</text></button>
14 </div> 18 </div>
15 <div id="main_div"> 19 <div id="main_div">
16 <div id="notice_div"> 20 <div id="notice_div">
17 - <img src="metadata/image/notice.PNG"> 21 + <img src="metadata/image/notice.png">
18 <table id="table"> 22 <table id="table">
19 <tr> 23 <tr>
20 <td class="line"> 24 <td class="line">
21 - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135941" id="notice"> 25 + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135941"
22 - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" 26 + id="notice">
23 - alt="공지"> 유령 배틀팀 등장 이벤트 당첨 라이더 안내</a> 27 + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
28 + height="17" alt="공지"> 유령 배틀팀 등장 이벤트 당첨 라이더 안내</a>
24 </td> 29 </td>
25 </tr> 30 </tr>
26 <tr> 31 <tr>
27 <td class="line"> 32 <td class="line">
28 - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135932" id="notice"> 33 + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135932"
29 - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" 34 + id="notice">
30 - alt="공지"> 11/18(목) 같이하기 오류 수정을 위한 임시점검 안내</a> 35 + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
36 + height="17" alt="공지"> 11/18(목) 같이하기 오류 수정을 위한 임시점검 안내</a>
31 </td> 37 </td>
32 </tr> 38 </tr>
33 <tr> 39 <tr>
34 <td class="line"> 40 <td class="line">
35 - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135926" id="notice"> 41 + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135926"
36 - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" 42 + id="notice">
37 - alt="공지"> 2021 카트라이더 리그 수퍼컵 승부예측 이벤트 보상 지급 안내</a> 43 + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
44 + height="17" alt="공지"> 2021 카트라이더 리그 수퍼컵 승부예측 이벤트 보상 지급 안내</a>
38 </td> 45 </td>
39 </tr> 46 </tr>
40 <tr> 47 <tr>
41 <td class="line"> 48 <td class="line">
42 - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135916" id="notice"> 49 + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135916"
43 - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" 50 + id="notice">
44 - alt="공지"> (수정) 11/18(목) 넥슨 정기점검 안내</a> 51 + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
52 + height="17" alt="공지"> (수정) 11/18(목) 넥슨 정기점검 안내</a>
45 </td> 53 </td>
46 </tr> 54 </tr>
47 <tr> 55 <tr>
48 <td class="line"> 56 <td class="line">
49 - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135914" id="notice"> 57 + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135914"
50 - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" 58 + id="notice">
51 - alt="공지"> 11/18(목) 보안센터 점검 및 U-OTP 서비스 종료 안내</a> 59 + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
60 + height="17" alt="공지"> 11/18(목) 보안센터 점검 및 U-OTP 서비스 종료 안내</a>
52 </td> 61 </td>
53 </tr> 62 </tr>
54 <tr> 63 <tr>
55 <td class="line"> 64 <td class="line">
56 - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135908" id="notice"> 65 + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135908"
57 - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" 66 + id="notice">
58 - alt="공지"> [수정] 11/15(월) 넥슨 전화 서비스 오류 안내</a> 67 + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
68 + height="17" alt="공지"> [수정] 11/15(월) 넥슨 전화 서비스 오류 안내</a>
59 </td> 69 </td>
60 </tr> 70 </tr>
61 <tr> 71 <tr>
62 <td class="line"> 72 <td class="line">
63 - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135906" id="notice"> 73 + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135906"
64 - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" 74 + id="notice">
65 - alt="공지"> 2021 신한은행 Hey Young 카트라이더 리그 수퍼컵 개막 안내</a> 75 + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
76 + height="17" alt="공지"> 2021 신한은행 Hey Young 카트라이더 리그 수퍼컵 개막 안내</a>
66 </td> 77 </td>
67 </tr> 78 </tr>
68 <tr> 79 <tr>
69 <td class="line"> 80 <td class="line">
70 - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135905" id="notice"> 81 + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135905"
71 - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" 82 + id="notice">
72 - alt="공지"> 운영정책 위반 라이더 제재 안내</a> 83 + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
84 + height="17" alt="공지"> 운영정책 위반 라이더 제재 안내</a>
73 </td> 85 </td>
74 </tr> 86 </tr>
75 </table> 87 </table>
76 </div> 88 </div>
77 <div id="ranking_div"> 89 <div id="ranking_div">
78 - <img src="metadata/image/ranking.PNG"> 90 + <img src="metadata/image/ranking.png">
79 <table id="table"> 91 <table id="table">
80 <tr> 92 <tr>
81 - <img src="metadata/image/menu.PNG"> 93 + <img src="metadata/image/menu.png">
82 </tr> 94 </tr>
83 <tr> 95 <tr>
84 <td id="ranktd"><img src="metadata/image/rank1.png"></td> 96 <td id="ranktd"><img src="metadata/image/rank1.png"></td>
...@@ -163,8 +175,7 @@ ...@@ -163,8 +175,7 @@
163 </table> 175 </table>
164 </div> 176 </div>
165 </div> 177 </div>
166 - 178 + </div>
167 </body> 179 </body>
168 180
169 -
170 </html> 181 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,34 +2,38 @@ body ...@@ -2,34 +2,38 @@ body
2 { 2 {
3 background:rgb(26, 154, 248); 3 background:rgb(26, 154, 248);
4 } 4 }
5 +#main_frame
6 +{
7 + width:1600px;
8 + height:900px;
9 + margin: auto;
10 +}
5 .search 11 .search
6 { 12 {
7 - position:absolute; 13 + position:relative;
8 width: 700px; 14 width: 700px;
9 height:100px; 15 height:100px;
10 - top:33%; 16 + top:-15%;
11 - left:50%; 17 + margin:auto;
12 background:white; 18 background:white;
13 border-radius: 50px; 19 border-radius: 50px;
14 - margin:-50px 0px 0px -350px; 20 + border:4px solid black;
15 - border:3px solid black;
16 } 21 }
17 #left 22 #left
18 { 23 {
19 - position:absolute; 24 + position:relative;
20 - width:500px; 25 + width:400px;
21 - height:500px; 26 + height:400px;
22 - top:40%; 27 + top:45%;
23 - left:5%;
24 28
25 } 29 }
26 #right 30 #right
27 { 31 {
28 - position:absolute; 32 + position:relative;
29 - width:550px; 33 + width:450px;
30 - height:500px; 34 + height:400px;
31 - top:40%; 35 + top:45%;
32 - left:65%; 36 + left:45%;
33 } 37 }
34 .box { 38 .box {
35 animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 39 animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
......
1 <html> 1 <html>
2 - <head> 2 +
3 +<head>
3 <title>전적 검색</title> 4 <title>전적 검색</title>
4 <meta charset="utf-8"> 5 <meta charset="utf-8">
5 - <!-- 제이쿼리 불러오기 -->
6 - <!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
7 <link rel="stylesheet" type="text/css" href="search_home.css" /> 6 <link rel="stylesheet" type="text/css" href="search_home.css" />
8 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> 7 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
9 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 8 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
9 +</head>
10 10
11 - </head> 11 +<body>
12 - <body> 12 + <div id="main_frame">
13 <img class="box" id="left" src="metadata/image/wodi.png"> 13 <img class="box" id="left" src="metadata/image/wodi.png">
14 <img class="box2" id="right" src="metadata/image/sdao.png"> 14 <img class="box2" id="right" src="metadata/image/sdao.png">
15 <div class="search" id="a"> 15 <div class="search" id="a">
16 <input type="text" id="name" placeholder="카트라이더 닉네임 입력" /> 16 <input type="text" id="name" placeholder="카트라이더 닉네임 입력" />
17 <button id="OK"></button> 17 <button id="OK"></button>
18 </div> 18 </div>
19 - <script> 19 + </div>
20 - $("#OK").click(function(){ // OK 버튼 클릭하면 20 +</body>
21 +
22 +<script>
23 + $("#OK").click(function () {
21 $.ajax({ 24 $.ajax({
22 - url: '/search', // postTest 주소로 25 + url: '/search',
23 - async: true, // 동기화 - 서버에서 반응이 올때까지 기다림 26 + async: true,
24 - type: 'POST', // POST 방식으로 27 + type: 'POST',
25 data: { 28 data: {
26 - test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄 29 + test: $("#name").val()
27 }, 30 },
28 dataType: 'json', 31 dataType: 'json',
29 - success: function(data){ 32 + success: function (data) {
30 - if(data=="200"){ 33 + if (data == "200") {
31 - const div_target=document.querySelector('#a'); 34 + const div_target = document.querySelector('#a');
32 - var obj=document.createElement('img'); 35 + var obj = document.createElement('img');
33 - obj.id="loading"; 36 + obj.id = "loading";
34 - obj.src='metadata/image/loading.gif'; 37 + obj.src = 'metadata/image/loading.gif';
35 div_target.append(obj); 38 div_target.append(obj);
36 - window.location.href="/search/result"; 39 + window.location.href = "/search/result";
37 } 40 }
38 - else{ 41 + else {
39 swal("ERROR", "존재하지 않는 닉네임입니다."); 42 swal("ERROR", "존재하지 않는 닉네임입니다.");
40 } 43 }
41 } 44 }
42 }); 45 });
43 }); 46 });
44 - </script> 47 +</script>
45 - </body> 48 +
46 </html> 49 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 body{ 1 body{
2 background:rgb(240, 239, 239) 2 background:rgb(240, 239, 239)
3 } 3 }
4 -#div 4 +#main_frame
5 +{
6 + width: 1600px;
7 + height: 1000px;
8 + margin:auto;
9 +}
10 +#most
5 { 11 {
6 position: relative; 12 position: relative;
7 - width: 1200px; 13 + width: 400px;
8 - height: 200px; 14 + height: 800px;
9 - left:50%; 15 + left:6%;
10 - margin:0px 0px 0px -600px;
11 float:left; 16 float:left;
12 } 17 }
13 #emblem 18 #emblem
...@@ -27,51 +32,34 @@ body{ ...@@ -27,51 +32,34 @@ body{
27 top:4%; 32 top:4%;
28 left:3%; 33 left:3%;
29 } 34 }
30 -#s_home 35 +#nick
31 -{
32 - position:relative;
33 - width:100%;
34 -}
35 -#title
36 { 36 {
37 font-family: 'Nanum Gothic'; 37 font-family: 'Nanum Gothic';
38 - font-size:large; 38 + font-size:35px;
39 font-weight:bold; 39 font-weight:bold;
40 } 40 }
41 -#resu 41 +
42 -{ 42 +#record
43 - position: relative;
44 - width: 1700px;
45 - height: 1100px;
46 - margin: 0 auto;
47 - top:250px;
48 -}
49 -#most
50 { 43 {
51 position: relative; 44 position: relative;
52 - width: 400px; 45 + width: 55%;
53 - height: 800px; 46 + height: 900px;
54 - left:6%; 47 + left:10%;
55 float:left; 48 float:left;
56 } 49 }
57 -#imgId 50 +
51 +#s_home
58 { 52 {
59 - vertical-align: middle; 53 + position:relative;
54 + width:100%;
60 } 55 }
61 -#nick 56 +#title
62 { 57 {
63 font-family: 'Nanum Gothic'; 58 font-family: 'Nanum Gothic';
64 - font-size:35px; 59 + font-size:large;
65 font-weight:bold; 60 font-weight:bold;
66 } 61 }
67 -#div1 62 +
68 -{
69 - position: relative;
70 - width: 50%;
71 - height: 900px;
72 - left:10%;
73 - float:left;
74 -}
75 63
76 #IMG 64 #IMG
77 { 65 {
...@@ -93,18 +81,7 @@ body{ ...@@ -93,18 +81,7 @@ body{
93 width:80px; 81 width:80px;
94 height:60px; 82 height:60px;
95 } 83 }
96 -#IMG4 84 +
97 -{
98 - width:80px;
99 - height:60px;
100 -}
101 -#img3
102 -{
103 - position: relative;
104 - width: 100%;
105 - height:100%;
106 - float:left;
107 -}
108 85
109 #table 86 #table
110 { 87 {
......
...@@ -3,34 +3,35 @@ ...@@ -3,34 +3,35 @@
3 3
4 <head> 4 <head>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 + <title>전적 결과</title>
6 <link rel="stylesheet" type="text/css" href="search_result.css" /> 7 <link rel="stylesheet" type="text/css" href="search_result.css" />
7 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9 </head> 10 </head>
10 <script language="JavaScript"> 11 <script language="JavaScript">
11 - function embl(){ 12 + function embl() {
12 - var rand=Math.floor(Math.random()*8+1); 13 + var rand = Math.floor(Math.random() * 8 + 1);
13 - return "background-image:url('metadata/emblem/emblem"+rand+".png')"; 14 + return "background-image:url('metadata/emblem/emblem" + rand + ".png')";
14 } 15 }
15 - function get_jsondata(id, kind){ 16 + function get_jsondata(id, kind) {
16 var str; 17 var str;
17 - var local_url='metadata/'+kind+'.json'; 18 + var local_url = 'metadata/' + kind + '.json';
18 - function save(data){ 19 + function save(data) {
19 - str=data; 20 + str = data;
20 } 21 }
21 $.ajaxSetup({ 22 $.ajaxSetup({
22 async: false 23 async: false
23 }); 24 });
24 - $.getJSON(local_url,function(json){ 25 + $.getJSON(local_url, function (json) {
25 var kind_json; 26 var kind_json;
26 - if(kind=="kart"){ 27 + if (kind == "kart") {
27 - kind_json=json.kart; 28 + kind_json = json.kart;
28 } 29 }
29 - else if(kind=="track"){ 30 + else if (kind == "track") {
30 - kind_json=json.track; 31 + kind_json = json.track;
31 } 32 }
32 - else if(kind=="character"){ 33 + else if (kind == "character") {
33 - kind_json=json.character; 34 + kind_json = json.character;
34 } 35 }
35 for (var i = 0; i < kind_json.length; i++) { 36 for (var i = 0; i < kind_json.length; i++) {
36 if (kind_json[i]['id'] == id) { 37 if (kind_json[i]['id'] == id) {
...@@ -42,25 +43,29 @@ ...@@ -42,25 +43,29 @@
42 return str; 43 return str;
43 } 44 }
44 </script> 45 </script>
46 +
45 <body> 47 <body>
48 + <div id="main_frame">
46 <div id="most"> 49 <div id="most">
47 <div id="emblem"> 50 <div id="emblem">
48 <script>document.getElementById("emblem").style = embl()</script> 51 <script>document.getElementById("emblem").style = embl()</script>
49 </div> 52 </div>
50 <div id="name"> 53 <div id="name">
51 - <text id="nick"> <%- name %> </text> 54 + <text id="nick">
55 + <%- name %>
56 + </text>
52 </div> 57 </div>
53 <text id="title"><br>SAVE</text> 58 <text id="title"><br>SAVE</text>
54 - <canvas id="myChart2"width="350" height="200"></canvas> 59 + <canvas id="myChart2" width="350" height="200"></canvas>
55 <text id="title"><br>RANKING GRAPE</text> 60 <text id="title"><br>RANKING GRAPE</text>
56 - <canvas id="myChart"width="350" height="200"></canvas> 61 + <canvas id="myChart" width="350" height="200"></canvas>
57 <text id="title"><br>MOST KART</text> 62 <text id="title"><br>MOST KART</text>
58 <table id="table_most" border="1" style="text-align: center;"> 63 <table id="table_most" border="1" style="text-align: center;">
59 <colgroup> 64 <colgroup>
60 - <col width="10%"/> 65 + <col width="10%" />
61 - <col width="30%"/> 66 + <col width="30%" />
62 - <col width="10%"/> 67 + <col width="10%" />
63 - <col width="10%"/> 68 + <col width="10%" />
64 </colgroup> 69 </colgroup>
65 <tr> 70 <tr>
66 <td>카트</td> 71 <td>카트</td>
...@@ -71,276 +76,258 @@ ...@@ -71,276 +76,258 @@
71 </table> 76 </table>
72 </div> 77 </div>
73 78
74 - <div id="div1"> 79 + <div id="record">
75 <img id="s_home" src="metadata/image/search_image.png"> 80 <img id="s_home" src="metadata/image/search_image.png">
76 <table id="table"> 81 <table id="table">
77 <colgroup> 82 <colgroup>
78 - <col width="100px"/> 83 + <col width="100px" />
79 - <col width="100px"/> 84 + <col width="100px" />
80 - <col width="150px"/> 85 + <col width="150px" />
81 - <col width="200px"/> 86 + <col width="200px" />
82 - <col width="100px"/> 87 + <col width="100px" />
83 - <col width="100px"/> 88 + <col width="100px" />
84 </colgroup> 89 </colgroup>
85 </table> 90 </table>
86 </div> 91 </div>
92 + </div>
87 </body> 93 </body>
88 94
89 <script> 95 <script>
96 + //////////////전적 검색 후 결과 출력 스크립트/////////////////////////////////////////////////////
90 var body = '<%- body -%>'; 97 var body = '<%- body -%>';
91 - var most_kart=[]; 98 + var most_kart = [];
92 - var rank_grape=[]; 99 + var rank_grape = [];
93 - var retire=0; 100 + var retire = 0;
94 var match = JSON.parse(body); 101 var match = JSON.parse(body);
95 var Len = match.matches[0].matches.length; 102 var Len = match.matches[0].matches.length;
96 - const div_target=document.querySelector('#table'); 103 + const div_target = document.querySelector('#table');
97 - for(var i=1; i<=Len; i++){ 104 + for (var i = 1; i <= Len; i++) {
98 - var obj=document.createElement('tr'); 105 + var obj = document.createElement('tr');
99 - obj.id="table_row"; 106 + obj.id = "table_row";
100 - var win = match.matches[0].matches[i-1].player.matchWin; 107 + var win = match.matches[0].matches[i - 1].player.matchWin;
101 - var tId = match.matches[0].matches[i-1].trackId; 108 + var tId = match.matches[0].matches[i - 1].trackId;
102 - var character=match.matches[0].matches[i-1].character; 109 + var character = match.matches[0].matches[i - 1].character;
103 - var kartId = match.matches[0].matches[i-1].player.kart; 110 + var kartId = match.matches[0].matches[i - 1].player.kart;
104 most_kart.push(kartId); 111 most_kart.push(kartId);
105 - var mrank = match.matches[0].matches[i-1].player.matchRank; 112 + var mrank = match.matches[0].matches[i - 1].player.matchRank;
106 - var players = match.matches[0].matches[i-1].playerCount; 113 + var players = match.matches[0].matches[i - 1].playerCount;
107 - var stime = new Date(match.matches[0].matches[i-1].startTime.split('T')[0] + " " + match.matches[0].matches[i-1].startTime.split('T')[1]); 114 + var stime = new Date(match.matches[0].matches[i - 1].startTime.split('T')[0] + " " + match.matches[0].matches[i - 1].startTime.split('T')[1]);
108 - var etime = new Date(match.matches[0].matches[i-1].endTime.split('T')[0] + " " + match.matches[0].matches[i-1].endTime.split('T')[1]); 115 + var etime = new Date(match.matches[0].matches[i - 1].endTime.split('T')[0] + " " + match.matches[0].matches[i - 1].endTime.split('T')[1]);
109 var diff = etime - stime 116 var diff = etime - stime
110 var minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); 117 var minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
111 - if(minute<10) 118 + if (minute < 10)
112 - minute='0'+minute; 119 + minute = '0' + minute;
113 var second = Math.floor((diff % (1000 * 60)) / 1000); 120 var second = Math.floor((diff % (1000 * 60)) / 1000);
114 - if(second<10) 121 + if (second < 10)
115 - second='0'+second; 122 + second = '0' + second;
116 var ranking = mrank + "/" + players 123 var ranking = mrank + "/" + players
117 - var diff_time=minute + " : " + second; 124 + var diff_time = minute + " : " + second;
118 - var now_time=new Date(); 125 + var now_time = new Date();
119 - var diff_day=Math.ceil((now_time-etime) / (1000*60*60*24))-1+"일 전"; 126 + var diff_day = Math.ceil((now_time - etime) / (1000 * 60 * 60 * 24)) - 1 + "일 전";
120 127
121 - if(win=="0"){ 128 + if (win == "0") {
122 - win="패"; 129 + win = "패";
123 - obj.style="background: white"; 130 + obj.style = "background: white";
124 } 131 }
125 - else if (win =="1"){ 132 + else if (win == "1") {
126 - win="승"; 133 + win = "승";
127 134
128 - obj.style="background: rgb(163,207,236)"; 135 + obj.style = "background: rgb(163,207,236)";
129 } 136 }
130 - else{ 137 + else {
131 - win="탈주" 138 + win = "탈주"
132 } 139 }
133 140
134 - if (mrank == "99" || win=="탈주") { 141 + if (mrank == "99" || win == "탈주") {
135 ranking = "retire"; 142 ranking = "retire";
136 - retire+=1; 143 + retire += 1;
137 diff_time = "retire"; 144 diff_time = "retire";
138 - obj.style="background: rgb(226,182,179)"; 145 + obj.style = "background: rgb(226,182,179)";
139 rank_grape.push(8); 146 rank_grape.push(8);
140 } 147 }
141 - else{ 148 + else {
142 rank_grape.push(parseInt(mrank)); 149 rank_grape.push(parseInt(mrank));
143 } 150 }
144 151
145 - if(diff_day=="0일 전"){ 152 + if (diff_day == "0일 전") {
146 - diff_day=Math.ceil((now_time-etime)/1000/60/60)-1; 153 + diff_day = Math.ceil((now_time - etime) / 1000 / 60 / 60) - 1;
147 - diff_day+="시간 전" 154 + diff_day += "시간 전"
148 } 155 }
149 156
150 div_target.append(obj); 157 div_target.append(obj);
151 - var arr=["개인전","#"+ranking,kartId,tId,character,diff_time,ranking]; 158 + var arr = ["개인전", "#" + ranking, kartId, tId, character, diff_time, ranking];
152 - for(var j=1; j<=6; j++){ 159 + for (var j = 1; j <= 6; j++) {
153 - var sobj=document.createElement('td'); 160 + var sobj = document.createElement('td');
154 - if(j==1){ 161 + if (j == 1) {
155 - var tet1=document.createElement('text'); 162 + var tet1 = document.createElement('text');
156 - var tet2=document.createElement('text'); 163 + var tet2 = document.createElement('text');
157 - var br=document.createElement('br'); 164 + var br = document.createElement('br');
158 - tet1.innerText=arr[j-1]; 165 + tet1.innerText = arr[j - 1];
159 - tet2.innerText=diff_day; 166 + tet2.innerText = diff_day;
160 sobj.append(tet1); 167 sobj.append(tet1);
161 sobj.append(br); 168 sobj.append(br);
162 sobj.append(tet2); 169 sobj.append(tet2);
163 } 170 }
164 - else if(j==2){ 171 + else if (j == 2) {
165 - var tet1=document.createElement('text'); 172 + var tet1 = document.createElement('text');
166 - tet1.innerText=arr[j-1]; 173 + tet1.innerText = arr[j - 1];
167 - tet1.id="text_ranking"; 174 + tet1.id = "text_ranking";
168 sobj.append(tet1); 175 sobj.append(tet1);
169 } 176 }
170 - else if(j==3){ 177 + else if (j == 3) {
171 - var img=document.createElement('img'); 178 + var img = document.createElement('img');
172 - var tet1=document.createElement('text'); 179 + var tet1 = document.createElement('text');
173 - var str=get_jsondata(arr[j-1],"kart"); 180 + var str = get_jsondata(arr[j - 1], "kart");
174 - var br=document.createElement('br'); 181 + var br = document.createElement('br');
175 - img.id="IMG"; 182 + img.id = "IMG";
176 - if(str==null){ 183 + if (str == null) {
177 - tet1.innerText="조회 불가능" 184 + tet1.innerText = "조회 불가능"
178 - img.src="metadata/image/empty.png"; 185 + img.src = "metadata/image/empty.png";
179 } 186 }
180 - else{ 187 + else {
181 - tet1.innerText=str; 188 + tet1.innerText = str;
182 - img.src="metadata/kart/"+arr[j-1]+".png"; 189 + img.src = "metadata/kart/" + arr[j - 1] + ".png";
183 } 190 }
184 sobj.append(img); 191 sobj.append(img);
185 sobj.append(br); 192 sobj.append(br);
186 sobj.append(tet1); 193 sobj.append(tet1);
187 } 194 }
188 - else if(j==4){ 195 + else if (j == 4) {
189 - var img=document.createElement('img'); 196 + var img = document.createElement('img');
190 - var tet1=document.createElement('text'); 197 + var tet1 = document.createElement('text');
191 - var str=get_jsondata(arr[j-1],"track"); 198 + var str = get_jsondata(arr[j - 1], "track");
192 - tet1.id="IMG2_TEXT"; 199 + tet1.id = "IMG2_TEXT";
193 - var br=document.createElement('br'); 200 + var br = document.createElement('br');
194 - img.id="IMG2"; 201 + img.id = "IMG2";
195 - if(str==null || str[1]=='r'){ 202 + if (str == null || str[1] == 'r') {
196 - tet1.innerText="조회 불가능" 203 + tet1.innerText = "조회 불가능"
197 - img.src="metadata/image/empty.png"; 204 + img.src = "metadata/image/empty.png";
198 - } 205 + }
199 - else{ 206 + else {
200 - tet1.innerText=str; 207 + tet1.innerText = str;
201 - img.src="metadata/track/"+arr[j-1]+".png"; 208 + img.src = "metadata/track/" + arr[j - 1] + ".png";
202 } 209 }
203 sobj.append(img); 210 sobj.append(img);
204 sobj.append(br); 211 sobj.append(br);
205 sobj.append(tet1); 212 sobj.append(tet1);
206 } 213 }
207 - else if(j==5){ 214 + else if (j == 5) {
208 - var img=document.createElement('img'); 215 + var img = document.createElement('img');
209 - var str=get_jsondata(arr[j-1],"character"); 216 + var str = get_jsondata(arr[j - 1], "character");
210 - var tet1=document.createElement('text'); 217 + var tet1 = document.createElement('text');
211 - var br=document.createElement('br'); 218 + var br = document.createElement('br');
212 - img.id="IMG4"; 219 + img.id = "IMG3";
213 - img.src="metadata/character/"+arr[j-1]+".png"; 220 + img.src = "metadata/character/" + arr[j - 1] + ".png";
214 - tet1.innerText=str; 221 + tet1.innerText = str;
215 sobj.append(img); 222 sobj.append(img);
216 sobj.append(br); 223 sobj.append(br);
217 sobj.append(tet1); 224 sobj.append(tet1);
218 } 225 }
219 - else{ 226 + else {
220 - sobj.innerText=arr[j-1]; 227 + sobj.innerText = arr[j - 1];
221 } 228 }
222 obj.append(sobj); 229 obj.append(sobj);
223 } 230 }
224 } 231 }
225 - /////////////most카트라이더 부분///////////////////////// 232 +
226 - var count=[]; 233 + /////////////가장 많이 사용한 카트, 그래프 등의 표시 부분/////////////////////////
227 - for(var i=0; i<Len; i++){ 234 + var count = [];
228 - var item=most_kart[i]; 235 + for (var i = 0; i < Len; i++) {
229 - count[i]=0; 236 + var item = most_kart[i];
230 - for(var j=0; j<Len; j++){ 237 + count[i] = 0;
231 - if(item==most_kart[j]){ 238 + for (var j = 0; j < Len; j++) {
232 - count[i]+=1; 239 + if (item == most_kart[j]) {
240 + count[i] += 1;
233 } 241 }
234 } 242 }
235 } 243 }
236 - var max=0; 244 + var max = 0;
237 - var index=0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index 245 + var index = 0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index
238 - for(var i=0; i<Len; i++){ 246 + for (var i = 0; i < Len; i++) {
239 - if(max<count[i]){ 247 + if (max < count[i]) {
240 - max=count[i]; 248 + max = count[i];
241 - index=i; 249 + index = i;
242 } 250 }
243 } 251 }
244 - const most_div=document.querySelector('#table_most'); 252 + const most_div = document.querySelector('#table_most');
245 - var obj=document.createElement('tr'); 253 + var obj = document.createElement('tr');
246 most_div.append(obj); 254 most_div.append(obj);
247 /*save는 retire횟수 따져주는 것*/ 255 /*save는 retire횟수 따져주는 것*/
248 - var temp_arr=[most_kart[index],get_jsondata(most_kart[index],'kart'),(Len-retire)*10+"%",max]; 256 + var temp_arr = [most_kart[index], get_jsondata(most_kart[index], 'kart'), (Len - retire) * 10 + "%", max];
249 - for(var i=0; i<4; i++){ 257 + for (var i = 0; i < 4; i++) {
250 - var sobj=document.createElement('td'); 258 + var sobj = document.createElement('td');
251 - if(i==0){ 259 + if (i == 0) {
252 - var img=document.createElement('img'); 260 + var img = document.createElement('img');
253 - img.id="IMG3"; 261 + img.id = "IMG3";
254 - if(temp_arr[1]==null){ 262 + if (temp_arr[1] == null) {
255 - temp_arr[1]="조회 불가능" 263 + temp_arr[1] = "조회 불가능"
256 - img.src="metadata/image/empty.png"; 264 + img.src = "metadata/image/empty.png";
257 - } 265 + }
258 - else{ 266 + else {
259 - img.src="metadata/kart/"+temp_arr[i]+".png"; 267 + img.src = "metadata/kart/" + temp_arr[i] + ".png";
260 } 268 }
261 sobj.append(img); 269 sobj.append(img);
262 } 270 }
263 - else{ 271 + else {
264 - sobj.innerText=temp_arr[i]; 272 + sobj.innerText = temp_arr[i];
265 } 273 }
266 obj.append(sobj); 274 obj.append(sobj);
267 } 275 }
268 - //sebo부분////////////////////////////////////////////////////////// 276 +
269 - rank_grape=rank_grape.reverse(); 277 + rank_grape = rank_grape.reverse();
270 - var options={ 278 + var options = {
271 type: 'line', 279 type: 'line',
272 - data:{ 280 + data: {
273 - labels: ['', '', '', '', '', '','','','',''], 281 + labels: ['', '', '', '', '', '', '', '', '', ''],
274 datasets: [{ 282 datasets: [{
275 label: 'rank', 283 label: 'rank',
276 data: rank_grape, 284 data: rank_grape,
277 - backgroundColor:[ 285 + backgroundColor: [
278 'rgba(0, 0, 0, 0)' 286 'rgba(0, 0, 0, 0)'
279 ], 287 ],
280 - borderColor:[ 288 + borderColor: [
281 'rgba(54, 162, 235, 1)' 289 'rgba(54, 162, 235, 1)'
282 ], 290 ],
283 borderWidth: 2 291 borderWidth: 2
284 }] 292 }]
285 }, 293 },
286 - options:{ 294 + options: {
287 - responsive:false, 295 + responsive: false,
288 - scales:{ 296 + scales: {
289 - xAxes:[{ 297 + xAxes: [{
290 - gridLines:{ 298 + gridLines: {
291 - display:false 299 + display: false
292 } 300 }
293 }], 301 }],
294 yAxes: [{ 302 yAxes: [{
295 - ticks:{ 303 + ticks: {
296 - reverse:true, 304 + reverse: true,
297 - min:1, 305 + min: 1,
298 - max:8, 306 + max: 8,
299 - stepSize:1 307 + stepSize: 1
300 } 308 }
301 }] 309 }]
302 } 310 }
303 } 311 }
304 }; 312 };
305 - var ctx=document.getElementById('myChart').getContext('2d');
306 - new Chart(ctx,options);
307 - ///////////////////////
308 313
309 - var options2={ 314 + var ctx = document.getElementById('myChart').getContext('2d');
315 + new Chart(ctx, options);
316 + var options2 = {
310 type: 'doughnut', 317 type: 'doughnut',
311 - data:{ 318 + data: {
312 - labels:['retire','save'], 319 + labels: ['retire', 'save'],
313 datasets: [{ 320 datasets: [{
314 - data: [retire,Len-retire], 321 + data: [retire, Len - retire],
315 - backgroundColor:[ 322 + backgroundColor: [
316 'rgba(255, 100, 100, 1)', 323 'rgba(255, 100, 100, 1)',
317 'rgba(54, 162, 235, 1)' 324 'rgba(54, 162, 235, 1)'
318 ], 325 ],
319 }] 326 }]
320 }, 327 },
321 - /* options:{
322 - responsive:false,
323 - scales:{
324 - xAxes: [{
325 - gridLines:{
326 - display:false
327 - },
328 - ticks:{
329 - display:false
330 - }
331 - }],
332 - yAxes: [{
333 - gridLines:{
334 - display:false
335 - },
336 - ticks:{
337 - display:false
338 - }
339 - }]
340 - }
341 - }*/
342 }; 328 };
343 - var ctx2=document.getElementById('myChart2').getContext('2d'); 329 + var ctx2 = document.getElementById('myChart2').getContext('2d');
344 - new Chart(ctx2,options2); 330 + new Chart(ctx2, options2);
345 </script> 331 </script>
332 +
346 </html> 333 </html>
...\ No newline at end of file ...\ No newline at end of file
......