Skip to content

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

graphics mode init

parent db9df0ff
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 44 deletions
assets/javascripts/decks.coffee
View file @ 576e592c
...@@ -11,6 +11,10 @@ class Card extends Spine.Model ...@@ -11,6 +11,10 @@ class Card extends Spine.Model
@hasMany 'card_usages', CardUsage @hasMany 'card_usages', CardUsage
@url: "https://api.mongolab.com/api/1/databases/mycard/collections/cards?apiKey=508e5726e4b0c54ca4492ead" @url: "https://api.mongolab.com/api/1/databases/mycard/collections/cards?apiKey=508e5726e4b0c54ca4492ead"
@locale_url: "https://api.mongolab.com/api/1/databases/mycard/collections/lang_#{locale}?apiKey=508e5726e4b0c54ca4492ead" @locale_url: "https://api.mongolab.com/api/1/databases/mycard/collections/lang_#{locale}?apiKey=508e5726e4b0c54ca4492ead"
image_url: ->
"http://images.my-card.in/#{@id}.jpg"
image_thumbnail_url: ->
"http://images.my-card.in/thumbnail/#{@id}.jpg"
@query: (q, callback)-> @query: (q, callback)->
$.getJSON "#{@url}&q=#{JSON.stringify(q)}", (cards) => $.getJSON "#{@url}&q=#{JSON.stringify(q)}", (cards) =>
cards_id = (card._id for card in cards) cards_id = (card._id for card in cards)
...@@ -103,10 +107,16 @@ class Deck extends Spine.Controller ...@@ -103,10 +107,16 @@ class Deck extends Spine.Controller
main_count += card_usage.count main_count += card_usage.count
category_count[(category for category in card.card_type when category in Card.categories).pop()] += card_usage.count category_count[(category for category in card.card_type when category in Card.categories).pop()] += card_usage.count
@html $('#deck_template').tmpl({main: @main, side: @side, extra: @extra, main_count: main_count, side_count: side_count, extra_count: extra_count, category_count: category_count}) @html $('#deck_template').tmpl({main: @main, side: @side, extra: @extra, main_count: main_count, side_count: side_count, extra_count: extra_count, category_count: category_count})
@el.jscroll({W: "12px", Btn: $('.card_usage').draggable()
{btn: false}}); if $('.operate_area').hasClass('text')
@el.jscroll({W: "12px", Btn:
{btn: false}});
@url = "http://my-card.in/decks/?name=#{@deck_name}&cards=#{@encode()}" @url = "http://my-card.in/decks/?name=#{@deck_name}&cards=#{@encode()}"
#alert @url #alert @url
#$('#deck_url_ydk').attr 'download', Deck.deck_name + '.ydk' #$('#deck_url_ydk').attr 'download', Deck.deck_name + '.ydk'
#$('#deck_url_ydk').attr 'href', 'data:application/octet-stream,' + (card_usage.card_id for i in ).concat((card_usage.card_id for i in [0...card_usage.count] for card_usage in @extra), ["!side"], (card_usage.card_id for i in [0...card_usage.count] for card_usage in @side)).join("%0a") #$('#deck_url_ydk').attr 'href', 'data:application/octet-stream,' + (card_usage.card_id for i in ).concat((card_usage.card_id for i in [0...card_usage.count] for card_usage in @extra), ["!side"], (card_usage.card_id for i in [0...card_usage.count] for card_usage in @side)).join("%0a")
......
assets/javascripts/decks.js
View file @ 576e592c
...@@ -38,6 +38,14 @@ ...@@ -38,6 +38,14 @@
Card.locale_url = "https://api.mongolab.com/api/1/databases/mycard/collections/lang_" + locale + "?apiKey=508e5726e4b0c54ca4492ead"; Card.locale_url = "https://api.mongolab.com/api/1/databases/mycard/collections/lang_" + locale + "?apiKey=508e5726e4b0c54ca4492ead";
Card.prototype.image_url = function() {
return "http://images.my-card.in/" + this.id + ".jpg";
};
Card.prototype.image_thumbnail_url = function() {
return "http://images.my-card.in/thumbnail/" + this.id + ".jpg";
};
Card.query = function(q, callback) { Card.query = function(q, callback) {
var _this = this; var _this = this;
return $.getJSON("" + this.url + "&q=" + (JSON.stringify(q)), function(cards) { return $.getJSON("" + this.url + "&q=" + (JSON.stringify(q)), function(cards) {
...@@ -271,12 +279,15 @@ ...@@ -271,12 +279,15 @@
extra_count: extra_count, extra_count: extra_count,
category_count: category_count category_count: category_count
})); }));
this.el.jscroll({ $('.card_usage').draggable();
W: "12px", if ($('.operate_area').hasClass('text')) {
Btn: { this.el.jscroll({
btn: false W: "12px",
} Btn: {
}); btn: false
}
});
}
return this.url = "http://my-card.in/decks/?name=" + this.deck_name + "&cards=" + (this.encode()); return this.url = "http://my-card.in/decks/?name=" + this.deck_name + "&cards=" + (this.encode());
}; };
......
assets/stylesheets/decks.less
View file @ 576e592c
...@@ -35,7 +35,7 @@ body{margin:0;padding:0;background:#eee;} ...@@ -35,7 +35,7 @@ body{margin:0;padding:0;background:#eee;}
/*右边区域*/ /*右边区域*/
/*搜索*/ /*搜索*/
.search_data{height:700px;width:518px;margin:0;padding:0;} .search_data.text{height:700px;width:518px;margin:0;padding:0;}
.advanced_search{font-size:12px;margin:0;width:48px;height:12px;padding:10px 12px;background:#ffffff;} .advanced_search{font-size:12px;margin:0;width:48px;height:12px;padding:10px 12px;background:#ffffff;}
.advanced_search:hover{cursor:pointer;} .advanced_search:hover{cursor:pointer;}
.advanced_search_father{width:80px;height:36px;overflow:hidden;margin:18px 0 0 0;padding:4px 0 0 4px;} .advanced_search_father{width:80px;height:36px;overflow:hidden;margin:18px 0 0 0;padding:4px 0 0 4px;}
...@@ -123,7 +123,7 @@ body{margin:0;padding:0;background:#eee;} ...@@ -123,7 +123,7 @@ body{margin:0;padding:0;background:#eee;}
/*操作区域*/ /*操作区域*/
.operate_area{ .operate_area.text{
width:162px;height:700px;padding:0 0 0 10px; width:162px;height:700px;padding:0 0 0 10px;
fieldset{ fieldset{
border:1px solid #cccccc;padding:5px;margin:14px 0 0 0;background:#F9F9F9;border-radius:6px;font-size:12px;color:#666666;//height:586px; border:1px solid #cccccc;padding:5px;margin:14px 0 0 0;background:#F9F9F9;border-radius:6px;font-size:12px;color:#666666;//height:586px;
...@@ -163,6 +163,19 @@ body{margin:0;padding:0;background:#eee;} ...@@ -163,6 +163,19 @@ body{margin:0;padding:0;background:#eee;}
.upload_ope{float:left;height:25px;padding:5px 0 0 5px;cursor:pointer;} .upload_ope{float:left;height:25px;padding:5px 0 0 5px;cursor:pointer;}
.save_ope{float:left;height:25px;padding:5px 0 0 6px;cursor:pointer;} .save_ope{float:left;height:25px;padding:5px 0 0 6px;cursor:pointer;}
/* 文字版 */
.search_data.text{
.search_bar{width:508px;height:80px;}
.search_input{width:350px;margin:2px 0 0 0;border:none;background:none;height:20px;}
}
/* 图文版 */
.operate_area.graphic{height:700px;width:518px;}
.search_data.graphic{width:162px;height:700px;float:right;
overflow: hidden;
}
.card.Spell{color:green} .card.Spell{color:green}
.card.Trap{color:purple} .card.Trap{color:purple}
......
decks/index.html
View file @ 576e592c
...@@ -67,13 +67,17 @@ ...@@ -67,13 +67,17 @@
</div> </div>
</script> </script>
<script id="card_usage_template" type="text/x-jquery-tmpl"> <script id="card_usage_text_template" type="text/x-jquery-tmpl">
<p class="card_usage"> <p class="card_usage">
<span class="card ${$data.card().card_type.join(' ')}">${$data.card().name}</span> <span class="card ${$data.card().card_type.join(' ')}">${$data.card().name}</span>
<i>${count}</i> <i>${count}</i>
</p> </p>
</script> </script>
<script id="card_usage_graphic_template" type="text/x-jquery-tmpl">
{{each Array(count)}}
<img class="card_usage" width="44" height="64" src="${$data.card().image_thumbnail_url()}"/>
{{/each}}
</script>
<script id="deck_template" type="text/x-jquery-tmpl"> <script id="deck_template" type="text/x-jquery-tmpl">
<fieldset id="deck_main"> <fieldset id="deck_main">
<legend id="deck_main_title" class="deck_title main">主卡组 <legend id="deck_main_title" class="deck_title main">主卡组
...@@ -82,25 +86,27 @@ ...@@ -82,25 +86,27 @@
<span class="deck_category_count ${$index}">${$value}</span>{{/each}}) <span class="deck_category_count ${$index}">${$value}</span>{{/each}})
</small> </small>
</legend> </legend>
{{tmpl(main) "#card_usage_template"}} {{tmpl(main) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
</fieldset> </fieldset>
<fieldset id="deck_side"> <fieldset id="deck_side">
<legend id="deck_side_title" class="deck_title main">副卡组 <legend id="deck_side_title" class="deck_title main">副卡组
<small>(${side_count})</small> <small>(${side_count})</small>
</legend> </legend>
{{tmpl(side) "#card_usage_template"}} {{tmpl(side) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
</fieldset> </fieldset>
<fieldset id="deck_extra"> <fieldset id="deck_extra">
<legend id="deck_extra_title" class="deck_title main">额外卡组 <legend id="deck_extra_title" class="deck_title main">额外卡组
<small>(${extra_count})</small> <small>(${extra_count})</small>
</legend> </legend>
{{tmpl(extra) "#card_usage_template"}} {{tmpl(extra) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
</fieldset> </fieldset>
</script> </script>
</head> </head>
<body> <body>
<!--[if lt IE 10]> <!--[if lt IE 10]>
<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> <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]--> <![endif]-->
<div class="main_div line"> <div class="main_div line">
<div id="card" class="main_left floatleft line"> <div id="card" class="main_left floatleft line">
...@@ -156,11 +162,10 @@ ...@@ -156,11 +162,10 @@
</div> </div>
</div> </div>
<div class="main_right floatleft line"> <div class="main_right floatleft line">
<div class="floatleft search_data"> <div class="floatleft search_data graphic">
<div class="floatleft" style="width:508px;height:80px;"> <div class="floatleft search_bar">
<div class="floatleft search_frame"> <div class="floatleft search_frame">
<input type="text" id="" name="" style="width:350px;margin:2px 0 0 0;border:none;background:none;height:20px;" <input type="text" name="" class="search_input floatleft" value=""/>
class="floatleft" value=""/>
<input type="submit" class="serach_button" value=""/> <input type="submit" class="serach_button" value=""/>
</div> </div>
<div class="floatright advanced_search_father"> <div class="floatright advanced_search_father">
...@@ -172,51 +177,51 @@ ...@@ -172,51 +177,51 @@
<div class="submenu_main"> <div class="submenu_main">
<div class="submenu_mainLeft"> <div class="submenu_mainLeft">
<div class="submenu_unit"> <div class="submenu_unit">
<label for="">种类：</label> <label>种类：</label>
<select class="select_half" name="" id=""> <select class="select_half" name="">
<option>(无)</option> <option>(无)</option>
</select> </select>
<select class="select_half" name="" id=""> <select class="select_half" name="">
<option>(无)</option> <option>(无)</option>
<option></option> <option></option>
</select> </select>
</div> </div>
<div class="submenu_unit"> <div class="submenu_unit">
<label for="">种类：</label> <label>种类：</label>
<select class="select_full" name="" id=""> <select class="select_full" name="">
<option>(无)</option> <option>(无)</option>
</select> </select>
</div> </div>
<div class="submenu_unit"> <div class="submenu_unit">
<label for="">种类：</label> <label>种类：</label>
<select class="select_full" name="" id=""> <select class="select_full" name="">
<option>(无)</option> <option>(无)</option>
</select> </select>
</div> </div>
<div class="submenu_unit"> <div class="submenu_unit">
<label for="">种类：</label> <label>种类：</label>
<input style="width:137px;margin:-2px 0 0 5px;" type="text" name="" id=""/> <input style="width:137px;margin:-2px 0 0 5px;" type="text" name=""/>
</div> </div>
</div> </div>
<div class="submenu_mainRight"> <div class="submenu_mainRight">
<div class="submenu_unit"> <div class="submenu_unit">
<label for="">种类：</label> <label>种类：</label>
<select class="select_full" name="" id=""> <select class="select_full" name="">
<option>(无)</option> <option>(无)</option>
</select> </select>
</div> </div>
<div class="submenu_unitLarge"> <div class="submenu_unitLarge">
<label for="">种类：</label> <label>种类：</label>
<input style="width:83px;margin:-2px 0 0 5px;" type="text" name="" id=""/> <input style="width:83px;margin:-2px 0 0 5px;" type="text" name=""/>
<label style="margin:10px 0 0 0;" for="">种类：</label> <label style="margin:10px 0 0 0;">种类：</label>
<input style="width:83px;margin:10px 0 0 5px;" type="text" name="" id=""/> <input style="width:83px;margin:10px 0 0 5px;" type="text" name=""/>
</div> </div>
<input type="button" value="效果"/> <input type="button" value="效果"/>
<div class="submenu_unit"> <div class="submenu_unit">
<label for="">种类：</label> <label>种类：</label>
<input style="width:137px;margin:-2px 0 0 5px;" type="text" name="" id=""/> <input style="width:137px;margin:-2px 0 0 5px;" type="text" name=""/>
</div> </div>
</div> </div>
</div> </div>
...@@ -241,16 +246,16 @@ ...@@ -241,16 +246,16 @@
<div id="filter_name" class="filter_float" style="display:none;"> <div id="filter_name" class="filter_float" style="display:none;">
<!-- 修改 --> <!-- 修改 -->
<div> <div>
<input type="checkbox" name="" id=""/> <input type="checkbox" name=""/>
<label for="">按照名称排序</label> <label>按照名称排序</label>
</div> </div>
<div> <div>
<input type="checkbox" name="" id=""/> <input type="checkbox" name=""/>
<label for="">按照名称排序</label> <label>按照名称排序</label>
</div> </div>
<div> <div>
<input type="checkbox" name="" id=""/> <input type="checkbox" name=""/>
<label for="">按照名称排序</label> <label>按照名称排序</label>
</div> </div>
<!-- 修改 --> <!-- 修改 -->
</div> </div>
...@@ -404,7 +409,7 @@ ...@@ -404,7 +409,7 @@
<!--{"archetypes":"","card_type":"\u6548\u679c\u602a\u517d","id":2067,"lore":"\u8fd9\u5f20\u5361\u653b\u51fb\u7684\u573a\u5408\uff0c\u5bf9\u65b9\u76f4\u5230\u4f24\u5bb3\u6b65\u9aa4\u7ed3\u675f\u65f6\u4e0d\u80fd\u53d1\u52a8\u9b54\u6cd5\u00b7\u9677\u9631\u5361\u3002\u7528\u4ee5\u4e0b\u7684\u602a\u517d\u4e3a\u796d\u54c1\u4f5c\u796d\u54c1\u53ec\u5524\u7684\u573a\u5408\uff0c\u8fd9\u5f20\u5361\u5f97\u5230\u5404\u81ea\u7684\u6548\u679c\u3002\u25cf\u7eff\u9f7f\u8f6e\uff1a\u8fd9\u5f20\u5361\u653b\u51fb\u5b88\u5907\u8868\u793a\u602a\u517d\u65f6\uff0c\u82e5\u8fd9\u5f20\u5361\u7684\u653b\u51fb\u529b\u8d85\u8fc7\u5b88\u5907\u8868\u793a\u602a\u517d\u7684\u5b88\u5907\u529b\uff0c\u7ed9\u4e88\u5bf9\u65b9\u57fa\u672c\u5206\u90a3\u4e2a\u6570\u503c\u7684\u6218\u6597\u4f24\u5bb3\u3002\u25cf\u7ea2\u9f7f\u8f6e\uff1a\u7ed9\u4e88\u5bf9\u65b9\u73a9\u5bb6\u6218\u6597\u4f24\u5bb3\u65f6\uff0c\u7ed9\u4e88\u5bf9\u65b9\u57fa\u672c\u5206400\u5206\u4f24\u5bb3\u3002\u25cf\u9ec4\u9f7f\u8f6e\uff1a\u6218\u6597\u7834\u574f\u5bf9\u65b9\u602a\u517d\u7684\u573a\u5408\uff0c\u7ed9\u4e88\u5bf9\u65b9\u57fa\u672c\u5206600\u5206\u4f24\u5bb3\u3002","mediums":"OCG\tTCG","monster_atk":3000,"monster_attribute":"\u5730","monster_def":2000,"monster_level":8,"monster_type":null,"name":"\u53e4\u4ee3\u7684\u673a\u68b0\u5de8\u9f99","number":50933533,"stats":"21,26,37","status":3,"tokens":0,"type":"\u673a\u68b0"} --> <!--{"archetypes":"","card_type":"\u6548\u679c\u602a\u517d","id":2067,"lore":"\u8fd9\u5f20\u5361\u653b\u51fb\u7684\u573a\u5408\uff0c\u5bf9\u65b9\u76f4\u5230\u4f24\u5bb3\u6b65\u9aa4\u7ed3\u675f\u65f6\u4e0d\u80fd\u53d1\u52a8\u9b54\u6cd5\u00b7\u9677\u9631\u5361\u3002\u7528\u4ee5\u4e0b\u7684\u602a\u517d\u4e3a\u796d\u54c1\u4f5c\u796d\u54c1\u53ec\u5524\u7684\u573a\u5408\uff0c\u8fd9\u5f20\u5361\u5f97\u5230\u5404\u81ea\u7684\u6548\u679c\u3002\u25cf\u7eff\u9f7f\u8f6e\uff1a\u8fd9\u5f20\u5361\u653b\u51fb\u5b88\u5907\u8868\u793a\u602a\u517d\u65f6\uff0c\u82e5\u8fd9\u5f20\u5361\u7684\u653b\u51fb\u529b\u8d85\u8fc7\u5b88\u5907\u8868\u793a\u602a\u517d\u7684\u5b88\u5907\u529b\uff0c\u7ed9\u4e88\u5bf9\u65b9\u57fa\u672c\u5206\u90a3\u4e2a\u6570\u503c\u7684\u6218\u6597\u4f24\u5bb3\u3002\u25cf\u7ea2\u9f7f\u8f6e\uff1a\u7ed9\u4e88\u5bf9\u65b9\u73a9\u5bb6\u6218\u6597\u4f24\u5bb3\u65f6\uff0c\u7ed9\u4e88\u5bf9\u65b9\u57fa\u672c\u5206400\u5206\u4f24\u5bb3\u3002\u25cf\u9ec4\u9f7f\u8f6e\uff1a\u6218\u6597\u7834\u574f\u5bf9\u65b9\u602a\u517d\u7684\u573a\u5408\uff0c\u7ed9\u4e88\u5bf9\u65b9\u57fa\u672c\u5206600\u5206\u4f24\u5bb3\u3002","mediums":"OCG\tTCG","monster_atk":3000,"monster_attribute":"\u5730","monster_def":2000,"monster_level":8,"monster_type":null,"name":"\u53e4\u4ee3\u7684\u673a\u68b0\u5de8\u9f99","number":50933533,"stats":"21,26,37","status":3,"tokens":0,"type":"\u673a\u68b0"} -->
</div> </div>
<div class="floatleft operate_area"> <div class="floatleft operate_area graphic">
<div class="select_card"> <div class="select_card">
<div class="select_cardOn"> <div class="select_cardOn">
<select name=""> <select name="">
......
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