server_auth, logout

assets/javascripts/rooms.coffee

@@ -2,7 +2,17 @@ class Server extends Spine.Model
   @configure "Server", "name", "ip", "port", "index"
   @extend Spine.Model.Ajax
   @url: "/servers.json"
-
+  @choice: (auth = true, pvp = false)->
+    servers = if pvp
+      Server.findAllByAttribute('pvp', true)
+    else
+      Server.all()
+    s = _.filter servers, (server)->
+      _.find $('#servers').multiselect('getChecked'), (e)->
+        parseInt(e.value) == server.id
+    if s.length
+      servers = s
+    return servers[Math.floor Math.random() * servers.length]
 class Servers extends Spine.Controller
   constructor: ->
     super
@@ -18,6 +28,17 @@ class Servers extends Spine.Controller
       classes: 'server_filter'
     ).bind "multiselectclick", (event, ui)->
       Room.trigger 'refresh'
+
+    $('#server option[value!=0]').remove()
+    #server = Server.choice()
+    #new_room.server_ip.value = server.ip
+    #new_room.server_port.value = server.port
+    #new_room.server_auth.checked = server.auth
+    Server.each (server)->
+      $('<option />',
+        label: server.name
+        value: server.id
+      ).appendTo $('#server')
   connect: =>
     wsServer = 'ws://mycard-server.my-card.in:9998'
     websocket = new WebSocket(wsServer);
@@ -63,9 +84,9 @@ class Rooms extends Spine.Controller
       $('#join_private_room').data('room_id', room.id)
       $('#join_private_room_dialog').dialog('open')
     else
-      mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, null, room.pvp, room.rule, room.mode, room.start_lp))
+      mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, null, room.pvp, room.rule, room.mode, room.start_lp), Candy.Util.getCookie('username'), Candy.Util.getCookie('password') if room.server().auth)
 
-login = (username, password)->
+login = ->
   #Candy.Core.Event.Jabber.Presence = (msg)->
   #  Candy.Core.log('[Jabber] Presence');
   #  msg = $(msg);
@@ -99,7 +120,7 @@ login = (username, password)->
   CandyShop.InlineImages.init();
   Candy.View.Template.Login.form = $('#login_form_template').html()
   Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
-  Candy.Core.connect(username, password)
+  Candy.Core.connect(Candy.Util.getCookie('jid'), Candy.Util.getCookie('password'))
 
   Candy.View.Pane.Roster.joinAnimation = (elementId)->
     $('#' + elementId).show().css('opacity',1)
@@ -114,15 +135,25 @@ login = (username, password)->
   $('.xmpp').click ->
     Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true)
   $('#roster').show()
+
+  $('#username').html Candy.Util.getCookie('username')
+  $('.me').toggle()
+
+logout = ->
+  Candy.Util.deleteCookie('jid')
+  Candy.Util.deleteCookie('username')
+  Candy.Util.deleteCookie('password')
+  window.location.reload()
+
 $(document).ready ->
   #stroll.bind( '.online_list ul' );
-  if jid = Candy.Util.getCookie('jid')
-    login(jid, Candy.Util.getCookie('password'))
+  if Candy.Util.getCookie('jid')
+    login()
 
   $('#new_room_dialog').dialog
     autoOpen:false,
     resizable:false,
-    title:"建立房间"
+    title:"建立/加入房间"
 
   $('#join_private_room_dialog').dialog
     autoOpen:false,
@@ -135,6 +166,8 @@ $(document).ready ->
       new_room.mode.value = 1 if new_room.mode.value == '2'
       new_room.rule.value = 0
       new_room.start_lp.value = 8000
+      if (server_id = parseInt new_room.server.value) and !Server.find(server_id).pvp
+        new_room.server.value = Server.choice(false, new_room.pvp.ckecked).id
   new_room.mode.onchange = ->
     if @value == '2'
       new_room.pvp.checked = false
@@ -144,14 +177,26 @@ $(document).ready ->
   new_room.start_lp.onchange = ->
     if @value != '8000'
       new_room.pvp.checked = false
