half way to working acard directive

client/components/directives/ab-acard/ab-acard.jade

@@ -0,0 +1 @@
+{{atext}}

client/components/directives/ab-acard/ab-acard.js

@@ -0,0 +1,56 @@
+(function(){
+  'use strict';
+
+  angular.module('abAnswerModule', [])
+  .directive('abAcard', [function(){
+    var o = {};
+    o.restrict = 'A';
+    o.scope = {atext:'@', playNum:'@'};
+
+    o.link = function(scope, element, attrs){
+      var css = {
+        position: 'absolute',
+        display: 'none',
+        //top: -10000,
+        //left: -10000,
+        top: 0,
+        left: 0,
+        color: '#111111',
+        width: '144px',
+        height: 'auto',
+        //height: '211px',
+        // float: 'left',
+        padding: '10px',
+        margin: '5px'
+      };
+      css['word-wrap'] = 'break-word';
+      css['background-color'] = '#FFFFFF';
+      css['font-size'] = '15px';
+      css['font-weight'] = 800;
+      css['border-radius'] = '15px';
+      css['-moz-border-radius'] = '15px';
+      css['border-width'] = '1px';
+      css['border-style'] = 'solid';
+      css['border-color'] = '#777';
+      // css['-webkit-box-shadow'] = '0 0 8px #D0D0D0';
+
+      var $shadow = angular.element('<div></div>').css(css).text(attrs.atext);
+      angular.element(document.body).append($shadow);
+
+      var height = $shadow.css('height'),
+          fsize  = $shadow.css('font-size');
+      console.log(height, fsize);
+      // element.css({height:'10px'});
+      scope.$watch('attrs.playNum', function(newVal, oldVal){
+        scope.pick = attrs.playNum * 1;
+      });
+
+      scope.$on('$destroy', function(){
+        $shadow.remove();
+      });
+    };
+
+    return o;
+  }]);
+
+})();

client/components/directives/ab-acard/ab-acard.less

@@ -0,0 +1,36 @@
+@BLACK: #111111;
+@WHITE: #FFFFFF;
+
+div[ab-acard] {
+  display: inline-block;
+  //position: relative;
+
+  word-wrap: break-word;
+
+  background-color: @WHITE;
+  color: @BLACK;
+
+  width: 144px;
+  height: 211px;
+  // float: left;
+
+  padding: 10px;
+  margin: 5px;
+
+  font-size: 15px;
+  font-weight: 800;
+
+  border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #777;
+  -webkit-box-shadow: 0 0 8px #D0D0D0;
+
+}
+
+div[ab-acard]:hover {
+  position: relative;
+  top: -5px;
+}
+

client/index.jade

@@ -19,6 +19,7 @@ html(ng-app='mean-ah', lang='en')
     link(href='/views/results/results.css', rel='stylesheet')
     link(href='/components/directives/ab-player/ab-player.css', rel='stylesheet')
     link(href='/components/directives/ab-qcard/ab-qcard.css', rel='stylesheet')
+    link(href='/components/directives/ab-acard/ab-acard.css', rel='stylesheet')
     //- Load angular in head to support ng-cloak directive on nav bar
     script(src='/vendor/jquery/dist/jquery.js')
     script(src='/vendor/angular/angular.js')
@@ -62,4 +63,5 @@ html(ng-app='mean-ah', lang='en')
     script(src='/components/factories/game.js')
     script(src='/components/directives/ab-player/ab-player.js')
     script(src='/components/directives/ab-qcard/ab-qcard.js')
+    script(src='/components/directives/ab-acard/ab-acard.js')
 

client/index.js

@@ -1,7 +1,7 @@
 (function(){
   'use strict';
 
-  angular.module('mean-ah', ['ngRoute', 'LocalForageModule', 'abPlayerModule', 'abQuestionModule'])
+  angular.module('mean-ah', ['ngRoute', 'LocalForageModule', 'abPlayerModule', 'abQuestionModule', 'abAnswerModule'])
   .config(['$routeProvider', '$httpProvider', '$localForageProvider', function($routeProvider, $httpProvider, $localForageProvider){
     $routeProvider
     .when('/',         {templateUrl:'/views/home/home.html',         controller:'HomeCtrl'})

client/views/games/games.jade

@@ -2,7 +2,9 @@
   .row
     .col-xs-12
       button.btn.btn-default.btn-overide(type='button', ng-show='game.isOwner && game.isOpen', ng-click='startGame(game._id)') Start Game
+      |  
       button.btn.btn-default.btn-overide(type='button', ng-click='leaveGame(game._id)') Leave Game
+      |  
       button.btn.btn-default.btn-overide(type='button', ng-click='voteGameEnd(game._id)') Vote To End Game
       h3 Game: {{game.name}}
   .row
@@ -38,7 +40,7 @@
             .row
               .col-xs-12
                 .hand
-                  .card(ng-repeat='card in game.hand', ng-click='selectAnswer(card)') {{card.text}}
+                  div(ab-acard, atext='{{card.text}}', playNum='0', ng-repeat='card in game.hand', ng-click='selectAnswer(card)') {{card.text}}
             .row
               .col-xs-12
                 .play-hand

client/views/games/games.less

@@ -27,57 +27,3 @@
   text-align: center;
 }
 
-.card {
-  display: inline-block;
-  margin: 5px;
-  border: 1px solid black;
-}
-
-.card {
-  word-wrap: break-word;
-
-  width: 144px;
-  height: 211px;
-  float: left;
-
-  padding: 10px;
-  margin: 5px;
-
-  font-size: 11pt;
-  font-weight: 800;
-
-  border-radius: 15px;
-  -moz-border-radius: 15px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #777;
-  -webkit-box-shadow: 0 0 8px #D0D0D0;
-}
-
-.card:hover {
-  position: relative;
-  top: -5px;
-}
-
-.black_card {
-  background-color: black;
-  background: #282828;
-  background: -moz-linear-gradient(top, #282828 0%, black 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282828), color-stop(100%,black));
-  background: -webkit-linear-gradient(top, #282828 0%,black 100%);
-  background: -o-linear-gradient(top, #282828 0%,black 100%);
-  background: -ms-linear-gradient(top, #282828 0%,black 100%);
-  color: white;
-}
-
-.white_card {
-  background-color:white;
-  background: white;
-  background: -moz-linear-gradient(top, white 0%, #A0A0A0 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#A0A0A0));
-  background: -webkit-linear-gradient(top, white 0%,#A0A0A0 100%);
-  background: -o-linear-gradient(top, white 0%,#A0A0A0 100%);
-  background: -ms-linear-gradient(top, white 0%,#A0A0A0 100%);
-  color: black;
-}
-