new room

assets/javascripts/rooms.coffee

@@ -4,7 +4,7 @@ class Server extends Spine.Model
   @url: "/servers.json"
 
 class Room extends Spine.Model
-  @configure "Room", "name", "status"
+  @configure "Room", "name", "status", "private"
   @belongsTo 'server', Server
 class Rooms extends Spine.Controller
 
@@ -16,10 +16,18 @@ class Rooms extends Spine.Controller
   render: =>
     @html $('#room_template').tmpl _.sortBy Room.all(), @sort
   sort: (room)->
-    [if room.status == "wait" then 0 else 1]
+    [
+      if room.status == "wait" then 0 else 1,
+      room.private
+    ]
   clicked: (e)->
     room = $(e.target).tmplItem().data
-    mycard.join(room.server().ip, room.server().port, room.name)
+    if room.private
+      $('#join_private_room')[0].reset()
+      $('#join_private_room').data('room_id', room.id)
+      $('#join_private_room_dialog').dialog('open')
+    else
+      mycard.join(room.server().ip, room.server().port, room.name)
 
 
 $(document).ready ->
@@ -35,6 +43,85 @@ $(document).ready ->
     Candy.Core.connect('zh99998测试80@my-card.in', 'zh112998')
   #$('#username').val '@my-card.in'
   #$('#username').focus()
+
+  $('#new_room_dialog').dialog
+    autoOpen:false,
+    resizable:false,
+    title:"建立房间"
+
+  $('#join_private_room_dialog').dialog
+    autoOpen:false,
+    resizable:false,
+    title:"加入私密房间"
+
+  new_room = $('#new_room')[0]
+  new_room.tag.onchange = ->
+    if @checked
+      new_room.pvp.checked = false
+      new_room.match.checked = false
+  new_room.match.onchange = ->
+    if @checked
+      new_room.tag.checked = false
+  new_room.pvp.onchange = ->
+    if @checked
+      new_room.tag.checked = false
+      new_room.tcg.checked = false
+      new_room.ocg.checked = true
+      new_room.lp.value = 8000
+  new_room.ocg.onchange = ->
+    if !@checked
+      new_room.tcg.checked = true
+  new_room.tcg.onchange = ->
+    if @checked
+      new_room.pvp.checked = false
+    else
+      new_room.ocg.checked = true
+
+  new_room.onsubmit = (ev)->
+    ev.preventDefault()
+    $('#new_room_dialog').dialog('close')
+
+    rule = if @tcg.checked then (if @ocg.checked then 2 else 1) else 0
+    mode = if @tag.checked then 2 else if @match.checked then 1 else 0
+    if rule != 0 or @lp.value != '8000'
+      result = "#{rule}#{mode}FFF#{@lp.value},5,1,"
+    else if @tag.checked
+      result = "T#"
+    else if @pvp.checked and @match.checked
+      result = "PM#"
+    else if @pvp.checked
+      result = "P#"
+    else if @match.checked
+      result = "M#"
+    result += @name.value
+    if @password.value
+      result += '$' + @password.value
+
+    servers = Server.all()
+    server = servers[Math.floor Math.random() * servers.length]
+    mycard.join(server.ip, server.port, result)
+
+
+
+  $('#join_private_room').submit (ev)->
+    ev.preventDefault()
+    $('#join_private_room_dialog').dialog('close')
+
+    if @password.value
+      room_id = $(this).data('room_id')
+      if Room.exists room_id
+        room = Room.find(room_id)
+        server = room.server()
+        mycard.join(server.ip, server.port, "#{room.name}$#{@password.value}")
+      else
+        alert '房间已经关闭'
+
+  $('#new_room_button').click ->
+    new_room.reset()
+    new_room.name.value = Math.floor Math.random() * 1000
+    $('#new_room_dialog').dialog('open')
+
+
   rooms = new Rooms(el: $('#rooms'))
 
   Server.one "refresh", ->
@@ -55,3 +142,5 @@ $(document).ready ->
     websocket.onerror = (evt)->
       console.log('Error occured: ' + evt.data);
   Server.fetch()
+
+

assets/javascripts/rooms.js

@@ -31,7 +31,7 @@
       return Room.__super__.constructor.apply(this, arguments);
     }
 
-    Room.configure("Room", "name", "status");
+    Room.configure("Room", "name", "status", "private");
 
     Room.belongsTo('server', Server);
 
