Some combat tweaks, adding tick, pause and resume method

src/client/css/layout.css

@@ -100,15 +100,15 @@
   z-index: 1;
 }
 .panel.collapsed {
-  transform:translate(-800px, 0);
+  transform:translate(-1800px, 0);
   /* squash then move off-screen */
   transition-property: transform, z-index;
   transition-duration: 0.45s, 0s;
   transition-delay:    0s, 0.45s;
   z-index: -1;
 }
 .panel.right-panel.collapsed {
-  transform:translate(800px, 0);
+  transform:translate(1800px, 0);
 }
 
 /*

src/client/game.html

@@ -27,7 +27,9 @@
     }
 
     .info-panel {
-      background: rgba(255,255,255,0.65);
+      background: rgba(255,255,255,0.95);
+      -webkit-box-shadow: 0px -4px 30px rgba(153, 153, 153, 0.47);
+      box-shadow:         0px -4px 30px rgba(153, 153, 153, 0.47);
       color: #333;
       width: 45%;
       top: 10px;
@@ -122,7 +124,7 @@ <h2>In here also:</h2>
         </div>
       </div>
 
-      <div id="info" class="panel right-panel info-panel"  data-bind="css: { showing: $parent.showInfo() }, if: $parent.showInfo()">
+      <div id="info" class="panel right-panel layer-over info-panel"  data-bind="css: {  collapsed: !$parent.showInfo() }, if: $parent.showInfo()" style="">
         <div data-bind="with:$parent.info">
           <h1 data-bind="text:heading"></h1>
           <div data-bind="if:body"><div data-bind="html:body"></div></div>
@@ -134,7 +136,7 @@ <h1 data-bind="text:heading"></h1>
         <button data-bind="click: $parent.hideInfo">Ok</button>
       </div>
 
-      <div id="combatLayer" class="layer layer-over collapsed">
+      <div id="combatLayer" class="layer layer-fg collapsed">
         <div id="allies" class="panel left-panel allies-panel collapsed" style="display:none">
           <div data-bind="with:$parent.player">
             <div class="row" data-bind="attr: {id: $data._id}">
@@ -145,7 +147,7 @@ <h1 data-bind="text:heading"></h1>
                 <h2 class="player-label">
                   <span data-bind="text: name"></span>
                 </h2>
-                <span class="health-bar" data-bind="style: { width: $root.health($data) + '%'}"></span>
+                <span class="health-bar" data-bind="attr: { 'data-width': $root.health($data) + '%'}"></span>
               </div>
             </div>
             <div class="row">
@@ -178,8 +180,11 @@ <h2 class="player-label">
               <div class="col col-1of2" data-bind="text: currentWeapon.name"></div>
             </div>
           </div><!-- /opponents -->
-        </div><!-- /#combat -->
-      </div>
+        </div><!--/#npc-info -->
+        <div id="combat-toolbar" class="layer" style="bottom: 0; height: 24px; width: 100px; left: 50%; margin-left: -50px; background-color: #fff">
+          <button data-bind="click: $parent.combat.pause">⏯</button>
+        </div>
+      </div><!-- /#combat -->
     </div>
   </section>
   <section id="messages" class="panel toggleable" style="display:none" data-bind="click: $root.onMessagesClick">

src/client/main-ui.js

@@ -103,6 +103,7 @@ define([
     showInfo: ko.observable(false),
     hideInfo: function(){ viewModel.showInfo(false); },
     health: function(thing){
+      console.log("health of ", thing);
       if(thing.dead) {
           return 0;
       } else {
@@ -149,6 +150,7 @@ define([
 
     this.game = game;
     window.viewModel = ui.viewModel = new _ViewModel(player, tile, region, game);
+    console.log("viewModel: ", viewModel);
 
     var minimap =this.minimap = new Map({
       id: 'minimap',

src/client/main.js

@@ -253,7 +253,7 @@ define([
       console.log("combatend, dead opponent: ", npc);
       // TODO: move out of npcs, possibly as corpose into tile.here
       // do creatures drop weapon, and need to be searched for anything else?
-      if(npc.currentWeapon && !npc.currentWeapon.attached) {
+      if(npc.currentWeapon && !npc.currentWeapon.fixed) {
         npc.currentWeapon.transferTo(game.tile.here);
         npc.inventory.remove(npc.currentWeapon);
         game.tile.here.push(npc.currentWeapon);
@@ -291,7 +291,7 @@ define([
   game.initCombat = function(allies, hostiles) {
     game.ui && game.ui.message("You are faced with: " + util.pluck(hostiles, 'name').join(', '));
 
-    var combat = new Combat();
+    var combat = new Combat({ roundInterval: 250 });
     var isFirstRound = true;
     return combat.start(allies, hostiles).then(
       function(result){
@@ -301,7 +301,8 @@ define([
         console.log("combat error: ", err);
       },
       function(update){
-        console.log("combat progress: ", update);
+        // console.log("combat progress, pausing ", update);
+        // combat.pause();
       }
     );
   };

src/client/models/Combat.js

@@ -33,6 +33,7 @@ define([
   Combat.prototype.start = function(allies, opponents) {
     this.allies = allies;
     this.opponents = opponents;
+    this._running = true;
 
     var defd = Promise.defer();
     var self = this;
@@ -60,7 +61,7 @@ define([
       });
 
       if(allies.filter(alive).length && opponents.filter(alive).length) {
-          defd.progress(finalResult);
+        defd.progress(finalResult);
       } else {
         self.end({
           scoreboard: finalResult,
@@ -72,13 +73,41 @@ define([
         return;
       };
     };
-    setTimeout(perRound, 0);
+
+    this.tick = function(ms) {
+      if(!this._running) {
+        return;
+      }
+      perRound();
+      setTimeout(this.tick, isNaN(ms) ? this.roundInterval : ms);
+    }.bind(this);
+
+    this.tick();
     return defd.promise;
-  }
+  };
+
+  Combat.prototype.pause = function() {
+    if(this._running) {
+      this._running = false;
+      game.emit("combatpaused", {
+        target: this
+      });
+    }
+  };
+  Combat.prototype.resume = function() {
+    if(!this._ended) {
+      this._running = true;
+      game.emit("combatresumed", {
+        target: this
+      });
+      setTimeout(this.tick, this.roundInterval/2);
+    }
+  };
+
   Combat.prototype.end = function(outcome) {
-        clearInterval(this._itv);
-        delete this._itv;
-        game.emit("combatend", outcome);
+    this._running = false;
+    this._ended = true;
+    game.emit("combatend", outcome);
   };
 
   Combat.prototype.round = function() {

src/client/models/Location.js

@@ -39,6 +39,7 @@ define([
     if(!this.backdrop) {
       // use the default for the terrain type
       this.backdrop = terrain[this.terrain].backdrop.replace(/^.*image!/, '');
+      console.log("Setting default backdrop: "+this.backdrop);
     }
     if(!this.description){
       this.description = "You enter an area of " + this.terrain