-
+  new_room.server.onchange = ->
+    $('#server_custom').hide();
+    if server_id = parseInt new_room.server.value
+      if !Server.find(server_id).pvp
+        new_room.pvp.checked = false
+    else
+      $('#server_custom').show();
   new_room.onsubmit = (ev)->
     ev.preventDefault()
     $('#new_room_dialog').dialog('close')
-
-    servers = Server.all()
-    server = servers[Math.floor Math.random() * servers.length]
-    mycard.join server.ip, server.port, mycard.room_name(@name.value, @password.value, @pvp.checked, parseInt(@rule.value), parseInt(@mode.value), parseInt(@start_lp.value))
+    if server_id = parseInt new_room.server.value
+      server = Server.find server_id
+      server_ip = server.ip
+      server_port = server.port
+      server_auth = server.auth
+    else
+      server_ip = new_room.server_ip.value
+      server_port = parseInt new_room.server_port.value
+      server_auth = new_room.server_auth.checked
+    mycard.join(server_ip, server_port, mycard.room_name(@name.value, @password.value, @pvp.checked, parseInt(@rule.value), parseInt(@mode.value), parseInt(@start_lp.value)), Candy.Util.getCookie('username'), Candy.Util.getCookie('password') if server_auth)
 
   $('#join_private_room').submit (ev)->
     ev.preventDefault()
@@ -161,13 +206,14 @@ $(document).ready ->
       room_id = $(this).data('room_id')
       if Room.exists room_id
         room = Room.find(room_id)
-        mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, @password.value, room.pvp, room.rule, room.mode, room.start_lp))
+        mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, @password.value, room.pvp, room.rule, room.mode, room.start_lp), Candy.Util.getCookie('username'), Candy.Util.getCookie('password') if room.server().auth)
       else
         alert '房间已经关闭'
 
   $('#new_room_button').click ->
-    new_room.reset()
     new_room.name.value = Math.floor Math.random() * 1000
+    new_room.server.value = Server.choice(false, new_room.pvp.ckecked).id
+    new_room.server.onchange() #这个怎么能自动触发...
     $('#new_room_dialog').dialog('open')
 
   #$('#login_domain').combobox()
@@ -180,12 +226,13 @@ $(document).ready ->
   $('#login_button').click ->
     login()
     #$('#login_dialog').dialog 'open'
-
   #$('#login').submit ->
   #  if @node.value and @domain.value and @password.value
   #    login(@node.value, @password.value, @domain.value)
   #  $('#login_dialog').dialog 'close'
   #  false
+  $('#logout_button').click ->
+    logout()
 
   rooms = new Rooms(el: $('#rooms'))
   servers = new Servers(el: $('#servers'))

assets/javascripts/rooms.js

 // Generated by CoffeeScript 1.4.0
 (function() {
-  var Room, Rooms, Server, Servers, login,
+  var Room, Rooms, Server, Servers, login, logout,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
     __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
@@ -19,6 +19,26 @@
 
     Server.url = "/servers.json";
 
+    Server.choice = function(auth, pvp) {
+      var s, servers;
+      if (auth == null) {
+        auth = true;
+      }
+      if (pvp == null) {
+        pvp = false;
+      }
+      servers = pvp ? Server.findAllByAttribute('pvp', true) : Server.all();
+      s = _.filter(servers, function(server) {
+        return _.find($('#servers').multiselect('getChecked'), function(e) {
+          return parseInt(e.value) === server.id;
+        });
+      });
+      if (s.length) {
+        servers = s;
+      }
+      return servers[Math.floor(Math.random() * servers.length)];
+    };
+
     return Server;
 
   })(Spine.Model);