@@ -58,13 +58,19 @@
     };
 
     Rooms.prototype.sort = function(room) {
-      return [room.status === "wait" ? 0 : 1];
+      return [room.status === "wait" ? 0 : 1, room["private"]];
     };
 
     Rooms.prototype.clicked = function(e) {
       var room;
       room = $(e.target).tmplItem().data;
-      return mycard.join(room.server().ip, room.server().port, room.name);
+      if (room["private"]) {
+        $('#join_private_room')[0].reset();
+        $('#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, room.name);
+      }
     };
 
     return Rooms;
@@ -72,7 +78,7 @@
   })(Spine.Controller);
 
   $(document).ready(function() {
-    var rooms;
+    var new_room, rooms;
     Candy.init('/http-bind/', {
       core: {
         debug: false,
@@ -86,6 +92,93 @@
     if (window.location.href.indexOf("candy") !== -1) {
       Candy.Core.connect('zh99998测试80@my-card.in', 'zh112998');
     }
+    $('#new_room_dialog').dialog({
+      autoOpen: false,
+      resizable: false,
+      title: "建立房间"
+    });
+    $('#join_private_room_dialog').dialog({
+      autoOpen: false,
+      resizable: false,
+      title: "加入私密房间"
+    });
+    new_room = $('#new_room')[0];
+    new_room.tag.onchange = function() {
+      if (this.checked) {
+        new_room.pvp.checked = false;
+        return new_room.match.checked = false;
+      }
+    };
+    new_room.match.onchange = function() {
+      if (this.checked) {
+        return new_room.tag.checked = false;
+      }
+    };
+    new_room.pvp.onchange = function() {
+      if (this.checked) {
+        new_room.tag.checked = false;
+        new_room.tcg.checked = false;
+        new_room.ocg.checked = true;
+        return new_room.lp.value = 8000;
+      }
+    };
+    new_room.ocg.onchange = function() {
+      if (!this.checked) {
+        return new_room.tcg.checked = true;
+      }
+    };
+    new_room.tcg.onchange = function() {
+      if (this.checked) {
+        return new_room.pvp.checked = false;
+      } else {
+        return new_room.ocg.checked = true;
+      }
+    };
+    new_room.onsubmit = function(ev) {
+      var mode, result, rule, server, servers;
+      ev.preventDefault();
+      $('#new_room_dialog').dialog('close');
+      rule = this.tcg.checked ? (this.ocg.checked ? 2 : 1) : 0;
+      mode = this.tag.checked ? 2 : this.match.checked ? 1 : 0;
+      if (rule !== 0 || this.lp.value !== '8000') {
+        result = "" + rule + mode + "FFF" + this.lp.value + ",5,1,";
+      } else if (this.tag.checked) {
+        result = "T#";
+      } else if (this.pvp.checked && this.match.checked) {
+        result = "PM#";
+      } else if (this.pvp.checked) {
+        result = "P#";
+      } else if (this.match.checked) {
+        result = "M#";
+      }
+      result += this.name.value;
+      if (this.password.value) {
+        result += '$' + this.password.value;
+      }
+      servers = Server.all();
+      server = servers[Math.floor(Math.random() * servers.length)];
+      return mycard.join(server.ip, server.port, result);
+    };
+    $('#join_private_room').submit(function(ev) {
+      var room, room_id, server;
+      ev.preventDefault();
+      $('#join_private_room_dialog').dialog('close');
+      if (this.password.value) {
+        room_id = $(this).data('room_id');
+        if (Room.exists(room_id)) {
+          room = Room.find(room_id);
+          server = room.server();
+          return mycard.join(server.ip, server.port, "" + room.name + "$" + this.password.value);
+        } else {
+          return alert('房间已经关闭');
+        }
+      }
+    });
+    $('#new_room_button').click(function() {
+      new_room.reset();
+      new_room.name.value = Math.floor(Math.random() * 1000);
+      return $('#new_room_dialog').dialog('open');
+    });
     rooms = new Rooms({
       el: $('#rooms')
     });

rooms/index.html

@@ -21,11 +21,15 @@
     <script type="text/javascript" src="/vendor/javascripts/less-1.3.1.min.js"></script>
     <script src="/vendor/javascripts/modernizr-2.6.2.min.js"></script>
 
+    <link rel="stylesheet" href="/vendor/stylesheets/smoothness/jquery-ui-1.9.1.custom.min.css"/>
+
     <script id="room_template" type="text/x-jquery-tmpl">
         <div class="room" id="room_${id}">
             <span class="room_name">${name}</span>
             <span class="room_id">${id}</span>
-
+            {{if private}}
+            [私密房]
+            {{/if}}
             <div class="room_users">
                 {{each users}}
                 <div class="user">
@@ -55,7 +59,7 @@
             <option value=""></option>
             <option value=""></option>
         </select>
-        <input type="button" value="建立房间"/>
+        <input id="new_room_button" type="button" value="建立房间"/>
     </div>
     <div class="log_reg">
         <a href="">注册</a>
@@ -132,8 +136,36 @@
 </div>
 <div id="candy" style="top:auto;height:260px;"></div>
 
+<div id="new_room_dialog" style="display: none">
+    <form id="new_room">
+        <label>房间名</label>
+        <input type="text" id="name"/><br/>
+        <label>房间密码</label>
+        <input type="password" name="password" id="password" value=""/><br/>
+        <input type="checkbox" name="pvp" id="pvp" value="pvp"/><label>竞技场</label>
+        <input type="checkbox" name="match" id="match" value="match" checked="checked"/><label>比赛模式</label>
+        <hr/>
+        <h3>自定义模式</h3>
+        <input type="checkbox" name="tag" id="tag" value="tag"/><label>TAG双打</label>
+        <input type="checkbox" name="ocg" id="ocg" value="ocg" checked="checked"/><label>OCG</label>
+        <input type="checkbox" name="tcg" id="tcg" value="tcg"/><label>TCG</label><br/>
+        <label>初始LP</label>
+        <input type="number" name="lp" id="lp" min="0" max="99999" value="8000" step="1000"/><br/>
+        <input type="submit" value="确定"/>
+    </form>
+</div>
+<div id="join_private_room_dialog" style="display: none">
+    <form id="join_private_room">
+        <label>房间密码</label>
+        <input name="password" type="password" id="joinroom_password" value=""/>
+        <input type="submit" value="确定"/>
+    </form>
+</div>
+
+
 <script src="/vendor/javascripts/jquery-1.8.2.min.js"></script>
 <script src="/vendor/javascripts/jquery.tmpl.min.js"></script>
+<script src="/vendor/javascripts/jquery-ui-1.9.1.custom.min.js"></script>
 <!--<script src="/vendor/javascripts/plugins.js"></script>-->
 <script src="/vendor/javascripts/spine/spine.js"></script>
 <script src="/vendor/javascripts/spine/ajax.js"></script>