diff --git a/app.js b/app.js index 7d04e38..6ddff36 100644 --- a/app.js +++ b/app.js @@ -93,19 +93,15 @@ io.on('connection',function(socket){ rooms[url] = new Object(); rooms[url].title = data.title; rooms[url].url = url; - rooms[url].last_turn = ""; - rooms[url].passwd = data.passwd; + rooms[url].last_turn = "black"; + rooms[url].password = data.password; rooms[url].username = socket.username; rooms[url].state = "ready"; rooms[url].time = getTime(); rooms[url].user_list = new Object(); - //방목록 업데이트 - var roomList = new Array(); - for(var room in rooms){ - roomList.push(rooms[room]); - } - io.sockets.in('lobby').emit('list_room',{rooms:roomList}); + //클라이언트에게 추가된방 전송 + io.sockets.in('lobby').emit('add_list_room',{room:rooms[url]}); //방생성 결과 응답 socket.emit('res_create_room', {result:true, url:url}); @@ -123,7 +119,8 @@ io.on('connection',function(socket){ if(rooms[url] != undefined) { - if(Object.keys(rooms[url].user_list).length) + if(rooms[url].state == "start") + socket.room = url; socket.join(url); socket.username = data.username; @@ -149,14 +146,14 @@ io.on('connection',function(socket){ //게임상황 업데이트 io.sockets.in(url).emit('state_game', {state:rooms[url].state,time:getTime()}); - //유저목록 업데이트 + //유저목록 추가 var userList = new Array(); for(var user in rooms[url].user_list){ if (rooms[url].user_list.hasOwnProperty(user)) { userList.push(rooms[url].user_list[user]); } } - io.sockets.in(url).emit('user_list', {users:userList}); + io.sockets.in(url).emit('room_user_list', {users:userList}); }else{ console.log("!! 존재하지않는 방"); io.sockets.in(url).emit('init_game', {result:false}); @@ -195,31 +192,24 @@ io.on('connection',function(socket){ socket.on('disconnect', function(){ console.log("socket disconnect current room : "+ socket.room); if(socket.room != undefined && socket.room != "lobby"){ - delete rooms[socket.room].user_list[socket.id]; - io.sockets.in(socket.room).emit('broadcast_msg', {msg:socket.username+"님이 퇴장하였습니다.",type:"system",time:getTime()}); //게임상황 업데이트 - rooms[socket.room].state = "stop"; - io.sockets.in(socket.room).emit('state_game', {state:rooms[socket.room].state,time:getTime()}); + if(rooms[socket.room].user_list[socket.id].type == "black" || rooms[socket.room].user_list[socket.id].type == "white"){ + rooms[socket.room].state = "stop"; + io.sockets.in(socket.room).emit('state_game', {state:rooms[socket.room].state,time:getTime()}); + } //유저목록 업데이트 - var userList = new Array(); - for(var user in rooms[socket.room].user_list){ - if (rooms[socket.room].user_list.hasOwnProperty(user)) { - userList.push(rooms[socket.room].user_list[user]); - } - } - io.sockets.in(socket.room).emit('user_list', {users:userList}); + delete rooms[socket.room].user_list[socket.id]; + io.sockets.in(socket.room).emit('del_room_user', {type:rooms[socket.room].user_list[socket.id].type}); + + io.sockets.in(socket.room).emit('broadcast_msg', {msg:socket.username+"님이 퇴장하였습니다.",type:"system",time:getTime()}); //유저가 아무도 없을시 방 없애기 if(Object.keys(rooms[socket.room].user_list).length == 0){ delete rooms[socket.room]; //방목록 업데이트 - var roomList = new Array(); - for(var room in rooms){ - roomList.push(rooms[room]); - } - io.sockets.in('lobby').emit('list_room',{rooms:roomList}); + io.sockets.in('lobby').emit('del_list_room',{url:socket.room}); } socket.room = null; diff --git a/public/css/global-style.css b/public/css/global-style.css index 3eade0e..86834f7 100644 --- a/public/css/global-style.css +++ b/public/css/global-style.css @@ -40,19 +40,19 @@ button:hover{ cursor: pointer; } a:focus{ outline:none; } :focus{ outline-color: transparent; outline-style: none; }.btn:focus{ outline: none; outline-style: none; }select:focus,button:focus{ outline: none; outline-style: none; } -::-webkit-input-placeholder { +input::-webkit-input-placeholder { color: #bdc4c9; } -:-moz-placeholder { /* Firefox 18- */ +input:-moz-placeholder { /* Firefox 18- */ color: #bdc4c9; } -::-moz-placeholder { /* Firefox 19+ */ +input::-moz-placeholder { /* Firefox 19+ */ color: #bdc4c9; } -:-ms-input-placeholder { +input:-ms-input-placeholder { color: #bdc4c9; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { @@ -80,15 +80,32 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { .modal-content{ border-radius: 3px; box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1); - padding: 15px; + padding: 15px 25px; background: #fff; width: 100%; max-width: 400px; margin: 0 auto; + position: relative; +} +.modal-content > .close{ + position: absolute; + top: 10px; + right: 10px; + z-index: 10000; + background-color: transparent; + border: 0; + font-size: 22px; + color: #000; + opacity: 0.6; + text-shadow: 0 1px 0 #fff; + padding: 0; +} +.modal-content > .close:hover{ + opacity: 0.85; } .modal-content > .title{ color: #4e5665; - font-weight: 400; + font-weight: 300; margin-bottom: 25px; } .form-control{ @@ -100,19 +117,23 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { width: 245px; border-radius: 4px; outline: none; + -webkit-transition: border-color .3s ease-out; + -moz-transition: border-color .3s ease-out; + -o-transition: border-color .3s ease-out; + transition: border-color .3s ease-out; } .form-control.block{ width: 100%; display: block; } .form-control:focus{ - border: 1px solid #0084ff; + border-color: #0084ff; } .btn-white{ margin-top:15px; color:#0084ff; border:0; outline:none; - font-size:20px; + font-size:18px; background:#fff; } \ No newline at end of file diff --git a/views/game.ejs b/views/game.ejs index 600a79d..571a26b 100644 --- a/views/game.ejs +++ b/views/game.ejs @@ -20,8 +20,59 @@ border-bottom: 1px solid #ddd; padding: 15px 0; text-align: center; + position: relative; + } + .board-header > .time{ font-size: 28px; } + .board-header > .user{ + position: absolute; + top: 12px; + padding-left: 45px; + line-height: 35px; + } + .board-header > .user.left{ + left: 25px; + } + .board-header > .user.right{ + right: 25px; + } + .board-header > .user > .name{ + font-size: 20px; + } + .board-header > .user > .doll{ + width: 35px; + height: 35px; + position: absolute; + top: 0; + left: 0; + -webkit-border-radius: 50%; + border-radius: 50%; + margin-right: 10px; + vertical-align: middle; + } + .board-header > .user > .doll.white{ + background-image: -ms-radial-gradient(left top, circle farthest-corner, #F7F7F7 0%, #FFFFFF 100%); + background-image: -moz-radial-gradient(left top, circle farthest-corner, #F7F7F7 0%, #FFFFFF 100%); + background-image: -o-radial-gradient(left top, circle farthest-corner, #F7F7F7 0%, #FFFFFF 100%); + background-image: -webkit-gradient(radial, left top, 0, left top, 827, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF)); + background-image: -webkit-radial-gradient(left top, circle farthest-corner, #F7F7F7 0%, #FFFFFF 100%); + background-image: radial-gradient(circle farthest-corner at left top, #F7F7F7 0%, #FFFFFF 100%); + box-shadow: inset 0 0 8px #E8E8E8, 0px 0px 2px 1px #D4D4D4; + -moz-box-shadow: inset 0 0 8px #E8E8E8, 0px 0px 2px 1px #D4D4D4; + -webkit-box-shadow: inset 0 0 8px #E8E8E8, 0px 0px 2px 1px #D4D4D4; + } + .board-header > .user > .doll.black{ + background-image: -ms-radial-gradient(left top, circle farthest-corner, #808080 0%, #000 100%); + background-image: -moz-radial-gradient(left top, circle farthest-corner, #808080 0%, #000 100%); + background-image: -o-radial-gradient(left top, circle farthest-corner, #808080 0%, #000 100%); + background-image: -webkit-gradient(radial, left top, 0, left top, 827, color-stop(0, #808080), color-stop(1, #000)); + background-image: -webkit-radial-gradient(left top, circle farthest-corner, #808080 0%, #000 100%); + background-image: radial-gradient(circle farthest-corner at left top, #808080 0%, #000 100%); + box-shadow: inset 0 0 8px #808080, 0px 0px 2px 1px #000; + -moz-box-shadow: inset 0 0 8px #808080, 0px 0px 2px 1px #000; + -webkit-box-shadow: inset 0 0 8px #808080, 0px 0px 2px 1px #000; + } .board-wrap{ background-color: #F8C91E; padding: 25px; @@ -57,14 +108,11 @@ border-bottom: 1px solid #000; } .board-wrap .doll{ - width: 41px; - height: 41px; + width: 100%; + height: 100%; border-radius: 50%; position: absolute; cursor: pointer; - -webkit-box-shadow: 0px 0px 20px -1px rgba(79,79,79,0.77); - -moz-box-shadow: 0px 0px 20px -1px rgba(79,79,79,0.77); - box-shadow: 0px 0px 20px -1px rgba(79,79,79,0.77); } .board-wrap .doll.ghost{ opacity: 0; @@ -73,22 +121,38 @@ opacity: 1; } .board-wrap .doll.top{ - top: -21px; + top: -50%; } .board-wrap .doll.bottom{ - bottom: -21px; + bottom: -50%; } .board-wrap .doll.left{ - left: -21px; + left: -50%; } .board-wrap .doll.right{ - right: -21px; + right: -50%; } .board-wrap .doll.white{ - background-color: #eee; + background-image: -ms-radial-gradient(left top, circle farthest-corner, #F7F7F7 0%, #FFFFFF 100%); + background-image: -moz-radial-gradient(left top, circle farthest-corner, #F7F7F7 0%, #FFFFFF 100%); + background-image: -o-radial-gradient(left top, circle farthest-corner, #F7F7F7 0%, #FFFFFF 100%); + background-image: -webkit-gradient(radial, left top, 0, left top, 827, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF)); + background-image: -webkit-radial-gradient(left top, circle farthest-corner, #F7F7F7 0%, #FFFFFF 100%); + background-image: radial-gradient(circle farthest-corner at left top, #F7F7F7 0%, #FFFFFF 100%); + box-shadow: inset 0 0 8px #E8E8E8, 0px 0px 2px 1px #D4D4D4; + -moz-box-shadow: inset 0 0 8px #E8E8E8, 0px 0px 2px 1px #D4D4D4; + -webkit-box-shadow: inset 0 0 8px #E8E8E8, 0px 0px 2px 1px #D4D4D4; } .board-wrap .doll.black{ - background-color: #000; + background-image: -ms-radial-gradient(left top, circle farthest-corner, #808080 0%, #000 100%); + background-image: -moz-radial-gradient(left top, circle farthest-corner, #808080 0%, #000 100%); + background-image: -o-radial-gradient(left top, circle farthest-corner, #808080 0%, #000 100%); + background-image: -webkit-gradient(radial, left top, 0, left top, 827, color-stop(0, #808080), color-stop(1, #000)); + background-image: -webkit-radial-gradient(left top, circle farthest-corner, #808080 0%, #000 100%); + background-image: radial-gradient(circle farthest-corner at left top, #808080 0%, #000 100%); + box-shadow: inset 0 0 8px #808080, 0px 0px 2px 1px #000; + -moz-box-shadow: inset 0 0 8px #808080, 0px 0px 2px 1px #000; + -webkit-box-shadow: inset 0 0 8px #808080, 0px 0px 2px 1px #000; } .chat{ position:absolute; @@ -108,12 +172,14 @@ } .chat-wrap > p{ color: #333; + word-break: break-all; } .chat-wrap > p.system{ color: #008000; } .chat-wrap > p > strong{ margin-right: 10px; + color: #0067C7; } .chat-wrap > p > .time{ color: #ccc; @@ -220,11 +286,36 @@ .board{ width: 100%; overflow: hidden; + margin-bottom: 50px; } .board-wrap{ margin: 0; padding: 15px; } + .board-header{ + padding: 10px 0; + } + .board-header > .time{ + font-size: 22px; + } + .board-header > .user{ + top: 10px; + padding-left: 35px; + line-height: 25px; + } + .board-header > .user.left{ + left: 5px; + } + .board-header > .user.right{ + right: 5px; + } + .board-header > .user > .name{ + font-size: 15px; + } + .board-header > .user > .doll{ + width: 25px; + height: 25px; + } .doll{ width: 100%; height: 100%; @@ -233,13 +324,18 @@ top: inherit; bottom: 0; width: 100%; - height: 160px; + height: 130px; position: fixed; z-index: 9999; padding-top: 0; + background: rgba(0, 0, 0, 0.25); + pointer-events: none; } .chat-wrap{ - height: 160px; + height: 80px; + } + .chat-wrap > p > .time{ + color: #E4E4E4; } .chat-message{ top: inherit; @@ -266,6 +362,11 @@ .board{ min-height: 800px; } + .board-wrap{ + box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1); + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1); + } } @@ -273,7 +374,9 @@
- 00:00 +
+
+ 00:00
@@ -558,14 +661,12 @@ /** 게임상황 처리 **/ socket.on('state_game', function(data){ - if(data.state != "start"){ - gameState = data.state; + gameState = data.state; + if(data.state == "stop"){ clearInterval(timeInterval); $("#timeSecond").html("00"); $("#timeMinute").html("00"); - if(data.state == "stop"){ - var $message = $("

게임이 중지되었습니다."+data.time+"

"); - } + var $message = $("

게임이 중지되었습니다."+data.time+"

"); $("#chat").append($message); setTimeout(function(){ $message.fadeOut(function(){ @@ -573,7 +674,6 @@ }); },10000); }else if(data.state == "start"){ - gameState = data.state; timeInterval = setInterval(function(){ var second = parseInt($("#timeSecond").text()); var minute = parseInt($("#timeMinute").text()); @@ -606,22 +706,41 @@ /** 방 초기화 **/ socket.on('init_game',function(data){ + console.log(data); if(data.result){ checkPageLeave = true; dollColor = data.doll_color; - boardInit(); + //boardInit(); }else{ - alert("방 입장에 실패하였습니다."); + alert("존재하지 않는 방입니다."); history.back(); } }); - /** 사용자 목록 처리 **/ - socket.on('user_list',function(data){ - console.log(data); - $("#userList").empty(); + /** 사용자 목록 업데이트 **/ + socket.on('room_user_list',function(data){ for(var i=0; i < data.users.length; i++){ - $("#userList").append("
  • "+data.users[i].nickname+"
    • "); + if(data.users[i].type == "black"){ + $("#userBlack").html(""+data.users[i].nickname+""); + }else if(data.users[i].type == "white"){ + $("#userWhite").html(""+data.users[i].nickname+""); + } + } + + }); + + socket.on('disconnect', function(data){ + alert("서버와 접속이 끊겼습니다."); + clearInterval(timeInterval); + location.href = "/"; + }); + + /** 사용자 퇴장 처리 **/ + socket.on('del_room_user',function(data){ + if(data.type == "black"){ + $("#userBlack").empty(); + }else{ + $("#userWhite").empty(); } }); diff --git a/views/home.ejs b/views/home.ejs index cd2ef28..3ab2558 100644 --- a/views/home.ejs +++ b/views/home.ejs @@ -29,19 +29,6 @@ vertical-align: middle; text-align: center; } - .nickname-input-inner input{ - border: 1px solid rgba(0, 0, 0, .20); - color: rgba(0, 0, 0, 1); - font-size: 17px; - height: 42px; - padding: 0 16px; - width: 245px; - border-radius: 4px; - outline: none; - } - .nickname-input-inner input:focus{ - border: 1px solid #0084ff; - } .logo-title{ font-family: 'Open Sans'; -webkit-font-smoothing: antialiased; @@ -70,7 +57,7 @@ <% }else{ %>

    게임에 참여하려면 이름을 입력해주세요

    <% } %> -
    +
    diff --git a/views/lobby.ejs b/views/lobby.ejs index f1961ae..8cc17f6 100644 --- a/views/lobby.ejs +++ b/views/lobby.ejs @@ -80,7 +80,7 @@ } .room-list > li > a{ display: block; - padding: 30px 0; + padding: 30px 0 30px 10px; color: #333; text-decoration: none; font-size: 16px; @@ -116,18 +116,19 @@

    방목록대기사용자 : 0명

    - +
    -
    +