@@ -38,7 +58,7 @@
 
     Servers.prototype.render = function() {
       this.html($('#server_template').tmpl(Server.all()));
-      return this.el.multiselect({
+      this.el.multiselect({
         noneSelectedText: '房间筛选',
         selectedText: '房间筛选',
         header: false,
@@ -47,6 +67,13 @@
       }).bind("multiselectclick", function(event, ui) {
         return Room.trigger('refresh');
       });
+      $('#server option[value!=0]').remove();
+      return Server.each(function(server) {
+        return $('<option />', {
+          label: server.name,
+          value: server.id
+        }).appendTo($('#server'));
+      });
     };
 
     Servers.prototype.connect = function() {
@@ -143,7 +170,7 @@
         $('#join_private_room').data('room_id', room.id);
         return $('#join_private_room_dialog').dialog('open');
       } else {
-        return mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, null, room.pvp, room.rule, room.mode, room.start_lp));
+        return mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, null, room.pvp, room.rule, room.mode, room.start_lp), Candy.Util.getCookie('username'), room.server().auth ? Candy.Util.getCookie('password') : void 0);
       }
     };
 
@@ -151,7 +178,7 @@
 
   })(Spine.Controller);
 
-  login = function(username, password) {
+  login = function() {
     Candy.init('http://s70.hebexpo.com:5280/http-bind/', {
       core: {
         debug: false,
@@ -181,7 +208,7 @@
     CandyShop.InlineImages.init();
     Candy.View.Template.Login.form = $('#login_form_template').html();
     Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
-    Candy.Core.connect(username, password);
+    Candy.Core.connect(Candy.Util.getCookie('jid'), Candy.Util.getCookie('password'));
     Candy.View.Pane.Roster.joinAnimation = function(elementId) {
       return $('#' + elementId).show().css('opacity', 1);
     };
@@ -193,18 +220,27 @@
     $('.xmpp').click(function() {
       return Candy.View.Pane.PrivateRoom.open($(this).data('jid'), $(this).data('nick'), true, true);
     });
-    return $('#roster').show();
+    $('#roster').show();
+    $('#username').html(Candy.Util.getCookie('username'));
+    return $('.me').toggle();
+  };
+
+  logout = function() {
+    Candy.Util.deleteCookie('jid');
+    Candy.Util.deleteCookie('username');
+    Candy.Util.deleteCookie('password');
+    return window.location.reload();
   };
 
   $(document).ready(function() {
-    var jid, new_room, rooms, servers;
-    if (jid = Candy.Util.getCookie('jid')) {
-      login(jid, Candy.Util.getCookie('password'));
+    var new_room, rooms, servers;
+    if (Candy.Util.getCookie('jid')) {
+      login();
     }
     $('#new_room_dialog').dialog({
       autoOpen: false,
       resizable: false,
-      title: "建立房间"
+      title: "建立/加入房间"
     });
     $('#join_private_room_dialog').dialog({
       autoOpen: false,
@@ -213,12 +249,16 @@
     });
     new_room = $('#new_room')[0];
     new_room.pvp.onchange = function() {
+      var server_id;
       if (this.checked) {
         if (new_room.mode.value === '2') {
           new_room.mode.value = 1;
         }
         new_room.rule.value = 0;
-        return new_room.start_lp.value = 8000;
+        new_room.start_lp.value = 8000;
+        if ((server_id = parseInt(new_room.server.value)) && !Server.find(server_id).pvp) {
+          return new_room.server.value = Server.choice(false, new_room.pvp.ckecked).id;
+        }
       }
     };
     new_room.mode.onchange = function() {
@@ -236,13 +276,32 @@
         return new_room.pvp.checked = false;
       }
     };
+    new_room.server.onchange = function() {
+      var server_id;
+      $('#server_custom').hide();
+      if (server_id = parseInt(new_room.server.value)) {
+        if (!Server.find(server_id).pvp) {
+          return new_room.pvp.checked = false;
+        }
+      } else {
+        return $('#server_custom').show();
+      }
+    };
     new_room.onsubmit = function(ev) {
-      var server, servers;
+      var server, server_auth, server_id, server_ip, server_port;
       ev.preventDefault();
       $('#new_room_dialog').dialog('close');
-      servers = Server.all();
-      server = servers[Math.floor(Math.random() * servers.length)];
-      return mycard.join(server.ip, server.port, mycard.room_name(this.name.value, this.password.value, this.pvp.checked, parseInt(this.rule.value), parseInt(this.mode.value), parseInt(this.start_lp.value)));
+      if (server_id = parseInt(new_room.server.value)) {
+        server = Server.find(server_id);
+        server_ip = server.ip;
+        server_port = server.port;
+        server_auth = server.auth;
+      } else {
+        server_ip = new_room.server_ip.value;
+        server_port = parseInt(new_room.server_port.value);
+        server_auth = new_room.server_auth.checked;
+      }
+      return mycard.join(server_ip, server_port, mycard.room_name(this.name.value, this.password.value, this.pvp.checked, parseInt(this.rule.value), parseInt(this.mode.value), parseInt(this.start_lp.value)), Candy.Util.getCookie('username'), server_auth ? Candy.Util.getCookie('password') : void 0);
     };
     $('#join_private_room').submit(function(ev) {
       var room, room_id;
@@ -252,20 +311,24 @@
         room_id = $(this).data('room_id');
         if (Room.exists(room_id)) {
           room = Room.find(room_id);
-          return mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, this.password.value, room.pvp, room.rule, room.mode, room.start_lp));
+          return mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, this.password.value, room.pvp, room.rule, room.mode, room.start_lp), Candy.Util.getCookie('username'), room.server().auth ? Candy.Util.getCookie('password') : void 0);
         } else {
           return alert('房间已经关闭');
         }
       }
     });
     $('#new_room_button').click(function() {
-      new_room.reset();
       new_room.name.value = Math.floor(Math.random() * 1000);
+      new_room.server.value = Server.choice(false, new_room.pvp.ckecked).id;
+      new_room.server.onchange();
       return $('#new_room_dialog').dialog('open');
     });
     $('#login_button').click(function() {
       return login();
     });
+    $('#logout_button').click(function() {
+      return logout();
+    });
     rooms = new Rooms({
       el: $('#rooms')
     });

assets/stylesheets/rooms.less

@@ -48,7 +48,7 @@ body {
   }
 }
 
