Develop

README.md

@@ -12,7 +12,7 @@ For more information about the Cardshifter project, see:
 - [Primary repository on GitHub](https://github.com/Cardshifter/Cardshifter)
 
 ### Development
-Ensure you have [https://nodejs.org/](NodeJS) installed. Then execute the following instructions:
+Ensure you have [NodeJS](https://nodejs.org/) installed. Then execute the following instructions:
 
 ````bash
 git clone https://www.github.com/cardshifter/html-client
@@ -22,6 +22,6 @@ npm i
 ````
 
 Then you can run one of the following scripts to perform actions:
-- `npm run build` - builds, and minifies, the cardshifter client and deposits it in the ./dist folder. The files built by this script are intended to be deployed to a live server.
-- `npm run develop` - starts a basic webserver (powered by `webpack-dev-server`) that will host the cardshifter html client. It will also watch your files and recompile them every time they change. See [webpack](webpack.github.io) for more information.
+- `npm run build` - builds, and minifies, the Cardshifter client and deposits it in the ./dist folder. The files built by this script are intended to be deployed to a live server.
+- `npm run develop` - starts a basic webserver (powered by `webpack-dev-server`) that will host the Cardshifter HTML client. It will also watch your files and recompile them every time they change. See [webpack](webpack.github.io) for more information.
 - `npm test` - runs all tests via karma. Tests are created by placing a file with the extension `*.spec.js` inside of the src folder. All tests have access to webpack (and thus `require`).

package.json

@@ -38,8 +38,9 @@
     "webpack-dev-server": "^1.10.1"
   },
   "dependencies": {
-    "angular": "^1.4.3",
-    "angular-route": "^1.4.3",
-    "angular-bootstrap-npm": "0.13.3"
+    "angular": "1.4.3",
+    "angular-route": "1.4.3",
+    "angular-bootstrap-npm": "0.13.3",
+    "angular-animate": "1.4.3"
   }
 }

src/card_model/card_model.css

@@ -8,6 +8,7 @@
     background: gainsboro;
     float: left;
     padding: 2px;
+    margin-bottom: 10px;
 }
 
 .card-image {
@@ -31,4 +32,75 @@
     padding-top: 8px;
     font-family: Georgia, Times, "Times New Roman", serif;
     font-size: 1.1em;
-}
+}
+
+.card-actions {
+    width: 180px;
+    clear: both;
+    /*border-style: solid;
+    border-width: 3px;
+    border-color: black;
+    border-radius: 10px;*/
+    text-align: center;
+}
+
+.card.ng-enter, .card.ng-leave, .card.ng-move {
+    -webkit-transition: 0.5s linear all;
+    -moz-transition: 0.5s linear all;
+    -o-transition: 0.5s linear all;
+    transition: 0.5s linear all;
+}
+
+.card.ng-enter, .card.ng-move {
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.card.ng-move.ng-move-active,
+.card.ng-enter.ng-enter-active {
+    opacity: 1;
+    height: 275px;
+}
+
+.card.ng-leave {
+    opacity: 1;
+    overflow: hidden;
+}
+
+.card.ng-leave.ng-leave-active {
+    opacity: 0;
+    height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+/* CARD PROPERTY ANIMATION */
+
+.card-property {
+    position: relative;
+    display: inline-block;
+}
+
+button.diff-animation {
+    z-index: 4;
+    position: absolute;
+    opacity: 0;
+}
+
+.diff-animation.ng-leave {
+    -webkit-transition: 1.5s linear all;
+    -moz-transition: 1.5s linear all;
+    -o-transition: 1.5s linear all;
+    transition: 1.5s linear all;
+}
+
+.diff-animation.ng-leave {
+    opacity: 1;
+}
+
+.diff-animation.ng-leave.ng-leave-active {
+    opacity: 0;
+    top: -32px;
+}
+

src/card_model/card_template.html

@@ -1,4 +1,4 @@
-<div class="card"
+<div class="card card-outer"
     ng-class="{'selected': card.selected, 'targetable': doingAction && targets.indexOf(card.id) !== -1}"
     >
 <!--
@@ -9,7 +9,6 @@
         - data-fittext-max="12pt" : Maximum font size allowed
   -->
 
-<div class="card-outer">
     <div class="test" ng-show="debugMode">doingAction: {{doingAction}} targets: {{targets}} actions: {{actions}} card: {{card}}</div>
     <!-- card name -->
     <div>
@@ -33,39 +32,28 @@
     <div>
         <!-- mana cost -->
         <div style="float: left; padding: 5px">
-            <button class="btn btn-sm btn-info active glyphicon glyphicon-tint" style="cursor:default">
-                {{card.properties.MANA_COST}}
-            </button>
+            <button class="btn btn-sm btn-info active glyphicon glyphicon-tint" style="cursor:default">{{card.properties.MANA_COST}}</button>
         </div>
         <div style="float: right; padding: 5px;" class="btn-group">
             <!-- attack -->
-            <button ng-show="card.properties.ATTACK" class="btn btn-sm btn-danger active glyphicon glyphicon-screenshot" style="cursor:default">
-                {{card.properties.ATTACK}}
-            </button>
-            <button ng-hide="card.properties.ATTACK" class="btn btn-sm btn-danger active glyphicon glyphicon-screenshot" style="cursor:default">
-                -
-            </button>
+            <button ng-show="card.properties.ATTACK" class="btn btn-sm btn-danger active glyphicon glyphicon-screenshot" style="cursor:default">{{card.properties.ATTACK}}</button>
+            <button ng-hide="card.properties.ATTACK" class="btn btn-sm btn-danger active glyphicon glyphicon-screenshot" style="cursor:default">-</button>
             <!-- health -->
-            <button ng-show="card.properties.HEALTH" class="btn btn-sm btn-success active glyphicon glyphicon-heart" style="cursor:default">
-                {{card.properties.HEALTH}}
-            </button>
-            <button ng-hide="card.properties.HEALTH" class="btn btn-sm btn-success active glyphicon glyphicon-heart" style="cursor:default">
-                -
-            </button>
+            <div class="card-property">
+                <button ng-show="card.properties.HEALTH" class="btn btn-sm btn-success active glyphicon glyphicon-heart" style="cursor:default">{{card.properties.HEALTH}}</button>
+                <button ng-hide="card.properties.HEALTH" class="btn btn-sm btn-success active glyphicon glyphicon-heart" style="cursor:default">-</button>
+                <dynamic-animation items="card.animations.HEALTH" />
+            </div>
         </div>
     </div>
     <div style="clear: both;">
         <div style="float: left; padding: 5px; text-align: center;">
             <!-- scrap cost -->
-            <button ng-show="card.properties.SCRAP_COST" class="btn btn-xs btn-primary active glyphicon glyphicon-wrench" style="cursor:default">
-                {{card.properties.SCRAP_COST}}
-            </button>
+            <button ng-show="card.properties.SCRAP_COST" class="btn btn-xs btn-primary active glyphicon glyphicon-wrench" style="cursor:default">{{card.properties.SCRAP_COST}}</button>
         </div>
         <div ng-show="card.properties.SCRAP" style="float: left; padding: 5px; text-align: center;">
             <!-- scrap value -->
-            <button class="btn btn-xs btn-primary active glyphicon glyphicon-cog" style="cursor:default">
-                {{card.properties.SCRAP}}
-            </button>
+            <button class="btn btn-xs btn-primary active glyphicon glyphicon-cog" style="cursor:default">{{card.properties.SCRAP}}</button>
         </div>
         <!-- flavor text -->
         <div ng-show="card.properties.flavor" style="float: right; padding: 5px; text-align: center;">
@@ -82,5 +70,12 @@
                     >FX</button>
         </div>
     </div>
-    <input ng-repeat="action in actions" ng-if="!doingAction && action.id === card.id" ng-click="startAction({action: action})" type="button" value="{{action.action}}"/>
-</div>
+    <div class="card-actions">
+        <button class="btn btn-xs btn-navbar csh-button" ng-repeat="action in actions"
+                ng-if="!doingAction && action.id === card.id"
+                ng-click="startAction({action: action})"
+                class="btn btn-xs btn-default">
+            {{action.action}}
+        </button>
+    </div>
+</div>

src/cardshifter.css

@@ -234,6 +234,8 @@ th {
 }
 
 /* FORMATTING FOR GAME-BOARD STUFF */
+
+
 .targetable {
     background-color: yellow;
 }
@@ -242,3 +244,67 @@ th {
     background-color: #00ffff;
 }
 
+.player-info-box {
+    /*border: solid 3px yellow;*/ /* for testing */
+    /* Layout & Positioning */
+    height: 300px;
+    width: 14%;
+    float: left;
+    /* Styling: */
+    border: double 3px #7A7A7A;
+    background-color: #F5F5F5;
+    border-radius: 10px;
+    /* Content alignment */
+    text-align: left;
+    padding-left: 5px;
+    font-size: 0.8em;
+}
+
+.player-actions {
+}
+
+.card-property {
+    position: relative;
+}
+
+.player-user .zone-Hand {
+    /*border: solid 3px red;*/
+    height: 300px;
+    width: 86%;
+    overflow-y: scroll;
+    float: left;
+    /* Styling: */
+    border: double 3px #BBBBBB;
+    background-color: #EEEEEE;
+    border-radius: 10px;
+}
+
+.player-user .zone-Battlefield {
+    /*border: solid 3px pink;*/
+    height: 300px;
+    width: 86%;
+    overflow-y: scroll;
+    float: left;
+    /* Styling: */
+    border: double 3px #1F3D7A;
+    background-color: #C2D1F0;
+    border-radius: 10px;
+}
+
+.player-opponent .zone-Hand {
+    visibility: hidden; /* THERE IS NOTHING TO SHOW IN THIS SECTION RIGHT NOW - @Phrancis 2015-08-27 */
+    /*border: solid 3px blue;*/
+    height: 300px;
+    width: 3%;
+}
+
+.player-opponent .zone-Battlefield {
+    /*border: solid 3px teal;*/
+    height: 300px;
+    width: 100%;
+    overflow-y: scroll;
+    /* Styling: */
+    border: double 3px #7A0000;
+    background-color: #E68080;
+    border-radius: 10px;
+}