diff options
| -rw-r--r-- | public/css/chat.css | 24 | ||||
| -rw-r--r-- | public/css/drawdrawdraw.css | 13 | ||||
| -rw-r--r-- | public/index.html | 20 | ||||
| -rw-r--r-- | public/js/chat.js | 8 | ||||
| -rw-r--r-- | public/js/game.js | 3 |
5 files changed, 42 insertions, 26 deletions
diff --git a/public/css/chat.css b/public/css/chat.css index f2092e0..dc627b0 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -1,22 +1,33 @@ #chat_container { - overflow-y: scroll; - overflow-x: hidden; + overflow: hidden; position: absolute; } #chat_container #chat { + overflow-y: scroll; + overflow-x: hidden; + max-height: 400px; font-size: 13px; line-height: 18px; padding-left: 10px; padding-right: 10px; padding-bottom: 5px; } -#chat_container #chat p span.you { +#chat p { + margin: 0; +} +#chat span.nick { + display:inline-block; + width: 50px; + vertical-align: top; +} +#chat span.you { color: #ee33bb; } -#chat_container #chat p span.msg { - display: block; - margin-left: 80px; +#chat span.msg { + display: inline-block; + vertical-align: top; word-wrap: break-word; + max-width: 200px; } #chat_container #chat img { max-width: 200px; @@ -24,7 +35,6 @@ } #form { - z-index: 3; position: absolute; } #form input { diff --git a/public/css/drawdrawdraw.css b/public/css/drawdrawdraw.css index 4980f98..3f34505 100644 --- a/public/css/drawdrawdraw.css +++ b/public/css/drawdrawdraw.css @@ -1,3 +1,16 @@ html,body { padding: 0; margin: 0; width: 100%; height: 100%; font-family: 'Optima',sans-serif; + overflow: hidden; } + +::-webkit-scrollbar { + width: 4px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + width: 4px; + height: 10px; + background: #ddd; +}
\ No newline at end of file diff --git a/public/index.html b/public/index.html index cb48315..c986e00 100644 --- a/public/index.html +++ b/public/index.html @@ -1,7 +1,7 @@ <!doctype html> <html> <head> -<title>drawdrawdraw</title> +<title>CocaPaint</title> <link rel="stylesheet" href="/css/drawdrawdraw.css" type="text/css"> <link rel="stylesheet" href="/css/chat.css" type="text/css"> <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script> @@ -12,19 +12,17 @@ <script type="text/javascript" src="/js/game.js"></script> </head> <body> - <h1>drawdrawdraw</h1> + <h1>Cocapaint</h1> <div id="chat_container"> <div id="chat"><div id="chat_shim"></div></div> - </div> - <div id="chat_bg"></div> - - <div id="form"> - <input type="text" id="chat-message" maxlength="200"/> - <!-- - <div id="emoticons"></div> - <img id="open-emoticons" src="/img/emoticons/happy.gif"> - --> + <div id="form"> + <input type="text" id="chat-message" maxlength="200"/> + <!-- + <div id="emoticons"></div> + <img id="open-emoticons" src="/img/emoticons/happy.gif"> + --> + </div> </div> </body> diff --git a/public/js/chat.js b/public/js/chat.js index 76371c7..67b6255 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -26,8 +26,6 @@ var Chat = { $("#chat-message").val(""); Chat.add({ nick: Game.nick, body: body, you: true }); - scrollToBottom("#chat_container") - Events.send.message({ nick: Game.nick, body: body }); }, @@ -50,13 +48,13 @@ var Chat = { }, add: function (msg) { - var klass = msg.you ? "msg you" : "msg"; - var html = "<p><span class='" + klass + "'>"+msg.nick+"</span><span class='msg'>"+Chat.parse(msg.body)+"</span></p>"; + var klass = msg.nick == Game.nick ? "you" : ""; + var html = "<p><span class='nick " + klass + "'>"+msg.nick+"</span><span class='msg'>"+Chat.parse(msg.body)+"</span></p>"; $("#chat").append( html ); if ($("#chat p").length > 50) { $("#chat").first().remove(); } - scrollToBottom("#chat_container"); + scrollToBottom("#chat"); } } diff --git a/public/js/game.js b/public/js/game.js index 461d96e..3b0a71b 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -16,14 +16,12 @@ var Events = { receive: { join: function(data){ - console.log("RECEIVE JOIN") for (var i in data.messages) { Chat.add(data.messages[i]); } }, message: function(msg){ -console.log("RECEIVE MESSAGE") Chat.add(msg); } }, @@ -31,7 +29,6 @@ console.log("RECEIVE MESSAGE") send: { message: function(msg) { -console.log("SE D MMESSAGe") socket.emit('event-message', msg); } |