Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 3 commits
  • 19 files changed
  • 0 comments
  • 1 contributor
8  client/app/ControlsView.js
@@ -3,10 +3,10 @@ $(function(){
3 3
     el: "#universe-controls",
4 4
 
5 5
     events: {
6  
-      "click #synch":     "synch",
7  
-      "click #pause":     "pause",
8  
-      "click #step":      "step",
9  
-      "click #dashboard": "dashboard",
  6
+      "click #synch":       "synch",
  7
+      "click #pause":       "pause",
  8
+      "click #step":        "step",
  9
+      "click #dashboard":   "dashboard",
10 10
     },
11 11
 
12 12
     initialize: function(opts){
0  client/app/FleetBuilder.js
No changes.
20  client/app/FleetBuilderView.js
... ...
@@ -0,0 +1,20 @@
  1
+$(function(){
  2
+  App.FleetBuilderView = Backbone.View.extend({
  3
+    template  : _.template( $('#fleet-builder').html() ),
  4
+
  5
+    initialize: function( opts ){
  6
+      this.fleetBuilder  = opts.fleetBuilder;
  7
+      this.shipsView     = new App.ShipsView({ ships: this.planet.ships });
  8
+      this.planetsView   = new App.SmallPlanetsView();
  9
+    },
  10
+
  11
+    render: function(){
  12
+      var fleetBuilderDecorator = new App.FleetBuilderDecorator({ fleetBuilder: this.fleetBuilder });
  13
+      this.$el.html( this.template( fleetBuilderDecorator.toJSON() ) );
  14
+      this.$el.find( "#navy ul" ).append( this.shipsView.render().el );
  15
+      this.$el.find( "#planets ul" ).append( this.planetsView.render().el );
  16
+
  17
+      return this;
  18
+    }
  19
+  });
  20
+});
1  client/app/MineDecorator.js
@@ -12,6 +12,7 @@ $(function(){
12 12
           {
13 13
             extra_css_classes: this.extraCSSClasses(),
14 14
             upgrade_percent: this.upgradePercent(),
  15
+
15 16
           }
16 17
         );
17 18
 
1  client/app/MineView.js
@@ -13,6 +13,7 @@ $(function(){
13 13
     },
14 14
 
15 15
     upgrade: function(){
  16
+      console.log( "upgrade mine" );
16 17
       this.mine.upgrade();
17 18
     },
18 19
 
2  client/app/Planet.js
@@ -4,8 +4,6 @@ $(function(){
4 4
       this.ships        = new App.Ships();
5 5
       this.enemyFleets  = new App.Fleets();
6 6
 
7  
-      this.set( "creatingFleet", false );
8  
-      this.set( "possibleFleetDestination", false );
9 7
       this.set( "visible", false );
10 8
 
11 9
       this.on( "change:mine change:silo change:hangar change:parking", this.updateConstructions, this );
2  client/app/PlanetDecorator.js
@@ -25,8 +25,6 @@ $(function(){
25 25
     extraCSSClasses: function(){
26 26
       result = "";
27 27
 
28  
-      if( this.planet.get( "creatingFleet" ) )            result += "creating-fleet";
29  
-      if( this.planet.get( "possibleFleetDestination" ) ) result += "possible-fleet-destination";
30 28
       if( this.planet.get( "visible" ) )                  result += "visible";
31 29
 
32 30
       return result;
11  client/app/PlanetInfoView.js
@@ -4,14 +4,13 @@ $(function(){
4 4
     template  : _.template( $('#planet-info').html() ),
5 5
 
6 6
     events: {
7  
-      "click .create-fleet": "creatingFleet"
  7
+      "click .create-fleet": "createFleet"
8 8
     },
9 9
 
10 10
     initialize: function(opts){
11 11
       this.planet = opts.planet;
12 12
       this.planet.on( "change:blackstuff", this.render, this );
13 13
       this.planet.on( "change:visible", this.render, this );
14  
-      this.planet.on( "change:creatingFleet", this.updateNavyControls, this );
15 14
       this.planet.ships.on( "change:selected", this.updateNavyControls, this );
16 15
 
17 16
       this.planet.enemyFleets.on( "all", this.render, this );
@@ -28,14 +27,10 @@ $(function(){
28 27
       }
29 28
     },
30 29
 
31  
-    creatingFleet: function(){
32  
-      this.planet.set( "creatingFleet", true );
33  
-      App.Navigator.navigate( "dashboard", {trigger: true} );
  30
+    createFleet: function(){
  31
+      App.Game.createFleet( this );
34 32
     },
35 33
 
36  
-    cancelFleet: function(){
37  
-      this.planet.set( "creatingFleet", false );
38  
-    },
39 34
 
40 35
     render: function(){
41 36
       var planetDecorator = new App.PlanetDecorator({ planet: this.planet });
27  client/app/PlanetSmallView.js
... ...
@@ -1,27 +0,0 @@
1  
-$(function(){
2  
-  App.PlanetSmallView = Backbone.View.extend({
3  
-    tagName: 'li',
4  
-    template  : _.template( $('#planet-small').html() ),
5  
-
6  
-    attributes: {
7  
-      "class": "planet-small"
8  
-    },
9  
-
10  
-    events: {
11  
-      "click": "click"
12  
-    },
13  
-
14  
-    initialize: function(opts){
15  
-      this.planet = opts.planet;
16  
-    },
17  
-
18  
-    click: function(){
19  
-      console.log( "small planet click" );
20  
-    },
21  
-
22  
-    render: function(){
23  
-      this.$el.html( this.template( this.planet.toJSON() ) );
24  
-      return this;
25  
-    }
26  
-  });
27  
-});
15  client/app/PlanetView.js
@@ -7,26 +7,17 @@ $(function(){
7 7
     },
8 8
 
9 9
     events: {
10  
-      "click": "click"
  10
+      "click #see-details": "seeDetails"
11 11
     },
12 12
 
13 13
     initialize: function(opts){
14 14
       this.planet = opts.planet;
15 15
       this.planet.ships.on( "add remove", this.render, this );
16  
-      this.planet.on( "change:creatingFleet", this.render, this );
17  
-      this.planet.on( "change:possibleFleetDestination", this.render, this );
18 16
       this.planet.enemyFleets.on( "all", this.render, this );
19 17
     },
20 18
 
21  
-    click: function(){
22  
-      if( this.planet.get( "possibleFleetDestination" ) ){
23  
-        this.sendFleet();
24  
-      } else {
25  
-        this.openPlanetInfo();
26  
-      }
27  
-    },
28  
-
29  
-    openPlanetInfo: function(){
  19
+    seeDetails: function(){
  20
+      console.log( "see details" );
30 21
       App.Navigator.navigate( "planet/" + this.planet.id, {trigger: true} );
31 22
     },
32 23
 
27  client/app/Planets.js
@@ -3,19 +3,9 @@ $(function(){
3 3
     model: App.Planet,
4 4
 
5 5
     initialize: function() {
6  
-      this.on( "change:creatingFleet", this.changeCreatingFleet );
7 6
       this.on( "change:visible", this.changeVisible );
8 7
     },
9 8
 
10  
-    creatingFleet: function(){
11  
-      var result =
12  
-        this.filter( function( planet ){
13  
-          return planet.get( "creatingFleet" );
14  
-        });
15  
-
16  
-      return result;
17  
-    },
18  
-
19 9
     changeVisible: function( model, val ){
20 10
       if( val ){
21 11
         this.each( function( e ){
@@ -26,21 +16,6 @@ $(function(){
26 16
       }
27 17
     },
28 18
 
29  
-    changeCreatingFleet: function( model, val, opts ){
30  
-      if( val ){
31  
-        this.each( function( e ){
32  
-          if( e == model ) {
33  
-            e.set( "possibleFleetDestination", false );
34  
-          } else {
35  
-            e.set( "possibleFleetDestination", true );
36  
-            e.set( "creatingFleet", false );
37  
-          }
38  
-        });
39  
-      } else {
40  
-        this.each( function( e ){
41  
-          e.set( "possibleFleetDestination", false );
42  
-        });
43  
-      }
44  
-    },
  19
+
45 20
   });
46 21
 });
23  client/app/PlanetsSmallView.js
... ...
@@ -1,23 +0,0 @@
1  
-$(function(){
2  
-  App.PlanetsSmallView = Backbone.View.extend({
3  
-    tagName: 'ul',
4  
-
5  
-    initialize: function(opts){
6  
-      this.planets = opts.planets;
7  
-      this.planets.bind( 'reset', this.addAll, this );
8  
-      this.planets.bind( 'add', this.addOne, this );
9  
-
10  
-      this.addAll();
11  
-    },
12  
-
13  
-    addOne: function( model ) {
14  
-      var view = new App.PlanetSmallView({ planet: model });
15  
-      this.$el.append( view.render().el );
16  
-    },
17  
-
18  
-    addAll: function() {
19  
-      this.planets.each( $.proxy( this.addOne, this ) );
20  
-    },
21  
-
22  
-  });
23  
-});
9  client/app/Universe.js
@@ -39,6 +39,15 @@ $(function(){
39 39
       App.Utils.refreshCollection( this.notices,  this.get( "events" ) );
40 40
     },
41 41
 
  42
+    createFleet: function( planet ){
  43
+      console.log( "Universe.createFleet" );
  44
+
  45
+      var fleetBuilder      = new App.FleetBuilder({ planet: planet });
  46
+      var fleetBuilderView  = new App.FleetBuilderView({ fleetBuilder: fleetBuilder });
  47
+
  48
+      fleetBuilderView.render();
  49
+    },
  50
+
42 51
     sendFleetToPlanet: function( planetDestination ){
43 52
       var planetOrigin      = this.planets.creatingFleet()[0];
44 53
       var planetDestination = planetDestination;
10  client/csss/animations.js
... ...
@@ -0,0 +1,10 @@
  1
+@keyframes slide-up {
  2
+
  3
+  from {
  4
+  }
  5
+
  6
+  to {
  7
+    top: 0px;
  8
+  }
  9
+
  10
+}
26  client/csss/buttons.css
... ...
@@ -0,0 +1,26 @@
  1
+/* This imageless css button was generated by CSSButtonGenerator.com */
  2
+
  3
+
  4
+.pay-button {
  5
+  background-color:#ffffff;
  6
+  -moz-border-radius:13px;
  7
+  -webkit-border-radius:13px;
  8
+  border-radius:13px;
  9
+  border:1px solid #dcdcdc;
  10
+  display:inline-block;
  11
+  color:#666666;
  12
+  font-size:12px;
  13
+  padding:2px 8px;
  14
+  text-decoration:none;
  15
+  line-height: 12px;
  16
+  margin: 5px 0px;
  17
+}
  18
+
  19
+.pay-button:hover {
  20
+  background-color:#f6f6f6;
  21
+}
  22
+
  23
+.pay-button:active {
  24
+  position:relative;
  25
+  top:1px;
  26
+}
195  client/csss/planets.css
@@ -6,7 +6,6 @@ body {
6 6
   /*font-family: 'PT Mono', sans-serif;*/
7 7
   /*font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;*/
8 8
   font-size: 16px;
9  
-  line-height: 24px;
10 9
   background-color: #F1F1F2;
11 10
 }
12 11
 
@@ -30,72 +29,30 @@ strong {
30 29
 
31 30
 .card {
32 31
   box-sizing: border-box;
  32
+  overflow: visible;
33 33
 }
34 34
 
35  
-.card.active {
36  
-  cursor: pointer;
37  
-}
38  
-
39  
-.card .reverse {
40  
-  display: none;
41  
-  background-color: rgba(241, 241, 242, 0.9);
42  
-  color: black;
43  
-  position: absolute;
44  
-  top: 0px;
45  
-  bottom: 0px;
46  
-  left: 0px;
47  
-  right: 0px;
48  
-  white-space: normal;
49  
-  padding: 90% 5px 0px 5px;
50  
-  line-height: 1em;
51  
-  font-weight: bold;
52  
-}
53 35
 
54  
-.card .reverse a {
55  
-  color: black;
56  
-}
57  
-
58  
-/*.card:hover .reverse {
59  
-  display: block;
60  
-}*/
61 36
 
62 37
 #icon {
63  
-  font-family: 'Ubuntu Mono', sans-serif;
64  
-}
65  
-
66  
-.card.active:hover .header #icon {
67  
-  font-size: 110px;
68  
-  text-shadow: 3px 3px 6px #111;
  38
+  display: block;
69 39
 }
70 40
 
71  
-.card.vertical.small:hover .header #icon {
72  
-  font-size: 55px;
73  
-  text-shadow: 2px 2px 3px #111;
74  
-}
75 41
 
76  
-.card.active:active .header #icon {
77  
-  font-size: 90px;
78  
-  text-shadow: 1px 1px 2px #111;
79  
-}
80 42
 
81  
-.card.vertical.small:active .header #icon {
82  
-  font-size: 45px;
83  
-  text-shadow: 1px 1px 2px #111;
84  
-}
85 43
 
86 44
 .card .header #icon,
87 45
 #details .header #icon {
88 46
   text-align: center;
89  
-  font-size: 100px;
90  
-  line-height: 80px;
91  
-  text-shadow: 2px 2px 4px #111;
  47
+  font-size: 25px;
  48
+  line-height: 30px;
  49
+  text-shadow: -2px -2px 10px #AAA;
92 50
 }
93 51
 
94 52
 .card.vertical.small .header #icon {
95  
-  font-size: 50px;
  53
+  font-size: 16px;
96 54
   margin-top: 10px;
97  
-  line-height: 12px;
98  
-  text-shadow: 1px 1px 2px #111;
  55
+  line-height: 16px;
99 56
 }
100 57
 
101 58
 .card.vertical.small .header h1{
@@ -103,27 +60,6 @@ strong {
103 60
   text-align: center;
104 61
 }
105 62
 
106  
-.card.vertical.mini {
107  
-  width: 46px;
108  
-  height: 60px;
109  
-  margin: 1px;
110  
-}
111  
-
112  
-
113  
-.card.vertical.mini .header #icon {
114  
-  font-size: 35px;
115  
-  margin-top: 12px;
116  
-  line-height: 18px;
117  
-  text-shadow: 1px 1px 2px #111;
118  
-}
119  
-
120  
-.card.vertical.mini .header h1{
121  
-  font-size: 10px;
122  
-  text-align: center;
123  
-}
124  
-
125  
-
126  
-
127 63
 
128 64
 .card.horizontal-long .header {
129 65
   float: left;
@@ -138,9 +74,8 @@ strong {
138 74
 }
139 75
 
140 76
 .card.horizontal-long .header #icon {
141  
-  font-size: 40px;
  77
+  font-size: 10px;
142 78
   margin-top: 5px;
143  
-  line-height: 15px;
144 79
   text-shadow: 1px 1px 2px #111;
145 80
 }
146 81
 
@@ -200,7 +135,6 @@ strong {
200 135
 .folder{
201 136
   background-color: white;
202 137
   white-space: nowrap;
203  
-  overflow: hidden;
204 138
   float: left;
205 139
   margin: 10px;
206 140
   border: 2px solid #F1F1F2;
@@ -215,8 +149,8 @@ strong {
215 149
    width: 456px;
216 150
 }
217 151
 
218  
-.folder.cards-small3 {
219  
-   width: 193px;
  152
+.folder.cards-small10 {
  153
+   width: 640px;
220 154
 }
221 155
 
222 156
 .folder.small {
@@ -265,46 +199,38 @@ strong {
265 199
 
266 200
 .card.bigbox {
267 201
   box-sizing: border-box;
  202
+  height: 110px;
268 203
   width: 220px;
  204
+}
  205
+
  206
+.card.bigbox .content {
  207
+  box-sizing: border-box;
269 208
   padding: 10px 10px 10px 10px;
270 209
 }
271 210
 
272 211
 .card.bigbox .header {
273  
-  margin-top: -20px;
274 212
   width: 40%;
275 213
   float: left;
276 214
 }
277 215
 
278  
-.card.bigbox #controls {
  216
+.card.bigbox #info {
279 217
   width: 50%;
280 218
   text-align: center;
281 219
   float: right;
282 220
 }
283 221
 
284  
-.card.bigbox #controls .data {
  222
+.card.bigbox #info .data {
285 223
   margin-top: 10px;
286 224
 }
287 225
 
288  
-.card.bigbox #controls #level,
289  
-.card.bigbox #controls #velocity {
  226
+.card.bigbox #info #level,
  227
+.card.bigbox #info #velocity {
290 228
   position: relative;
291 229
   padding: 5px;
292 230
 }
293 231
 
294  
-.card.bigbox #controls #level:hover .reverse,
295  
-.card.bigbox #controls #velocity:hover .reverse {
296  
-  font-weight: normal;
297  
-  padding: 5px;
298  
-  display: block;
299  
-  font-size: 0.8em;
300  
-}
301  
-
302  
-
303  
-
304  
-.card #controls .data {
305  
-}
306 232
 
307  
-.card #controls .data span {
  233
+.card #info .data span {
308 234
   font-size: 1.3em;
309 235
 }
310 236
 
@@ -317,7 +243,7 @@ strong {
317 243
   height: 4px;
318 244
   border: 1px solid #ccc;
319 245
   text-align: center;
320  
-  margin: 0 auto;
  246
+  margin: 10px auto;
321 247
 }
322 248
 .percent-value {
323 249
   background-color: black;
@@ -412,6 +338,7 @@ strong {
412 338
 
413 339
 #infos .planet {
414 340
   display: none;
  341
+  width: 1018px;
415 342
 }
416 343
 
417 344
 #infos .planet #enemy-fleets {
@@ -428,7 +355,8 @@ strong {
428 355
   color: black;
429 356
 }
430 357
 
431  
-#infos #details {
  358
+#infos #details,
  359
+#fleet-builder #details {
432 360
   float: left;
433 361
   width: 100px;
434 362
 }
@@ -449,7 +377,18 @@ strong {
449 377
   display: block;
450 378
 }
451 379
 
452  
-
  380
+.cover {
  381
+box-sizing: border-box;
  382
+  position: absolute;
  383
+  top: 0px;
  384
+  left: 0px;
  385
+  width: 100%;
  386
+  height: 100%;
  387
+  background: white;
  388
+  padding: 15% 10px 10px 10%;
  389
+  text-align: center;
  390
+  line-height: 20px;
  391
+}
453 392
 
454 393
 .construction #upgrading {
455 394
   display: none;
@@ -458,10 +397,68 @@ strong {
458 397
   display: block;
459 398
 }
460 399
 
461  
-#hangar.construction #building {
  400
+.construction #building {
462 401
   display: none;
463 402
 }
464 403
 
465  
-#hangar.construction.building #building {
  404
+.construction.building #building {
466 405
   display: block;
467 406
 }
  407
+
  408
+.construction.upgrading:hover .admin {
  409
+  display: none;
  410
+}
  411
+
  412
+.construction.building:hover .admin .upgrade{
  413
+  display: none;
  414
+}
  415
+
  416
+.card:hover .admin {
  417
+    display: block;
  418
+    z-index: 100;
  419
+}
  420
+
  421
+.admin {
  422
+    text-align: center;
  423
+    padding: 10px;
  424
+    font-size: 14px;
  425
+    display: none;
  426
+        border: 2px solid #c1c1c1;
  427
+    position: absolute;
  428
+    width: 200px;
  429
+    left: 100%;
  430
+    top: 0px;
  431
+    background-color: white;
  432
+
  433
+        box-shadow: 4px 5px 50px rgba(50, 50, 50, 0.96);
  434
+}
  435
+
  436
+.admin-option{
  437
+    margin: 0px 0px;
  438
+}
  439
+
  440
+hr.short {
  441
+margin-top: 20px;
  442
+    margin-bottom: 20px;
  443
+    width: 55%;
  444
+height:0px;/*solo queremos borde*/
  445
+text-align:left;
  446
+border-top:0px;/*quita el grosor extra de Opera y FFox*/
  447
+border-bottom:1px solid #ccc;
  448
+}
  449
+
  450
+.admin:after {
  451
+    content: ' ';
  452
+    height: 0;
  453
+    position: absolute;
  454
+    width: 0;
  455
+    left: -20px;
  456
+    top: 10px;
  457
+
  458
+    border: 10px solid transparent;
  459
+    border-right-color: white;
  460
+}
  461
+
  462
+#fleet-builder {
  463
+  width: 800px;
  464
+}
313  client/index.html
@@ -64,7 +64,10 @@
64 64
   <!-- <link href='http://fonts.googleapis.com/css?family=Ropa+Sans|Asap:700' rel='stylesheet' type='text/css'> -->
65 65
   <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
66 66
   <link rel="stylesheet" type="text/css" href="./csss/reset.css">
  67
+  <link rel="stylesheet" type="text/css" href="./csss/animations.css">
  68
+  <link rel="stylesheet" type="text/css" href="./csss/buttons.css">
67 69
   <link rel="stylesheet" type="text/css" href="./csss/planets.css">
  70
+
68 71
 </head>
69 72
 <body>
70 73
   <div id="universe-controls">
@@ -107,14 +110,14 @@
107 110
 
108 111
 
109 112
 
110  
-    <div id="notices" class="folder shadow small-long">
111  
-      <h1>notices</h1>
112  
-      <ul></ul>
113  
-    </div> <!-- notices -->
114 113
 
115  
-    <div id="dashboard">
116 114
 
  115
+    <div id="dashboard">
117 116
 
  117
+      <div id="notices" class="folder shadow small-long">
  118
+        <h1>notices</h1>
  119
+        <ul></ul>
  120
+      </div> <!-- notices -->
118 121
 
119 122
 
120 123
       <div id="planets" class="folder shadow cards4">
@@ -136,7 +139,8 @@
136 139
       <ul></ul>
137 140
     </div> <!-- infox -->
138 141
 
139  
-
  142
+    <div id="fleet-builder-wrapper">
  143
+    </div>
140 144
 
141 145
   </div>
142 146
 </body>
@@ -146,9 +150,9 @@
146 150
 <script type="text/template" id="notice">
147 151
   <div id="<%= id %>" class="notice card horizontal-long <%= family %>">
148 152
     <div class="header">
149  
-      <div id="icon" class="ship">▻</div>
150  
-      <div id="icon" class="planet">☐</div>
151  
-      <div id="icon" class="fleet">▻</div>
  153
+      <div id="icon" class="ship">ship</div>
  154
+      <div id="icon" class="planet">planet</div>
  155
+      <div id="icon" class="fleet">fleet</div>
152 156
     </div>
153 157
 
154 158
     <div id="message"><%= message %></div>
@@ -156,37 +160,56 @@
156 160
 </script>
157 161
 
158 162
 <script type="text/template" id="ship">
159  
-  <div id="<%= id %>" class="ship card small vertical active">
160  
-    <div class="header">
161  
-      <div id="icon">▻</div>
162  
-      <h1><%= id %></h1>
163  
-    </div>
  163
+  <div id="<%= id %>" class="ship card small vertical">
  164
+    <div class="content">
  165
+      <div class="header">
  166
+        <div id="icon">ship</div>
  167
+        <h1><%= id %></h1>
  168
+      </div>
164 169
 
165  
-    <div id="life" class="percent-bar">
166  
-      <div class="percent-value" style="width:<%= life_percent %>%" />
  170
+      <div id="life" class="percent-bar">
  171
+        <div class="percent-value" style="width:<%= life_percent %>%" />
  172
+      </div>
  173
+
  174
+      <div id="forces" class="sash bottom">
  175
+        <div id="attack" class="sash-cell"><%= attack %></div>
  176
+        <div id="defense" class="sash-cell"><%= defense %></div>
  177
+      </div>
167 178
     </div>
168 179
 
169  
-    <div id="forces" class="sash bottom">
170  
-      <div id="attack" class="sash-cell"><%= attack %></div>
171  
-      <div id="defense" class="sash-cell"><%= defense %></div>
  180
+    <div class="admin">
  181
+      <div class="admin-option">
  182
+        ship <strong><%= id %></strong><br />
  183
+        has <strong><%= life %></strong> points of life<br />
  184
+        attacks with <strong><%= attack %></strong> of energy <br />
  185
+        defenses with <strong><%= defense %></strong> of energy <br />
  186
+      </div>
172 187
     </div>
173 188
   </div> <!-- ship -->
174 189
 </script>
175 190
 
176 191
 <script type="text/template" id="planet">
177  
-  <div id="<%= id %>" class="planet card vertical active <%= extra_css_classes %>">
178  
-    <div class="header">
179  
-      <div id="icon" class="normal">☐</div>
180  
-      <div id="icon" class="target">⧇</div>
181  
-      <h1><%= id %></h1>
182  
-    </div>
183  
-    <div id="controls" class="sash bottom">
184  
-      <div id="own" class="sash-cell"><%= units_count %></div>
185  
-      <div id="enemy" class="sash-cell"><%= units_enemy_count %></div>
  192
+  <div id="<%= id %>" class="planet card vertical <%= extra_css_classes %>">
  193
+    <div class="content">
  194
+      <div class="header">
  195
+        <div id="icon" class="normal">planet</div>
  196
+        <h1><%= id %></h1>
  197
+      </div>
  198
+      <div id="info" class="sash bottom">
  199
+        <div id="own" class="sash-cell"><%= units_count %></div>
  200
+        <div id="enemy" class="sash-cell"><%= units_enemy_count %></div>
  201
+      </div>
186 202
     </div>
187  
-    <div id="creating-fleet" class="reverse">
188  
-      Back to planet
  203
+
  204
+    <div class="admin">
  205
+      <div class="admin-option">
  206
+        planet <strong><%= id %></strong><br />
  207
+        defended by <strong><%= units_count %></strong> ships<br />
  208
+        attacked by <strong><%= units_enemy_count %></strong> enemy ships<br />
  209
+        <a href="#" id="see-details" onclick="return false;" class="pay-button">see more details</a>
  210
+      </div>
189 211
     </div>
  212
+
190 213
   </div>
191 214
 </script>
192 215
 
@@ -194,12 +217,12 @@
194 217
   <div id="<%= id %>" class="fleet card horizontal <%= traveling_class %>">
195 218
     <div id="planets">
196 219
       <div id="origin" class="planet">
197  
-        <div id="icon"></div>
  220
+        <div id="icon">planet</div>
198 221
         <h1><%= base_id %></h1>
199 222
       </div>
200 223
 
201 224
       <div id="destination" class="planet">
202  
-        <div id="icon"></div>
  225
+        <div id="icon">planet</div>
203 226
         <h1><%= destination_id %></h1>
204 227
       </div>
205 228
     </div>
@@ -220,25 +243,35 @@
220 243
   <div id="mine" class="construction card bigbox <%= extra_css_classes %>">
221 244
     <!-- ID: '<%= id %>' -->
222 245
 
223  
-    <div class="header">
224  
-      <div id="icon">⧫</div>
225  
-      <h1>mine</h1>
226  
-    </div>
227  
-    <div id="controls">
228  
-      <div id="velocity" class="data">
229  
-        <span><%= production %></span> stuff/tick
  246
+    <div class="content">
  247
+      <div class="header">
  248
+        <div id="icon">mine</div>
230 249
       </div>
231  
-      <div id="level" class="">
232  
-        Level <%= level %>
233  
-        <div id="upgrading" class="percent-bar">
234  
-          <div class="percent-value" style="width:<%= upgrade_percent %>%" />
  250
+      <div id="info">
  251
+        <div id="velocity" class="data">
  252
+          <span><%= production %></span> stuff/tick
235 253
         </div>
236  
-
237  
-        <div class="reverse">
238  
-          <a id="upgrade" href="#" onclick="return false;">upgrade</a>
  254
+        <div id="level" class="">
  255
+          Level <%= level %>
239 256
         </div>
240 257
       </div>
241 258
     </div>
  259
+
  260
+    <div class="admin">
  261
+      <div class="admin-option">
  262
+        mine at level <strong><%= level %></strong><br />
  263
+        can produce <strong><%= production %></strong> stuff each tick<br />
  264
+        <a href="#" id="upgrade" onclick="return false;" class="pay-button">pay <strong>100</strong> stuff to upgrade</a>
  265
+      </div>
  266
+    </div>
  267
+
  268
+    <div id="upgrading" class="cover">
  269
+      mine is upgraging ...
  270
+      <div class="percent-bar">
  271
+        <div class="percent-value" style="width:<%= upgrade_percent %>%" />
  272
+      </div>
  273
+    </div>
  274
+
242 275
   </div>
243 276
 </script>
244 277
 
@@ -246,30 +279,39 @@
246 279
   <div id="silo" class="construction card bigbox <%= extra_css_classes %>">
247 280
     <!-- ID: '<%= id %>' -->
248 281
 
249  
-    <div class="header">
250  
-      <div id="icon">⋀</div>
251  
-      <h1>silo</h1>
252  
-    </div>
253  
-    <div id="controls">
254  
-      <div id="stuff" class="data">
255  
-        <span><%= stuff %> </span> stuff
256  
-      </div>
257  
-
258  
-      <div id="capacity" class="percent-bar">
259  
-        <div class="percent-value" style="width:<%= capacity_percent %>%" />
  282
+    <div class="content">
  283
+      <div class="header">
  284
+        <div id="icon">silo</div>
260 285
       </div>
  286
+      <div id="info"d>
  287
+        <div id="stuff" class="data">
  288
+          <span><%= stuff %> </span> stuff
  289
+        </div>
261 290
 
262  
-      <div id="level" class="">
263  
-        Level <%= level %>
264  
-        <div id="upgrading" class="percent-bar">
265  
-          <div class="percent-value" style="width:<%= upgrade_percent %>%" />
  291
+        <div id="capacity" class="percent-bar">
  292
+          <div class="percent-value" style="width:<%= capacity_percent %>%" />
266 293
         </div>
267 294
 
268  
-        <div class="reverse">
269  
-          <a id="upgrade" href="#" onclick="return false;">upgrade</a>
  295
+        <div id="level" class="">
  296
+          Level <%= level %>
270 297
         </div>
271 298
       </div>
272 299
     </div>
  300
+
  301
+    <div class="admin">
  302
+      <div class="admin-option">
  303
+        silo at level <strong><%= level %></strong><br />
  304
+        can store <strong><%= capacity %></strong> of stuff <br />
  305
+        <a href="#" id="upgrade" onclick="return false;" class="pay-button">pay <strong>100</strong> stuff to upgrade</a>
  306
+      </div>
  307
+    </div>
  308
+
  309
+    <div id="upgrading" class="cover">
  310
+      silo is upgraging ...
  311
+      <div class="percent-bar">
  312
+        <div class="percent-value" style="width:<%= upgrade_percent %>%" />
  313
+      </div>
  314
+    </div>
273 315
   </div>
274 316
 </script>
275 317
 
@@ -278,37 +320,47 @@
278 320
 <script type="text/template" id="hangar">
279 321
   <div id="hangar" class="construction card bigbox <%= extra_css_classes %>">
280 322
     <!-- ID: '<%= id %>' -->
281  
-    <div class="header">
282  
-      <div id="icon">∩</div>
283  
-      <h1>hangar</h1>
284  
-    </div>
285  
-    <div id="controls">
286  
-
287  
-      <div id="velocity" class="data">
288  
-        <span><%= production_ticks %></span> ticks/▻
289 323
 
290  
-        <div id="building">
291  
-          <div class="percent-bar">
292  
-            <div class="percent-value" style="width:<%= build_percent %>%" />
293  
-          </div>
  324
+    <div class="content">
  325
+      <div class="header">
  326
+        <div id="icon">hangar</div>
  327
+      </div>
  328
+      <div id="info">
294 329
 
295  
-          <%= building_ships %>
  330
+        <div id="velocity" class="data">
  331
+          <span><%= production_ticks %></span> ticks/▻
296 332
         </div>
297 333
 
298  
-        <div class="reverse">
299  
-          <a id="build-ship" href="#" onclick="return false;">build ▻</a>
  334
+        <div id="level" class="">
  335
+          Level <%= level %>
300 336
         </div>
301 337
       </div>
  338
+    </div>
302 339
 
303  
-      <div id="level" class="">
304  
-        Level <%= level %>
305  
-        <div id="upgrading" class="percent-bar">
306  
-          <div class="percent-value" style="width:<%= upgrade_percent %>%" />
307  
-        </div>
  340
+    <div class="admin">
  341
+      <div class="admin-option upgrade">
  342
+        hangar at level <strong><%= level %></strong><br />
  343
+        <a href="#" id="upgrade" onclick="return false;" class="pay-button">pay <strong>100</strong> stuff to upgrade</a>
  344
+      </div>
  345
+      <hr class="short" />
  346
+      <div class="admin-option build-ship">
  347
+        Can build a ship in <strong><%= production_ticks %></strong> ticks<br />
  348
+        <a href="#" id="#build-ship" onclick="return false;" class="pay-button">pay <strong>100</strong> stuff to build a ship</a>
  349
+      </div>
  350
+    </div>
308 351
 
309  
-        <div class="reverse">
310  
-          <a id="upgrade" href="#" onclick="return false;">upgrade</a>
311  
-        </div>
  352
+    <div id="upgrading" class="cover">
  353
+      hangar is upgraging ...
  354
+      <div class="percent-bar">
  355
+        <div class="percent-value" style="width:<%= upgrade_percent %>%" />
  356
+      </div>
  357
+    </div>
  358
+
  359
+    <div id="building" class="cover">
  360
+      hangar is building <br />
  361
+      <strong>1</strong> ship of <strong><%= building_ships %></strong> ...
  362
+      <div class="percent-bar">
  363
+        <div class="percent-value" style="width:<%= build_percent %>%" />
312 364
       </div>
313 365
     </div>
314 366
   </div>
@@ -317,32 +369,34 @@
317 369
 <script type="text/template" id="parking">
318 370
   <div id="parking" class="construction card bigbox <%= extra_css_classes %>">
319 371
     <!-- ID: '<%= id %>' -->
320  
-
321  
-    <div class="header">
322  
-      <div id="icon">⋕</div>
323  
-      <h1>parking</h1>
324  
-    </div>
325  
-    <div id="controls">
326  
-
327  
-      <div id="ships" class="data">
328  
-        <span><%= capacity %></span> ▻
  372
+    <div class="content">
  373
+      <div class="header">
  374
+        <div id="icon">parking</div>
329 375
       </div>
  376
+      <div id="info">
330 377
 
331  
-      <div id="capacity" class="percent-bar">
332  
-        <div class="percent-value" style="width:<%= capacity_percent %>%" />
333  
-      </div>
  378
+        <div id="ships" class="data">
  379
+          <span><%= capacity %></span> ▻
  380
+        </div>
334 381
 
335  
-      <div id="level" class="data">
336  
-        Level <%= level %>
337  
-        <div id="upgrading" class="percent-bar">
338  
-          <div class="percent-value" style="width:<%= upgrade_percent %>%" />
  382
+        <div id="capacity" class="percent-bar">
  383
+          <div class="percent-value" style="width:<%= capacity_percent %>%" />
339 384
         </div>
340 385
 
341  
-        <div class="reverse">
342  
-          <a id="upgrade" href="#" onclick="return false;">upgrade</a>
  386
+        <div id="level" class="data">
  387
+          Level <%= level %>
343 388
         </div>
344 389
       </div>
345 390
     </div>
  391
+
  392
+
  393
+    <div class="admin">
  394
+      <div class="admin-option">
  395
+        parking at level <strong><%= level %></strong> <br />
  396
+        can store <strong><%= capacity %></strong> ships <br />
  397
+        <a href="#" id="upgrade" onclick="return false;" class="pay-button">pay <strong>100</strong> stuff to upgrade</a>
  398
+      </div>
  399
+    </div>
346 400
   </div>
347 401
 </script>
348 402
 
@@ -350,7 +404,7 @@
350 404
   <div id="planet-info-<%= id %>" class="planet folder <%= extra_css_classes %>">
351 405
     <div id="details">
352 406
       <div class="header">
353  
-        <div id="icon"></div>
  407
+        <div id="icon">planet</div>
354 408
         <h1><%= id %></h1>
355 409
       </div>
356 410
     </div>
@@ -360,12 +414,12 @@
360 414
       <ul></ul>
361 415
     </div>
362 416
 
363  
-    <div id="navy" class="folder shadow cards-small3">
  417
+    <div id="navy" class="folder shadow cards-small10">
364 418
       <h1>navy</h1>
365 419
 
366 420
       <div id="controls" class="sash">
367 421
         <div class="sash-cell">
368  
-          <a href="#" class="create-fleet" style="display:none" onclick="return false;">Send Fleet</a>
  422
+          <a href="#" class="create-fleet" onclick="return false;">Create Fleet</a>
369 423
         </div>
370 424
       </div>
371 425
     </div> <!-- navy -->
@@ -378,16 +432,55 @@
378 432
 </script>
379 433
 
380 434
 <script type="text/template" id="fleet-info">
381  
-  <div id="<%= id %>" class="fleet enemy folder shadow cards-small3 <%= traveling_class %>">
  435
+  <div id="<%= id %>" class="fleet enemy folder shadow cards-small10 <%= traveling_class %>">
382 436
     <h1>
383 437
       <%= id %>
384  
-      <div id="travel" class="percent-bar">
385  
-        <div class="percent-value" style="width:<%= travel_percent %>%" />
  438
+      <div id="travel">
  439
+        fleet is traveling to planet <strong><%= destination_id %></strong>
  440
+        <div class="percent-bar">
  441
+          <div class="percent-value" style="width:<%= travel_percent %>%" />
  442
+        </div>
386 443
       </div>
387 444
     </h1>
388 445
     <ul></ul>
389 446
   </div> <!-- enemy -->
390 447
 </script>
391 448
 
  449
+<script type="text/template" id="fleet-builder">
  450
+  <div class="folder">
  451
+    <div id="details">
  452
+      <div class="header">
  453
+        <div id="icon">fleet <br /> builder</div>
  454
+      </div>
  455
+    </div>
  456
+
  457
+    <div id="navy" class="folder shadow cards-small10">
  458
+      <h1>navy</h1>
  459
+      Choose your ships:
  460
+      <ul></ul>
  461
+
  462
+      <div id="controls" class="sash">
  463
+        <div class="sash-cell">
  464
+          <a href="#" class="cancel-fleet" onclick="return false;">Cancel Fleet</a>
  465
+        </div>
  466
+      </div>
  467
+    </div>
  468
+
  469
+    <div id="planets" class="folder shadow cards-small4">
  470
+      <h1>planets</h1>
  471
+      <ul></ul>
  472
+    </div> <!-- planets -->
  473
+
  474
+    <div id="admin" class="folder shadow">
  475
+      <h1>admin</h1>
  476
+      Sending fleet of <strong>12</strong> ships
  477
+      from planet <strong><%= base_id %></strong>
  478
+      to planet <strong><%= destination_id %></strong>
  479
+
  480
+      <a href="#" id="send-fleet" onclick="return false;" class="pay-button">pay <strong>100</strong> to send fleet</a>
  481
+    </div> <!-- planets -->
  482
+
  483
+  </div>
  484
+</script>
392 485
 
393 486
 </html>
13  gem/lib/s2c/utils.rb
@@ -44,8 +44,9 @@ def self.feed_universe( universe )
44 44
       ship1    = planets[0].ships.create!
45 45
       ship2    = planets[0].ships.create!
46 46
       ship3    = planets[0].ships.create!
  47
+      ship4    = planets[0].ships.create!
47 48
 
48  
-      3.times { planets[1].ships.create! }
  49
+      40.times { planets[1].ships.create! }
49 50
       3.times { planets[2].ships.create! }
50 51
       3.times { planets[3].ships.create! }
51 52
       3.times { planets[4].ships.create! }
@@ -61,6 +62,16 @@ def self.feed_universe( universe )
61 62
 
62 63
       fleet.start_trip
63 64
 
  65
+
  66
+      fleet2 =
  67
+        S2C::Models::Units::Fleet.arrange(
  68
+          :base   => planets[0],
  69
+          :target => planets[1],
  70
+          :ships  => [ship3, ship4]
  71
+        )
  72
+
  73
+      fleet2.start_trip
  74
+
64 75
       universe
65 76
     end
66 77
 
14  server/lib/s2c/server/app.rb
@@ -10,7 +10,7 @@ class App < Sinatra::Base
10 10
       S2C::Utils.feed_universe( @@universe )
11 11
       @@universe.reload
12 12
     end
13  
-    @@universe.start
  13
+    # @@universe.start
14 14
 
15 15
     before do
16 16
       headers(
@@ -25,9 +25,15 @@ class App < Sinatra::Base
25 25
     get "/universe" do
26 26
       # @@universe.step
27 27
       # @@universe.reload
28  
-      result = S2C::JSONer.to_json( @@universe )
29  
-      puts result
30  
-      result
  28
+      # result = S2C::JSONer.to_json( @@universe )
  29
+
  30
+      # puts result
  31
+      # result
  32
+
  33
+
  34
+      # File.open( "#{File.dirname(__FILE__)}/../../../tmp/universo.json", "w" ) { |f| f.write result }
  35
+
  36
+      File.read( "#{File.dirname(__FILE__)}/../../../tmp/universo.json" )
31 37
     end
32 38
 
33 39
     post "/fleets" do

No commit comments for this range

Something went wrong with that request. Please try again.