김동근 / WhoAreYou

Go to a project
Toggle navigation Toggle navigation pinning
김동근
abd44adf 1 parent 7f8e6a06

upload

Expand all
Inline Side-by-side
Showing 18 changed files with 769 additions and 257 deletions
......@@ -10,119 +10,9 @@ let globalDecks
//result.ejs 렌더링 전 수행됨. 현재 덱 ID와 상대 직업을 가지고 상대의 점유율 상위 3개 덱과, 내 덱의 추천 멀리건 출력
//return : 렌더링 된 result.ejs
exports.GetResult=(req,res)=>{
const deckId=req.session.deckId
//const deckId=req.session.deckId
const opponentClass=req.session.opponentClass
//덱 ID와 상대 직업 정보 체크
const DataCheck=()=>{
return new Promise((resolve,reject)=>{
if (!deckId || !opponentClass){
return reject({
code:'query_error',
message:'query error',
})
}
resolve()
})
}
//현재 덱ID를 바탕으로 카드정보 가져오기
const GetCardId=()=>{
return getCardId.GetCardId(deckId)
}
//가져온 카드 정보를 바탕으로, hsreplay.net에서, 덱 검색하기, 검색한 결과의 html을 반환
const GetMulContent=(cardIds)=>{
cardIds=JSON.stringify(cardIds)
cardIds=JSON.parse(cardIds)
//검색을 위한 쿼리스트링
let idInQuery=cardIds[0].cardId
//cardIds.length
for(let i=1;i< cardIds.length;i++){
if(cardIds[i].cardId != '0')
idInQuery+= '%2C'+cardIds[i].cardId
}
//var url = 'https://hsreplay.net/decks/#timeRange=LAST_30_DAYS&includedCards=' + idInQuery
/*request(url, function(err, res, html){
if(!err){
return cheerio.load(html)
}
})*/
return new Promise((resolve,reject)=>{
const asyncFunc=async ()=>{
const browser=await puppeteer.launch()
try{
const page=await browser.newPage()
await page.setViewport({width:1366,height:768})
//idInQuery = '180%2C48886%2C904%2C461'
console.log(idInQuery)
await page.goto(`https://hsreplay.net/decks/#timeRange=LAST_30_DAYS&includedCards=${idInQuery}`,{waitUntil: 'networkidle2'})
const content=await page.content()
browser.close()
return content
}
catch(err)
{
console.log(err)
browser.close()
}
}
resolve(asyncFunc())
})
}
//검색한 html을 가지고, 검색결과로 부터 덱의 url 파싱
const GetDeckHref=(content)=>{
return new Promise((resolve,reject)=>{
const $=cheerio.load(content)
let deck=$('#decks-container > main > div.deck-list-wrapper > section > ul > li:nth-child(2) > a')
const deckHref=$(deck).attr('href')
console.log(deckHref)
resolve(deckHref)
})
}
//덱의 url을 이용, 해당 덱의 정보를 나타내는 페이지 불러온 후 html로 반환
const GetDeckContent=(href)=>{
return new Promise((resolve,reject)=>{
const asyncFunc=async ()=>{
const browser=await puppeteer.launch()
try{
const page=await browser.newPage()
await page.setViewport({width:1366,height:768})
await page.goto(`https://hsreplay.net${href}?hl=ko`,{waitUntil: 'networkidle2'})
const content=await page.content()
browser.close()
return content
}
catch(err)
{
console.log(err)
browser.close()
}
}
resolve(asyncFunc())
})
}
//받아온 html에서 카드 이름과 멀리건 부분 추출
const GetMulligan=(content)=>{
return new Promise((resolve,reject)=>{
const $=cheerio.load(content)
let cardNames=$('.card-name')
let cardWinRates=$('.table-cell')
let cards=[]
for(let i=0;i<cardNames.length;i++){
let cardName=$(cardNames[i]).text()
let cardWinRate=$(cardWinRates[6*i]).text()
//문자 삭제하고, 멀리건의 승률이 숫자로만 나타나도록
cardWinRate=cardWinRate.replace('▼','')
cardWinRate=cardWinRate.replace('▲','')
cardWinRate=cardWinRate.replace('%','')
cards.push({cardName:cardName,cardWinRate:cardWinRate})
}
//카드를 멀리건 승률 순서대로 정렬
cards.sort((a,b)=>{
return a.cardWinRate<b.cardWinRate ? 1:-1
})
resolve(cards)
})
}
//상대 직업을 가지고 hsreplay.net에서 검색, html로 반환
const GetOppContent=()=>{
return new Promise((resolve,reject)=>{
......@@ -131,7 +21,8 @@ exports.GetResult=(req,res)=>{
try{
const page=await browser.newPage()
await page.setViewport({width:1366,height:768})
await page.goto(`https://hsreplay.net/decks/#playerClasses=${opponentClass}`,{waitUntil: 'networkidle2'})
await page.goto('https://hsreplay.net/meta/#tab=archetypes',{waitUntil: 'networkidle2'})
await page.click('#table1-column0')
const content=await page.content()
browser.close()
return content
......@@ -149,38 +40,30 @@ exports.GetResult=(req,res)=>{
const GetDeckInfo=(content)=>{
return new Promise((resolve,reject)=>{
const $=cheerio.load(content)
let deckNames=$('.deck-name')
let deckGames=$('.game-count')
let index = 0
if(opponentClass == "DRUID"){ index = 1 }
else if(opponentClass == "HUNTER"){ index = 2 }
else if(opponentClass == "MAGE"){ index = 3 }
else if(opponentClass == "PALADIN"){ index = 4 }
else if(opponentClass == "PRIEST"){ index = 5 }
else if(opponentClass == "ROGUE"){ index = 6 }
else if(opponentClass == "SHAMAN"){ index = 7 }
else if(opponentClass == "WARLOCK"){ index = 8 }
else if(opponentClass == "WARRIOR"){ index = 9 }
let deckNames=$('#archetypes > div > div:nth-child(' + index + ') > div.box-content > div > div:nth-child(1) > div:nth-child(3) > div > div > a')
let deckRates=$('#archetypes > div > div:nth-child(' + index + ') > div.box-content > div > div:nth-child(1) > div:nth-child(4) > div > div > a')
let len = deckNames.length - 1
let decks=[]
for(let i=0;decks.length<3;i++) {
let deckName = $(deckNames[i]).text()
let deckGame = $(deckGames[i]).text()
let j=0
for(;j<decks.length;j++){
if(deckName===decks[j].deckTitle)
break
}
if(j===decks.length){
decks.push({deckTitle:deckName,deckGame:deckGame})
}
for(let i=0; i < len; i++) {
if(i == 3) break
let deckName = $($('#table' + index + '-row' + i)[1]).text()
let deckRate = $(deckRates[3 * i]).text()
decks.push({deckTitle:deckName,deckWinRate:deckRate})
}
resolve(decks)
})
}
DataCheck()
.then(GetCardId)
//.then(CrawlerMulligan)
.then(GetMulContent)
.then(GetDeckHref)
.then(GetDeckContent)
.then(GetMulligan)
.then((cards)=>{
return new Promise((resolve,reject)=>{
globalMulligan=cards
resolve()
})
})
.then(GetOppContent)
GetOppContent()
.then(GetDeckInfo)
.then((decks)=>{
return new Promise((resolve,reject)=>{
......@@ -197,7 +80,7 @@ exports.GetResult=(req,res)=>{
})
})
.then((result)=>{
fs.readFile('./views/ejs/result.ejs','utf-8',(err,data)=>{
fs.readFile('./views/ejs/deck_result.ejs','utf-8',(err,data)=>{
res.writeHead(200,{'Content-Type':'text/html'})
res.end(ejs.render(data,{
cards:globalMulligan || [],
......
//const getCardId=require('./getCardId')
const puppeteer=require('puppeteer')
const request = require('request')
const cheerio=require('cheerio')
const fs=require('fs')
const ejs=require('ejs')
let globalMulligan
let globalDecks
//result.ejs 렌더링 전 수행됨. 현재 덱 ID와 상대 직업을 가지고 상대의 점유율 상위 3개 덱과, 내 덱의 추천 멀리건 출력
//return : 렌더링 된 result.ejs
exports.GetResults=(req,res)=>{
//const opponentClass=req.session.opponentClass
//덱 ID와 상대 직업 정보 체크
const DataCheck=()=>{
return new Promise((resolve,reject)=>{
if (!deckId || !opponentClass){
return reject({
code:'query_error',
message:'query error',
})
}
resolve()
})
}
//현재 덱ID를 바탕으로 카드정보 가져오기
const GetCardId=()=>{
return getCardId.GetCardId(deckId)
}
//가져온 카드 정보를 바탕으로, hsreplay.net에서, 덱 검색하기, 검색한 결과의 html을 반환
const GetMulContent=()=>{
//cardIds=JSON.stringify(cardIds)
//cardIds=JSON.parse(cardIds)
return new Promise((resolve,reject)=>{
const asyncFunc=async ()=>{
const browser=await puppeteer.launch()
try{
const page=await browser.newPage()
await page.setViewport({width:1366,height:768})
await page.goto(`https://www.heartharena.com/ko/tierlist`,{waitUntil: 'networkidle2'})
let index = 0
if(opponentClass == "DRUID"){ index = 1 }
else if(opponentClass == "HUNTER"){ index = 2 }
else if(opponentClass == "MAGE"){ index = 3 }
else if(opponentClass == "PALADIN"){ index = 4 }
else if(opponentClass == "PRIEST"){ index = 5 }
else if(opponentClass == "ROGUE"){ index = 6 }
else if(opponentClass == "SHAMAN"){ index = 7 }
else if(opponentClass == "WARLOCK"){ index = 8 }
else if(opponentClass == "WARRIOR"){ index = 9 }
if(index != 1)
await page.click('#tier-list > div > section.navs > section.tierlist-selection > nav > ul > li:nth-child(' + index)
const content=await page.content()
browser.close()
return content
}
catch(err)
{
console.log(err)
browser.close()
}
}
resolve(asyncFunc())
})
}
//검색한 html을 가지고, 검색결과로 부터 덱의 url 파싱
const GetDeckHref=(content)=>{
return new Promise((resolve,reject)=>{
const $=cheerio.load(content)
let deck=$('#decks-container > main > div.deck-list-wrapper > section > ul > li:nth-child(2) > a')
const deckHref=$(deck).attr('href')
console.log(deckHref)
resolve(deckHref)
})
}
//덱의 url을 이용, 해당 덱의 정보를 나타내는 페이지 불러온 후 html로 반환
const GetDeckContent=(href)=>{
return new Promise((resolve,reject)=>{
const asyncFunc=async ()=>{
const browser=await puppeteer.launch()
try{
const page=await browser.newPage()
await page.setViewport({width:1366,height:768})
await page.goto(`https://hsreplay.net${href}?hl=ko`,{waitUntil: 'networkidle2'})
const content=await page.content()
browser.close()
return content
}
catch(err)
{
console.log(err)
browser.close()
}
}
resolve(asyncFunc())
})
}
//받아온 html에서 카드 이름과 멀리건 부분 추출
const GetMulligan=(content)=>{
return new Promise((resolve,reject)=>{
const $=cheerio.load(content)
let cardNames=$('.card-name')
let cardWinRates=$('.table-cell')
let cards=[]
for(let i=0;i<cardNames.length;i++){
let cardName=$(cardNames[i]).text()
let cardWinRate=$(cardWinRates[6*i]).text()
//문자 삭제하고, 멀리건의 승률이 숫자로만 나타나도록
cardWinRate=cardWinRate.replace('▼','')
cardWinRate=cardWinRate.replace('▲','')
cardWinRate=cardWinRate.replace('%','')
cards.push({cardName:cardName,cardWinRate:cardWinRate})
}
//카드를 멀리건 승률 순서대로 정렬
cards.sort((a,b)=>{
return a.cardWinRate<b.cardWinRate ? 1:-1
})
resolve(cards)
})
}
//상대 직업을 가지고 hsreplay.net에서 검색, html로 반환
const GetOppContent=()=>{
return new Promise((resolve,reject)=>{
const asyncFunc=async ()=>{
const browser=await puppeteer.launch()
try{
const page=await browser.newPage()
await page.setViewport({width:1366,height:768})
await page.goto(`https://www.heartharena.com/ko/tierlist`,{waitUntil: 'networkidle2'})
let index = 0
if(opponentClass == "DRUID"){ index = 1 }
else if(opponentClass == "HUNTER"){ index = 2 }
else if(opponentClass == "MAGE"){ index = 3 }
else if(opponentClass == "PALADIN"){ index = 4 }
else if(opponentClass == "PRIEST"){ index = 5 }
else if(opponentClass == "ROGUE"){ index = 6 }
else if(opponentClass == "SHAMAN"){ index = 7 }
else if(opponentClass == "WARLOCK"){ index = 8 }
else if(opponentClass == "WARRIOR"){ index = 9 }
if(index != 1)
await page.click('#tier-list > div > section.navs > section.tierlist-selection > nav > ul > li:nth-child(' + index)
const content=await page.content()
browser.close()
return content
}
catch(err)
{
console.log(err)
browser.close()
}
}
resolve(asyncFunc())
})
}
//받아온 html로부터 덱의 이름, 게임 횟수 추출
const GetDeckInfo=(content)=>{
return new Promise((resolve,reject)=>{
const $=cheerio.load(content)
let deckNames=$('.deck-name')
let deckGames=$('.game-count')
let decks=[]
for(let i=0;decks.length<3;i++) {
let deckName = $(deckNames[i]).text()
let deckGame = $(deckGames[i]).text()
let j=0
for(;j<decks.length;j++){
if(deckName===decks[j].deckTitle)
break
}
if(j===decks.length){
decks.push({deckTitle:deckName,deckGame:deckGame})
}
}
resolve(decks)
})
}
//DataCheck()
//.then(GetCardId)
//.then(CrawlerMulligan)
/*GetMulContent()
.then(GetDeckHref)
.then(GetDeckContent)
.then(GetMulligan)
.then((cards)=>{
return new Promise((resolve,reject)=>{
globalMulligan=cards
resolve()
})
})
.then(GetOppContent)*/
GetOppContent()
.then(GetDeckInfo)
.then((decks)=>{
return new Promise((resolve,reject)=>{
globalDecks=decks
resolve()
})
})
.then(()=>{
return new Promise((resolve,reject)=>{
let result={}
result.cards=globalMulligan
result.decks=globalDecks
resolve(result)
})
})
.then((result)=>{
fs.readFile('./views/ejs/score_result.ejs','utf-8',(err,data)=>{
res.writeHead(200,{'Content-Type':'text/html'})
res.end(ejs.render(data,{
cards:globalMulligan || [],
decks:globalDecks || [],
}))
})
})
.catch((err)=>{
console.log(err)
})
}
\ No newline at end of file
const getCardId=require('./getCardId')
const puppeteer=require('puppeteer')
const request = require('request')
const cheerio=require('cheerio')
const mysql=require('mysql')
const fs=require('fs')
const ejs=require('ejs')
let globalMulligan
let globalDecks
//result.ejs 렌더링 전 수행됨. 현재 덱 ID와 상대 직업을 가지고 상대의 점유율 상위 3개 덱과, 내 덱의 추천 멀리건 출력
//return : 렌더링 된 result.ejs
exports.GetResult=(req,res)=>{
const opponentClass=req.session.opponentClass
try{
fs.readFile('./views/ejs/score_result.ejs','utf-8',(err,data)=>{
res.writeHead(200,{'Content-Type':'text/html'})
res.end(ejs.render(data,{
MineClass:opponentClass || []
}))
})
}finally{
}
}
\ No newline at end of file
//result 출력 전, 선택한 상대 직업을 세션에 저장
//return: response status code\
exports.SetMineClass=(req,res)=>{
const mineClass=req.body.mineClass
const DataCheck=()=>{
return new Promise((resolve,reject)=>{
if(!mineClass){
reject(({
query:'request_body_error'
}))
}
else resolve()
})
}
const Set=()=>{
req.session.mineClass=req.body.mineClass
return
}
DataCheck()
.then(Set)
.then(()=>{
res.status(200).json({message:'complete setting opponent class'})
})
.catch((err)=>{
res.status(500).json(err||err.message)
})
}
\ No newline at end of file
......@@ -61,6 +61,14 @@ app.get('/login',(req,res)=>{
})
})
app.get('/menulist',(req,res)=>{
fs.readFile('./views/html/menulist.html',(err,data)=>{
res.writeHead(200,{'Content-Type':'text/html'})
res.end(data)
})
})
app.post('/logout',(req,res)=>{
delete req.session.deckId
delete req.session.sid
......@@ -90,12 +98,25 @@ app.get('/decklist',(req,res)=>{
})
app.get('/ingame/:deckId',(req,res)=>{
app.get('/select_opponent',(req,res)=>{
if(!req.session.sid)
res.redirect('/login')
else{
req.session.deckId=req.params.deckId
fs.readFile('./views/html/select_opponent.html',(err,data)=>{
res.writeHead(200,{'Content-Type':'text/html'})
res.end(data)
})
}
})
app.get('/select_mine',(req,res)=>{
if(!req.session.sid)
res.redirect('/login')
else{
req.session.deckId=req.params.deckId
fs.readFile('./views/html/ingame.html',(err,data)=>{
fs.readFile('./views/html/select_mine.html',(err,data)=>{
res.writeHead(200,{'Content-Type':'text/html'})
res.end(data)
})
......@@ -116,7 +137,7 @@ app.get('/newdeck',(req,res)=>{
const getResult=require('./api/card/getResult')
app.get('/result',(req,res)=>{
app.get('/deck_result',(req,res)=>{
if(!req.session.sid)
res.redirect('/login')
else{
......@@ -126,6 +147,41 @@ app.get('/result',(req,res)=>{
}
})
const getResultMine1=require('./api/card/getresultmine1')
app.get('/score_result',(req,res)=>{
if(!req.session.sid)
res.redirect('/login')
else{
(async ()=>{
await getResultMine1.GetResult(req,res)
})()
}
})
const getResultMine=require('./api/card/getresultmine')
app.get('/score_result_',(req,res)=>{
if(!req.session.sid)
res.redirect('/login')
else{
(async ()=>{
await getResultMine.GetResults(req,res)
})()
}
})
app.get('/prob_result/:deckId',(req,res)=>{
if(!req.session.sid)
res.redirect('/login')
else{
fs.readFile('./views/html/prob_result.html',(err,data)=>{
res.writeHead(200,{'Content-Type':'text/html'})
res.end(data)
})
}
})
app.listen(process.env.SERVER_PORT || 3000,()=>{
console.log('sample server is listening to port ' + process.env.SERVER_PORT)
})
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HearthCompare - 하스스톤 도우미</title>
<!-- 부트스트랩 -->
<link href="../../static/bootstrap-3.3.2-dist/css/bootstrap.min.css?ver=1" rel="stylesheet">
<link href="../../static/main.css" rel="stylesheet">
<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#logoutButton').click(function(){
$.ajax({
type:'POST',
url:'/logout',
success:function(result){
alert('로그아웃에 성공하였습니다.\n로그인 화면으로 이동합니다.')
window.location.href='/'
},
error:function(result){
alert('로그아웃에 실패하였습니다.')
return false
}
})
})
$('#backToSelectMine').click(function(){
window.history.back()
})
})
</script>
</head>
<body>
<nav class="navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-expanded="false" aria-controls="navbar" type="button" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
</ul>
<div class="navbar-right">
<input type="button" class="btn navbar-btn" id="logoutButton" style="color:#000;" value="로그아웃" />
</div>
</div>
</div>
</nav>
<div class="container show-grid" >
<div class="padding" style="width:100px"></div>
<br>
<br>
<h3 class="form-signin-heading">상대편 직업의 주요 덱</h3>
<div id="opponentDecks">
<table class="table" style="text-align: center;">
<thead>
<td>덱 이름</td>
<td>승률</td>
</thead>
<tbody>
<% for(var i=0;i<decks.length;i++){%>
<tr>
<td><a class="list-group-item"><%= decks[i].deckTitle %></a></td>
<td><a class="list-group-item"><%= decks[i].deckWinRate %></a></td>
</tr>
<%}%>
</tbody>
</table>
</div>
<br><br><br><br><br>
<div class="row">
<div class="col-md-6">
<a href="/menulist"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToMenuList" value="메뉴 선택으로 돌아가기" /></a>
</div>
<div class="col-md-6">
<a href="/select_opponent"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToSelectOpponent" value="상대 직업 선택으로 돌아가기" /></a>
</div>
</div>
</div>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="../../static/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Who Are You? - 하스스톤 멀리건 도우미</title>
<title>HearthCompare - 하스스톤 도우미</title>
<!-- 부트스트랩 -->
<link href="../../static/bootstrap-3.3.2-dist/css/bootstrap.min.css?ver=1" rel="stylesheet">
......@@ -23,16 +23,23 @@
type:'POST',
url:'/logout',
success:function(result){
alert('로그아웃 성공!')
alert('로그아웃에 성공하였습니다.\n로그인 화면으로 이동합니다.')
window.location.href='/'
},
error:function(result){
alert('로그아웃 실패!')
alert('로그아웃에 실패하였습니다.')
return false
}
})
})
for ( var i=0;i<decks.length;i++) {
$('#delButton_'+(i+1)).click(function () {
let sql = "select * from deck"
})
}
})
</script>
</head>
<body>
......@@ -45,7 +52,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/main">Who Are You?</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......@@ -62,14 +69,25 @@
<div class="container" style="width:50%;">
<div class="row">
<h3 class="form-signin-heading col-md-10" style="text-align: left;">내 덱 리스트</h3>
<a href="/newdeck"><input type="button" class="btn col-md-2" value="+" style="margin-top: 18px;" /></a>
</div>
<a href="/newdeck"><input type="button" class="btn col-md-2" value="+" style="margin-left: 345px;" /></a>
</div>
<br>
<table class="table">
<table class="table" style="width:100%">
<% for ( var i=0;i<decks.length;i++) { %>
<tr><td style="text-align: center;"><a class="list-group-item" href="/ingame/<%= decks[i].id %>"><%= decks[i].deckTitle %></a></td></tr>
<tr id="rm<%=(i+1)%>">
<td style="text-align: center; width:500px"><a class="list-group-item" href="/prob_result/<%= decks[i].id %>"><%= decks[i].deckTitle %></a></td>
<td><input type="button" class="btn btn-lg btn-info" style="width:100px; height:42px" value=삭제 id ="delButton_<%= (i+1)%> "/></td>
</tr>
<% } %>
</table>
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<a href="/menulist"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToMenuList" value="메뉴 선택으로 돌아가기" /></a>
</div>
</div>
</div>
......
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Who Are You? - 하스스톤 멀리건 도우미</title>
<title>HearthCompare - 하스스톤 도우미</title>
<!-- 부트스트랩 -->
<link href="../../static/bootstrap-3.3.2-dist/css/bootstrap.min.css?ver=1" rel="stylesheet">
......@@ -23,18 +23,15 @@
type:'POST',
url:'/logout',
success:function(result){
alert('로그아웃 성공!')
alert('로그아웃에 성공하였습니다.\n로그인 화면으로 이동합니다.')
window.location.href='/'
},
error:function(result){
alert('로그아웃 실패!')
alert('로그아웃에 실패하였습니다.')
return false
}
})
})
$('#backToSelectOpponent').click(function(){
window.history.back()
})
})
</script>
</head>
......@@ -48,11 +45,10 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Who Are You?</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav"></ul>
<div class="navbar-right">
<input type="button" class="btn navbar-btn" id="logoutButton" style="color:#000;" value="로그아웃" />
</div>
......@@ -60,57 +56,58 @@
</div>
</nav>
<div class="container show-grid" >
<div class="padding" style="width:100px"></div>
<br>
<br>
<h3 class="form-signin-heading">상대편의 주요 덱</h3>
<div class="container show-grid">
<div class="padding-top" style="width:100px"></div>
<br><br><br><br><br>
<h3 class="form-signin-heading">내 덱</h3>
<div id="opponentDecks">
<table class="table" style="text-align: center;">
<thead>
<td>덱 이름</td>
<td>플레이 수</td>
<td>덱 이름</td>
<td>승률</td>
</thead>
<tbody >
<% for(var i=0;i<decks.length;i++){%>
<tr>
<td><a class="list-group-item"><%= decks[i].deckTitle %></a></td>
<td><a class="list-group-item"><%= decks[i].deckGame %></a></td>
</tr>
<%}%>
<tbody>
<% for(var i=0;i<decks.length;i++){%>
<tr>
<td><a class="list-group-item"><%= decks[i].deckTitle %></a></td>
<td><a class="list-group-item"><%= decks[i].deckWinRate %></a></td>
</tr>
<%}%>
</tbody>
</table>
</div>
<br>
<br>
<h3 class="form-signin-heading">내 덱의 추천 멀리건</h3>
<h3 class="form-signin-heading">멀리건 승률</h3>
<div id="yourMulligan">
<table class="table" style="text-align: center;">
<thead>
<td>카드 이름</td>
<td>멀리건 승률</td>
</thead>
<tbody>
<% for(var i=0;i<cards.length;i++){%>
<tr>
<td><a class="list-group-item"><%= cards[i].cardName %></a></td>
<td><a class="list-group-item"><%= cards[i].cardWinRate %></a></td>
</tr>
<%}%>
</tbody>
</table>
</div>
<form method="get" action="/save.php">
<table class="table" style="text-align: center;">
<thead>
<td>카드 이름</td>
<td>멀리건 승률</td>
</thead>
<tbody>
<% for(var i=0;i<cards.length;i++){%>
<tr>
<td><input type="text" class="btn-block" name="keyword" style="height:42px; text-align:center;"/></td>
<td><a class="list-group-item"><%= cards[i].cardWinRate %></a></td>
</tr>
<%}%>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-block" id="show_prob">멀리건 승률 표출하기</button>
</form>
</div>
<br>
<br>
<div class="row">
<div class="col-md-6">
<a href="/decklist"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToDeckList" value="덱 선택으로 돌아가기" /></a>
<a href="/menulist"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToMenuList" value="메뉴 선택으로 돌아가기" /></a>
</div>
<div class="col-md-6">
<input class="btn btn-lg btn-primary btn-block" type="button" id="backToSelectOpponent" value="상대편 직업 선택으로 돌아가기"/>
<a href="/decklist"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToDeckList" value="내 덱 리스트로 돌아가기" /></a>
</div>
</div>
<div class="padding" style="width:100px"></div>
</div>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
......
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HearthCompare - 하스스톤 도우미</title>
<!-- 부트스트랩 -->
<link href="../../static/bootstrap-3.3.2-dist/css/bootstrap.min.css?ver=1" rel="stylesheet">
<link href="../../static/main.css" rel="stylesheet">
<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#logoutButton').click(function(){
$.ajax({
type:'POST',
url:'/logout',
success:function(result){
alert('로그아웃에 성공하였습니다.\n로그인 화면으로 이동합니다.')
window.location.href='/'
},
error:function(result){
alert('로그아웃에 실패하였습니다.')
return false
}
})
})
$('#showprob').click(function(){
var obj = new Object()
obj.value1 = $('#btn1').val()
obj.value2 = $('#btn2').val()
obj.value3 = $('#btn3').val()
const stringData = JSON.stringify(obj)
$.ajax({
type:'POST',
url:'/api/card/setopponentclass',
data:stringData,
dataType:'JSON',
contentType:'application/json; charset=utf-8',
traditional:true,
processdata:false,
success:function(result){
alert('검색 성공')
window.location.href='/score_result_'
},
error:function(request,status,error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
})
})
})
</script>
</head>
<body>
<nav class="navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-expanded="false" aria-controls="navbar" type="button" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav"></ul>
<div class="navbar-right">
<input type="button" class="btn navbar-btn" id="logoutButton" style="color:#000;" value="로그아웃" />
</div>
</div>
</div>
</nav>
<div class="container show-grid">
<div class="padding-top" style="width:100px"></div>
<br><br><br><br><br>
<h3 class="form-signin-heading">내 직업</h3>
<div id="opponentDecks">
<table class="table" style="text-align: center;">
<thead>
<td>직업</td>
</thead>
<tbody>
<tr>
<td><a class="list-group-item"><%= MineClass %></a></td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<h3 class="form-signin-heading">투기장 카드 점수</h3>
<div id="yourMulligan">
<table class="table" style="text-align: center;">
<thead>
<td>카드 이름</td>
<td>카드 점수</td>
</thead>
<tbody>
<tr>
<td><input type="text" class="btn-block" id="btn1" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">카드</a></td>
</tr>
<tr>
<td><input type="text" class="btn-block" id="btn2" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">이름</a></td>
</tr>
<tr>
<td><input type="text" class="btn-block" id="btn3" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">입력!!</a></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary btn-block" id="showprob">카드 점수 표출하기</button>
</div>
<br>
<br>
<div class="row">
<div class="col-md-6">
<a href="/menulist"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToMenuList" value="메뉴 선택으로 돌아가기" /></a>
</div>
<div class="col-md-6">
<a href="/select_mine"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToMine" value="내 직업 선택으로 돌아가기" /></a>
</div>
</div>
</div>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="../../static/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -48,7 +48,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">HearthCompare</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......
......@@ -45,7 +45,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/main">HearthCompare</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......
......@@ -45,7 +45,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/main">HearthCompare</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav"></ul>
......
......@@ -50,10 +50,12 @@
alert('덱 추가를 성공하였습니다.\n내 덱 리스트 화면으로 이동합니다.')
window.location.href='/decklist'
},
error:function(result){
alert(`덱 추가를 실패하였습니다.\nmessage:${result['message']}`)
return false
}
error:function(request,status,error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);}
//error:function(result){
// alert(`덱 추가를 실패하였습니다.\nmessage:${result['message']}`)
// return false
//}
})
})
})
......@@ -69,7 +71,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">HearthCompare</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......@@ -81,7 +83,7 @@
</div>
</nav>
<div class="container show-grid" >
<div class="container show-grid">
<div class="padding" style="width:100px"></div>
<div class="container" style="width:50%;">
<h3 class="form-signin-heading">덱 추가</h3>
......@@ -93,6 +95,16 @@
</form>
<input type="button" class="btn btn-primary btn-block" id="newDeckButton" value="확인" />
</div>
<br>
<br>
<div class="row">
<div class="col-md-6">
<a href="/menulist"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToMenuList" value="메뉴 선택으로 돌아가기" /></a>
</div>
<div class="col-md-6">
<a href="/decklist"><input class="btn btn-lg btn-primary btn-block" type="button" id="backToDeckList" value="내 덱 리스트로 돌아가기" /></a>
</div>
</div>
</div>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
......
......@@ -32,6 +32,9 @@
}
})
})
$('#show_prob').click(function(){
})
})
</script>
</head>
......@@ -78,31 +81,35 @@
<br>
<h3 class="form-signin-heading">멀리건 승률</h3>
<div id="yourMulligan">
<table class="table" style="text-align: center;">
<thead>
<td>카드 이름</td>
<td>멀리건 승률</td>
</thead>
<tbody>
<tr>
<td><a class="list-group-item">카드 이름</a></td>
<td><a class="list-group-item">60</a></td>
</tr>
<tr>
<td><a class="list-group-item">카드 이름</a></td>
<td><a class="list-group-item">59</a></td>
</tr>
<tr>
<td><a class="list-group-item">카드 이름</a></td>
<td><a class="list-group-item">58</a></td>
</tr>
<tr>
<td><a class="list-group-item">카드 이름</a></td>
<td><a class="list-group-item">57</a></td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-primary btn-block" id="newDeckButton" value="멀리건 승률 표출하기" />
<form method="get" action="/save.php">
<!-- method - 통신 방식의 메소드를 결정하며 get/post에서 선택함
action - 값을 전달할 서버 페이지 위치 -->
<table class="table" style="text-align: center;">
<thead>
<td>카드 이름</td>
<td>멀리건 승률</td>
</thead>
<tbody>
<tr>
<td><input type="text" class="btn-block" name="keyword" style="height:42px; text-align:center;"/></td>
<td><a class="list-group-item">60</a></td>
</tr>
<tr>
<td><input type="text" class="btn-block" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">59</a></td>
</tr>
<tr>
<td><input type="text" class="btn-block" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">58</a></td>
</tr>
<tr>
<td><input type="text" class="btn-block" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">57</a></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-block" id="show_prob">멀리건 승률 표출하기</button>
</form>
</div>
<br>
<br>
......
......@@ -32,6 +32,30 @@
}
})
})
$('#show_prob').click(function(){
var Data = new Object()
Data.value1 = $('#btn1').val()
Data.value2 = $('#btn2').val()
Data.value3 = $('#btn3').val()
const stringData = JSON.stringify(Data)
alert('검색중입니다!')
$.ajax({
typ:'GET',
url:'/api/card/getResultMine',
data:stringData,
dataType:'JSON',
contentType:'application/json; charset=utf-8',
traditional:true,
processdata:false,
success:function(result){
alert('검색 성공!')
},
error:function(result){
alert('검색 실패!')
return false
}
})
})
})
</script>
</head>
......@@ -45,7 +69,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">HearthCompare</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav"></ul>
......@@ -67,7 +91,7 @@
</thead>
<tbody>
<tr>
<td><a class="list-group-item">드루이드</a></td>
<td><a class="list-group-item"></a></td>
</tr>
</tbody>
</table>
......@@ -76,28 +100,31 @@
<br>
<h3 class="form-signin-heading">투기장 카드 점수</h3>
<div id="yourMulligan">
<table class="table" style="text-align: center;">
<thead>
<td>카드 이름</td>
<td>카드 점수</td>
</thead>
<tbody>
<tr>
<td><a class="list-group-item">카드 이름</a></td>
<td><a class="list-group-item">60</a></td>
</tr>
<tr>
<td><a class="list-group-item">카드 이름</a></td>
<td><a class="list-group-item">59</a></td>
</tr>
<tr>
<td><a class="list-group-item">카드 이름</a></td>
<td><a class="list-group-item">58</a></td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-primary btn-block" id="newDeckButton" value="카드 점수 표출하기" />
<form method="get" action="/save.php">
<!-- method - 통신 방식의 메소드를 결정하며 get/post에서 선택함
action - 값을 전달할 서버 페이지 위치 -->
<table class="table" style="text-align: center;">
<thead>
<td>카드 이름</td>
<td>카드 점수</td>
</thead>
<tbody>
<tr>
<td><input type="text" class="btn-block" id="btn1" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">0</a></td>
</tr>
<tr>
<td><input type="text" class="btn-block" id="btn2" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">0</a></td>
</tr>
<tr>
<td><input type="text" class="btn-block" id="btn3" name="keyword" style="height:42px; text-align:center;" /></td>
<td><a class="list-group-item">0</a></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-block" id="show_prob">카드 점수 표출하기</button>
</form>
</div>
<br>
<br>
......
......@@ -37,17 +37,16 @@
let opponentClass=$('input[name="checkOpponent"]:checked').val()
data.opponentClass=opponentClass
const stringData = JSON.stringify(data)
alert('')
$.ajax({
type:'POST',
url:'/api/card/setopponentclass',
url:'/api/card/setOpponentClass',
data:stringData,
dataType:'JSON',
contentType:'application/json; charset=utf-8',
traditional:true,
processdata:false,
success:function(){
window.location.href='/deck_result'
window.location.href='/score_result'
},
error:function(){
alert('내 직업 선택에 실패했습니다.')
......@@ -68,7 +67,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">HearthCompare</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......
......@@ -68,7 +68,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">HearthCompare</a>
<a class="navbar-brand" href="/menulist">HearthCompare</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav"></ul>
......