announcement

announcements.json

+[
+    {"id":1,"title":"网页大厅测试中,需要本机安装了mycard才能用哦","url":"http://my-card.in/rooms/","created_at":"2012-08-04T18:12:07+08:00","updated_at":"2012-09-05T07:12:08+08:00"}
+]
\ No newline at end of file

assets/javascripts/rooms.coffee

@@ -46,7 +46,7 @@ class Servers extends Spine.Controller
     websocket.onopen = ->
       $('#rooms').html '正在读取房间列表...'
       console.log("websocket: Connected to WebSocket server.")
-    websocket.onclose = ->
+    websocket.onclose = (evt)=>
       $('#rooms').html '大厅连接中断, '
       $('<a />', id: 'reconnect', text: '重新连接').appendTo $('#rooms')
       $('#reconnect').click @connect
@@ -73,7 +73,7 @@ class Rooms extends Spine.Controller
     Room.bind "refresh", @render
   render: =>
     @html $('#room_template').tmpl _.sortBy(_.filter(Room.all(), @filter), @sort)
-
+    $('#status').html "房间数量: #{Room.findAllByAttribute('status', 'wait').length}/#{Room.count()}"
   filter: (room)->
     _.find $('#servers').multiselect('getChecked'), (e)->
       parseInt(e.value) == room.server_id
@@ -153,6 +153,12 @@ logout = ->
   Candy.Util.deleteCookie('password')
   window.location.reload()
 
+announcement_scroll = (obj)->
+  $('#announcements_wrapper').find("ul:first").animate
+    marginTop:"-25px"
+  ,500,->
+    $(this).css({marginTop:"0px"}).find("li:first").appendTo(this)
+announcement_scrolling = null
 $(document).ready ->
   #stroll.bind( '.online_list ul' );
 
@@ -245,6 +251,22 @@ $(document).ready ->
   $('#logout_button').click ->
     logout()
 
+  $('#announcements li').hover (e)->
+    if e.type == 'mouseenter'
+      clearInterval announcement_scrolling if announcement_scrolling
+    else
+      announcement_scrolling = setInterval(announcement_scroll, 5000) unless announcement_scrolling
+      announcement_scrolling = null
+
+  $.getJSON '/announcements.json', (data)->
+    for announcement in data
+      $('<li />').append($('<a />',
+        href: announcement.url
+        target: '_blank'
+        text: announcement.title
+      )).appendTo $('#announcements')
+    announcement_scrolling = setInterval(announcement_scroll, 5000) if data.length
+
   rooms = new Rooms(el: $('#rooms'))
   servers = new Servers(el: $('#servers'))
   $('#rooms').html '正在读取服务器列表...'

assets/javascripts/rooms.js

 // Generated by CoffeeScript 1.4.0
 (function() {
-  var Room, Rooms, Server, Servers, login, logout,
+  var Room, Rooms, Server, Servers, announcement_scroll, announcement_scrolling, 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); }; };
@@ -77,7 +77,8 @@
     };
 
     Servers.prototype.connect = function() {
-      var websocket, wsServer;
+      var websocket, wsServer,
+        _this = this;
       $('#rooms').html('正在连接...');
       wsServer = 'ws://mycard-server.my-card.in:9998';
       websocket = new WebSocket(wsServer);
@@ -85,13 +86,13 @@
         $('#rooms').html('正在读取房间列表...');
         return console.log("websocket: Connected to WebSocket server.");
       };
-      websocket.onclose = function() {
+      websocket.onclose = function(evt) {
         $('#rooms').html('大厅连接中断, ');
         $('<a />', {
           id: 'reconnect',
           text: '重新连接'
         }).appendTo($('#rooms'));
-        $('#reconnect').click(this.connect);
+        $('#reconnect').click(_this.connect);
         return console.log("websocket: Disconnected");
       };
       websocket.onmessage = function(evt) {
@@ -157,7 +158,8 @@
     }
 
     Rooms.prototype.render = function() {
-      return this.html($('#room_template').tmpl(_.sortBy(_.filter(Room.all(), this.filter), this.sort)));
+      this.html($('#room_template').tmpl(_.sortBy(_.filter(Room.all(), this.filter), this.sort)));
+      return $('#status').html("房间数量: " + (Room.findAllByAttribute('status', 'wait').length) + "/" + (Room.count()));
     };
 
     Rooms.prototype.filter = function(room) {
@@ -245,6 +247,18 @@
     return window.location.reload();
   };
 
+  announcement_scroll = function(obj) {
+    return $('#announcements_wrapper').find("ul:first").animate({
+      marginTop: "-25px"
+    }, 500, function() {
+      return $(this).css({
+        marginTop: "0px"
+      }).find("li:first").appendTo(this);
+    });
+  };
+
+  announcement_scrolling = null;
+
   $(document).ready(function() {
     var new_room, rooms, servers;
     if (Candy.Util.getCookie('jid')) {
@@ -343,6 +357,32 @@
     $('#logout_button').click(function() {
       return logout();
     });
+    $('#announcements li').hover(function(e) {
+      if (e.type === 'mouseenter') {
+        if (announcement_scrolling) {
+          return clearInterval(announcement_scrolling);
+        }
+      } else {
+        if (!announcement_scrolling) {
+          announcement_scrolling = setInterval(announcement_scroll, 5000);
+        }
+        return announcement_scrolling = null;
+      }
+    });
+    $.getJSON('/announcements.json', function(data) {
+      var announcement, _i, _len;
+      for (_i = 0, _len = data.length; _i < _len; _i++) {
+        announcement = data[_i];
+        $('<li />').append($('<a />', {
+          href: announcement.url,
+          target: '_blank',
+          text: announcement.title
+        })).appendTo($('#announcements'));
+      }
+      if (data.length) {
+        return announcement_scrolling = setInterval(announcement_scroll, 5000);
+      }
+    });
     rooms = new Rooms({
       el: $('#rooms')
     });

assets/stylesheets/rooms.less

@@ -248,3 +248,12 @@ html, body {
   #server_port{width: 60px}
 }
 
+/*公告*/
+.card_form {
+  padding-top: 8px;
+  #announcements_wrapper{
+    margin-top: 4px;
+    height:25px;line-height:25px;overflow-y:hidden;
+    li{height:25px}
+  }
+}

rooms/index.html

 <!DOCTYPE html>
-<html class="no-js">
+<html class="no-js" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -115,6 +115,12 @@
     <div class="card_form">
         <select id="servers" multiple="multiple"></select>
         <input id="new_room_button" type="button" value="建立房间"/>
+
+        <div id="announcements_wrapper">
+            <ul id="announcements">
+                <li id="status">Loading...</li>
+            </ul>
+        </div>
     </div>
     <div class="log_reg not_logged">
         <a href="http://my-card.in/register">注册</a>
@@ -170,6 +176,7 @@
         <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>