new rooms

58243ce7 · 神楽坂玲奈 · 5ec90d81 · 58243ce7 · 58243ce7 · 58243ce7
Commit 58243ce7 authored Feb 16, 2013 by 神楽坂玲奈
11 changed files
--- a/assets/images/duel.png
+++ b/assets/images/duel.png
--- a/assets/images/home.png
+++ b/assets/images/home.png
--- a/assets/images/lock.png
+++ b/assets/images/lock.png
--- a/assets/images/menu.png
+++ b/assets/images/menu.png
--- a/assets/images/menu_hover.png
+++ b/assets/images/menu_hover.png
--- a/assets/images/overlay_logo.png
+++ b/assets/images/overlay_logo.png
--- a/assets/javascripts/rooms.coffee
+++ b/assets/javascripts/rooms.coffee
@@ -103,6 +103,7 @@ login = ->
  #  else
  #    alert msg
  #  true
+  Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
  Candy.init('http://122.0.65.70:5280/http-bind/',
    core:
      debug: false,
@@ -124,7 +125,6 @@ login = ->
  CandyShop.InlineImages.init();
  Candy.View.Template.Login.form = $('#login_form_template').html()
-  Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
  Candy.Core.connect(Candy.Util.getCookie('jid'), Candy.Util.getCookie('password'))
  Candy.View.Pane.Roster.joinAnimation = (elementId)->
@@ -137,10 +137,12 @@ login = ->
  candy_height = $('#candy').outerHeight true
  $('.card_center').css('margin-bottom', -candy_height)
  $('.card_center').css('padding-bottom', candy_height)
  #window.onunload = window.onbeforeunload
  window.onbeforeunload = null
 @after_login = ->
+  $('#rooms').css('padding-right', 225)
  $('.online_list').show()
  $('#current_username').html(Candy.Util.getCookie('username'))
@@ -159,8 +161,11 @@ announcement_scroll = (obj)->
  ,500,->
    $(this).css({marginTop:"0px"}).find("li:first").appendTo(this)
 announcement_scrolling = null
+setRosterHeight = ->
+  pageHight = (document.documentElement.clientHeight)-430
+  $("#roster").height(pageHight)
 $(document).ready ->
-  #stroll.bind( '.online_list ul' );
  if Candy.Util.getCookie('jid')
    login()
@@ -258,6 +263,9 @@ $(document).ready ->
      announcement_scrolling = setInterval(announcement_scroll, 5000) if !announcement_scrolling
      announcement_scrolling = null
+  setRosterHeight();
+  $(window).resize(setRosterHeight);
  $.getJSON '/announcements.json', (data)->
    for announcement in data
      $('<li />').append($('<a />',
@@ -273,3 +281,7 @@ $(document).ready ->
  Server.fetch()
--- a/assets/javascripts/rooms.js
+++ b/assets/javascripts/rooms.js
 // Generated by CoffeeScript 1.4.0
 (function() {
-  var Room, Rooms, Server, Servers, announcement_scroll, announcement_scrolling, login, logout,
+  var Room, Rooms, Server, Servers, announcement_scroll, announcement_scrolling, login, logout, setRosterHeight,
    __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); }; };
@@ -199,6 +199,7 @@
  login = function() {
    var candy_height;
+    Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
    Candy.init('http://122.0.65.70:5280/http-bind/', {
      core: {
        debug: false,
@@ -227,7 +228,6 @@
    };
    CandyShop.InlineImages.init();
    Candy.View.Template.Login.form = $('#login_form_template').html();
-    Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
    Candy.Core.connect(Candy.Util.getCookie('jid'), Candy.Util.getCookie('password'));
    Candy.View.Pane.Roster.joinAnimation = function(elementId) {
      return $('#' + elementId).show().css('opacity', 1);
@@ -243,6 +243,7 @@
  };
  this.after_login = function() {
+    $('#rooms').css('padding-right', 225);
    $('.online_list').show();
    $('#current_username').html(Candy.Util.getCookie('username'));
    $('.log_reg.not_logged').hide();
@@ -268,6 +269,12 @@
  announcement_scrolling = null;
+  setRosterHeight = function() {
+    var pageHight;
+    pageHight = document.documentElement.clientHeight - 430;
+    return $("#roster").height(pageHight);
+  };
  $(document).ready(function() {
    var new_room, rooms, servers;
    if (Candy.Util.getCookie('jid')) {
@@ -378,6 +385,8 @@
        return announcement_scrolling = null;
      }
    });
+    setRosterHeight();
+    $(window).resize(setRosterHeight);
    $.getJSON('/announcements.json', function(data) {
      var announcement, _i, _len;
      for (_i = 0, _len = data.length; _i < _len; _i++) {

--- a/assets/stylesheets/rooms.less
+++ b/assets/stylesheets/rooms.less
-body {
+body{background:#fbfbfb;}
-  background: #fbfbfb;
-}
 /*顶部*/
-.card_top {
+.card_top{margin:0;height:80px;width:100%;border-bottom:1px solid #dddddd;box-shadow:0px 1px 5px #dddddd;background:#ffffff;position:fixed;z-index:1;min-width:1133px;overflow:hidden;}
-  margin: 0;
+.card_logo{
-  height: 80px;
+  width:216px;height:69px;padding:0px 0 0 25px;float:left;
-  width: 100%;
+  img{margin:10px 0 0 0;border-right:1px solid #dddddd;padding:0 15px 0 0;}
-  border-bottom: 1px solid #dddddd;
-  box-shadow: 0px 1px 5px #dddddd;
-  background: #ffffff;
 }
+.card_form{
-.card_logo {
+  float:left;height:60px;margin:0 0 0 10px;padding:9px 0 0 0;font-size:12px;
-  width: 216px;
+  select{color:#147CC3;padding:4px 5px;width:120px;margin:8px 0 0 11px;float:left;}
-  height: 69px;
+  input[type=button]{background:#147CC3;border:none;border-radius:5px;width:90px;color:#ffffff;height:24px;margin:8px 0 0 25px;cursor:pointer;}
-  padding: 0px 0 0 25px; /*float:left;*/
-  img {
-    margin: 10px 0 0 0;
-    border-right: 1px solid #dddddd;
-    padding: 0 15px 0 0;
-  }
 }
-.card_form {
+.server_filter label{font-size:12px;
-/*float:left;*/
+    span{margin:0 0 0 5px;}
-  height: 60px;
+}
-  margin: 0 0 0 10px;
+.ui-widget.server_filter{font-size:100%;
-  padding: 20px 0 0 0;
+    .ui-multiselect-checkboxes{overflow-y:visible}
-  select {
-    color: #147CC3;
-    padding: 4px 5px;
-    width: 120px;
-    font-size: 12px;
-    margin: 8px 0 0 11px;
-    float: left;
-  }
-  input[type=button] {
-    background: #147CC3;
-    border: none;
-    border-radius: 5px;
-    width: 90px;
-    color: #ffffff;
-    height: 24px;
-    margin: 8px 0 0 25px;
-    cursor: pointer;
-  }
 }
-.log_reg {
+.log_reg{
-/*float:right;*/
+  float:right;font-size:12px;padding:34px 25px 0 0;
-  font-size: 12px;
+  a{
-  padding: 34px 25px 0 0;
+    color:#666666;text-decoration:none;
-  a {
+    &.login{color:#147CC3;}
-    color: #666666;
-    text-decoration: none;
-    &.logging_button {
-      color: #147CC3;
-    }
-  }
-  span {
-    color: #cccccc;
  }
+  span{color:#cccccc;}
 }
-/*中央*/
+.ad_top{margin:10px 30px 0 0;overflow-x:hidden;display:block;float:right;}
-/*.card_center {
-  padding: 20px;
-} */
-#rooms {
-/*float:left;*/
-}
-.online_list {
-/*float:left;*/
+/*中央*/
-  max-width: 210px;
+.card_center{padding:20px;}
-  height: 100%;
+#rooms{float:left;padding:80px 0px 260px 0; }
-  border: 1px solid #dddddd;
+.online_list{
-  padding: 0 0 10px 0;
+   max-width:210px;height:auto;border:1px solid #dddddd;padding:0 0 10px 0;position:fixed;right:15px;top:100px;
-  ul {
+    ul{
-    background: #ffffff;
+        background:#ffffff;overflow-y:hidden;position:relative;
-    overflow-y: hidden;
+        &:hover{overflow-y:scroll;}
-    position: relative;
+        li{
-    &:hover {
+          border-top:1px solid #dddddd;padding:8px 8px;height:32px;
-      overflow-y: scroll;
+          &.online_botttom{background:url(../images/gradual_change.png) repeat-x;height:10px;bottom:0;position:fixed;width:160px;padding:0 8px;border:none;}
-    }
+          img{height:32px;width:32px;float:left;}span{line-height:32px;font-size:12px;padding:0 0 0 10px;float:left;}
-    li {
+          &:hover{background:#eeeeee;color:#3366CC}
-      border-top: 1px solid #dddddd;
-      padding: 8px 8px;
-      height: 32px;
-      &.online_botttom {
-        background: url(../images/gradual_change.png) repeat-x;
-        height: 10px;
-        bottom: 0;
-        position: fixed;
-        width: 160px;
-        padding: 0 8px;
-        border: none;
-      }
-      img {
-        height: 32px;
-        width: 32px;
-        float: left;
-      }
-      span {
-        line-height: 32px;
-        font-size: 12px;
-        padding: 0 0 0 10px;
-        float: left;
-      }
-      &:hover {
-        background: #eeeeee;
-      }
        }
    }
 }
+.online_title{height:20px;background:#f9f9f9;width:190px;font-size:14px;line-height:16px;padding:10px 10px;color:#147CC3;}
-.online_title {
-  height: 20px;
-  background: #f9f9f9;
-  width: 190px;
-  font-size: 14px;
-  line-height: 16px;
-  padding: 10px 10px;
-  color: #147CC3;
-}
-/*zh*/
-/*纵向*/
+/*房间*/
-html, body {
+.room{border:1px solid #eeeeee;border-radius:5px;height:150px;width:200px;background:#FCFCFC;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);position:relative;border:1px solid #cccccc;display:block;float:left;margin:0 15px 15px 0;
-  height: 100%;
+    &:hover{
-}
-.card_top{
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.card_center {
-  padding-top: 80px;
-  margin-top: -80px;
-  height: 100%;
-  overflow: hidden;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  #rooms {
-    height: 100%;
-    overflow-y: auto;
    }
-  .online_list {
+    &.wait{background:#FFFFFF;}
-    height: 100%;
+    &.start{background:#F9F9F9;}
-    -moz-box-sizing: border-box;
+    .room_top{width:190px;height:40px;border-radius:5px 5px 0 0;font-size:14px;padding:0 5px;line-height:40px;color:#147CC3;text-align:center;font-weight:bold;
-    box-sizing: border-box;
+        img{float:left;margin:5px 5px 0 5px;}
-    #roster {
+        span{float:left;}
-      height: 100%;
-      &:hover {
-        overflow-y: auto;
    }
+    .room_body{width:190px;margin:0 5px;border-top:1px solid #eeeeee;height:80px;border-bottom:1px solid #eeeeee;
+        div{float:left;height:80px;}
+        &.double{
+            .players{font-size:12px;width:80px;
+                span{vertical-align:middle;display:block;width:80px;margin:16px 0 0 0;text-align:center;color:#666;}
            }            
        }
-}
+        &.single{
+            .players{font-size:12px;width:80px;
-/*横向*/
+                span{vertical-align:middle;display:block;width:80px;margin:32px 0 0 0;text-align:center;color:#666;}
-.card_top {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: box;
-  .card_form {
-    width: 400px;
            }            
-  .ad_top{
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-    -ms-flex: 1;
-    box-flex: 1;
        }
-}
+        .vs{width:30px;height:80px;line-height:80px;font-weight:bold;font-size:14px;color:#FFC405;text-align:center;text-shadow:0 1px 2px rgba(0, 0, 0, 0.1);}
+    }
-.card_center {
+    .room_member{color:#666;font-size:12px;height:30px;
-  display: -webkit-box;
+        .mode{margin:0;padding:0 0 0 10px;display:block;float:left;height:30px;line-height:30px;
-  display: -moz-box;
+            span{color:#147CC3;}
-  display: -ms-flexbox;
-  display: box;
-  #rooms {
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-    -ms-flex: 1;
-    box-flex: 1;
-    .room {
-      float: left;
-      width: 150px;
-      height: 100px;
-      margin: 5px;
        }
+        img{display:block;float:right;}
+        .private{margin:6px 10px 0 0;}
+        .arena{margin:6px 10px 0 0;}
    }
 }
-/*细节*/
 /*按钮*/
-.logging_button, #reconnect {
+.logging_button, #reconnect{cursor:pointer}
-  cursor: pointer
-}
 /*登陆窗*/
-/*#login{
+#chat-modal{
- #node {width:80px}
+    #login-form{margin:0 0 10px 0;
- .ui-combobox-input {width: 100px}
+        #node{width:60px;}
- .ui-combobox-toggle {width: auto}
+        label{width:70px;font-size:12px;}
-} */
+        label[for=domain]{width:auto;clear:none;padding-right:0px;margin:3px 5px 0 5px;}
-#login-form {
+        #domain{width:88px;font-size:12px;}
-  #node {
+        input{font-size:12px;
-    width: 60px;
+            &#password{width:170px;}
-  }
+            &.button{width:218px;}
-  label{
-    width: 96px;
        }
-  label[for=domain] {
-    width: auto;
-    clear: none;
-    padding-right: 0px;
-  }
-  #domain {
-    width: 74px;
    }  
 }
-/*房间筛选*/
-.server_filter label {
-  font-size: 12px;
-}
-.ui-widget.server_filter {
-  font-size: 100%;
-  .ui-multiselect-checkboxes {
-    overflow-y: visible
-  }
-}
 /*建立房间*/
-#new_room{
+html .ui-dialog{font-size:12px;
-  #server_ip{width: 120px}
+    .ui-widget-header{background:#147CC3;color:#FFFFFF;border:none;font-size:14px;}
-  #server_port{width: 60px}
+    label{width:60px;display:block;float:left;text-align:right;margin:2px 22px 10px 0;
+        &.new_room_pvp{margin:2px 0 0 0;width:40px;}
+    }
+    input{float:left;margin:0 0 10px 0;
+        &#new_room_password{width:90px;}
+        &#new_room_pvp{margin:5px 0 0 10px;}
+        &.newRoomSubmit{border:none;background:#147CC3;border-radius:5px;color:#FFFFFF;padding:3px 8px;display:block;margin:0 0 10px 20px;}
+        &#new_room_start_lp, &#new_room_start_hand, &#new_room_draw_count{width:139px;}
+    }
+    select{float:left;display:block;margin:0 0 10px 0;width:96px;}
+    .newRoomName{display:block;float:left;height:60px;width:280px;border-bottom:1px solid #dddddd;padding-bottom:10px;margin-bottom:15px;}
+    #server_custom{float:left;display:block;width:280px;margin:5px 0 0 0;
+        #server_ip{margin:0 0 0 23px;width:65px;}
+        .newRoomColon{width:10px;margin:2px 8px 0 5px;}
+        #server_auth{margin:5px 5px 0 14px;}
+        .newRoomApprove{margin:3px 0 0 0;width:25px;}
+    }
+    .newRoomMode{float:left;display:block;width:240px;margin:5px 0 0 0;}
+    .newRoomExtra{float:left;display:block;width:280px;border-style:solid;border-width:1px 0 1px 0;border-color:#dddddd;padding:0 0 5px;margin:5px 0 15px 0;}
+}
+#new_room{padding:10px 0 0 0;
+  #server{width:96px;}
+  #server_ip{width:120px}
+  #server_port{width:60px}
 }
 /*公告*/
-.card_form {
+.card_form{
-  padding-top: 8px;
+    /*padding-top:8px;*/
-  #announcements_wrapper{
+    #announcements_wrapper{margin-top:4px;height:25px;line-height:25px;overflow-y:hidden;
-    margin-top: 4px;
-    height:25px;line-height:25px;overflow-y:hidden;
       li{height:25px}
    }
 }
-/* 房间内部 */
+/*聊天*/
-.room{
+html #candy{position:fixed;bottom:0;background:#ffffff;font-size:12px;top:auto;height:260px;
-  border: #cccccc 1px solid;
+#chat-pane{background:#ECECEC;border-top:1px solid #D9D9D9;
-  &:hover {
+        ul{
-    background: #eeeeee;
+            li{margin:5px 5px 0 5px;border-radius:5px 5px 0 0;z-index:1;border-width:1px 1px 0 1px;border-style:solid;border-color:#dddddd;
+                .label{padding:3px 50px 1px 10px;}
+                .close{margin:-1px 5px 0 3px;}
+                .unread{top:2px;}
+                .active{}
            }
-  cursor: default;
-  border-radius: 5px;
-  background-color: white;
-  .user{
-    overflow-x:hidden;
-    white-space:nowrap;
        }   
-  .room_users{
+        #chat-rooms{
-    line-height:20px;
+          .message-pane-wrapper{border-top:1px solid #dddddd;overflow:hidden;
-    height: 40px;
+              &:hover{overflow:auto;}
-    overflow-y: auto;
+          }
+          .message-pane{padding:5px 10px 2px 0;
+              dt{width:50px;margin:0 8px 0 0;}
+              dd{.label a{color:#3366CC;font-weight:normal;}}
+          }
+          .roster-pane{overflow:hidden;
+              &:hover{overflow:auto;}
              .user{
-      height:20px;
+                  margin:0;background:#ffffff;border-top:1px solid #dddddd;border-left:1px solid #dddddd;padding:7px 7px;
-      &:hover {
+                  &:hover{background:#eeeeee;color:#3366CC;}
-        background: lightskyblue;
+                  ul{
+                      .context{margin:0;float:left;margin:0 0 0 40px;border:none;background:url(../images/menu.png) no-repeat 0 6px;
+                          &:hover{background:url(../images/menu_hover.png) no-repeat 0 6px;}
                      }
                  }
              }
-}
+          }
-/*
+        }
-.room.match {
+        #context-menu{
-  border-color: orange;
+            ul{li{border:none;border-radius:0;margin:5px;}}
-}
+        } 
-.room.tag {
+        #chat-toolbar{
-  border-color: green;
+            li{margin:0 5px 5px 5px;}
-}
+        }
-.room.pvp {
+    }
-  border-color: red;
+    #chat-modal-overlay{background:url(../images/overlay_logo.png) center center #E7EAE9 no-repeat;}
-}
-.room.special {
-  border-color: purple;
-} */
-.ad_top{
-  padding-top: 8px;
-  overflow-x: hidden;
 }
-.advertisement{
-  display: block;
-  z-index: 999;
-  width: 468px;
-  height: 60px;
-  border: 1px solid #dddddd;
-  bottom: 25px;
-  left: 8px;
-  background: #F9F9F9;
-  border-radius: 6px;
-  text-align: center;
-  line-height: 60px;
-  font-weight: bold;
-  color: #999999;
-  font-size: 16px;
-  letter-spacing: 2px;
-  cursor: pointer;
-}
\ No newline at end of file
--- a/locales/room_zh.properties
+++ b/locales/room_zh.properties
+filter = 房间筛选
+new = 建立房间
+chat = 聊天工具
+mode[0] = 单局模式
+mode[1] = 比赛模式
+mode[2] = ＴＡＧ
--- a/rooms/index.html
+++ b/rooms/index.html
 <!DOCTYPE html>
-<html class="no-js" xmlns="http://www.w3.org/1999/html">
+<html class="no-js">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -14,8 +14,7 @@
    <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.10.0.custom.min.css"/>
+    <link rel="stylesheet" href="/vendor/stylesheets/smoothness/jquery-ui-1.10.0.custom.css"/>
    <link rel="canonical" href="http://my-card.in/rooms">
    <!-- Google Analytics -->
@@ -46,9 +45,16 @@
            <label for="node">{{_labelUsername}}</label>
            <input type="text" id="node" name="node"/>
            <label for="domain">@</label>
-            <select id="domain" name="domain" tabindex="-1">
+            <select id="domain" name="domain">
-                <option label="my-card.in" value="my-card.in" selected="selected"/>
-                <!--<option label="gmail.com" value="gmail.com"/>-->
+                <option label="my-card.in" value="my-card.in" selected>my-card.in</option>
+                <!-- <option value=""></option>
+               <option label="gmail.com" value="gmail.com"/>-->
            </select>
            {{/displayUsername}}
            <input type="hidden" id="username" name="username" value="{{presetJid}}"/>
@@ -58,38 +64,40 @@
    </script>
    <script id="room_template" type="text/x-jquery-tmpl">
-        <div class="room
+		<section class="room ${status}">
-        {{if (rule != 0) || enable_priority || no_check_deck || no_shuffle_deck || (start_lp != 8000) || (start_hand != 5) || (draw_count != 1)}}
+            <header class="room_top">
-          special
+                <img src="/assets/images/home.png" alt="">
-        {{else}}{{if pvp}}
+                <span>${name}</span>
-          pvp
+            </header>
-        {{/if}}{{if mode == 1}}
+            <div class="room_body {{if mode == 2}}double{{else}}single{{/if}}">
-          match
+                <div class="players">
-        {{/if}}{{if mode == 2}}
+                    {{if mode == 2}}{{each _.filter(users, function(user){return (user.player==0) || (user.player==1)})}}
-          tag
+                    <span>${name}</span>
-        {{/if}}{{/if}}
+                    {{/each}}{{else}}{{each _.filter(users, function(user){return user.player==0})}}
-        ${status}" id="room_${id}">
+                    <span>${name}</span>
-            <span class="room_name">${name}</span>
+                    {{/each}}{{/if}}
-            <span class="room_id">${id}</span>
-            {{if private}}
-            [私密房]
-            {{/if}}
-            <div class="room_users">
-                {{each users}}
-                <div class="user">
-                    <span class="user_name">${name}</span>
                </div>
-                {{/each}}
+                <div class="vs">VS</div>
+                <div class="players">
+                    {{if mode == 2}}{{each _.filter(users, function(user){return (user.player==2) || (user.player==3)})}}
+                    <span>${name}</span>
+                    {{/each}}{{else}}{{each _.filter(users, function(user){return user.player==1})}}
+                    <span>${name}</span>
+                    {{/each}}{{/if}}
                </div>
            </div>
+            <footer class="room_member">
+                <p class="mode"><span>{{if mode == 0}}单局模式{{else}}{{if mode == 1}}比赛模式{{else}}ＴＡＧ{{/if}}{{/if}}</span></p>
+                {{if private}}<img src="/assets/images/lock.png" alt="私密房" class="private">{{/if}}
+                <!--<img src="/assets/images/duel.png" alt="竞技场" class="arena">-->
+            </footer>
+        </section>
   </script>
    <script id="server_template" type="text/x-jquery-tmpl">
-        <option value="${id}" selected="selected">${name}</option>
+        <option value="${id}" selected>${name}</option>
-    </script>
-    <script id="test" type="text/x-jquery-tmpl">
-        <!--# include virtual="/LICENSE.txt" -->
    </script>
 </head>
 <body>
 <!--[if lt IE 10]>
@@ -120,7 +128,7 @@
 <![endif]-->
 <!-- Add your site or application content here -->
-<div class="card_top">
+<header class="card_top">
    <div class="card_logo">
        <img src="/assets/images/logo.png" alt=""/>
    </div>
@@ -134,33 +142,35 @@
            </ul>
        </div>
    </div>
-    <div class="ad_top">
-        <script type="text/javascript"><!--
-google_ad_client = "ca-pub-1173264056684633";
-/* mycard网页大厅右上 */
-google_ad_slot = "2732134865";
-google_ad_width = 468;
-google_ad_height = 60;
-//-->
-</script>
-<script type="text/javascript"
-src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
-</script>
-    </div>
    <div class="log_reg not_logged">
        <a href="http://my-card.in/register">注册</a>
        <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
        <a id="login_button" class="logging_button">登录</a>
    </div>
-    <div class="log_reg logged" style="display: none;">
+    <div class="log_reg logged" hidden>
        <a id="current_username"></a>
        <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
        <a id="logout_button" class="logging_button">退出</a>
    </div>
-</div>
+    <div class="ad_top">
+        <script type="text/javascript">
+            <!--
+            google_ad_client = "ca-pub-1173264056684633";
+            /* mycard网页大厅右上 */
+            google_ad_slot = "2732134865";
+            google_ad_width = 468;
+            google_ad_height = 60;
+            //-->
+        </script>
+        <script type="text/javascript"
+        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
+        </script>
+    </div>
+</header>
 <div class="card_center">
-    <div id="rooms">Loading...</div>
+    <section id="rooms">Loading...</section>
-    <div class="online_list" style="display: none;">
+</div>
+<aside class="online_list" hidden>
    <div class="online_title">聊天工具</div>
    <ul id="roster">
        <li>
@@ -169,12 +179,6 @@ src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        <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>
-            <li class="xmpp" data-jid="fortunemsg@gmail.com" data-nick="Trickster">
-                <img src="https://lh3.googleusercontent.com/-MAW7vCbyWdE/AAAAAAAAAAI/AAAAAAAAAAA/LzyqPKFvee8/s32-c-k/photo.jpg" alt=""/><span>Trickster</span>
-            </li>
        <li class="xmpp" data-jid="悼亡圣约@my-card.in" data-nick="悼亡圣约">
            <img src="https://lh3.googleusercontent.com/-deevaHxZKmU/AAAAAAAAAAI/AAAAAAAAAAA/1AA3-swJOGg/s32-c-k/photo.jpg" alt=""/><span>悼亡圣约</span>
        </li>
@@ -188,47 +192,58 @@ src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            <img src="https://lh6.googleusercontent.com/-zNVBxXLudFc/AAAAAAAAAAI/AAAAAAAAAAA/YH5q1jCmiDQ/s48-c-k/photo.jpg" alt=""/><span>神様と秀吉</span>
        </li>
    </ul>
-    </div>
+</aside>
-</div>
+<footer id="candy" hidden></footer>
-<div id="candy" style="top:auto;height:260px;display:none"></div>
-<div id="new_room_dialog" style="display: none">
+<div id="new_room_dialog" hidden>
    <form id="new_room">
-        <label for="new_room_name">房间名</label><input type="text" id="new_room_name" name="name"/><br/>
+        <div class="newRoomName">
-        <label for="new_room_password">房间密码</label><input type="password" name="password" id="new_room_password" value=""/><br/>
+            <label for="new_room_name">房间名称</label><input type="text" id="new_room_name" name="name"/>
-        <input type="checkbox" name="pvp" id="new_room_pvp" value="pvp"/><label for="new_room_pvp">竞技场</label><br/>
+            <label for="new_room_password">房间密码</label><input type="password" name="password" id="new_room_password" value=""/>
+            <input type="checkbox" name="pvp" id="new_room_pvp" value="pvp"/><label for="new_room_pvp" class="new_room_pvp">竞技场</label>
+        </div>
        <label for="server">服务器</label>
        <select id="server" name="server">
-            <option label="自定义" value="0" selected="selected"/>
+            <option value="0" selected>自定义</option>
        </select>
-        <div id="server_custom" style="display: none;">
+        <div id="server_custom" hidden>
-            <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="text" id="server_ip" name="server_ip" value="127.0.0.1"/><label class="newRoomColon" 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>
+            <input type="checkbox" id="server_auth" name="server_auth"/><label class="newRoomApprove" for="server_auth">认证</label>
        </div>
-        <hr/>
+        <div class="newRoomMode">
            <label for="new_room_rule">卡片允许</label>
            <select id="new_room_rule" name="rule">
-            <option value="0" selected="selected">ＯＣＧ</option>
+                <option value="0" selected>ＯＣＧ</option>
                <option value="1">ＴＣＧ</option>
                <option value="2">ＯＣＧ＆ＴＣＧ</option>
                <option value="3">专有卡禁止</option>
-        </select><br/>
+            </select>
            <label for="new_room_mode">决斗模式</label>
            <select id="new_room_mode" name="mode">
                <option value="0">单局模式</option>
-            <option value="1" selected="selected">比赛模式</option>
+                <option value="1" selected>比赛模式</option>
                <option value="2">ＴＡＧ</option>
            </select>
-        <hr/>
+        </div>
-        <h3>额外选项</h3>
+        <div class="newRoomExtra">
+            <h4>额外选项</h4>
            <label for="new_room_start_lp">初始LP</label>
-        <input type="number" name="start_lp" id="new_room_start_lp" min="0" max="99999" value="8000"/><br/>
+            <input type="number" name="start_lp" id="new_room_start_lp" min="0" max="99999" value="8000"/>
-        <input type="submit" value="确定"/>
+            <label for="new_room_start_hand">初始手牌数</label>
+            <input type="number" name="start_hand" id="new_room_start_hand" min="0" max="60" value="5"/>
+            <label for="new_room_draw_count">每回合抽卡</label>
+            <input type="number" name="draw_count" id="new_room_draw_count" min="0" max="60" value="1"/>
+        </div>
+        <input class="newRoomSubmit" type="submit" value="确定"/>
    </form>
 </div>
-<div id="join_private_room_dialog" style="display: none">
+<div id="join_private_room_dialog" hidden>
    <form id="join_private_room">
        <label for="joinroom_password">房间密码</label>
        <input name="password" type="password" id="joinroom_password" value=""/>
@@ -236,7 +251,7 @@ src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </form>
 </div>
-<!--<div id="login_dialog" style="display: none;">
+<!--<div id="login_dialog" hidden>
    <form id="login">
        <label for="login_node">用户</label><input name="node" type="text" id="login_node" tabindex="1" />@<select name="domain" id="login_domain" style="width:50px">
            <option value="my-card.in">my-card.in</option>
@@ -273,8 +288,6 @@ src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 <script type="text/javascript" src="/vendor/candy/plugins/inline-images/candy.js"></script>
 <link rel="stylesheet" type="text/css" href="/vendor/candy/plugins/inline-images/candy.css"/>
-<script src="/vendor/javascripts/ZeroClipboard.min.js"></script>
 <script src="/assets/javascripts/rooms.js"></script>
 </body>
 </html>