이성주 / WhoAreYou

Go to a project
Toggle navigation Toggle navigation pinning
서주원
3e1706e6 1 parent a3f32d43

add some lines to app.js, publish login.html and signup.html

Expand all
Inline Side-by-side
Showing 22 changed files with 323 additions and 3 deletions
.idea
node_modules
\ No newline at end of file
node_modules
¼ҽSW Ʈ.txt
\ No newline at end of file
......
......@@ -4,4 +4,35 @@ const fs=require('fs')
const session=require('express-session')
const path=require('path')
const bcrypt=require('bcrypt-nodejs')
const app=express()
\ No newline at end of file
const rp=require('request-promise')
const morgan=require('morgan')
const cheerio=require('cheerio')
const app=express()
app.use(morgan('[:date[iso]] :method :status :url :response-time(ms) :user-agent'))
app.use(express.static(path.join(__dirname, '/static')))
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH')
res.header('Access-Control-Allow-Headers', 'content-type, x-access-token')
next()
})
app.use(session({
secret:'ambc@!vsmkv#!&*!#EDNAnsv#!$()_*#@',
resave:false,
saveUninitialized:true
}))
app.get('/',(req,res)=>{
res.redirect('/main')
})
app.get('/main',(req,res)=>{
fs.readFile('./views/main')
res.writeHead(200,{'Content-Type':'text/html'})
})
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -15,9 +15,12 @@
"dependencies": {
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.18.3",
"cheerio": "^1.0.0-rc.2",
"express": "^4.16.4",
"express-session": "^1.15.6",
"fs": "0.0.1-security",
"path": "^0.12.7"
"morgan": "^1.9.1",
"path": "^0.12.7",
"request-promise": "^4.2.2"
}
}
......
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
\ No newline at end of file
body
{
background-color:white;
font-family:"맑은 고딕",verdana,굴림;
}
h1
{
color:#4C4C4C;
text-align:center;
font-size:60px;
font-weight:bold;
}
h3.form-signin-heading
{
color:#4C4C4C;
text-align:center;
font-weight:bold;
}
p
{
font-family:verdana,맑은 고딕;
font-size:20px;
}
p.lead
{
text-align:center;
font-family:verdana,맑은 고딕;
font-size:30px;
font-weight:bold;
color:#A6A6A6;
}
form.form-signin
{
max-width:500px;
margin: auto;
}
table
{
border-collapse:separate;
margin:auto;
font-size:auto;
}
th
{
text-align:center;
background-color:#EAEAEA;
}
td
{
padding:0px !important;
height:4px !important;
width:100px;
}
td.first
{
font-size:15px;
font-weight:bold;
text-align:center;
vertical-align:middle !important;
background-color:#B2CCFF;
}
div.padding
{
padding-top:150px;
}
div.grid
{
display:block;
height:50px;
line-height:50px;
box-sizing:border-box;
border-top:1px solid #EAEAEA;
}
div.box
{
font-size:32px;
border:2px solid black;
border-radius:5px;
padding-top:10px;
padding-bottom:10px;
}
input.search
{
margin-bottom:5px;
border-width:5px;
border-color:#EAEAEA;
}
\ 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="#">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"></div>
<form class="form-signin" id="loginForm">
<h3 class="form-signin-heading">로그인</h3>
<label class="sr-only" for="userId">아이디</label>
<input class="form-control" id="userId" autofocus="" required="" type="text" placeholder="아이디" name="userId">
<label class="sr-only" for="password">비밀번호</label>
<input class="form-control" id="password" required="" type="password" placeholder="비밀번호" name="password">
<br>
<div class="col-md-6">
<input class="btn btn-lg btn-primary btn-block" type="button" id="loginButton" value="로그인" />
</div>
<div class="col-md-6">
<input class="btn btn-lg btn-primary btn-block" type="button" id="goSignup" value="회원가입" />
</div>
</form>
</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
<!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?after" 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?after"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js?after"></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="#">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">
<div class="padding"></div>
<form class="form-signin" id="loginForm">
<h3 class="form-signin-heading">회원가입</h3>
<label class="sr-only" for="userId">아이디</label>
<input class="form-control" id="userId" autofocus="" required="" type="text" placeholder="아이디" name="userId">
<label class="sr-only" for="password">비밀번호</label>
<input class="form-control" id="password" required="" type="password" placeholder="비밀번호" name="password">
<label class="sr-only" for="repeatPassword">비밀번호</label>
<input class="form-control" id="repeatPassword" required="" type="password" placeholder="비밀번호 확인" name="repeatPassword">
<br>
<input class="btn btn-lg btn-primary btn-block" type="button" id="signupButton" value="회원가입" />
</form>
</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
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