-.log_reg {
+.me {
 /*float:right;*/
   font-size: 12px;
   padding: 34px 25px 0 0;
@@ -141,6 +141,7 @@ html, body {
   padding-bottom: 41px;
   height: 100%;
   overflow: hidden;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   #rooms {
     height: 100%;
@@ -151,6 +152,7 @@ html, body {
   }
   .online_list {
     height: 100%;
+    -moz-box-sizing: border-box;
     box-sizing: border-box;
     #roster {
       height: 100%;
@@ -164,16 +166,27 @@ html, body {
 /*横向*/
 .card_top {
   display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: box;
   .card_form {
     -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    box-flex: 1;
   }
 }
 
 .card_center {
   display: -webkit-box;
-
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: box;
   #rooms {
     -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    box-flex: 1;
     .room {
       border: #cccccc 1px solid;
       &:hover {
@@ -226,5 +239,10 @@ html, body {
   }
 }
 
+/*建立房间*/
+#new_room{
+  #server_ip{width: 120px}
+  #server_port{width: 60px}
+}
 
 

rooms/index.html

 <!DOCTYPE html>
-<!--[if lt IE 7]>
-<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>
-<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>
-<html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!-->
-<html class="no-js"> <!--<![endif]-->
+<html class="no-js">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -45,17 +38,17 @@
     <script id="login_form_template" type="text/x-mustache-template">
         <form method="post" id="login-form" class="login-form" onsubmit="{{#displayUsername}}username.value = node.value + '@' + domain.value;{{/displayUsername}}Candy.Util.setCookie('jid', username.value, 365);Candy.Util.setCookie('username', node.value, 365);Candy.Util.setCookie('password', password.value, 365)">
             {{#displayUsername}}
-            <label for="node">{{_labelUsername}}</label>
-            <input type="text" id="node" name="node"/>
-            <label for="domain">@</label>
-            <select id="domain" name="domain" tabindex="-1">
+            <label for="login_node">{{_labelUsername}}</label>
+            <input type="text" id="login_node" name="node"/>
+            <label for="login_domain">@</label>
+            <select id="login_domain" name="domain" tabindex="-1">
                 <option label="my-card.in" value="my-card.in" selected="selected"/>
                 <option label="gmail.com" value="gmail.com"/>
             </select>
 
             {{/displayUsername}}
-            <input type="hidden" id="username" name="username" value="{{presetJid}}"/>
-            {{#displayPassword}}<label for="password">{{_labelPassword}}</label><input type="password" id="password" name="password"/>{{/displayPassword}}
+            <input type="hidden" id="login_username" name="username" value="{{presetJid}}"/>
+            {{#displayPassword}}<label for="login_password">{{_labelPassword}}</label><input type="password" id="login_password" name="password"/>{{/displayPassword}}
             <input type="submit" class="button" value="{{_loginSubmit}}"/>
         </form>
     </script>
@@ -83,7 +76,7 @@
 
 </head>
 <body>
-<!--[if lt IE 7]>
+<!--[if lt IE 10]>
 <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
     your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to
     improve your experience.</p>
@@ -98,11 +91,16 @@
         <select id="servers" multiple="multiple"></select>
         <input id="new_room_button" type="button" value="建立房间"/>
     </div>
-    <div class="log_reg">
-        <a href="">注册</a>
+    <div class="me">
+        <a href="http://my-card.in/register">注册</a>
         <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
         <a id="login_button" class="login">登录</a>
     </div>
+    <div class="me" style="display: none;">
+        <a id="username"></a>
+        <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
+        <a id="logout_button" class="login">退出</a>
+    </div>
 </div>
 <div class="card_center">
     <div id="rooms"></div>
@@ -110,17 +108,11 @@
         <div class="online_title">聊天工具</div>
         <ul id="roster">
             <li>
-                <span>这是开发中好友系统喵</span>
-            </li>
-            <li>
-                <span>看起来很麻烦样子于是先坑着</span>
+                <span>这是还没写好好友系统喵</span>
             </li>
             <li>
                 <span>下面留的是管理员</span>
             </li>
-            <li>
-                <span>登录聊天之后才能发消息哦</span>
-            </li>
             <li class="xmpp" data-jid="zh99998@gmail.com" data-nick="zh99998">
                 <img src="https://lh3.googleusercontent.com/-EVHxW12CgMs/AAAAAAAAAAI/AAAAAAAAAAA/b4Rq4BiFUT4/s32-c-k/photo.jpg" alt=""/><span>zh99998</span>
             </li>
@@ -143,12 +135,17 @@
 
 <div id="new_room_dialog" style="display: none">
     <form id="new_room">
-        <label for="new_room_name">房间名</label>
-        <input type="text" id="new_room_name" name="name"/><br/>
-        <label for="new_room_password">房间密码</label>
-        <input type="password" name="password" id="new_room_password" value=""/><br/>
-        <input type="checkbox" name="pvp" id="new_room_pvp" value="pvp"/><label for="new_room_pvp">竞技场</label>
-
+        <label for="new_room_name">房间名</label><input type="text" id="new_room_name" name="name"/><br/>
+        <label for="new_room_password">房间密码</label><input type="password" name="password" id="new_room_password" value=""/><br/>
+        <input type="checkbox" name="pvp" id="new_room_pvp" value="pvp"/><label for="new_room_pvp">竞技场</label><br/>
+        <label for="server">服务器</label>
+        <select id="server" name="server">
+            <option label="自定义" value="0" selected="selected"/>
+        </select>
+        <div id="server_custom" style="display: none;">
+            <input type="text" id="server_ip" name="server_ip" value="127.0.0.1"/><label for="server_port">:</label><input type="number" id="server_port" name="server_port" value="7911"/>
+            <input type="checkbox" id="server_auth" name="server_auth"/><label for="server_auth">认证</label>
+        </div>
         <hr/>
         <label for="new_room_rule">卡片允许</label>
         <select id="new_room_rule" name="rule">