Skip to content

Commit 36d5d0a

Browse files
HelloWorld017HelloWorld017
committed
로그인 페이지 업데이트, 렌더 스크립트 작성중
1 parent 8eafa76 commit 36d5d0a

File tree

13 files changed

+390
-70
lines changed

13 files changed

+390
-70
lines changed

‎bower.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
],
1414
"dependencies": {
1515
"semantic": "semantic-ui#^2.1.8",
16-
"mdi": "^1.6.50"
16+
"mdi": "^1.6.50",
17+
"bootstrap": "^3.3.7",
18+
"socket.io-client": "socketio/socket.io-client#^1.4.8"
1719
},
1820
"homepage": "https://github.com/if-Team/Strategy-Yut",
1921
"private": true,

‎public/resources/css/login.css

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
2+
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);
3+
4+
* :not([class^=mdi]){
5+
-webkit-box-sizing: border-box;
6+
-moz-box-sizing: border-box;
7+
box-sizing: border-box;
8+
font-family: 'Ubuntu', 'Roboto', 'Noto Sans KR', sans-serif !important;
9+
}
10+
11+
.row {
12+
margin-left: auto;
13+
margin-right: auto;
14+
margin-bottom: 20px;
15+
}
16+
17+
#top {
18+
position: relative;
19+
top: 11px
20+
}
21+
22+
main {
23+
padding-left: 2rem;
24+
padding-right: 2rem
25+
}
26+
27+
.section {
28+
padding-top: 1rem;
29+
padding-bottom: 1rem;
30+
}
31+
32+
h2 .mdi {
33+
font-size: 1.5em
34+
}
35+
36+
.item .mdi {
37+
font-size: 1.5em
38+
}
39+
40+
.grid {
41+
width: 100%;
42+
text-align: center;
43+
}
44+
/* Footer */
45+
/*.footer {
46+
position: relative;
47+
background: #F1F1F1;
48+
padding: 24px 0;
49+
border-top: 1px solid #d9d9d9;
50+
bottom: 0;
51+
left: 0;
52+
right: 0;
53+
}
54+
*/
55+
.credit {
56+
margin: 0 auto;
57+
text-align: center;
58+
}
59+
60+
.unbold {
61+
font-weight: normal;
62+
color: black;
63+
}
64+
65+
.brand.blue.item img {
66+
width:40px;
67+
height:auto;
68+
margin-left:1.5em
69+
}
70+
71+
@media (min-width: 1200px){
72+
.container {
73+
width: 1170px;
74+
}
75+
}
76+
@media (min-width: 992px){
77+
.container {
78+
width: 970px;
79+
}
80+
}
81+
@media (min-width: 768px){
82+
.container {
83+
width: auto;
84+
}
85+
}
86+
87+
.mobile-only, .desktop-only, .tablet-only {
88+
display: none !important;
89+
}
90+
91+
@media (max-width: 768px ) {
92+
.mobile-hidden {
93+
display: none !important;
94+
width: 0 !important;
95+
height: 0 !important;
96+
opacity: 0 !important;
97+
overflow: hidden !important;
98+
}
99+
100+
.mobile-only {
101+
display: flex !important;
102+
}
103+
}
104+
105+
@media (min-width: 768px) and (max-width: 991px) {
106+
.tablet-only {
107+
display: flex !important;
108+
}
109+
}
110+
111+
@media (min-width: 991px) {
112+
.desktop-only {
113+
display: flex !important;
114+
}
115+
}
116+
117+
.mdi {
118+
/* Prevention of 'Icons' font */
119+
font-family: "Material Design Icons" !important;
120+
}
121+
122+
.wrap {
123+
padding: 5px 0;
124+
}
125+
126+
.row-container {
127+
margin-left: 0;
128+
margin-right: 0;
129+
}
130+
131+
.footer .col {
132+
padding: 10px 0 20px;
133+
}
134+
135+
.chalkboard {
136+
color: #008000 !important;
137+
}
138+
139+
body {
140+
background-color: #DADADA;
141+
}
142+
143+
body > .grid {
144+
height: 100%;
145+
}
146+
147+
.image {
148+
margin-top: -100px;
149+
}
150+
151+
.column {
152+
margin-top: 37px;
153+
max-width: 450px;
154+
}
155+
156+
.account {
157+
min-height: 450px;
158+
display: table;
159+
width: 100%;
160+
}
161+
162+
.account-contents {
163+
display: table-cell;
164+
vertical-align: middle;
165+
}
166+
167+
@media (max-width: 768px){
168+
.account {
169+
min-height: initial;
170+
}
171+
172+
.account-layout {
173+
margin-top: 50px !important;
174+
}
175+
176+
.account-segment, .account-layout {
177+
width: 100vw !important;
178+
padding: 0 !important;
179+
}
180+
181+
/* to override !important */
182+
div.account-layout > div.account-segment > div.ui.container.account-container {
183+
width: 100vw !important;
184+
margin-left: 0 !important;
185+
margin-right: 0 !important;
186+
}
187+
body > .grid {
188+
height: initial;
189+
}
190+
191+
.footer {
192+
top:7.5em
193+
}

‎resources/img/logo.svg renamed to ‎public/resources/img/logo.svg

File renamed without changes.

‎public/resources/js/board.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
var board = [];
2+
3+
var Tile = function(x, y, connected){
4+
this.x = x;
5+
this.y = y;
6+
this.connected = connected;
7+
};
8+
9+
board[0] = new Tile(87, 96, [1]);
10+
board[1] = new Tile(87, 79, [2]);
11+
board[2] = new Tile(87, 63, [3]);
12+
board[3] = new Tile(87, 46, [4]);
13+
board[4] = new Tile(87, 29, [5]);
14+
board[5] = new Tile(87, 13, [6, 9]);
15+
board[6] = new Tile(71, 29, [7]);
16+
board[7] = new Tile(54, 46, [8, 14]);
17+
board[8] = new Tile(37, 63, [18]);
18+
board[9] = new Tile(71, 13, [10]);
19+
board[10] = new Tile(54, 13, [11]);
20+
board[11] = new Tile(37, 13, [12]);
21+
board[12] = new Tile(21, 13, [13, 15]);
22+
board[13] = new Tile(37, 29, [7]);
23+
board[14] = new Tile(71, 63, [1]);
24+
board[15] = new Tile(21, 29, [16]);
25+
board[16] = new Tile(21, 46, [17]);
26+
board[17] = new Tile(21, 63, [18]);
27+
board[18] = new Tile(21, 79, [19]);
28+
board[19] = new Tile(37, 79, [20]);
29+
board[20] = new Tile(54, 79, [21]);
30+
board[21] = new Tile(71, 79, [1]);

‎public/resources/js/render.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
var _canvas = $('canvas');
2+
var canvas = _canvas[0];
3+
var ctx = canvas.getContext('2d');
4+
var boardThings = [];
5+
var radius = 4;
6+
var size = Math.round((_canvas.height() < _canvas.width()) ? _canvas.height() : _canvas.width());
7+
var minX = Math.round((_canvas.width() - size) / 2);
8+
var maxX = minX + size;
9+
var minY = Math.round((_canvas.height() - size) / 2);
10+
var maxY = minY + size;
11+
var m = size / 100;
12+
var game = undefined;
13+
var socket = io();
14+
15+
socket.emit('status');
16+
socket.on('status', (data) => {
17+
game = data;
18+
});
19+
20+
function readBoard(){
21+
var visited = [];
22+
var iterate = function(i){
23+
var t = board[i];
24+
visited.push(i);
25+
boardThings.push(['c', t.x, t.y]);
26+
t.connected.forEach(function(v){
27+
boardThings.push(['l', t.x, t.y, board[v].x, board[v].y]);
28+
if(visited.indexOf(v) === -1) iterate(v);
29+
});
30+
};
31+
iterate(0);
32+
}
33+
34+
function drawBoard(){
35+
ctx.lineWidth = 5;
36+
ctx.strokeStyle = "#fff";
37+
boardThings.forEach(function(v){
38+
if(v[0] === 'c'){
39+
ctx.beginPath();
40+
ctx.arc(minX + v[1] * m, minY + v[2] * m, radius * m, 0, Math.PI * 2);
41+
ctx.stroke();
42+
ctx.closePath();
43+
}else{
44+
ctx.beginPath();
45+
ctx.moveTo(minX + v[1] * m, minY + v[2] * m);
46+
ctx.lineTo(minX + v[3] * m, minY + v[4] * m);
47+
ctx.stroke();
48+
ctx.closePath();
49+
}
50+
});
51+
}
52+
53+
function render(){
54+
ctx.clearRect(0, 0, canvas.width, canvas.height);
55+
drawBoard();
56+
}
57+
58+
function pieces(){
59+
60+
}
61+
62+
canvas.width = _canvas.width();
63+
canvas.height = _canvas.height();
64+
readBoard();
65+
render();

‎routes/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ router.post('/login', (req, res, next) => {
3434
var name = req.body.name;
3535
var pw = req.body.pw;
3636

37-
if(name === undefined || pw === undefined) return next(_(400, 'ID와 비밀번호를 입력하여 주세요!'));
37+
if(name === undefined) return next(_(400, 'ID를 입력하여 주세요!'));
3838
if(!/^[a-zA-Z0-9]{5,20}$/.test(name)) return next(_(400, 'ID에 부적절한 문자열이 들어있거나 너무 짧거나 깁니다!'));
3939
if(config.registered[name] !== undefined && config.registered[name] !== pw) return next(_(403, '이 ID는 게임 참가자의 ID이지만, 비밀번호가 다릅니다!'));
4040

‎src/game.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,9 @@ class CenterTile extends Tile{
7878
}
7979

8080
class Player{
81-
constructor(name, teamIndex){
81+
constructor(name, teamIndex, color){
8282
this.name = name;
83+
this.color = color;
8384
this.teamIndex = teamIndex;
8485
this.pieces = [new Piece(this, 0), new Piece(this, 1)];
8586
this.socket = undefined;

‎src/network/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ module.exports = [
44
require('./log-all'),
55
require('./log-team'),
66
require('./select-piece'),
7-
require('./select-yut')
7+
require('./select-yut'),
8+
require('./status');
89
];

‎src/network/status.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var UserPacket = require('./user-packet');
2+
3+
class StatusPacket extends UserPacket{
4+
constructor(){
5+
super('status', (username, socket) => {
6+
socket.emit('status', Object.keys(game.players).map((k) => {
7+
var p = game.players[k];
8+
return {
9+
name: k,
10+
color: p.color,
11+
pieces: p.pieces.map((v) => {
12+
return {
13+
pos: v.pos,
14+
finished: v.finished,
15+
index: v.pieceIndex
16+
};
17+
}),
18+
team: p.teamIndex
19+
};
20+
}));
21+
});
22+
}
23+
}
24+
25+
module.exports = StatusPacket;

‎src/prevent-injection.js

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
var async = require('async');
22

33
module.exports = (req, resp, next) => {
4-
var checkValue = (v, cb) => {
5-
if(typeof v === 'boolean') v = (v ? 1 : 0);
6-
cb(null, (typeof v === 'string' || typeof v === 'number') ? v : '');
7-
};
84
//Anti SQL Injection
9-
async.each(['body', 'query', 'params', 'cookies'], (k, cb) => {
10-
async.map(req[k], checkValue, (err, res) => {
11-
req[k] = res;
12-
cb();
5+
['body', 'query', 'params', 'cookies'].forEach((k) => {
6+
Object.keys(req[k]).forEach((k2) => {
7+
var v = req[k][k2];
8+
if(typeof v === 'boolean') v = (v ? 1 : 0);
9+
req[k][k2] = (typeof v === 'string' || typeof v === 'number') ? v : '';
1310
});
14-
}, (err) => {
15-
next();
1611
});
12+
next();
1713
};

‎views/css/login.css

Whitespace-only changes.

0 commit comments

Comments
 (0)