김명주 / kartrider

Go to a project
Toggle navigation Toggle navigation pinning
김명주
64f6a0d5 1 parent 5dd46cce

Design search result page

Expand all
Inline Side-by-side
Showing 16 changed files with 199 additions and 73 deletions
var key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50X2lkIjoiMjAxNjMxMTYzIiwiYXV0aF9pZCI6IjIiLCJ0b2tlbl90eXBlIjoiQWNjZXNzVG9rZW4iLCJzZXJ2aWNlX2lkIjoiNDMwMDExMzkzIiwiWC1BcHAtUmF0ZS1MaW1pdCI6IjUwMDoxMCIsIm5iZiI6MTYzNDMwMTE0NCwiZXhwIjoxNjQ5ODUzMTQ0LCJpYXQiOjE2MzQzMDExNDR9.EEWMly4HZG_DY-aleMtDFVOOmbWl8uVmG1tHVM3c-BE"
var chname;
var userId;
var username;
var kart_level;
exports.home_get=function(req,res){
res.render('search_home');
};
......@@ -8,9 +10,6 @@ exports.home_get=function(req,res){
exports.result_post=function(req,res){
chname=encodeURIComponent(req.body.test);
};
exports.result_get=function(req,res){
var api_url='https://api.nexon.co.kr/kart/v1.0/users/nickname/'+chname;
var request=require('request');
var options={
......@@ -20,18 +19,32 @@ exports.result_get=function(req,res){
request.get(options, function(error, response, body){
if (!error && response.statusCode == 200) {
var jsbody=JSON.parse(body);
var option2={
//개인전만 검색하는 것임
url: "https://api.nexon.co.kr/kart/v1.0/users/"+jsbody.accessId+"/matches?start_date=&end_date= &offset=0&limit=10&match_types=7b9f0fd5377c38514dbb78ebe63ac6c3b81009d5a31dd569d1cff8f005aa881a",
headers:{Authorization: key}
};
request.get(option2, function(error, response, body){
var match=JSON.parse(body);
res.render('search_result',{name: jsbody.name, level: jsbody.level,body:JSON.stringify(match)});
});
} else {
res.status(response.statusCode).end();
console.log('error = ' + response.statusCode);
userId=jsbody.accessId;
username=jsbody.name;
kart_level=jsbody.level;
res.send(JSON.stringify(response.statusCode));
}
else {
res.send(JSON.stringify(response.statusCode));
}
});
}
exports.result_get = function (req, res) {
var api_url="https://api.nexon.co.kr/kart/v1.0/users/" + userId + "/matches?start_date=&end_date= &offset=0&limit=10&match_types=7b9f0fd5377c38514dbb78ebe63ac6c3b81009d5a31dd569d1cff8f005aa881a";
var request=require('request');
var options = {
//개인전만 검색하는 것임
url: api_url,
headers: { Authorization: key }
};
request.get(options, function (error, response, body) {
if (!error && response.statusCode == 200) {
var match = JSON.parse(body);
res.render('search_result', { name: username, level: kart_level, body: JSON.stringify(match) });
}
else{
res.send("error :" + response.statusCode);
}
});
};
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<html>
<head>
<title>TESTESTEST</title>
<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="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
......@@ -12,7 +13,7 @@
<img class="box2" id="right" src="metadata/image/sdao.png">
<div class="search">
<input type="text" id="name" placeholder="카트라이더 닉네임 입력" />
<input type="submit" value="" onClick="location.href='search/result'" id="OK"/>
<input type="button" value="" id="OK"/>
</div>
<script>
$("#OK").click(function(){ // OK 버튼 클릭하면
......@@ -23,7 +24,15 @@
data: {
test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄
},
dataType: 'json'
dataType: 'json',
success: function(data){
if(data=="200"){
window.location.href="/search/result";
}
else{
swal("ERROR", "존재하지 않는 닉네임입니다.");
}
}
});
});
</script>
......
body{
background:rgb(240, 239, 239)
}
#hle
#div
{
position: relative;
top:3px;
left:-1120px;
width: 1200px;
height: 200px;
left:50%;
margin:0px 0px 0px -600px;
float:left;
}
#div
#emblem
{
position: relative;
width: 1150px;
height: 220px;
line-height: 200px;
margin: 0 auto;
background-image: url(search_chang.png);
position:relative;
width:120px;
height:120px;
top:50%;
margin:-60px 0px 0px 5px;
box-shadow: 2px 2px 2px rgb(166, 166, 166);
border:2px solid rgb(166, 166, 166);
float:left;
}
#name
{
position:relative;
width:300px;
height:50px;
top:50%;
margin:-25px 0px 0px 20px;
float:left;
}
#s_home
{
position:relative;
left:355px;
}
#title
{
font-family: 'Nanum Gothic';
font-size:large;
font-weight:bold;
}
#resu
{
position: relative;
width: 1150px;
height: 1400px;
width: 1700px;
height: 1100px;
margin: 0 auto;
top:6px;
top:250px;
}
#most
{
position: relative;
width: 370px;
height: 600px;
height: 800px;
left:-250px;
float:left;
}
#imgId
......@@ -38,15 +63,16 @@ body{
}
#nick
{
font-size:xx-large;
font-weight: bold;
font-family: 'Nanum Gothic';
font-size:40px;
font-weight:bold;
}
#div1
{
position: relative;
width: 500px;
width: 800px;
height: 900px;
left:3%;
left:-150px;
float:left;
}
......@@ -70,7 +96,11 @@ body{
width:80px;
height:60px;
}
#IMG4
{
width:80px;
height:60px;
}
#img3
{
position: relative;
......@@ -84,6 +114,7 @@ body{
border-collapse: separate;
border-spacing: 0 10px;
text-align:center;
width:100%;
}
#table_row
{
......
......@@ -5,31 +5,65 @@
<meta charset="utf-8">
<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 character(){
var a = Math.floor(Math.random() * 9) + 1;
return "metadata/main_character/" + a + ".png";
}
function level(){
return "metadata/level/" + '<%- level %>' + ".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;
}
$.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;
}
}
});
return str;
}
</script>
<body>
<div id="div">
<img id="imgId" src="" width="150" height="120">
<script>document.getElementById("imgId").src = character()</script>
<text id="nick"> <%- name %> </text>
<img id="imgId2" src="" width="30" height="30">
<script>document.getElementById("imgId2").src = level()</script>
<div id="emblem">
<script>document.getElementById("emblem").style = embl()</script>
</div>
<div id="name">
<text id="nick"> <%- name %> </text>
</div>
<img id="s_home" src="metadata/image/search_image.png">
</div>
<div id="resu">
<div id="most">
<text id="title">SAVE</text>
<canvas id="myChart2"width="350" height="200"></canvas>
<text>RETIRE</text>
<text id="title"><br>RANKING GRAPE</text>
<canvas id="myChart"width="350" height="200"></canvas>
<text id="title"><br>MOST KART</text>
<table id="table_most" border="1">
<colgroup>
<col width="10%"/>
......@@ -51,30 +85,30 @@
<colgroup>
<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>
<div id="hle">
<text> 문의사항 : mjoo1106@naver.com</text>
</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<=10; i++){
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;
......@@ -83,7 +117,11 @@
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();
......@@ -104,6 +142,7 @@
if (mrank == "99" || win=="탈주") {
ranking = "retire";
retire+=1;
diff_time = "retire";
obj.style="background: rgb(226,182,179)";
rank_grape.push(8);
......@@ -118,8 +157,8 @@
}
div_target.append(obj);
var arr=["개인전","#"+ranking,kartId,tId,diff_time,ranking];
for(var j=1; j<=5; j++){
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');
......@@ -140,10 +179,17 @@
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";
img.src="metadata/kart/"+arr[j-1]+".png";
tet1.innerText="카트이름"
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);
......@@ -151,11 +197,30 @@
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";
img.src="metadata/track/"+arr[j-1]+".png";
tet1.innerText="맵 이름"
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);
......@@ -167,15 +232,11 @@
}
}
/////////////most카트라이더 부분/////////////////////////
/*const most_div=document.querySelector('#most');
var obj=documnet.createElement("button");
obj.innerText=most_kart[2];
most_div.append(obj);*/
var count=[];
for(var i=0; i<10; i++){
for(var i=0; i<Len; i++){
var item=most_kart[i];
count[i]=0;
for(var j=0; j<10; j++){
for(var j=0; j<Len; j++){
if(item==most_kart[j]){
count[i]+=1;
}
......@@ -183,7 +244,7 @@
}
var max=0;
var index=0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index
for(var i=0; i<10; i++){
for(var i=0; i<Len; i++){
if(max<count[i]){
max=count[i];
index=i;
......@@ -193,13 +254,19 @@
var obj=document.createElement('tr');
most_div.append(obj);
/*save는 retire횟수 따져주는 것*/
var temp_arr=[most_kart[index],"카트이름","30%",max];
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";
img.src="metadata/kart/"+temp_arr[i]+".png";
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{
......@@ -247,14 +314,20 @@
var ctx=document.getElementById('myChart').getContext('2d');
new Chart(ctx,options);
///////////////////////
var options2={
type: 'doughnut',
data:{
labels:['retire','save'],
datasets: [{
data: [50,50],
data: [retire,Len-retire],
backgroundColor:[
'rgba(255, 100, 100, 1)',
'rgba(54, 162, 235, 1)'
],
}]
},
options:{
/* options:{
responsive:false,
scales:{
xAxes: [{
......@@ -274,7 +347,7 @@
}
}]
}
}
}*/
};
var ctx2=document.getElementById('myChart2').getContext('2d');
new Chart(ctx2,options2);
......