김명주

Modify div location, size

and Change variable name
html, body{
width: 100%;
height: 100%;
margin:0;
body{
background-image:url("metadata/image/home.png");
background-repeat: repeat-x;
}
#ent_frame{
width: 1600px;
height: 900px;
margin: auto;
}
.line
{
height: 40px;
......@@ -45,7 +49,6 @@ html, body{
width: 100%;
height: 45%;
top:5%;
background-color: skyblue;
}
#btn1
......
......@@ -3,168 +3,179 @@
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="main_home.css"/>
<link rel="stylesheet" type="text/css" href="main_home.css" />
</head>
<body>
<img id="logo" src="metadata/image/logo.png">
<A id="link" href= "https://kart.nexon.com/Main/Index.aspx" target="_blank">공식 홈페이지 바로가기</A>
<div id="select_div">
<button id="btn1" onClick="location.href='test'"> <img src="metadata/image/btn1.png"><br><text id="test">성향 테스트</text></button>
<button id="btn2" onClick="location.href='search'"> <img src="metadata/image/btn2.png"><br><text id="search">전적 검색</text></button>
</div>
<div id="main_div">
<div id="notice_div">
<img src="metadata/image/notice.PNG">
<table id="table">
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135941" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 유령 배틀팀 등장 이벤트 당첨 라이더 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135932" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 11/18(목) 같이하기 오류 수정을 위한 임시점검 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135926" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 2021 카트라이더 리그 수퍼컵 승부예측 이벤트 보상 지급 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135916" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> (수정) 11/18(목) 넥슨 정기점검 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135914" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 11/18(목) 보안센터 점검 및 U-OTP 서비스 종료 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135908" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> [수정] 11/15(월) 넥슨 전화 서비스 오류 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135906" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 2021 신한은행 Hey Young 카트라이더 리그 수퍼컵 개막 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135905" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 운영정책 위반 라이더 제재 안내</a>
</td>
</tr>
</table>
<A id="link" href="https://kart.nexon.com/Main/Index.aspx" target="_blank">공식 홈페이지 바로가기</A>
<div id="ent_frame">
<div id="select_div">
<button id="btn1" onClick="location.href='test'"> <img src="metadata/image/btn1.png">
<br><text id="test">성향 테스트</text></button>
<button id="btn2" onClick="location.href='search'"> <img src="metadata/image/btn2.png">
<br><text id="search">전적 검색</text></button>
</div>
<div id="ranking_div">
<img src="metadata/image/ranking.PNG">
<table id="table">
<tr>
<img src="metadata/image/menu.PNG">
</tr>
<tr>
<td id="ranktd"><img src="metadata/image/rank1.png"></td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=멋진샌박주장&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">멋진샌박주장</a></td>
<td>두두카클럽</td>
<td>3331</td>
</tr>
<tr>
<td id="ranktd"><img src="metadata/image/rank2.png"></td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=병수욤&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">병수욤</a></td>
<td>TeamAox</td>
<td>3254</td>
</tr>
<tr>
<td id="ranktd"><img src="metadata/image/rank3.png"></td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=쑹턔&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">쑹턔</a></td>
<td> </td>
<td>3056</td>
</tr>
<tr class="rline">
<td id="ranktd">4</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=현수쿨쿨&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">현수쿨쿨</a></td>
<td>Blossom</td>
<td>3001</td>
</tr>
<tr class="rline">
<td id="ranktd">5</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=지쵸민파&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">지쵸민파</a></td>
<td>FreeSky</td>
<td>2934</td>
</tr>
<tr class="rline">
<td id="ranktd">6</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=AF노준현&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">AF노준현</a></td>
<td>두두카클럽</td>
<td>2918</td>
</tr>
<tr class="rline">
<td id="ranktd">7</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=챵현&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">챵현</a></td>
<td>OneQ</td>
<td>2913</td>
</tr>
<tr class="rline">
<td id="ranktd">8</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=다함께갑시다&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">다함께갑시다</a></td>
<td> </td>
<td>2904</td>
</tr>
<tr class="rline">
<td id="ranktd">9</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=AttackXiaoGu&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">AttackXiaoGu</a></td>
<td>TCCstar</td>
<td>2903</td>
</tr>
<tr class="rline">
<td id="ranktd">10</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=재혁Zzz&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">재혁Zzz</a></td>
<td>두두카클럽</td>
<td>2901</td>
</tr>
</table>
<div id="main_div">
<div id="notice_div">
<img src="metadata/image/notice.png">
<table id="table">
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135941"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 유령 배틀팀 등장 이벤트 당첨 라이더 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135932"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 11/18(목) 같이하기 오류 수정을 위한 임시점검 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135926"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 2021 카트라이더 리그 수퍼컵 승부예측 이벤트 보상 지급 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135916"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> (수정) 11/18(목) 넥슨 정기점검 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135914"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 11/18(목) 보안센터 점검 및 U-OTP 서비스 종료 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135908"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> [수정] 11/15(월) 넥슨 전화 서비스 오류 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135906"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 2021 신한은행 Hey Young 카트라이더 리그 수퍼컵 개막 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135905"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 운영정책 위반 라이더 제재 안내</a>
</td>
</tr>
</table>
</div>
<div id="ranking_div">
<img src="metadata/image/ranking.png">
<table id="table">
<tr>
<img src="metadata/image/menu.png">
</tr>
<tr>
<td id="ranktd"><img src="metadata/image/rank1.png"></td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=멋진샌박주장&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">멋진샌박주장</a></td>
<td>두두카클럽</td>
<td>3331</td>
</tr>
<tr>
<td id="ranktd"><img src="metadata/image/rank2.png"></td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=병수욤&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">병수욤</a></td>
<td>TeamAox</td>
<td>3254</td>
</tr>
<tr>
<td id="ranktd"><img src="metadata/image/rank3.png"></td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=쑹턔&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">쑹턔</a></td>
<td> </td>
<td>3056</td>
</tr>
<tr class="rline">
<td id="ranktd">4</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=현수쿨쿨&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">현수쿨쿨</a></td>
<td>Blossom</td>
<td>3001</td>
</tr>
<tr class="rline">
<td id="ranktd">5</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=지쵸민파&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">지쵸민파</a></td>
<td>FreeSky</td>
<td>2934</td>
</tr>
<tr class="rline">
<td id="ranktd">6</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=AF노준현&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">AF노준현</a></td>
<td>두두카클럽</td>
<td>2918</td>
</tr>
<tr class="rline">
<td id="ranktd">7</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=챵현&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">챵현</a></td>
<td>OneQ</td>
<td>2913</td>
</tr>
<tr class="rline">
<td id="ranktd">8</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=다함께갑시다&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">다함께갑시다</a></td>
<td> </td>
<td>2904</td>
</tr>
<tr class="rline">
<td id="ranktd">9</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=AttackXiaoGu&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">AttackXiaoGu</a></td>
<td>TCCstar</td>
<td>2903</td>
</tr>
<tr class="rline">
<td id="ranktd">10</td>
<td><a href="https://kart.nexon.com/Garage/Main?strRiderID=재혁Zzz&maskGameCode_Group=73985"
onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;"
id="notice">재혁Zzz</a></td>
<td>두두카클럽</td>
<td>2901</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......
......@@ -2,34 +2,38 @@ body
{
background:rgb(26, 154, 248);
}
#main_frame
{
width:1600px;
height:900px;
margin: auto;
}
.search
{
position:absolute;
position:relative;
width: 700px;
height:100px;
top:33%;
left:50%;
top:-15%;
margin:auto;
background:white;
border-radius: 50px;
margin:-50px 0px 0px -350px;
border:3px solid black;
border:4px solid black;
}
#left
{
position:absolute;
width:500px;
height:500px;
top:40%;
left:5%;
position:relative;
width:400px;
height:400px;
top:45%;
}
#right
{
position:absolute;
width:550px;
height:500px;
top:40%;
left:65%;
position:relative;
width:450px;
height:400px;
top:45%;
left:45%;
}
.box {
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
......
<html>
<head>
<title>전적 검색</title>
<meta charset="utf-8">
<!-- 제이쿼리 불러오기 -->
<!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
<link rel="stylesheet" type="text/css" href="search_home.css" />
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<head>
<title>전적 검색</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="search_home.css" />
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="main_frame">
<img class="box" id="left" src="metadata/image/wodi.png">
<img class="box2" id="right" src="metadata/image/sdao.png">
<div class="search" id="a">
<input type="text" id="name" placeholder="카트라이더 닉네임 입력" />
<button id="OK"></button>
</div>
<script>
$("#OK").click(function(){ // OK 버튼 클릭하면
$.ajax({
url: '/search', // postTest 주소로
async: true, // 동기화 - 서버에서 반응이 올때까지 기다림
type: 'POST', // POST 방식으로
data: {
test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄
},
dataType: 'json',
success: function(data){
if(data=="200"){
const div_target=document.querySelector('#a');
var obj=document.createElement('img');
obj.id="loading";
obj.src='metadata/image/loading.gif';
div_target.append(obj);
window.location.href="/search/result";
}
else{
swal("ERROR", "존재하지 않는 닉네임입니다.");
}
}
});
});
</script>
</body>
</div>
</body>
<script>
$("#OK").click(function () {
$.ajax({
url: '/search',
async: true,
type: 'POST',
data: {
test: $("#name").val()
},
dataType: 'json',
success: function (data) {
if (data == "200") {
const div_target = document.querySelector('#a');
var obj = document.createElement('img');
obj.id = "loading";
obj.src = 'metadata/image/loading.gif';
div_target.append(obj);
window.location.href = "/search/result";
}
else {
swal("ERROR", "존재하지 않는 닉네임입니다.");
}
}
});
});
</script>
</html>
\ No newline at end of file
......
body{
background:rgb(240, 239, 239)
}
#div
#main_frame
{
width: 1600px;
height: 1000px;
margin:auto;
}
#most
{
position: relative;
width: 1200px;
height: 200px;
left:50%;
margin:0px 0px 0px -600px;
width: 400px;
height: 800px;
left:6%;
float:left;
}
#emblem
......@@ -27,51 +32,34 @@ body{
top:4%;
left:3%;
}
#s_home
{
position:relative;
width:100%;
}
#title
#nick
{
font-family: 'Nanum Gothic';
font-size:large;
font-size:35px;
font-weight:bold;
}
#resu
{
position: relative;
width: 1700px;
height: 1100px;
margin: 0 auto;
top:250px;
}
#most
#record
{
position: relative;
width: 400px;
height: 800px;
left:6%;
width: 55%;
height: 900px;
left:10%;
float:left;
}
#imgId
#s_home
{
vertical-align: middle;
position:relative;
width:100%;
}
#nick
#title
{
font-family: 'Nanum Gothic';
font-size:35px;
font-size:large;
font-weight:bold;
}
#div1
{
position: relative;
width: 50%;
height: 900px;
left:10%;
float:left;
}
#IMG
{
......@@ -93,18 +81,7 @@ body{
width:80px;
height:60px;
}
#IMG4
{
width:80px;
height:60px;
}
#img3
{
position: relative;
width: 100%;
height:100%;
float:left;
}
#table
{
......
......@@ -3,64 +3,69 @@
<head>
<meta charset="utf-8">
<title>전적 결과</title>
<link rel="stylesheet" type="text/css" href="search_result.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script language="JavaScript">
function embl(){
var rand=Math.floor(Math.random()*8+1);
return "background-image:url('metadata/emblem/emblem"+rand+".png')";
function embl() {
var rand = Math.floor(Math.random() * 8 + 1);
return "background-image:url('metadata/emblem/emblem" + rand + ".png')";
}
function get_jsondata(id, kind) {
var str;
var local_url = 'metadata/' + kind + '.json';
function save(data) {
str = data;
}
function get_jsondata(id, kind){
var str;
var local_url='metadata/'+kind+'.json';
function save(data){
str=data;
$.ajaxSetup({
async: false
});
$.getJSON(local_url, function (json) {
var kind_json;
if (kind == "kart") {
kind_json = json.kart;
}
$.ajaxSetup({
async: false
});
$.getJSON(local_url,function(json){
var kind_json;
if(kind=="kart"){
kind_json=json.kart;
}
else if(kind=="track"){
kind_json=json.track;
}
else if(kind=="character"){
kind_json=json.character;
}
for (var i = 0; i < kind_json.length; i++) {
if (kind_json[i]['id'] == id) {
save(kind_json[i]['name']);
break;
}
else if (kind == "track") {
kind_json = json.track;
}
else if (kind == "character") {
kind_json = json.character;
}
for (var i = 0; i < kind_json.length; i++) {
if (kind_json[i]['id'] == id) {
save(kind_json[i]['name']);
break;
}
});
return str;
}
}
});
return str;
}
</script>
<body>
<div id="main_frame">
<div id="most">
<div id="emblem">
<script>document.getElementById("emblem").style = embl()</script>
</div>
<div id="name">
<text id="nick"> <%- name %> </text>
<text id="nick">
<%- name %>
</text>
</div>
<text id="title"><br>SAVE</text>
<canvas id="myChart2"width="350" height="200"></canvas>
<canvas id="myChart2" width="350" height="200"></canvas>
<text id="title"><br>RANKING GRAPE</text>
<canvas id="myChart"width="350" height="200"></canvas>
<canvas id="myChart" width="350" height="200"></canvas>
<text id="title"><br>MOST KART</text>
<table id="table_most" border="1" style="text-align: center;">
<colgroup>
<col width="10%"/>
<col width="30%"/>
<col width="10%"/>
<col width="10%"/>
<col width="10%" />
<col width="30%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<tr>
<td>카트</td>
......@@ -71,276 +76,258 @@
</table>
</div>
<div id="div1">
<div id="record">
<img id="s_home" src="metadata/image/search_image.png">
<table id="table">
<colgroup>
<col width="100px"/>
<col width="100px"/>
<col width="150px"/>
<col width="200px"/>
<col width="100px"/>
<col width="100px"/>
<col width="100px" />
<col width="100px" />
<col width="150px" />
<col width="200px" />
<col width="100px" />
<col width="100px" />
</colgroup>
</table>
</div>
</div>
</body>
<script>
var body = '<%- body -%>';
var most_kart=[];
var rank_grape=[];
var retire=0;
var match = JSON.parse(body);
var Len = match.matches[0].matches.length;
const div_target=document.querySelector('#table');
for(var i=1; i<=Len; i++){
var obj=document.createElement('tr');
obj.id="table_row";
var win = match.matches[0].matches[i-1].player.matchWin;
var tId = match.matches[0].matches[i-1].trackId;
var character=match.matches[0].matches[i-1].character;
var kartId = match.matches[0].matches[i-1].player.kart;
most_kart.push(kartId);
var mrank = match.matches[0].matches[i-1].player.matchRank;
var players = match.matches[0].matches[i-1].playerCount;
var stime = new Date(match.matches[0].matches[i-1].startTime.split('T')[0] + " " + match.matches[0].matches[i-1].startTime.split('T')[1]);
var etime = new Date(match.matches[0].matches[i-1].endTime.split('T')[0] + " " + match.matches[0].matches[i-1].endTime.split('T')[1]);
var diff = etime - stime
var minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
if(minute<10)
minute='0'+minute;
var second = Math.floor((diff % (1000 * 60)) / 1000);
if(second<10)
second='0'+second;
var ranking = mrank + "/" + players
var diff_time=minute + " : " + second;
var now_time=new Date();
var diff_day=Math.ceil((now_time-etime) / (1000*60*60*24))-1+"일 전";
if(win=="0"){
win="패";
obj.style="background: white";
//////////////전적 검색 후 결과 출력 스크립트/////////////////////////////////////////////////////
var body = '<%- body -%>';
var most_kart = [];
var rank_grape = [];
var retire = 0;
var match = JSON.parse(body);
var Len = match.matches[0].matches.length;
const div_target = document.querySelector('#table');
for (var i = 1; i <= Len; i++) {
var obj = document.createElement('tr');
obj.id = "table_row";
var win = match.matches[0].matches[i - 1].player.matchWin;
var tId = match.matches[0].matches[i - 1].trackId;
var character = match.matches[0].matches[i - 1].character;
var kartId = match.matches[0].matches[i - 1].player.kart;
most_kart.push(kartId);
var mrank = match.matches[0].matches[i - 1].player.matchRank;
var players = match.matches[0].matches[i - 1].playerCount;
var stime = new Date(match.matches[0].matches[i - 1].startTime.split('T')[0] + " " + match.matches[0].matches[i - 1].startTime.split('T')[1]);
var etime = new Date(match.matches[0].matches[i - 1].endTime.split('T')[0] + " " + match.matches[0].matches[i - 1].endTime.split('T')[1]);
var diff = etime - stime
var minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
if (minute < 10)
minute = '0' + minute;
var second = Math.floor((diff % (1000 * 60)) / 1000);
if (second < 10)
second = '0' + second;
var ranking = mrank + "/" + players
var diff_time = minute + " : " + second;
var now_time = new Date();
var diff_day = Math.ceil((now_time - etime) / (1000 * 60 * 60 * 24)) - 1 + "일 전";
if (win == "0") {
win = "패";
obj.style = "background: white";
}
else if (win == "1") {
win = "승";
obj.style = "background: rgb(163,207,236)";
}
else {
win = "탈주"
}
if (mrank == "99" || win == "탈주") {
ranking = "retire";
retire += 1;
diff_time = "retire";
obj.style = "background: rgb(226,182,179)";
rank_grape.push(8);
}
else {
rank_grape.push(parseInt(mrank));
}
if (diff_day == "0일 전") {
diff_day = Math.ceil((now_time - etime) / 1000 / 60 / 60) - 1;
diff_day += "시간 전"
}
div_target.append(obj);
var arr = ["개인전", "#" + ranking, kartId, tId, character, diff_time, ranking];
for (var j = 1; j <= 6; j++) {
var sobj = document.createElement('td');
if (j == 1) {
var tet1 = document.createElement('text');
var tet2 = document.createElement('text');
var br = document.createElement('br');
tet1.innerText = arr[j - 1];
tet2.innerText = diff_day;
sobj.append(tet1);
sobj.append(br);
sobj.append(tet2);
}
else if (win =="1"){
win="승";
obj.style="background: rgb(163,207,236)";
else if (j == 2) {
var tet1 = document.createElement('text');
tet1.innerText = arr[j - 1];
tet1.id = "text_ranking";
sobj.append(tet1);
}
else{
win="탈주"
else if (j == 3) {
var img = document.createElement('img');
var tet1 = document.createElement('text');
var str = get_jsondata(arr[j - 1], "kart");
var br = document.createElement('br');
img.id = "IMG";
if (str == null) {
tet1.innerText = "조회 불가능"
img.src = "metadata/image/empty.png";
}
else {
tet1.innerText = str;
img.src = "metadata/kart/" + arr[j - 1] + ".png";
}
sobj.append(img);
sobj.append(br);
sobj.append(tet1);
}
if (mrank == "99" || win=="탈주") {
ranking = "retire";
retire+=1;
diff_time = "retire";
obj.style="background: rgb(226,182,179)";
rank_grape.push(8);
else if (j == 4) {
var img = document.createElement('img');
var tet1 = document.createElement('text');
var str = get_jsondata(arr[j - 1], "track");
tet1.id = "IMG2_TEXT";
var br = document.createElement('br');
img.id = "IMG2";
if (str == null || str[1] == 'r') {
tet1.innerText = "조회 불가능"
img.src = "metadata/image/empty.png";
}
else {
tet1.innerText = str;
img.src = "metadata/track/" + arr[j - 1] + ".png";
}
sobj.append(img);
sobj.append(br);
sobj.append(tet1);
}
else{
rank_grape.push(parseInt(mrank));
else if (j == 5) {
var img = document.createElement('img');
var str = get_jsondata(arr[j - 1], "character");
var tet1 = document.createElement('text');
var br = document.createElement('br');
img.id = "IMG3";
img.src = "metadata/character/" + arr[j - 1] + ".png";
tet1.innerText = str;
sobj.append(img);
sobj.append(br);
sobj.append(tet1);
}
if(diff_day=="0일 전"){
diff_day=Math.ceil((now_time-etime)/1000/60/60)-1;
diff_day+="시간 전"
else {
sobj.innerText = arr[j - 1];
}
obj.append(sobj);
}
}
div_target.append(obj);
var arr=["개인전","#"+ranking,kartId,tId,character,diff_time,ranking];
for(var j=1; j<=6; j++){
var sobj=document.createElement('td');
if(j==1){
var tet1=document.createElement('text');
var tet2=document.createElement('text');
var br=document.createElement('br');
tet1.innerText=arr[j-1];
tet2.innerText=diff_day;
sobj.append(tet1);
sobj.append(br);
sobj.append(tet2);
}
else if(j==2){
var tet1=document.createElement('text');
tet1.innerText=arr[j-1];
tet1.id="text_ranking";
sobj.append(tet1);
}
else if(j==3){
var img=document.createElement('img');
var tet1=document.createElement('text');
var str=get_jsondata(arr[j-1],"kart");
var br=document.createElement('br');
img.id="IMG";
if(str==null){
tet1.innerText="조회 불가능"
img.src="metadata/image/empty.png";
}
else{
tet1.innerText=str;
img.src="metadata/kart/"+arr[j-1]+".png";
}
sobj.append(img);
sobj.append(br);
sobj.append(tet1);
}
else if(j==4){
var img=document.createElement('img');
var tet1=document.createElement('text');
var str=get_jsondata(arr[j-1],"track");
tet1.id="IMG2_TEXT";
var br=document.createElement('br');
img.id="IMG2";
if(str==null || str[1]=='r'){
tet1.innerText="조회 불가능"
img.src="metadata/image/empty.png";
}
else{
tet1.innerText=str;
img.src="metadata/track/"+arr[j-1]+".png";
}
sobj.append(img);
sobj.append(br);
sobj.append(tet1);
}
else if(j==5){
var img=document.createElement('img');
var str=get_jsondata(arr[j-1],"character");
var tet1=document.createElement('text');
var br=document.createElement('br');
img.id="IMG4";
img.src="metadata/character/"+arr[j-1]+".png";
tet1.innerText=str;
sobj.append(img);
sobj.append(br);
sobj.append(tet1);
}
else{
sobj.innerText=arr[j-1];
}
obj.append(sobj);
/////////////가장 많이 사용한 카트, 그래프 등의 표시 부분/////////////////////////
var count = [];
for (var i = 0; i < Len; i++) {
var item = most_kart[i];
count[i] = 0;
for (var j = 0; j < Len; j++) {
if (item == most_kart[j]) {
count[i] += 1;
}
}
/////////////most카트라이더 부분/////////////////////////
var count=[];
for(var i=0; i<Len; i++){
var item=most_kart[i];
count[i]=0;
for(var j=0; j<Len; j++){
if(item==most_kart[j]){
count[i]+=1;
}
}
}
var max = 0;
var index = 0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index
for (var i = 0; i < Len; i++) {
if (max < count[i]) {
max = count[i];
index = i;
}
var max=0;
var index=0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index
for(var i=0; i<Len; i++){
if(max<count[i]){
max=count[i];
index=i;
}
const most_div = document.querySelector('#table_most');
var obj = document.createElement('tr');
most_div.append(obj);
/*save는 retire횟수 따져주는 것*/
var temp_arr = [most_kart[index], get_jsondata(most_kart[index], 'kart'), (Len - retire) * 10 + "%", max];
for (var i = 0; i < 4; i++) {
var sobj = document.createElement('td');
if (i == 0) {
var img = document.createElement('img');
img.id = "IMG3";
if (temp_arr[1] == null) {
temp_arr[1] = "조회 불가능"
img.src = "metadata/image/empty.png";
}
else {
img.src = "metadata/kart/" + temp_arr[i] + ".png";
}
sobj.append(img);
}
const most_div=document.querySelector('#table_most');
var obj=document.createElement('tr');
most_div.append(obj);
/*save는 retire횟수 따져주는 것*/
var temp_arr=[most_kart[index],get_jsondata(most_kart[index],'kart'),(Len-retire)*10+"%",max];
for(var i=0; i<4; i++){
var sobj=document.createElement('td');
if(i==0){
var img=document.createElement('img');
img.id="IMG3";
if(temp_arr[1]==null){
temp_arr[1]="조회 불가능"
img.src="metadata/image/empty.png";
}
else{
img.src="metadata/kart/"+temp_arr[i]+".png";
}
sobj.append(img);
else {
sobj.innerText = temp_arr[i];
}
obj.append(sobj);
}
rank_grape = rank_grape.reverse();
var options = {
type: 'line',
data: {
labels: ['', '', '', '', '', '', '', '', '', ''],
datasets: [{
label: 'rank',
data: rank_grape,
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(54, 162, 235, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
gridLines: {
display: false
}
else{
sobj.innerText=temp_arr[i];
}],
yAxes: [{
ticks: {
reverse: true,
min: 1,
max: 8,
stepSize: 1
}
obj.append(sobj);
}
//sebo부분//////////////////////////////////////////////////////////
rank_grape=rank_grape.reverse();
var options={
type: 'line',
data:{
labels: ['', '', '', '', '', '','','','',''],
datasets: [{
label: 'rank',
data: rank_grape,
backgroundColor:[
'rgba(0, 0, 0, 0)'
],
borderColor:[
'rgba(54, 162, 235, 1)'
],
borderWidth: 2
}]
},
options:{
responsive:false,
scales:{
xAxes:[{
gridLines:{
display:false
}
}],
yAxes: [{
ticks:{
reverse:true,
min:1,
max:8,
stepSize:1
}
}]
}
}
};
var ctx=document.getElementById('myChart').getContext('2d');
new Chart(ctx,options);
///////////////////////
var options2={
type: 'doughnut',
data:{
labels:['retire','save'],
datasets: [{
data: [retire,Len-retire],
backgroundColor:[
'rgba(255, 100, 100, 1)',
'rgba(54, 162, 235, 1)'
],
}]
}
};
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, options);
var options2 = {
type: 'doughnut',
data: {
labels: ['retire', 'save'],
datasets: [{
data: [retire, Len - retire],
backgroundColor: [
'rgba(255, 100, 100, 1)',
'rgba(54, 162, 235, 1)'
],
}]
},
/* options:{
responsive:false,
scales:{
xAxes: [{
gridLines:{
display:false
},
ticks:{
display:false
}
}],
yAxes: [{
gridLines:{
display:false
},
ticks:{
display:false
}
}]
}
}*/
};
var ctx2=document.getElementById('myChart2').getContext('2d');
new Chart(ctx2,options2);
};
var ctx2 = document.getElementById('myChart2').getContext('2d');
new Chart(ctx2, options2);
</script>
</html>
\ No newline at end of file
......
......@@ -10,11 +10,11 @@
var vec = "";
function Ajax(index) {
$.ajax({
url: '/test/result',
async: true,
type: 'POST',
url: '/test/result',
async: true,
type: 'POST',
data: {
test: index
test: index
}
});
}
......