박주현 / 2017_02_OSS_project

Go to a project
Toggle navigation Toggle navigation pinning
박주현
ddf3bbfa 1 parent 30da79a1

1207

Inline Side-by-side
Showing 5 changed files with 297 additions and 161 deletions
......@@ -3,7 +3,7 @@ var cheerio = require('cheerio');
var request = require("request");
var urlenconde = require('urlencode');
var api_key = "RGAPI-39fcab88-55d3-4769-8328-82b26537b9b4";
var api_key = "RGAPI-8ba6778e-a2df-4512-b19a-127217dd514c";
// //js 전송
......@@ -35,6 +35,15 @@ var color = new Array();
var print1 = new Array();;
var print2 = new Array();;
var total = new Array();;
var total2 = new Array();;
var fisrtGame = "";
var lastGame = "";
var matchgamelist = new Array();
var gameplaytime = new Array();
app.get('/', function(req, res) {
res.render('index', { title: '또 게임헤' });
});
......@@ -43,6 +52,8 @@ var print2 = new Array();;
//롤 api url
name = req.params.username;
//////////////////////////////////////////////////
// 1. api를 통해 닉네일으로 고유 아이디 찾기
//입력받은 닉네임의 사용자 정보 요청 api
var url ="https://kr.api.riotgames.com/lol/summoner/v3/summoners/by-name/"+urlenconde(name)+"?api_key="+ api_key ;
......@@ -57,28 +68,72 @@ var print2 = new Array();;
summonerLevel = obj["summonerLevel"];
revisionDate = obj["revisionDate"];
// //최근 게임 정보 요청 api
// var currnetGame;
// currnetGameUrl = "https://kr.api.riotgames.com/lol/match/v3/matchlists/by-account/" +accountId +"?api_key="+ api_key ;
// //var date = new Date(1127919625*1000); //유닉스 시간으로 반환 반환
// var info_champ_json;
// var champions;
///////////////////////////////////////////////////////////////
//2.최근 게임 정보 요청 api
//위에서 받은 고유 아이디를 통해 최근 게임들 정보를 받음
var currnetGame;
currnetGameUrl = "https://kr.api.riotgames.com/lol/match/v3/matchlists/by-account/" +accountId +"?api_key="+ api_key ;
//var date = new Date(1127919625*1000); //유닉스 시간으로 반환 반환
var info_champ_json;
var champions;
request(currnetGameUrl , function(error,response,body){
info_champ_json = JSON.parse(body);
champions = info_champ_json["matches"];
var champions_length = Object.keys(champions).length;
for(var i=0; i < champions_length; i++){
total[i] = champions[i]["timestamp"]; // 게임 날짜 추출
matchgamelist[i] = champions[i]["gameId"]; //게임 고유 아이디 추출
//console.log(matchgamelist[i]);
var t = new Date(total[i]);
t = t.toLocaleString();
// console.log(t );
total[i] = t;
if(i == 0){
fisrtGame = total[0];
}
lastGame = total[i];
}
if(fisrtGame != "" ){
var a = new Array();
a = fisrtGame.split(" ");
fisrtGame = a[0];
a = lastGame.split(" ");
lastGame = a[0];
//console.log(fisrtGame );
//console.log(lastGame );
}
});
// for( var q = 0 ; q < matchgamelist.length ; q++){
// console.log(matchgamelist[q]);
// }
//////////////////////////////////////////////////////
//3. 게임 상세 정보 얻기
//위에서 얻은 게임아이디를 통해 다시 게임 플레이시간 추출
// var infoGame;
// var info_game_json;
// var gamess;
//
// request(currnetGameUrl , function(error,response,body){
// info_champ_json = JSON.parse(body);
// champions = info_champ_json["matches"];
// for( var i = 0 ; i < 20 ; i++){
// //if(i == 20){for(var j = 0; j< 10000; j++) ;}
// infoGame = "https://kr.api.riotgames.com/lol/match/v3/matches/" + matchgamelist[i] +"?api_key="+ api_key ;
// request(infoGame , function(error,response,body){
//
// var champions_length = Object.keys(champions).length;
// for(var i=0; i < champions_length; i++){
// formattedTime[i] = champions[i]["timestamp"];
// t = new Date(formattedTime[i]);
// var month = t.getMonth();
// var day = t.getDay();
// formattedTime[i] = month + '-' + day ;
// // console.log(month );
// }
// });
// info_game_json = JSON.parse(body);
// gameplaytime[i] = info_game_json["gameDuration"]; //게임 플레이시간 추출
// gameplaytime[i] = Number(gameplaytime[i])/60;
// console.log( gameplaytime[i] );
// // }
// });
// }
//3벙능ㄹ 사용중위 api 요청횟수 제한으로 스크래핑을 사용
//스크래핑 : 다전적 사이트를 통해 스크래핑
var i = 0;
var opgg = "http://www.op.gg/summoner/userName=" + name;
......@@ -112,7 +167,7 @@ var print2 = new Array();;
print1[0] = formattedTime[0];
print2[0] = formattedTime2[0];
for(var p = 0; p<19;p++){
for(var p = 0; p < formattedTime.length ;p++){
if(formattedTime[p] == formattedTime[p+1]){
k = 1;
print1[c] = formattedTime[p+1];
......@@ -154,7 +209,7 @@ var print2 = new Array();;
color[p] = "B"; }
else if( Number(print2[p]) <= 150 && Number(print2[p]) > 100){
color[p] = "C";}
else if( Number(print2[p]) <= 200 && Number(print2[p]) > 150){
else if( Number(print2[p]) <= 250 && Number(print2[p]) > 150){
color[p] = "D";}
else if( Number(print2[p]) <= 250 && Number(print2[p]) > 1000){
color[p] = "E";}
......@@ -171,12 +226,13 @@ var print2 = new Array();;
_id :id,
_profileIconId : profileIconId,
_summonerLevel : summonerLevel,//레벨
_revisionDate : revisionDate,
//_time : date// 최근 게임
_day :print1,
_time :print2,
_color : color
_color : color,
_total : total,
_fisrtGame : fisrtGame,
_lastGame : lastGame
});
});
......
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title><%= title %></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.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>
......@@ -15,20 +15,56 @@
})
});
</script>
<style>
body {
body {
width: 1400px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 850px;
margin: 0 auto;
}
#container{width:100%;}
.main_left_btn {
width:70%;
float:left;}
.main_right_btn {
width:30%;
float:left;}
</style>
</head>
<body>
<div style="position: relative; left: 30%; top: 50px;" >
<img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" width="700" height="250">
</div>
<body class="w3-content" style="padding-top: 16px">
<div class= "main_left_btn">
<!-- 상단 이미지 -->
<div>
<img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" class="w3-round w3-hover-opacity" width="100%" height="230">
<!-- <img src = "http://postfiles6.naver.net/MjAxNzEyMDZfNjIg/MDAxNTEyNTUzOTI4MDIw.pdijcp2zG9xdc3vQk3P1f2ThgtfAVyyVrrFMZfxbrwQg.yJ48Li-AfIQxSd7D6yz8y_QMuQ647pwOS9zMIcKbAVYg.JPEG.hyeoni921/pic.jpg?type=w580" width="100%" height="230"> -->
</div>
<!-- 입력부분 -->
<div>
<font size="4.5em" >
<input type="text" class="" style="width: 90% " placeholder="소환사 이름"/>
<span class="input-group-btn">
<button id="searchButton" style="width:9%" class="w3-button w3-teal w3-round-large" type="button" onclick="search(name)">검색</button>
</span>
</font>
</div>
</div>
<div style="position: relative; left: 30%; top: 100px;">
<input type="text" class="input_text" placeholder="소환사 이름">
<span class="input-group-btn">
<button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">검색!</button>
</span>
</div>
<div class="main_right_btn">
</div>
</body>
</html>
......
......@@ -4,17 +4,21 @@
<meta charset="utf-8">
<title><%= title %></title>
<link href='../lib/fullcalendar.css' rel='stylesheet' />
<link href='../lib/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/fullcalendar.min.js'></script>
<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>
<!-- http://www.blueb.co.kr/?c=1/7&cat=%EB%8B%AC%EB%A0%A5&uid=4076 -->
<link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.css" rel='stylesheet' />
<link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.print.css" rel='stylesheet' media='print' />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="http://www.blueb.co.kr/SRC2/fullcalendar/lib/moment.min.js"></script>
<script src="http://www.blueb.co.kr/SRC2/fullcalendar/lib/jquery.min.js"></script>
<script src="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.min.js"></script>
<!-- <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(){
$("button#searchButton").click(function(){
......@@ -33,71 +37,76 @@
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
defaultDate: '2017-12-06',
businessHours: true, // display business hours
editable: true,
events: [
{
title: 'Business Lasdfasunch',
start: '2015-02-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2015-02-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
{
title: 'Conference',
start: '2015-02-18',
end: '2015-02-20'
},
{
title: 'Party',
start: '2015-02-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
id: 'availableForMeeting',
start: '2015-02-11T10:00:00',
end: '2015-02-11T16:00:00',
rendering: 'background'
},
{
id: 'availableForMeeting',
start: '2015-02-13T10:00:00',
end: '2015-02-13T16:00:00',
rendering: 'background'
},
// red areas where no events can be dropped
{
start: '2015-02-24',
end: '2015-02-28',
overlap: false,
rendering: 'background',
color: '#ff9f89'
},
{
start: '2015-02-06',
end: '2015-02-08',
overlap: false,
rendering: 'background',
color: '#ff9f89'
}
{
title: 'Business Lasdfasunch',
start: '2017-12-25',
constraint: 'businessHours'
},
{
title: 'Conference',
start: '2017-12-01',
end: '2017-12-01',
color: '#257e4a'
},
// //검정 250분 이상
// color: '#000000'E
// //빨강 200분 미만D
// color: '#990000'
// //주황 150분미만C
// color: '#ff6600'
// //노랑 100분 미만B
// color: '#ffff00'
// //초록 40분 미만A
// color: '#00ff99'
//var asa = new Date(print1[0]);
<% var p = 0 %>
<% for (var p = 0; p < _day.length ;p++ ) { %>
{
start: <%- _day[p] %>,
end: <%- _day[p] %>,
overlap: false,
rendering: 'background',
// color: '#ff6600'//투명
<% if ( _color[p] == "A") { %>
color: '#00ff99'//초록
<% } else if ( _color[p] == "B") { %>
color: '#ffff00'//노랑
<% } else if ( _color[p] == "C") { %>
color: '#ff6600'//주황
<% } else if ( _color[p] == "D") { %>
color: '#990000'//빨강
<% } else if ( _color[p] == "E") { %>
color: '#000000'//검정
<% } else if ( _color[0] == "F") { %>
color: '#ffffff'//투명
<% } else { %>
color: '#ffffff'//투명
<% } %>
},
<% } %>
{
//빨강 200분 미만
start: '2017-12-09',
//end: '2015-02-02',
overlap: false,
rendering: 'background',
color: '#ffffff'//투명
}
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
width: 980px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
......@@ -108,43 +117,39 @@
}
</style>
</head>
<body>
<div style="position: relative; left: 30%; top: 50px;" >
<img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" width="700" height="250">
</div>
<body class="w3-content" style="padding-top: 16px">
<!-- 상단 이미지 -->
<div>
<img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" width="100%" height="250">
</div>
<div style="position: relative; left: 30%; top: 100px;">
<input type="text" class="input_text" placeholder="소환사 이름">
<div>
<input type="text" class="input_text" style="width: 90%" placeholder="소환사 이름"/>
<span class="input-group-btn">
<button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">검색!</button>
<button id="searchButton" style="width:9%" class="btn btn-primary" type="button" onclick="search(name)">검색!</button>
</span>
</div>
<div style="position: relative; left: 30%; top: 120px;" >
<div>
<a>닉네임 : <%= name %></a><br>
<a>닉네임 : <%= name %></a><br>
<a>고유ID : <%= _profileIconId %></a><br>
<a>레 벨 : <%= _summonerLevel %></a><br>
<% for (var i = 0; i < _day.length ; i++ ) { %>
<a>시 간 : <%= _day[i] %></a>
<a> <%= _time[i] %></a><br>
<a> <%= _time[i] %></a>
<a> <%= _color[i] %></a><br>
<% } %>
</div>
<div style="position: relative; left: 30%; top: 140px;">
<div>
<div id='calendar'></div>
<div id='calendar'></div>
</div>
<script type="text/javascript">
var dp = new DayPilot.Month("dp");
dp.theme = "month_transparent";
dp.init();
</script>
</body>
</html>
......
......@@ -4,10 +4,6 @@
<meta charset="utf-8">
<title><%= title %></title>
<!-- http://www.blueb.co.kr/?c=1/7&cat=%EB%8B%AC%EB%A0%A5&uid=4076 -->
<link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.css" rel='stylesheet' />
<link href="http://www.blueb.co.kr/SRC2/fullcalendar/fullcalendar.print.css" rel='stylesheet' media='print' />
......@@ -41,17 +37,6 @@
businessHours: true, // display business hours
editable: true,
events: [
{
title: 'Business Lasdfasunch',
start: '2017-12-25',
constraint: 'businessHours'
},
{
title: 'Conference',
start: '2017-12-01',
end: '2017-12-01',
color: '#257e4a'
},
// //검정 250분 이상
// color: '#000000'E
......@@ -63,12 +48,11 @@
// color: '#ffff00'
// //초록 40분 미만A
// color: '#00ff99'
//var asa = new Date(print1[0]);
<% var p = 0 %>
<% for (var p = 0; p < _day.length ;p++ ) { %>
{
start: <%- _day[p] %>,
start: <%- _day[p] %>,
end: <%- _day[p] %>,
overlap: false,
rendering: 'background',
......@@ -83,13 +67,14 @@
color: '#990000'//빨강
<% } else if ( _color[p] == "E") { %>
color: '#000000'//검정
<% } else if ( _color[0] == "F") { %>
<% } else if ( _color[p] == "F") { %>
color: '#ffffff'//투명
<% } else { %>
color: '#ffffff'//투명
<% } %>
},
<% } %>
{
//빨강 200분 미만
start: '2017-12-09',
......@@ -106,50 +91,104 @@
<style>
body {
width: 980px;
width: 1400px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
max-width: 850px;
margin: 0 auto;
}
</style>
</head>
<body class="w3-content" style="padding-top: 16px">
<!-- 상단 이미지 -->
<div>
<img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" width="100%" height="250">
</div>
#container{width:100%;}
<div>
<input type="text" class="input_text" style="width: 90%" placeholder="소환사 이름"/>
<span class="input-group-btn">
<button id="searchButton" style="width:9%" class="btn btn-primary" type="button" onclick="search(name)">검색!</button>
</span>
</div>
<div>
<a>닉네임 : <%= name %></a><br>
<a>고유ID : <%= _profileIconId %></a><br>
<a>레 벨 : <%= _summonerLevel %></a><br>
<% for (var i = 0; i < _day.length ; i++ ) { %>
<a>시 간 : <%= _day[i] %></a>
<a> <%= _time[i] %></a>
<a> <%= _color[i] %></a><br>
<% } %>
</div>
<div>
<div id='calendar'></div>
.main_left_btn {
width:70%;
float:left;}
.main_right_btn {
width:30%;
float:left;}
</style>
</head>
<body class="w3-content" style="max-width: 1400px; padding-top: 16px">
<div class= "main_left_btn">
<!-- 상단 이미지 -->
<div>
<img src = "https://i.ytimg.com/vi/nhX6W0mzVOE/maxresdefault.jpg" class="w3-round w3-hover-opacity" width="100%" height="230">
<!-- <img src = "http://postfiles6.naver.net/MjAxNzEyMDZfNjIg/MDAxNTEyNTUzOTI4MDIw.pdijcp2zG9xdc3vQk3P1f2ThgtfAVyyVrrFMZfxbrwQg.yJ48Li-AfIQxSd7D6yz8y_QMuQ647pwOS9zMIcKbAVYg.JPEG.hyeoni921/pic.jpg?type=w580" width="100%" height="230"> -->
</div>
<!-- 입력부분 -->
<div>
<font size="4.5em" >
<input type="text" class="" style="width: 90% " placeholder="소환사 이름"/>
<span class="input-group-btn">
<button id="searchButton" style="width:9%" class="w3-button w3-teal w3-round-large" type="button" onclick="search(name)">검색</button>
</span>
</font>
</div>
<!-- 정보부분 -->
<div class = "w3-border" tyle="padding-left: 5px">
<font size="4em" >
<br><a>　닉네임 : <%= name %></a><br>
<a>　고유ID : <%= _profileIconId %></a><br>
<a>　레 벨 : <%= _summonerLevel %></a><br>
<a>　20게임 클리어 하는데 <%= _day.length %>일 소요 </a><br>
<a>　<%= _lastGame %> ~ <%= _fisrtGame %> 기간에 <%= _total.length %> 게임 플레이</a> <br><br>
</font >
</div>
<!-- 달력 -->
<div>
<div id='calendar'></div>
</div>
<!-- 상세 정보 -->
<div class="w3-cell-row">
<div class="w3-container w3-cell w3-border" style="width:50%">
<font size="4em" ><br> <br><a>날짜별 게임 시간</a> <br><br></font>
<font size="3em" >
<% for (var i = 0; i < _day.length ; i++ ) { %>
<a><%= _day[i] %> : </a>
<a> <%= _time[i] %>분 PLAY - </a>
<a> 중독성 : <%= _color[i] %>등급</a> <br>
<% } %>
</font>
</div>
<div class="w3-container w3-cell w3-border">
<font size="4em" > <br> <br><a>최근 게임 시작 시간</a> <br><br></font>
<font size="3em" >
<% for (var i = 0; i < _total.length ; i++ ) { %>
<a><%= _total[i] %></a> <br>
<% } %>
</font>
</div>
</div>
</div>
</div>
</div>
<div class="main_right_btn">
<div >
<img src = "http://postfiles6.naver.net/MjAxNzEyMDZfMzkg/MDAxNTEyNTcwNzQ0NzM1.9hBoIQoPFnmqzRJ59g_lnFA45KPk1cTuBKIP6QxX614g.WZal-F4hcT-kJTQ8oTr2f8tn44uCjz6BRT6cD6dMqHUg.JPEG.hyeoni921/pic.jpg?type=w580" width="100%" style="padding-top: 600px">
</div>
</div>
</body>
</html>
......

39.8 KB