Merge branch 'game-board' into sections-layout

Cardshifter · Aug 23, 2015 · 31e0507 · 31e0507
2 parents 6537db0 + 77fb223
commit 31e0507
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 19 deletions.
diff --git a/card_model/card_model.css → src/card_model/card_model.css b/card_model/card_model.css → src/card_model/card_model.css
diff --git a/card_model/card_model.html → src/card_model/card_model.html b/card_model/card_model.html → src/card_model/card_model.html
diff --git a/src/card_model/card_template.html b/src/card_model/card_template.html
@@ -0,0 +1,46 @@
+<!--
+    This file will eventually be used to present card data, as well as play the game
+    by using the card UI elements to perform actions.
+    TODO Add ng-FitText.js fields to elements in this model of which length may vary widely, for example card descriptions and flavor text.
+        The primary fields for FitText are:
+        - data-fittext : Enable FitText for the content insice the tag
+        - data-fittext-min="8pt" : Minimum font size allowed
+        - data-fittext-max="12pt" : Maximum font size allowed
+  -->
+<h3>Card Model Spoof 1</h3>
+
+<table id="card-model-1" style="width: 160px;">
+    <tr>
+        <td class="card-name">
+            {{card.properties.name}}
+        </td>
+        <td class="card-MANA_COST" style="width: 40px;">
+            {{card.properties.MANA_COST}}
+        </td>
+    </tr>
+    <tr id="card-image">
+        <td colspan="2">
+            <img style="width: 160px; height: 100px;"
+                src="http://pre07.deviantart.net/6081/th/pre/f/2012/050/3/f/lucifero_lolcat_by_fraterorion-d4q5ol0.jpg" />
+        </td>
+    </tr>
+    <tr id="card-type">
+        <td colspan="1">
+            {{card.properties.creatureType}}
+        </td>
+
+        <td colspan="1">
+            {{card.properties.ATTACK}} / {{card.properties.HEALTH}}
+        </td>
+    </tr>
+    <tr id="card-description" style="width: 160px; height: 60px;">
+        <td colspan="2">
+                {{card.properties.description}}
+        </td>
+    </tr>
+    <tr id="card-flavor" style="width: 160px; height: 60px;">
+        <td colspan="2" style="font-style: italic;">
+                {{card.properties.flavor}}
+        </td>
+    </tr>
+</table>
diff --git a/src/cardshifter.css b/src/cardshifter.css
@@ -233,3 +233,12 @@ th {
     font-weight: normal;
 }
 
+/* FORMATTING FOR GAME-BOARD STUFF */
+.targetable {
+    background-color: yellow;
+}
+
+.selected {
+    background-color: #00ffff;
+}
+
diff --git a/src/game_board/controller.js b/src/game_board/controller.js
@@ -19,6 +19,7 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
         }
     };
 
+    $scope.cardZones = {}; // contains information about what card is where.
     $scope.actions = [];
     $scope.doingAction = false;
     $scope.playerInfos = playerInfos;
@@ -35,7 +36,7 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
         "card": storeCard,
         "zoneChange": moveCard,
         "targets": setTargets,
-        "update": updatePlayerProperties
+        "update": updateProperties
     };
 
     CardshifterServerAPI.setMessageListener(function(message) {
@@ -68,6 +69,9 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
     $scope.cancelAction = function() {
         $scope.doingAction = false;
         $scope.targets = [];
+        for (var i = 0; i < $scope.selected.length; i++) {
+            $scope.selected[i].selected = false;
+        }
         $scope.selected = [];
     }
 
@@ -97,14 +101,24 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
         $scope.cancelAction();
     }
 
-    $scope.selectCard = function(card) {
+    $scope.selectEntity = function(entity) {
+        if (!$scope.doingAction) {
+            return;
+        }
         var selected = $scope.selected;
-        var index = selected.indexOf(card);
+        var index = selected.indexOf(entity);
 
         if(index === -1) {      // select
-            selected.push(card);
+            selected.push(entity);
+            entity.selected = true;
         } else {                // de-select
             selected.splice(index, 1);
+            entity.selected = false;
+        }
+
+        // if action requires exactly one target, perform action when target is chosen
+        if ($scope.targetsMessage.min === 1 && $scope.targetsMessage.max === 1) {
+            $scope.performAction();
         }
     }
 
@@ -191,7 +205,9 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
                 if(playerInfos[player].id === zone.owner) {
                     var newEntities = {};
                     for(var i = 0, length = zone.entities.length; i < length; i++) {
-                        newEntities[zone.entities[i]] = {}; // setup each ID to be an key holding an object to store card info
+                        var entityId = zone.entities[i];
+                        newEntities[entityId] = {}; // setup each ID to be an key holding an object to store card info
+                        $scope.cardZones[entityId] = zone.id;
                     }
                     zone.entities = newEntities;
 					zone.length = function () {
@@ -217,7 +233,7 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
     */
     function storeCard(card) {
         var destinationZone = findZone(card.zone);
-
+        
         try {
             if(destinationZone.known) {
                 destinationZone.entities[card.id] = card;
@@ -255,6 +271,7 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
 
             var card = src.entities[message.entity];
             delete src.entities[message.entity];
+            $scope.cardZones[message.entity] = message.destinationZone;
             dest.entities[message.entity] = card;
         } catch(e) {
             /*
@@ -270,7 +287,10 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
     */
 	function removeEntity(message) {
 		var entityId = message.entity;
-		// TODO look up the zone, remove entity.
+        var zoneId = $scope.cardZones[entityId];
+        var zone = findZone(zoneId);
+        delete zone.entities[entityId];
+        delete $scope.cardZones[entityId];
 	}
 
     /*
@@ -288,13 +308,18 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
     }
 
     /*
-    * Updates a players properties based on the message received.
+    * Updates properties based on the message received.
     *
     * @param toUpdate:UpdateMessage -- The information on what to update
     *
     */
-    function updatePlayerProperties(toUpdate) {
-        findPlayer(toUpdate.id).properties[toUpdate.key] = toUpdate.value;
+    function updateProperties(toUpdate) {
+        var entity = findEntity(toUpdate.id);
+        if (!entity) {
+            console.log('entity not found: ' + toUpdate.id);
+            return;
+        }
+        entity.properties[toUpdate.key] = toUpdate.value;
     }
 
     /*
@@ -328,12 +353,34 @@ function GameboardController(CardshifterServerAPI, $scope, $timeout, $rootScope,
     */
     function findPlayer(id) {
         if(id === playerInfos.user.id) {
-            return  playerInfos.user;
+            return playerInfos.user;
         } else if(id === playerInfos.opponent.id) {
             return playerInfos.opponent;
         }
         return null;
     }
+
+    /*
+    * Finds and returns an entity based on an ID
+    *
+    * @param id:number -- The ID of the entity
+    * @param Object -- playerInfos.user or playerInfos.opponent
+    *               -- a card object
+    *               -- null, if no entity with that ID was found
+    */
+    function findEntity(id) {
+        var player = findPlayer(id);
+        if (player) {
+            return player;
+        } else {
+            var zoneId = $scope.cardZones[id];
+            var zone = findZone(zoneId);
+            if (zone.entities[id]) {
+                return zone.entities[id];
+            }
+        }
+        return null;
+    }
 }
 
 module.exports = GameboardController;
diff --git a/src/game_board/game_board.html b/src/game_board/game_board.html
@@ -12,11 +12,15 @@
 
     <!-- Player display -->
     <div>
-        <div ng-repeat="(type, info) in playerInfos">
-            <h1><u>{{info.name}}</u></h1>
+        <div ng-repeat="(type, info) in playerInfos" class="player"
+            ng-class="{'player-user': info == playerInfos.user, 'player-opponent': info != playerInfos.user}">
+            <h1 ng-click="selectEntity(info)"
+                ng-class="{'selected': info.selected, 'targetable': doingAction && targets.indexOf(info.id) !== -1}">
+                <u>{{info.name}}</u>
+            </h1>
 
             <!-- Player properties -->
-            <div>
+            <div class="properties">
                 <h3>Properties</h3>
                 <ul>
                     <li ng-repeat="(name, value) in info.properties">
@@ -26,19 +30,21 @@ <h3>Properties</h3>
             </div>
 
             <!-- Player cards -->
-            <div ng-repeat="(zoneName, zoneInfo) in info.zones">
+            <div ng-repeat="(zoneName, zoneInfo) in info.zones" class="zone zone-{{zoneName}}">
                 <div ng-show="zoneInfo.known">
                     <h3>{{zoneName}}</h3>
                     <ul>
                         <li ng-repeat="(id, card) in zoneInfo.entities">
-                            <div>
+                            <card card-info="card"></card>
+                            <div class="card"
+                                ng-class="{'selected': card.selected, 'targetable': doingAction && targets.indexOf(card.id) !== -1}">
                                 <!-- For target required actions -->
-                                <a href ng-click="selectCard(card)" ng-show="$eval(targets.indexOf(id)) != -1 && doingAction">
+                                <a href ng-click="selectEntity(card)" ng-show="doingAction && targets.indexOf(card.id) !== -1">
                                     {{card.properties.name}}
                                 </a>
 
                                 <!-- For non-target-required actions -->
-                                <div ng-hide="$eval(targets.indexOf(id)) != -1 && doingAction">
+                                <div ng-hide="doingAction && targets.indexOf(card.id) !== -1">
                                     <p>
                                         {{card.properties.name}}
                                     </p>

diff --git a/src/game_board/module.js b/src/game_board/module.js
@@ -11,4 +11,12 @@ module.exports = angular.module('cardshifter.gameBoard', [ngRoute, serverInterfa
       controller: GameboardController,
       template: template
     })
-  });
+  })
+  .directive('card', function() {
+      return {
+        scope: {
+            card: '=cardInfo'
+        },
+        template: require('../card_model/card_template.html')
+    };
+  });