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)=>{ ...@@ -32,7 +32,10 @@ app.get('/',(req,res)=>{
32 }) 32 })
33 33
34 app.get('/main',(req,res)=>{ 34 app.get('/main',(req,res)=>{
35 + if(!req.session.sid)
36 + res.redirect('/login')
37 + else {
35 fs.readFile('./views/main') 38 fs.readFile('./views/main')
36 - res.writeHead(200,{'Content-Type':'text/html'}) 39 + res.writeHead(200, {'Content-Type': 'text/html'})
37 - 40 + }
38 }) 41 })
...\ No newline at end of file ...\ No newline at end of file
......
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="utf-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width, initial-scale=1">
7 + <title>Who Are You? - 하스스톤 멀리건 도우미</title>
8 +
9 + <!-- 부트스트랩 -->
10 + <link href="../../static/bootstrap-3.3.2-dist/css/bootstrap.min.css?ver=1" rel="stylesheet">
11 + <link href="../../static/main.css" rel="stylesheet">
12 + <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
13 + <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
14 + <!--[if lt IE 9]>
15 + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
16 + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
17 + <![endif]-->
18 +</head>
19 +<body>
20 + <nav class="navbar-default navbar-fixed-top">
21 + <div class="container">
22 + <div class="navbar-header">
23 + <button class="navbar-toggle collapsed" aria-expanded="false" aria-controls="navbar" type="button" data-toggle="collapse" data-target="#navbar">
24 + <span class="sr-only">Toggle navigation</span>
25 + <span class="icon-bar"></span>
26 + <span class="icon-bar"></span>
27 + <span class="icon-bar"></span>
28 + </button>
29 + <a class="navbar-brand" href="/main">Who Are You?</a>
30 + </div>
31 + <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
32 + <ul class="nav navbar-nav">
33 + </ul>
34 + <div class="navbar-right">
35 + <a href="#"><button class="btn navbar-btn" style="color:#000;">로그아웃</button></a>
36 + </div>
37 + </div>
38 + </div>
39 + </nav>
40 +
41 + <div class="container show-grid" >
42 + <div class="padding" style="width:100px"></div>
43 + <div class="container" style="width:50%;">
44 + <div class="row">
45 + <h3 class="form-signin-heading col-md-10" style="text-align: left;">내 덱 리스트</h3>
46 + <input type="button" class="btn col-md-2" value="+" style="margin-top: 18px;" />
47 + </div>
48 + <br>
49 + <table class="table">
50 + <tr><td style="text-align: center;"><a class="list-group-item" href="#">덱 이름</a></td></tr>
51 + <tr><td style="text-align: center;"><a class="list-group-item" href="#">덱 이름</a></td></tr>
52 + </table>
53 + </div>
54 + </div>
55 +
56 + <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
57 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
58 + <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
59 + <script src="../../static/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
60 +</body>
61 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 <span class="icon-bar"></span> 26 <span class="icon-bar"></span>
27 <span class="icon-bar"></span> 27 <span class="icon-bar"></span>
28 </button> 28 </button>
29 - <a class="navbar-brand" href="#">Who Are You?</a> 29 + <a class="navbar-brand" href="/main">Who Are You?</a>
30 </div> 30 </div>
31 <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;"> 31 <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
32 <ul class="nav navbar-nav"> 32 <ul class="nav navbar-nav">
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 <span class="icon-bar"></span> 26 <span class="icon-bar"></span>
27 <span class="icon-bar"></span> 27 <span class="icon-bar"></span>
28 </button> 28 </button>
29 - <a class="navbar-brand" href="#">Who Are You?</a> 29 + <a class="navbar-brand" href="/main">Who Are You?</a>
30 </div> 30 </div>
31 <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;"> 31 <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
32 <ul class="nav navbar-nav"> 32 <ul class="nav navbar-nav">
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 <span class="icon-bar"></span> 26 <span class="icon-bar"></span>
27 <span class="icon-bar"></span> 27 <span class="icon-bar"></span>
28 </button> 28 </button>
29 - <a class="navbar-brand" href="#">Who Are You?</a> 29 + <a class="navbar-brand" href="/main">Who Are You?</a>
30 </div> 30 </div>
31 <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;"> 31 <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
32 <ul class="nav navbar-nav"> 32 <ul class="nav navbar-nav">
......
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="utf-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width, initial-scale=1">
7 + <title>Who Are You? - 하스스톤 멀리건 도우미</title>
8 +
9 + <!-- 부트스트랩 -->
10 + <link href="../../static/bootstrap-3.3.2-dist/css/bootstrap.min.css?ver=1" rel="stylesheet">
11 + <link href="../../static/main.css" rel="stylesheet">
12 + <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
13 + <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
14 + <!--[if lt IE 9]>
15 + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
16 + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
17 + <![endif]-->
18 +</head>
19 +<body>
20 + <nav class="navbar-default navbar-fixed-top">
21 + <div class="container">
22 + <div class="navbar-header">
23 + <button class="navbar-toggle collapsed" aria-expanded="false" aria-controls="navbar" type="button" data-toggle="collapse" data-target="#navbar">
24 + <span class="sr-only">Toggle navigation</span>
25 + <span class="icon-bar"></span>
26 + <span class="icon-bar"></span>
27 + <span class="icon-bar"></span>
28 + </button>
29 + <a class="navbar-brand" href="/main">Who Are You?</a>
30 + </div>
31 + <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
32 + <ul class="nav navbar-nav">
33 + </ul>
34 + <div class="navbar-right">
35 + <a href="#"><button class="btn navbar-btn" style="color:#000;">로그아웃</button></a>
36 + </div>
37 + </div>
38 + </div>
39 + </nav>
40 +
41 + <div class="container show-grid" >
42 + <div class="padding" style="width:100px"></div>
43 + <div class="container" style="width:50%;">
44 + <h3 class="form-signin-heading">덱 추가</h3>
45 + <label class="sr-only" for="deckTitle">덱 이름</label>
46 + <input class="form-control" id="deckTitle" autofocus="" required="" type="text" placeholder="덱 이름" name="userId">
47 + <label class="sr-only" for="deckCode">덱 코드</label>
48 + <textarea class="form-control" id="deckCode" required="" placeholder="덱 코드" name="password" style="resize:none;height:150px;"></textarea>
49 + <input type="button" class="btn btn-primary btn-block" value="확인" />
50 + </div>
51 + </div>
52 +
53 + <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
54 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
55 + <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
56 + <script src="../../static/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
57 +</body>
58 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 <span class="icon-bar"></span> 26 <span class="icon-bar"></span>
27 <span class="icon-bar"></span> 27 <span class="icon-bar"></span>
28 </button> 28 </button>
29 - <a class="navbar-brand" href="#">Who Are You?</a> 29 + <a class="navbar-brand" href="/main">Who Are You?</a>
30 </div> 30 </div>
31 <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;"> 31 <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" style="height: 1px;">
32 <ul class="nav navbar-nav"> 32 <ul class="nav navbar-nav">
......
1 +1. 목적 : 사용자가 게임 시작 시, 직업만 선택하면 상위 픽률 3개의 덱타입을 알려줌. 사용자의 덱 정보를 바탕으로 어떤 카드를 멀리건으로 잡을때, 승률이 높은지, 5개의 카드를 알려줌.
2 +
3 +2. 작동 순서
4 +1) 회원가입
5 +2) 로그인
6 +3) 덱 선택
7 +4-1) 덱 등록
8 +4-2) 덱 삭제
9 +5) 상대 직업 선택
10 +6) 멀리건 추천
11 +7) 로그아웃
12 +
13 +3. 구현 방법 (2번 참고)
14 +1) db에 저장
15 +2) db에서 불러오기, 세션 유지
16 +3) 덱 이름, 덱 코드 변환 (deck.code 파싱), db에 저장
17 +4-1) db에서 가져오기, 세션 유지
18 +4-2) db에서 삭제시키기
19 +5) hsreplay.net 파싱
20 +6) hsreplay.net 파싱
21 +7) 세션 삭제
22 +
23 +4. 필요한 페이지
24 +1) 로그인 페이지
25 +2) 회원가입 페이지
26 +3) 메인 페이지 (덱 추가/게임 시작)
27 +4) 덱 리스트 출력 및 선택
28 +5) 덱 리스트 추가
29 +6) 덱 리스트 삭제
30 +7) 상대 덱 선택
31 +8) 상위 픽률 3개의 덱 출력
32 +9) 멀리건 5개 출력
33 +
34 +5. 해결해야 할 문제
35 +1) MySQL 배우기(row 추가, 변경, 삭제)
36 +2) deck.code에서 가져 올 수 있는 정보는 직업, 덱에 들어간 카드의 영어 이름, 갯수만 나옴. -> hsreplay.net의 덱들과 매치시키는 문제 => hsreplay에
37 +3) 상대의 직업을 안다고 해도, 어그로, 미드레인지, 컨트롤 구분하기 힘듦. => 추천
38 +
39 +6. 기술스택
40 +웹프론트: html+css+javascript+ejs
41 +웹서버 : node.js express
42 +데이터베이스 : mySQL
43 +
44 +7. 데이터 정보
45 +<User>
46 +userId(string): 유저의 ID
47 +password(string): 유저의 비밀번호
48 +decks(Array): 덱 리스트
49 +<Deck>
50 +deckTitle(string): 덱의 이름
51 +deckClass(string): 덱의 직업
52 +deckCode(string): 덱 코드
53 +cards(Array): 카드 리스트
54 +<Card>
55 +cardClass(string): 카드의 직업
56 +cardCost(Number): 카드의 코스트
57 +cardName(string): 카드의 이름
58 +cardNum(Number): 카드의 개수
...\ No newline at end of file ...\ No newline at end of file