Commit 7e0d4368 authored by 神楽坂玲奈's avatar 神楽坂玲奈

rooms join

parent c72b0a8a
......@@ -4,11 +4,12 @@ class Server extends Spine.Model
@url: "/servers.json"
class Room extends Spine.Model
@configure "Room",
"name",
"status"
@configure "Room", "name", "status"
@belongsTo 'server', Server
class Rooms extends Spine.Controller
events:
'click .room': 'clicked'
constructor: ->
super
Room.bind "refresh", @render
......@@ -16,7 +17,9 @@ class Rooms extends Spine.Controller
@html $('#room_template').tmpl _.sortBy Room.all(), @sort
sort: (room)->
[if room.status == "wait" then 0 else 1]
clicked: (e)->
room = $(e.target).tmplItem().data
mycard.join(room.server().ip, room.server().port, room.name)
$(document).ready ->
......
......@@ -33,6 +33,8 @@
Room.configure("Room", "name", "status");
Room.belongsTo('server', Server);
return Room;
})(Spine.Model);
......@@ -41,6 +43,10 @@
__extends(Rooms, _super);
Rooms.prototype.events = {
'click .room': 'clicked'
};
function Rooms() {
this.render = __bind(this.render, this);
Rooms.__super__.constructor.apply(this, arguments);
......@@ -55,6 +61,12 @@
return [room.status === "wait" ? 0 : 1];
};
Rooms.prototype.clicked = function(e) {
var room;
room = $(e.target).tmplItem().data;
return mycard.join(room.server().ip, room.server().port, room.name);
};
return Rooms;
})(Spine.Controller);
......
<!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]-->
<head>
<!--[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]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>mycard rooms</title>
......@@ -13,7 +17,7 @@
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/vendor/stylesheets/normalize.css">
<link rel="stylesheet/less" type="text/css" href="/assets/stylesheets/rooms.less" media="all" />
<link rel="stylesheet/less" type="text/css" href="/assets/stylesheets/rooms.less" media="all"/>
<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>
......@@ -21,7 +25,8 @@
<div class="room" id="room_${id}">
<span class="room_name">${name}</span>
<span class="room_id">${id}</span>
<div class="room_users" />
<div class="room_users">
{{each users}}
<div class="user">
<span class="user_name">${name}</span>
......@@ -31,16 +36,18 @@
</div>
</script>
</head>
<body>
<!--[if lt IE 7]>
<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>
<![endif]-->
</head>
<body>
<!--[if lt IE 7]>
<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>
<![endif]-->
<!-- Add your site or application content here -->
<div class="card_top">
<!-- Add your site or application content here -->
<div class="card_top">
<div class="card_logo">
<img src="/assets/images/logo.png" alt="" />
<img src="/assets/images/logo.png" alt=""/>
</div>
<div class="card_form">
<select name="" id="">
......@@ -48,103 +55,105 @@
<option value=""></option>
<option value=""></option>
</select>
<input type="button" value="建立房间" />
<input type="button" value="建立房间"/>
</div>
<div class="log_reg">
<a href="">注册</a>
<span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
<a class="login" href="">登录</a>
</div>
</div>
<div class="card_center">
</div>
<div class="card_center">
<div id="rooms"></div>
<div class="online_list">
<div class="online_title">在线用户</div>
<ul>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
<img src="/assets/images/hs1.jpg" alt=""/><span>Yolua Mesiade</span>
</li>
<!-- <li class="online_botttom"></li> -->
</ul>
</div>
<div style="clear:left;"></div>
</div>
<div id="candy" style="top:auto;height:260px;"></div>
</div>
<div id="candy" style="top:auto;height:260px;"></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/plugins.js"></script>-->
<script src="/vendor/javascripts/spine/spine.js"></script>
<script src="/vendor/javascripts/spine/ajax.js"></script>
<script src="/vendor/javascripts/spine/relation.js"></script>
<script src="/vendor/javascripts/underscore-min.js"></script>
<script src="/vendor/javascripts/jquery-1.8.2.min.js"></script>
<script src="/vendor/javascripts/jquery.tmpl.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>
<script src="/vendor/javascripts/spine/relation.js"></script>
<script src="/vendor/javascripts/underscore-min.js"></script>
<script src="/vendor/javascripts/mycard.js"></script>
<link rel="stylesheet" type="text/css" href="/vendor/stylesheets/candy/default.css" />
<script type="text/javascript" src="/vendor/javascripts/candy.libs.min.js"></script>
<script type="text/javascript" src="/vendor/javascripts/candy.min.js"></script>
<link rel="stylesheet" type="text/css" href="/vendor/stylesheets/candy/default.css"/>
<script type="text/javascript" src="/vendor/javascripts/candy.libs.min.js"></script>
<script type="text/javascript" src="/vendor/javascripts/candy.min.js"></script>
<script src="/assets/javascripts/rooms.js"></script>
<script src="/assets/javascripts/rooms.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>-->
</body>
</script>-->
</body>
</html>
[
{"auth":true,"created_at":"2012-08-04T18:12:07+08:00","id":2,"index":"http://ygopro-server.my-card.in:7922/","ip":"122.0.65.70","login":"http://master.smdcn.net:7922/?operation=passcheck&username={name}&pass={password}","max_rooms":100,"name":"mycard","port":7911,"pvp":true,"register":"http://master.smdcn.net:7922/?pass={key}&operation=forceuserpass&username={name}&password={password}","server_type":"ygopro","updated_at":"2012-09-05T07:12:08+08:00"},
{"auth":false,"created_at":"2012-08-04T18:12:07+08:00","id":3,"index":"http://ygopro-server.my-card.in:7966/","ip":"122.0.65.70","login":"http://master.smdcn.net:7966/?operation=passcheck&username={name}&pass={password}","max_rooms":100,"name":"mycard-free","port":7955,"pvp":false,"register":"http://master.smdcn.net:7966/?pass={key}&operation=forceuserpass&username={name}&password={password}","server_type":"ygopro","updated_at":"2012-09-05T07:12:08+08:00"},
{"auth":false,"created_at":"2012-08-04T18:12:07+08:00","id":4,"index":"http://touhou.my-card.in:7988/","ip":"140.113.246.2","login":"http://master.smdcn.net:7966/?operation=passcheck&username={name}&pass={password}","max_rooms":100,"name":"mycard-touhou","port":7977,"pvp":false,"register":"http://master.smdcn.net:7966/?pass={key}&operation=forceuserpass&username={name}&password={password}","server_type":"ygopro","updated_at":"2012-09-05T07:12:08+08:00"}
{"auth":false,"created_at":"2012-08-04T18:12:07+08:00","id":4,"index":"http://zh99998.66rpg.com:7988/","ip":"116.255.201.171","login":"http://zh99998.66rpg.com:7988/?operation=passcheck&username={name}&pass={password}","max_rooms":100,"name":"mycard-66rpg","port":7977,"pvp":false,"register":"http://zh99998.66rpg.com:7988/?pass={key}&operation=forceuserpass&username={name}&password={password}","server_type":"ygopro","updated_at":"2012-09-05T07:12:08+08:00"}
]
\ No newline at end of file
@mycard = {}
@mycard.join = (ip,port,room,username,password)->
result = 'mycard://'
if username
result += encodeURIComponent(username)
if password
result += ':' + encodeURIComponent(password)
result += '@'
result += ip + ':' + port + '/' + encodeURIComponent(room)
window.location.href = result
\ No newline at end of file
// Generated by CoffeeScript 1.4.0
(function() {
this.mycard = {};
this.mycard.join = function(ip, port, room, username, password) {
var result;
result = 'mycard://';
if (username) {
result += encodeURIComponent(username);
if (password) {
result += ':' + encodeURIComponent(password);
}
result += '@';
}
result += ip + ':' + port + '/' + encodeURIComponent(room);
return window.location.href = result;
};
}).call(this);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment