From 77c9d7054b061cf04f2b59cde6be78b1f5b56b71 Mon Sep 17 00:00:00 2001
From: ofzza <juraj@toptal.com>
Date: Sat, 29 Jun 2013 06:17:13 -0400
Subject: [PATCH] Updated 'new turn' and 'game over' notifications. Added new
 debugging and styling switches to config ...

---
 index.html                     |  2 +-
 res/css/main.css               | 69 +++++++++++++++++++++++++---------
 res/js/bt_config.js            |  8 +++-
 res/js/bt_game_battle.js       | 13 +++----
 res/js/bt_init.js              | 17 ++++++++-
 res/js/ui/bt_ui_battle.js      | 20 +++++++---
 res/partials/views/battle.html | 33 ++++++++++++----
 7 files changed, 121 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index 151331b..583345d 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
                 </div>
             </div>
 
-            <div ng-if=" bt.game.authentication.isAuthenticated == true" style="float: right;">
+            <div ng-if=" bt.debugging.game.showQuickAuth == true" style="float: right;">
                 <input class="fast_auth" type="button" value="Authenticate as 'atkr'" ng-click=" services.authenticationService.authenticate('atkr', 'atkr') " />
                 <input class="fast_auth" type="button" value="Authenticate as 'dfndr'" ng-click=" services.authenticationService.authenticate('dfndr', 'dfndr') " />
             </div>
diff --git a/res/css/main.css b/res/css/main.css
index 46e43e7..76585a8 100644
--- a/res/css/main.css
+++ b/res/css/main.css
@@ -113,25 +113,24 @@ div.menu {
 /* Battle view markup (TEMP)
  * ---------------------------------------------------------------------------------------------------------------------- */
 
-div.game_over {
-    position: fixed;
-    width: 100%;
-    height: 40%;
-    margin: 30% 0px 30% 0px;
-
-    opacity: 0.6;
-    background: #444444;
-    border-top: 1px solid #000000;
-    border-bottom: 1px solid #000000;
-
-    font-size: 18px;
-    font-weight: bold;
-}
-
 div.toolbox {
     float: right;
 }
 
+    div.toolbox a.link {
+        float: left;
+        margin-left: 20px;
+
+        color: #444444;
+        font-size: 13px;
+        text-decoration: none;
+        cursor: pointer;
+    }
+    div.toolbox a.link:hover {
+        color: #999999;
+        text-decoration: underline;
+    }
+
     div.toolbox div.group {
         clear: right;
         float: right;
@@ -323,14 +322,50 @@ div.unit_stats {
         div.unit_stats div.power_small div.attack { background: url('../graphics/battle/stats_small_attack.png') top left no-repeat; }
         div.unit_stats div.power_small div.defend { background: url('../graphics/battle/stats_small_defend.png') top left no-repeat; }
 
-    div.grid {
+div.grid {
     float: left;
 }
+
+    div.notifications { }
+
+        div.notifications div.game_over {
+            position: relative;
+            float: left;
+            width: 100%;
+            height: 335px;
+            margin-right: -100%;
+            margin-bottom: -585px;
+            padding-top: 250px;
+
+            opacity: 0.6;
+            background: #444444;
+
+            color: #ffffff;
+            font-size: 36px;
+            font-weight: bold;
+            text-align: center;
+        }
+        div.notifications div.end_turn {
+            position: relative;
+            float: left;
+            width: 50%;
+            height: 85px;
+            margin: 250px -75% -335px 25%;
+
+            opacity: 0.6;
+            background: #999999;
+
+            color: #ffffff;
+            font-size: 36px;
+            font-weight: bold;
+            text-align: center;
+        }
+
     div.grid div.grid_row {
         clear: left;
         float: left;
     }
-    div.grid div.grid_row:nth-child(even) {
+    div.grid div.grid_row:nth-child(odd) {
         margin-left:  23px;
     }
 
diff --git a/res/js/bt_config.js b/res/js/bt_config.js
index 8e438cc..c95e647 100644
--- a/res/js/bt_config.js
+++ b/res/js/bt_config.js
@@ -24,7 +24,7 @@
     // Set value for minimal time interval between polling same service in [ms]
     bt.config.poling.minimalIntervalBetweenPolls = 2000;
     // Sets value for battle field's last state refresh interval
-    bt.config.poling.battle.lastStateRefreshInterval = 4000;
+    bt.config.poling.battle.lastStateRefreshInterval = 2000;
 
     // Set debugging options
     // -----------------------------------------------------------------------------------------------------------------
@@ -33,6 +33,10 @@
     bt.debugging.events.publishToConsole = false;
     // Set if model constructors will test received properties
     bt.debugging.model.verifyModelConstructors = true;
+    // Sets quick authentication panel
+    bt.debugging.game.showQuickAuth = true;
+    // Set if model constructors will test received properties
+    bt.debugging.game.battle.showBattleLog = false;
 
 // BattleField configuration namespace
 // ---------------------------------------------------------------------------------------------------------------------
@@ -58,6 +62,8 @@
 
     // Sets number of animated variations for unit sprite
     bt.config.game.battle.styles.unitSpriteVariationsCount = 5;
+    // Sets timeout for damage notification animation
+    bt.config.game.battle.styles.damegeNotificationTimeout = 2000;
 
     // Configure actions
     // -----------------------------------------------------------------------------------------------------------------
diff --git a/res/js/bt_game_battle.js b/res/js/bt_game_battle.js
index 9adc644..c80dd98 100644
--- a/res/js/bt_game_battle.js
+++ b/res/js/bt_game_battle.js
@@ -457,6 +457,9 @@ bt.game.battle = {
             // Update game status
             if (data.num) {
                 if (Math.floor(data.num / 2) != bt.game.battle.model.battleField.turnNumber) {
+                    // Check if turn number reduced - game over
+                    if (Math.floor(data.num / 2) < bt.game.battle.model.battleField.turnNumber) data.game_over = true;
+                    // Update turn and action number
                     bt.game.battle.model.battleField.turnNumber = Math.floor(data.num / 2);
                     if (data.whose_action) bt.game.battle.model.battleField.activePlayer = bt.game.battle.model.battleField.players[( bt.game.battle.model.battleField.turnNumber % bt.game.battle.model.battleField.players.length )];
                     bt.services.battleService.BattleField_NewTurn.dispatch({ message: 'New turn!', data : data });
@@ -467,17 +470,11 @@ bt.game.battle = {
                 }
             }
             // Check if game over
-            if (data.game_over === true) {
+            if (data.game_over) {
                 // Set game over status
-                bt.game.battle.model.battleField.gameOver = data.game_over;
+                bt.game.battle.model.battleField.gameOver = true;
                 // Announce game over
                 bt.services.battleService.BattleField_GameOver.dispatch({ message: 'Game over!', data : data });
-                // Reload view
-                if (bt.config.views._currentView.name == 'Battle') {
-                    // Reload battle field
-                    bt.config.views._currentView.onUnload();
-                    bt.config.views._currentView.onLoad();
-                }
             }
             // Refresh battle field's grid's tile selection
             bt.game.battle.model.battleField.grid._selectTile(bt.game.battle.model.battleField.grid.selectedTile);
diff --git a/res/js/bt_init.js b/res/js/bt_init.js
index 1ab30e4..18cf307 100644
--- a/res/js/bt_init.js
+++ b/res/js/bt_init.js
@@ -147,7 +147,9 @@ var bt = {
                         enemy : 'enemy',
 
                         // Number of animated variations for unit sprite
-                        unitSpriteVariationsCount : 1
+                        unitSpriteVariationsCount : 1,
+                        // Timeout for damage notification animation
+                        damegeNotificationTimeout : 2000
                     },
 
                     // Actions configuration namespace
@@ -290,6 +292,19 @@ var bt = {
             model : {
                 // Toggles if model constructors will test received properties
                 verifyModelConstructors : false
+            },
+
+            // Game namespace
+            game : {
+
+                // Toggles wuick authentication panel
+                showQuickAuth : false,
+
+                // Battle view namepsace
+                battle : {
+                    // Toggles if battle log is shown
+                    showBattleLog : true
+                }
             }
         }
 
diff --git a/res/js/ui/bt_ui_battle.js b/res/js/ui/bt_ui_battle.js
index eb5f55c..2c306d3 100644
--- a/res/js/ui/bt_ui_battle.js
+++ b/res/js/ui/bt_ui_battle.js
@@ -14,15 +14,15 @@ bt.services.battleService.BattleField_NewTurn.subscribe(function() {
     bt.game.battle.model.battleField.grid._selectTile(null);
     // Push to log
     bt.game.battle.ui.log.addMessage('timer', bt.game.battle.model.battleField.activePlayer + '\'s turn!');
+    // Animate dnew turn notification
+    bt.game.battle.ui.animations.animateTurn();
 });
 
 // Handles 'new action' event
 bt.services.battleService.BattleField_NewAction.subscribe(function() { });
 
 // Handles 'game over' event
-bt.services.battleService.BattleField_GameOver.subscribe( function() {
-    alert('Game over! Refresh and re login to start new game ...');
-});
+bt.services.battleService.BattleField_GameOver.subscribe( function() { });
 
 // Validates 'tile select' event
 bt.game.battle.battleField.PassTurn.subscribe(function() {
@@ -120,7 +120,7 @@ bt.game.battle.ui = {
                 },
                 showDamage : function(animation, unit) {
                     unit._damage.has = true;
-                    setTimeout(animation.hideDamage, 5000, this, unit);
+                    setTimeout(animation.hideDamage, bt.config.game.battle.styles.damegeNotificationTimeout, this, unit);
                 },
                 hideDamage : function(animation, unit) {
                     unit._damage.has = false;
@@ -128,7 +128,17 @@ bt.game.battle.ui = {
             }
             // Start animation
             unit._animation.initDamage(unit, (unit.hp - hp));
-        }
+        },
+
+        // Animates new turn notification
+        animateTurn : function() {
+            // Set notification
+            bt.game.battle.ui._newTurnNotification = true;
+            // Hide notification after timeout
+            setTimeout(function() { bt.game.battle.ui._newTurnNotification = false; }, 1000);
+        },
+        // Holds 'new turn' notification status
+        _newTurnNotification : false
 
     },
 
diff --git a/res/partials/views/battle.html b/res/partials/views/battle.html
index 4632b24..f231330 100644
--- a/res/partials/views/battle.html
+++ b/res/partials/views/battle.html
@@ -187,18 +187,26 @@ <h2>BATTLE VIEW !!!</h2>
             </div>
         </div>
 
+        <div ng-if=" bt.debugging.game.battle.showBattleLog == false">
+            <a class="link" ng-click=" bt.debugging.game.battle.showBattleLog = true; ">Show battle log</a>
+        </div>
+        <div ng-if=" bt.debugging.game.battle.showBattleLog == true">
+            <a class="link" ng-click=" bt.debugging.game.battle.showBattleLog = false; ">Hide battle log</a>
+        </div>
     </div>
 
     <!-- Battle log -->
-    <div class="toolbox">
-        <div class="group log">
-            <div class="header">
-                <div class="title">Battle log:</div>
-            </div>
+    <div ng-if=" bt.debugging.game.battle.showBattleLog ">
+        <div class="toolbox">
+            <div class="group log">
+                <div class="header">
+                    <div class="title">Battle log:</div>
+                </div>
 
-            <div ng-repeat=" message in bt.game.battle.ui.log.messages ">
-                <div class="log_message log_message_{{ message.style }}">
-                    {{ message.time }}: <b>{{ message.message }}</b>
+                <div ng-repeat=" message in bt.game.battle.ui.log.messages ">
+                    <div class="log_message log_message_{{ message.style }}">
+                        {{ message.time }}: <b>{{ message.message }}</b>
+                    </div>
                 </div>
             </div>
         </div>
@@ -208,6 +216,15 @@ <h2>BATTLE VIEW !!!</h2>
 
         <!-- Battle field -->
         <div class="grid">
+            <div class="notifications">
+                <div ng-if=" bt.game.battle.model.battleField.gameOver ">
+                    <div class="game_over">GAME OVER</div>
+                </div>
+                <div ng-if=" bt.game.battle.ui._newTurnNotification ">
+                    <div class="end_turn">{{ bt.game.battle.model.battleField.activePlayer }}'s turn ...</div>
+                </div>
+            </div>
+
             <div class="grid_row" ng-repeat=" tileRow in bt.game.battle.model.battleField.grid.tilesByY ">
                 <div class="tile info_parent" ng-repeat=" tile in tileRow " ng-click=" processAction(tile) ">
                     <div class="tile_style {{ tile.style }}">