2019-1-OpenSourceSW / WhoAreYou

Go to a project
Toggle navigation Toggle navigation pinning
서주원
ea149de5 1 parent bd93a7e5

publish newdecks.html and showdeck.html

Inline Side-by-side
Showing 8 changed files with 186 additions and 6 deletions
......@@ -32,7 +32,10 @@ app.get('/',(req,res)=>{
})
app.get('/main',(req,res)=>{
if(!req.session.sid)
res.redirect('/login')
else {
fs.readFile('./views/main')
res.writeHead(200,{'Content-Type':'text/html'})
res.writeHead(200, {'Content-Type': 'text/html'})
}
})
\ No newline at end of file
......
<!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>Who Are You? - 하스스톤 멀리건 도우미</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]-->
</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="/main">Who Are You?</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">
<a href="#"><button class="btn navbar-btn" style="color:#000;">로그아웃</button></a>
</div>
</div>
</div>
</nav>
<div class="container show-grid" >
<div class="padding" style="width:100px"></div>
<div class="container" style="width:50%;">
<div class="row">
<h3 class="form-signin-heading col-md-10" style="text-align: left;">내 덱 리스트</h3>
<input type="button" class="btn col-md-2" value="+" style="margin-top: 18px;" />
</div>
<br>
<table class="table">
<tr><td style="text-align: center;"><a class="list-group-item" href="#">덱 이름</a></td></tr>
<tr><td style="text-align: center;"><a class="list-group-item" href="#">덱 이름</a></td></tr>
</table>
</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
......@@ -26,7 +26,7 @@
<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="/main">Who Are You?</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......
......@@ -26,7 +26,7 @@
<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="/main">Who Are You?</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......
......@@ -26,7 +26,7 @@
<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="/main">Who Are You?</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......
<!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>Who Are You? - 하스스톤 멀리건 도우미</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]-->
</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="/main">Who Are You?</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">
<a href="#"><button class="btn navbar-btn" style="color:#000;">로그아웃</button></a>
</div>
</div>
</div>
</nav>
<div class="container show-grid" >
<div class="padding" style="width:100px"></div>
<div class="container" style="width:50%;">
<h3 class="form-signin-heading">덱 추가</h3>
<label class="sr-only" for="deckTitle">덱 이름</label>
<input class="form-control" id="deckTitle" autofocus="" required="" type="text" placeholder="덱 이름" name="userId">
<label class="sr-only" for="deckCode">덱 코드</label>
<textarea class="form-control" id="deckCode" required="" placeholder="덱 코드" name="password" style="resize:none;height:150px;"></textarea>
<input type="button" class="btn btn-primary btn-block" value="확인" />
</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
......@@ -26,7 +26,7 @@
<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="/main">Who Are You?</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
......
1. 목적 : 사용자가 게임 시작 시, 직업만 선택하면 상위 픽률 3개의 덱타입을 알려줌. 사용자의 덱 정보를 바탕으로 어떤 카드를 멀리건으로 잡을때, 승률이 높은지, 5개의 카드를 알려줌.
2. 작동 순서
1) 회원가입
2) 로그인
3) 덱 선택
4-1) 덱 등록
4-2) 덱 삭제
5) 상대 직업 선택
6) 멀리건 추천
7) 로그아웃
3. 구현 방법 (2번 참고)
1) db에 저장
2) db에서 불러오기, 세션 유지
3) 덱 이름, 덱 코드 변환 (deck.code 파싱), db에 저장
4-1) db에서 가져오기, 세션 유지
4-2) db에서 삭제시키기
5) hsreplay.net 파싱
6) hsreplay.net 파싱
7) 세션 삭제
4. 필요한 페이지
1) 로그인 페이지
2) 회원가입 페이지
3) 메인 페이지 (덱 추가/게임 시작)
4) 덱 리스트 출력 및 선택
5) 덱 리스트 추가
6) 덱 리스트 삭제
7) 상대 덱 선택
8) 상위 픽률 3개의 덱 출력
9) 멀리건 5개 출력
5. 해결해야 할 문제
1) MySQL 배우기(row 추가, 변경, 삭제)
2) deck.code에서 가져 올 수 있는 정보는 직업, 덱에 들어간 카드의 영어 이름, 갯수만 나옴. -> hsreplay.net의 덱들과 매치시키는 문제 => hsreplay에
3) 상대의 직업을 안다고 해도, 어그로, 미드레인지, 컨트롤 구분하기 힘듦. => 추천
6. 기술스택
웹프론트: html+css+javascript+ejs
웹서버 : node.js express
데이터베이스 : mySQL
7. 데이터 정보
<User>
userId(string): 유저의 ID
password(string): 유저의 비밀번호
decks(Array): 덱 리스트
<Deck>
deckTitle(string): 덱의 이름
deckClass(string): 덱의 직업
deckCode(string): 덱 코드
cards(Array): 카드 리스트
<Card>
cardClass(string): 카드의 직업
cardCost(Number): 카드의 코스트
cardName(string): 카드의 이름
cardNum(Number): 카드의 개수
\ No newline at end of file