Skip to content

M
Moecube Store
Commit cb539e2b authored by 神楽坂玲奈's avatar 神楽坂玲奈
Browse files
Options

servers browser

parent bdc24aad
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 9 deletions
assets/javascripts/rooms.coffee
View file @ cb539e2b
...@@ -40,11 +40,16 @@ class Servers extends Spine.Controller ...@@ -40,11 +40,16 @@ class Servers extends Spine.Controller
value: server.id value: server.id
).appendTo $('#server') ).appendTo $('#server')
connect: => connect: =>
$('#rooms').html '正在连接...'
wsServer = 'ws://mycard-server.my-card.in:9998' wsServer = 'ws://mycard-server.my-card.in:9998'
websocket = new WebSocket(wsServer); websocket = new WebSocket(wsServer);
websocket.onopen = -> websocket.onopen = ->
$('#rooms').html '正在读取房间列表...'
console.log("websocket: Connected to WebSocket server.") console.log("websocket: Connected to WebSocket server.")
websocket.onclose = -> websocket.onclose = ->
$('#rooms').html '大厅连接中断, '
$('<a />', id: 'reconnect', text: '重新连接').appendTo $('#rooms')
$('#reconnect').click @connect
console.log("websocket: Disconnected"); console.log("websocket: Disconnected");
websocket.onmessage = (evt)-> websocket.onmessage = (evt)->
#console.log('Retrieved data from server: ' + evt.data) #console.log('Retrieved data from server: ' + evt.data)
...@@ -242,6 +247,7 @@ $(document).ready -> ...@@ -242,6 +247,7 @@ $(document).ready ->
rooms = new Rooms(el: $('#rooms')) rooms = new Rooms(el: $('#rooms'))
servers = new Servers(el: $('#servers')) servers = new Servers(el: $('#servers'))
$('#rooms').html '正在读取服务器列表...'
Server.fetch() Server.fetch()
assets/javascripts/rooms.js
View file @ cb539e2b
...@@ -78,12 +78,20 @@ ...@@ -78,12 +78,20 @@
Servers.prototype.connect = function() { Servers.prototype.connect = function() {
var websocket, wsServer; var websocket, wsServer;
$('#rooms').html('正在连接...');
wsServer = 'ws://mycard-server.my-card.in:9998'; wsServer = 'ws://mycard-server.my-card.in:9998';
websocket = new WebSocket(wsServer); websocket = new WebSocket(wsServer);
websocket.onopen = function() { websocket.onopen = function() {
$('#rooms').html('正在读取房间列表...');
return console.log("websocket: Connected to WebSocket server."); return console.log("websocket: Connected to WebSocket server.");
}; };
websocket.onclose = function() { websocket.onclose = function() {
$('#rooms').html('大厅连接中断, ');
$('<a />', {
id: 'reconnect',
text: '重新连接'
}).appendTo($('#rooms'));
$('#reconnect').click(this.connect);
return console.log("websocket: Disconnected"); return console.log("websocket: Disconnected");
}; };
websocket.onmessage = function(evt) { websocket.onmessage = function(evt) {
...@@ -341,6 +349,7 @@ ...@@ -341,6 +349,7 @@
servers = new Servers({ servers = new Servers({
el: $('#servers') el: $('#servers')
}); });
$('#rooms').html('正在读取服务器列表...');
return Server.fetch(); return Server.fetch();
}); });
......
assets/javascripts/servers.coffee 0 → 100644
View file @ cb539e2b
$.getJSON '/servers.json', (data)->
for server in data
$('<tr />').append(
$('<td />', text: String.fromCharCode 'A'.charCodeAt() + server.id),
$('<td />', text: server.name),
$('<td />').append($('<a />', 'href': server.index, 'text': server.index)),
$('<td />', text: server.ip),
$('<td />', text: server.port),
$('<td />', text: server.auth),
$('<td />', text: server.pvp)
).appendTo($('#servers'))
\ No newline at end of file
assets/javascripts/servers.js 0 → 100644
View file @ cb539e2b
// Generated by CoffeeScript 1.4.0
(function() {
$.getJSON('/servers.json', function(data) {
var server, _i, _len, _results;
_results = [];
for (_i = 0, _len = data.length; _i < _len; _i++) {
server = data[_i];
_results.push($('<tr />').append($('<td />', {
text: String.fromCharCode('A'.charCodeAt() + server.id)
}), $('<td />', {
text: server.name
}), $('<td />').append($('<a />', {
'href': server.index,
'text': server.index
})), $('<td />', {
text: server.ip
}), $('<td />', {
text: server.port
}), $('<td />', {
text: server.auth
}), $('<td />', {
text: server.pvp
})).appendTo($('#servers')));
}
return _results;
});
}).call(this);
assets/stylesheets/browser.css 0 → 100644
View file @ cb539e2b
#bodyMask2 {
position: fixed;
left: 0;
top: 0;
z-index: 99999999999;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity = 90);
-moz-opacity: .9;
opacity: .9;
}
.ico {
background: url(http://im-img.qq.com/macqq/images/icon.png?t=20130130) no-repeat 0 0;
}
.layerDiv {
position: absolute;
position: fixed;
_position: absolute;
z-index: 9999999999999;
width: 730px;
height: 340px;
left: 50%;
top: 50%;
margin: -170px 0 0 -365px;
padding: 0;
background: #fff;
border: 2px #808080 solid;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.layerDiv h2 {
color: #000;
font-size: 24px;
margin: 30px 25px 10px 25px;
line-height: 1.2em;
clear: both;
}
.layerDiv h3 {
color: #333;
font-size: 16px;
margin: 20px 25px;
clear: both;
}
.layerDiv div {
color: #333;
font-size: 14px;
margin: 0 25px;
padding-top: 20px;
border-top: 1px #ccc dotted;
clear: both;
}
.layerDiv div span {
color: #666;
font-size: 12px;
float: right;
}
.layerDiv div span a {
color: #369;
}
.layerDiv div span a:hover {
color: #0884CD;
}
.layerDiv ul {
height: 100px;
width: 540px;
_width: 580px;
margin: 20px auto 0 auto;
clear: both;
}
.layerDiv ul li {
float: left;
width: 105px;
height: 80px;
margin: 0 15px;
text-align: center;
}
.layerDiv ul li a {
height: 80px;
display: block;
clear: both;
}
.icoChrome {
background-position: 0 -228px;
height: 80px;
width: 105px;
display: inline-block;
margin-right: 20px;
}
.icoOpera {
background-position: -115px -228px;
height: 80px;
width: 73px;
display: inline-block;
margin-right: 20px;
}
.icoFirefox {
background-position: -197px -228px;
height: 80px;
width: 61px;
display: inline-block;
margin-right: 20px;
}
.icoSafar {
background-position: -267px -228px;
height: 80px;
width: 69px;
display: inline-block;
}
.layerDiv p {
border-top: 1px #ccc dotted;
padding-top: 15px;
position: relative;
margin: 0 25px;
}
.layerDiv p a {
color: #666;
font-size: 16px;
height: 32px;
line-height: 32px;
}
.layerDiv p a:hover {
color: #0884CD;
}
/* zh */
.layerDiv{
height: 560px;
margin-top: -300px;
}
.layerDiv iframe {
width: 100%;
height: 100%;
margin: 0 25px;
}
\ No newline at end of file
assets/stylesheets/rooms.less
View file @ cb539e2b
...@@ -202,8 +202,8 @@ html, body { ...@@ -202,8 +202,8 @@ html, body {
} }
} }
/*登陆按钮*/ /*按钮*/
.logging_button { .logging_button, #reconnect {
cursor: pointer cursor: pointer
} }
...@@ -248,4 +248,3 @@ html, body { ...@@ -248,4 +248,3 @@ html, body {
#server_port{width: 60px} #server_port{width: 60px}
} }
assets/stylesheets/servers.css 0 → 100644
View file @ cb539e2b
#servers{
width: 90%;
margin-left: auto;
margin-right: auto;
border:1px solid #cccccc;
}
\ No newline at end of file
rooms/index.html
View file @ cb539e2b
...@@ -80,11 +80,32 @@ ...@@ -80,11 +80,32 @@
</head> </head>
<body> <body>
<!--[if lt IE 10]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade <link rel="stylesheet" href="/assets/stylesheets/browser.css">
your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to <div id="bodyMask2"></div>
improve your experience.</p> <div id="browser" class="layerDiv">
<![endif]--> <h2>噢，您是否知道您正在使用的浏览器无法支持我们的页面？</h2>
<h3>很抱歉，由于采用了HTML5，当前浏览器无法完美呈现该页面。</h3>
<div><span>如果你还不知道什么是HTML5标准，请看<a href="http://zh.wikipedia.org/wiki/HTML5" target="_blank">维基百科</a>。</span>建议您使用以下浏览器的最新版本：
</div>
<ul>
<li><a target="_blank" href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html" class="ico icoChrome"
title="谷歌Chrome浏览器"></a></li>
<li><a target="_blank" href="http://www.opera.com/" class="ico icoOpera" title="Opera浏览器"></a></li>
<li><a target="_blank" href="http://www.firefox.com.cn/download/" class="ico icoFirefox" title="火狐浏览器"></a></li>
<li>
<a target="_blank" href="http://www.apple.com.cn/safari/download/" class="ico icoSafar" title="Safar浏览器"></a>
</li>
</ul>
<div>或者，可以使用基本版本 <span><a href="https://github.com/zh99998/mycard/wiki/%E5%AF%B9%E6%88%98:%E7%9B%B4%E6%8E%A5%E8%BF%9E%E6%8E%A5#wiki-wrapper">使用教程</a>
</span>
</div>
<iframe id="basic" src="/servers" frameBorder="0"></iframe>
</div>
<!-- Add your site or application content here --> <!-- Add your site or application content here -->
<div class="card_top"> <div class="card_top">
...@@ -107,7 +128,7 @@ ...@@ -107,7 +128,7 @@
</div> </div>
</div> </div>
<div class="card_center"> <div class="card_center">
<div id="rooms"></div> <div id="rooms">Loading...</div>
<div class="online_list" style="display: none;"> <div class="online_list" style="display: none;">
<div class="online_title">聊天工具</div> <div class="online_title">聊天工具</div>
<ul id="roster"> <ul id="roster">
...@@ -126,6 +147,9 @@ ...@@ -126,6 +147,9 @@
<li class="xmpp" data-jid="悼亡圣约@my-card.in" data-nick="悼亡圣约"> <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> <img src="https://lh3.googleusercontent.com/-deevaHxZKmU/AAAAAAAAAAI/AAAAAAAAAAA/1AA3-swJOGg/s32-c-k/photo.jpg" alt=""/><span>悼亡圣约</span>
</li> </li>
<li class="xmpp" data-jid="悠夏丶@my-card.in" data-nick="悠夏丶">
<img src="https://lh4.googleusercontent.com/-kIAfjf8dim8/AAAAAAAAAAI/AAAAAAAAAAA/BPCryxovCU8/s48-c-k/photo.jpg" alt=""/><span>悠夏丶</span>
</li>
<li class="xmpp" data-jid="萌の狐@my-card.in" data-nick="萌の狐"> <li class="xmpp" data-jid="萌の狐@my-card.in" data-nick="萌の狐">
<img src="https://lh3.googleusercontent.com/-oyc22EZHGvo/AAAAAAAAAAI/AAAAAAAAAAA/mXrA7Vz0NJg/s32-c-k/photo.jpg" alt=""/><span>萌の狐</span> <img src="https://lh3.googleusercontent.com/-oyc22EZHGvo/AAAAAAAAAAI/AAAAAAAAAAA/mXrA7Vz0NJg/s32-c-k/photo.jpg" alt=""/><span>萌の狐</span>
</li> </li>
......
servers/index.html 0 → 100644
View file @ cb539e2b
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="mycard,ygocore,ygopro,yugioh,yu-gi-oh,ygo,萌卡,游戏王,自动,决斗,平台">
<meta name="description" content="Mycard萌卡, 建立在YGOPRO上自动化决斗工具上的卡牌游戏(游戏王)对战平台, 目前正在进行新版本的公测哦. 注册与客户端的下载都可以在这里完成.">
<link rel="stylesheet" href="/vendor/stylesheets/normalize.css">
<script src="/vendor/javascripts/modernizr-2.6.2.min.js"></script>
<script src="/vendor/javascripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<link rel="canonical" href="http://my-card.in/servers">
<link rel="stylesheet" href="/assets/stylesheets/servers.css">
<title>Mycard - 服务器列表</title>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29582484-1']);
_gaq.push(['_trackPageview']);
var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<p>mycard对战服务器列表：</p>
<table id="servers">
<thead>
<td>编号</td>
<td>名称</td>
<td>访问地址</td>
<td>IP地址</td>
<td>端口</td>
<td>认证</td>
<td>竞技场</td>
</thead>
</table>
<script src="/assets/javascripts/servers.js" type="text/javascript"></script>
<p>注意：因为对战服务器随时可能会变更，如果您要转载此服务器列表，请务必注明到
<a href="http://my-card.in/servers">http://my-card.in/servers</a> 查看更新，如果您是开发者，可以使用以下API来获取这组列表
<a href="http://my-card.in/servers.json">http://my-card.in/servers.json</a>。
</p>
</body>
</html>
\ No newline at end of file
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