Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fleet builder

  • Loading branch information...
commit 5b1a1ddb86f1639d0b49c448229904d3bf2f17fe 1 parent 38eaa02
@fguillen authored
View
12 client/app/FleetBuilder.js
@@ -0,0 +1,12 @@
+$(function(){
+ App.FleetBuilder = Backbone.Model.extend({
+ url: App.RootUrl + "/fleets",
+
+ initialize: function( opts ){
+ this.planet = opts.planet;
+ this.ships = new App.Ships();
+
+ this.destination;
+ },
+ });
+});
View
21 client/app/FleetBuilderDecorator.js
@@ -0,0 +1,21 @@
+$(function(){
+ App.FleetBuilderDecorator = Backbone.Model.extend({
+ initialize: function( opts ){
+ this.fleetBuilder = opts.fleetBuilder;
+ },
+
+ toJSON: function(){
+ var json =
+ _.extend(
+ this.fleetBuilder.toJSON(),
+ {
+ base_id: this.fleetBuilder.planet.id,
+ destination_id: "unknown",
+ }
+ );
+
+ return json;
+ },
+
+ });
+});
View
8 client/app/FleetBuilderView.js
@@ -1,14 +1,18 @@
$(function(){
App.FleetBuilderView = Backbone.View.extend({
+ el: $("#fleet-builder-wrapper"),
+
template : _.template( $('#fleet-builder').html() ),
initialize: function( opts ){
this.fleetBuilder = opts.fleetBuilder;
- this.shipsView = new App.ShipsView({ ships: this.planet.ships });
- this.planetsView = new App.SmallPlanetsView();
+ this.shipsView = new App.ShipsView({ ships: this.fleetBuilder.planet.ships });
+ this.planetsView = new App.PlanetsSmallView();
},
render: function(){
+ console.log( "FleetBuilderView.render" );
+
var fleetBuilderDecorator = new App.FleetBuilderDecorator({ fleetBuilder: this.fleetBuilder });
this.$el.html( this.template( fleetBuilderDecorator.toJSON() ) );
this.$el.find( "#navy ul" ).append( this.shipsView.render().el );
View
2  client/app/PlanetInfoView.js
@@ -28,7 +28,7 @@ $(function(){
},
createFleet: function(){
- App.Game.createFleet( this );
+ App.Game.createFleet( this.planet );
},
View
27 client/app/PlanetSmallView.js
@@ -0,0 +1,27 @@
+$(function(){
+ App.PlanetSmallView = Backbone.View.extend({
+ tagName: 'li',
+ template : _.template( $('#planet-small').html() ),
+
+ attributes: {
+ "class": "planet-small"
+ },
+
+ events: {
+ "click": "click"
+ },
+
+ initialize: function(opts){
+ this.planet = opts.planet;
+ },
+
+ click: function(){
+ console.log( "small planet click" );
+ },
+
+ render: function(){
+ this.$el.html( this.template( this.planet.toJSON() ) );
+ return this;
+ }
+ });
+});
View
23 client/app/PlanetsSmallView.js
@@ -0,0 +1,23 @@
+$(function(){
+ App.PlanetsSmallView = Backbone.View.extend({
+ tagName: 'ul',
+
+ initialize: function(opts){
+ this.planets = App.Game.planets;
+ this.planets.bind( 'reset', this.addAll, this );
+ this.planets.bind( 'add', this.addOne, this );
+
+ this.addAll();
+ },
+
+ addOne: function( model ) {
+ var view = new App.PlanetSmallView({ planet: model });
+ this.$el.append( view.render().el );
+ },
+
+ addAll: function() {
+ this.planets.each( $.proxy( this.addOne, this ) );
+ },
+
+ });
+});
View
2  client/app/Universe.js
@@ -40,7 +40,7 @@ $(function(){
},
createFleet: function( planet ){
- console.log( "Universe.createFleet" );
+ console.log( "Universe.createFleet", planet );
var fleetBuilder = new App.FleetBuilder({ planet: planet });
var fleetBuilderView = new App.FleetBuilderView({ fleetBuilder: fleetBuilder });
View
14 client/csss/planets.css
@@ -153,6 +153,10 @@ strong {
width: 640px;
}
+.folder.cards-small4 {
+ width: 256;
+}
+
.folder.small {
width: 195px;
}
@@ -462,3 +466,13 @@ border-bottom:1px solid #ccc;
#fleet-builder {
width: 800px;
}
+
+
+#fleet-builder-wrapper {
+ width: 689px;
+}
+
+#fleet-builder-wrapper #admin {
+ width: 361px;
+ white-space: normal;
+}
View
18 client/index.html
@@ -55,6 +55,12 @@
<script type="text/javascript" src="./app/PlanetInfoView.js"></script>
<script type="text/javascript" src="./app/PlanetInfosView.js"></script>
+ <script type="text/javascript" src="./app/PlanetSmallView.js"></script>
+ <script type="text/javascript" src="./app/PlanetsSmallView.js"></script>
+ <script type="text/javascript" src="./app/FleetBuilder.js"></script>
+ <script type="text/javascript" src="./app/FleetBuilderDecorator.js"></script>
+ <script type="text/javascript" src="./app/FleetBuilderView.js"></script>
+
<script type="text/javascript" src="./app/Universe.js"></script>
<script type="text/javascript" src="./app/UniverseView.js"></script>
<script type="text/javascript" src="./app/Utils.js"></script>
@@ -446,6 +452,15 @@
</div> <!-- enemy -->
</script>
+<script type="text/template" id="planet-small">
+ <div id="<%= id %>" class="planet-small card small vertical">
+ <div class="header">
+ <div id="icon">planet</div>
+ <h1><%= id %></h1>
+ </div>
+ </div>
+</script>
+
<script type="text/template" id="fleet-builder">
<div class="folder">
<div id="details">
@@ -456,7 +471,7 @@
<div id="navy" class="folder shadow cards-small10">
<h1>navy</h1>
- Choose your ships:
+ choose the <strong>ships</strong> for the fleet:
<ul></ul>
<div id="controls" class="sash">
@@ -468,6 +483,7 @@
<div id="planets" class="folder shadow cards-small4">
<h1>planets</h1>
+ choose the <strong>planet</strong> of destination:
<ul></ul>
</div> <!-- planets -->
Please sign in to comment.
Something went wrong with that request. Please try again.