diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | public/css/chat.css | 7 | ||||
| -rw-r--r-- | public/css/drawdrawdraw.css | 22 | ||||
| -rw-r--r-- | public/index.html | 19 | ||||
| -rw-r--r-- | public/js/auth.js | 38 | ||||
| -rw-r--r-- | public/js/chat.js | 4 | ||||
| -rw-r--r-- | public/js/game.js | 4 | ||||
| -rw-r--r-- | public/js/util.js | 3 |
8 files changed, 91 insertions, 8 deletions
@@ -1 +1 @@ -DRAW DRAW DRAW
\ No newline at end of file +COCOPAINT
\ No newline at end of file diff --git a/public/css/chat.css b/public/css/chat.css index dc627b0..f792709 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -1,8 +1,8 @@ #chat_container { - overflow: hidden; position: absolute; + background: #fffdf8; } -#chat_container #chat { +#chat { overflow-y: scroll; overflow-x: hidden; max-height: 400px; @@ -12,6 +12,9 @@ padding-right: 10px; padding-bottom: 5px; } +#chat #chat_shim { + height: 390px; +} #chat p { margin: 0; } diff --git a/public/css/drawdrawdraw.css b/public/css/drawdrawdraw.css index 3f34505..b4cc6cb 100644 --- a/public/css/drawdrawdraw.css +++ b/public/css/drawdrawdraw.css @@ -1,6 +1,7 @@ html,body { padding: 0; margin: 0; width: 100%; height: 100%; font-family: 'Optima',sans-serif; overflow: hidden; + background: #fcfaf5; } ::-webkit-scrollbar { @@ -13,4 +14,23 @@ html,body { padding: 0; margin: 0; width: 100%; height: 100%; width: 4px; height: 10px; background: #ddd; -}
\ No newline at end of file +} + +.curtain { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255,255,255,0.9); +} +.curtain .inner { + position: absolute; + top: 20%; + left: 50%; + width: 400px; + padding: 10px; + margin-left: -210px; + background: #fff; + box-shadow: 0 1px 4px #888; +} diff --git a/public/index.html b/public/index.html index c986e00..f5f087f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,18 +1,19 @@ <!doctype html> <html> <head> -<title>CocaPaint</title> +<title>CocoPaint</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> <script type="text/javascript" src="/socket.io/socket.io.js"></script> <script type="text/javascript" src="/js/util.js"></script> +<script type="text/javascript" src="/js/auth.js"></script> <script type="text/javascript" src="/js/draw.js"></script> <script type="text/javascript" src="/js/chat.js"></script> <script type="text/javascript" src="/js/game.js"></script> </head> <body> - <h1>Cocapaint</h1> + <h1>Cocopaint</h1> <div id="chat_container"> <div id="chat"><div id="chat_shim"></div></div> @@ -24,7 +25,19 @@ --> </div> </div> - + + <div id="login" class="curtain"> + <div class="inner"> + Welcome to Cocopaint! + <br> + <br> + Enter your name to start playing.. + <br><br> + <input type="text" id="username"> + <br><br> + <button id="login-go">GO</button> + </div> + </div> </body> </html> diff --git a/public/js/auth.js b/public/js/auth.js new file mode 100644 index 0000000..6cdc4c0 --- /dev/null +++ b/public/js/auth.js @@ -0,0 +1,38 @@ +var Auth = { + init: function(){ + Auth.bind(); + if (Auth.loggedIn()) { + } + else { + $("#login").show(); + } + }, + bind: function(){ + $("#login-go").click(Auth.login); + $("#username").keydown(function(e){ + switch (e.keyCode) { + case 13: // enter + Auth.login(); + break + } + }); + }, + loggedIn: function(){ + if (localStorage && localStorage.nick) { + Game.nick = strip(localStorage.nick); + if (Game.nick.length == 0) return false; + return true; + } + return false; + }, + login: function(){ + Game.nick = strip( $("#username").val() ); + if (Game.nick.length == 0) return; + localStorage.nick = Game.nick; + $("#username").val(""); + $("#login").hide(); + }, + logout: function(){ + $("#login").show(); + } +} diff --git a/public/js/chat.js b/public/js/chat.js index 67b6255..752ed67 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -2,6 +2,10 @@ var Chat = { height: 300, init: function(){ + Chat.bind(); + }, + + bind: function(){ $("#chat-message").on("keydown", Chat.keys); }, diff --git a/public/js/game.js b/public/js/game.js index 3b0a71b..af05ad9 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -1,13 +1,14 @@ var socket = io.connect(window.location.hostname); var Game = { - nick: "ryz", + nick: null, init: function(){ // Bind events from the server socket.on('event-join', Events.receive.join); socket.on('event-message', Events.receive.message); + Auth.init(); Chat.init(); } } @@ -15,6 +16,7 @@ var Game = { var Events = { receive: { + join: function(data){ for (var i in data.messages) { Chat.add(data.messages[i]); diff --git a/public/js/util.js b/public/js/util.js index 12a331a..e51b844 100644 --- a/public/js/util.js +++ b/public/js/util.js @@ -1,6 +1,9 @@ function trim (s) { return s.replace(/^\s+/, "").replace(/\s+$/, ""); } +function strip (s) { + return trim(s).replace(/\W+/, ""); +} function sanitize (s) { return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/\"/g, """); } |