(#17) Versus game

EnoF · Feb 21, 2014 · c2ad732 · c2ad732
1 parent 76c5223
commit c2ad732
Show file tree

Hide file tree

Showing 22 changed files with 280 additions and 43 deletions.
diff --git a/app/app.js b/app/app.js
@@ -10,6 +10,9 @@
                 .when('/tutorial', {
                     templateUrl: 'pages/tutorial.html'
                 })
+                .when('/versus', {
+                    templateUrl: 'pages/versus.html'
+                })
                 .otherwise({
                     redirectTo: '/'
                 });

diff --git a/app/index.html b/app/index.html
@@ -42,21 +42,27 @@
 
 <script src="scripts/templates.js"></script>
 
-<script src="models/Scene.js" type="text/javascript"></script>
-<script src="models/FirstAttackScene.js" type="text/javascript"></script>
-<script src="models/GameObject.js" type="text/javascript"></script>
-<script src="models/Player.js" type="text/javascript"></script>
+<script src="models/scenes/Scene.js" type="text/javascript"></script>
+<script src="models/scenes/FirstAttackScene.js" type="text/javascript"></script>
+<script src="models/scenes/VersusScene.js" type="text/javascript"></script>
+
 <script src="models/characters/Character.js" type="text/javascript"></script>
 <script src="models/characters/Saber.js" type="text/javascript"></script>
 <script src="models/characters/SwordSoldier.js" type="text/javascript"></script>
-<script src="models/GameSquare.js" type="text/javascript"></script>
+
 <script src="models/skills/Skill.js" type="text/javascript"></script>
 <script src="models/skills/CleanCut.js" type="text/javascript"></script>
 <script src="models/skills/Excalibur.js" type="text/javascript"></script>
 
+<script src="models/GameObject.js" type="text/javascript"></script>
+<script src="models/Player.js" type="text/javascript"></script>
+<script src="models/GameSquare.js" type="text/javascript"></script>
+
 <script src="widgets/gameSquare/gameSquare.js" type="text/javascript"></script>
-<script src="widgets/firstAttackScene/firstAttackScene.js" type="text/javascript"></script>
-<script src="widgets/character/Character.js" type="text/javascript"></script>
+<script src="widgets/gameBoard/gameBoard.js" type="text/javascript"></script>
+<script src="widgets/character/character.js" type="text/javascript"></script>
+<script src="widgets/tutorial/tutorial.js" type="text/javascript"></script>
+<script src="widgets/versus/versus.js" type="text/javascript"></script>
 <!--end DEV imports-->
 
 <!--start PROD imports

diff --git a/app/models/FirstAttackScene.js → app/models/scenes/FirstAttackScene.js b/app/models/FirstAttackScene.js → app/models/scenes/FirstAttackScene.js
diff --git a/app/models/Scene.js → app/models/scenes/Scene.js b/app/models/Scene.js → app/models/scenes/Scene.js
@@ -8,7 +8,7 @@
 
     var app = angular.module('jsWars');
 
-    app.factory('Scene', function SceneFactory(GameSquare) {
+    app.factory('Scene', function SceneFactory(GameSquare, Player) {
         return clazz(function Scene() {
 
             this.private = {
@@ -44,6 +44,9 @@
                     character.setHasAttacked(true);
                     this.public.closeActionPanel();
                 },
+                addUnits: function addUnits() {
+                    throw new Error('Exception not implemented');
+                },
                 endTurn: function endTurn(player) {
                     var units = player.getUnits();
                     for (var unit = units.getFirst(); unit; unit = unit.getNext()) {
@@ -63,6 +66,12 @@
                         this.private.initializeMapCollumn(column, height);
                     }
                 },
+                initializePlayers: function initializePlayers() {
+                    this.private.players.add(0, new Player('Player 1'));
+                    this.private.players.add(1, new Player('Player 2'));
+                    this.private.currentPlayerNode = this.private.players.getFirst();
+                    this.protected.addUnits();
+                },
                 validatePositions: function validatePositions(newX, newY) {
                     var currentPosition = this.private.activeGameSquare;
                     var newPosition = this.public.getPosition(newX, newY);

diff --git a/app/models/scenes/VersusScene.js b/app/models/scenes/VersusScene.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2014. 
+ *
+ * @author Andy Tang
+ */
+(function VersusSceneModel(angular, clazz) {
+    'use strict';
+
+    var app = angular.module('jsWars');
+
+    app.factory('VersusScene', ['Saber', 'SwordSoldier', 'Scene',
+        function VersusSceneFactory(Saber, SwordSoldier) {
+            return clazz(function VersusScene() {
+                this.extend = 'Scene';
+
+                this.private = {
+                    createNewUnits: function createNewUnits(list) {
+                        list.add(0, new Saber());
+                        for (var i = 1; i < 5; i++) {
+                            list.add(i, new SwordSoldier());
+                        }
+                    },
+                    calculatPositions: function calculatePositions(unitsAdded, x, y) {
+                        var position = {
+                            x: x,
+                            y: y
+                        };
+                        var positionCalculator = unitsAdded % 5;
+
+                        if (positionCalculator === 1) {
+                            position.x = x + 1;
+                        } else if (positionCalculator === 2) {
+                            position.y = y - 1;
+                        } else if (positionCalculator === 3) {
+                            position.x = x - 1;
+                        } else if (positionCalculator === 4) {
+                            position.y = y + 1;
+                        }
+
+                        return position;
+                    },
+                    positionUnits: function positionUnits(list, x, y) {
+                        var unitNode = list.getFirst();
+                        var unit;
+                        var unitsAdded = 0;
+                        var position;
+                        do {
+                            position = this.private.calculatPositions(unitsAdded, x, y);
+                            unit = unitNode.getValue();
+                            this.public.getPosition(position.x, position.y).setGameObject(unit);
+                            unitsAdded++;
+                        } while ((unitNode = unitNode.getNext()) !== null);
+                    }
+                };
+
+                this.protected = {
+                    addUnits: function addUnits() {
+                        var playerList = this.public.getPlayers();
+                        var playerOne = playerList.getFirst();
+                        var playerTwo = playerList.getLast();
+                        var unitsOne = playerOne.getValue().getUnits();
+                        var unitsTwo = playerTwo.getValue().getUnits();
+                        this.private.createNewUnits(unitsOne);
+                        this.private.positionUnits(unitsOne, 2, 5);
+                        this.private.createNewUnits(unitsTwo);
+                        this.private.positionUnits(unitsTwo, 17, 5);
+                    }
+                };
+
+                this.constructor = function constructor() {
+                    this.super.constructor(20, 10);
+                    this.protected.initializePlayers();
+                };
+            });
+        }]);
+}(window.angular, window.clazz, window.LinkedHashMap));
diff --git a/app/pages/tutorial.html b/app/pages/tutorial.html
@@ -4,4 +4,4 @@
   ~ @author Andy Tang
   -->
 <h1>Tutorial</h1>
-<section data-first-attack-scene=""></section>
+<section data-tutorial=""></section>
diff --git a/app/pages/versus.html b/app/pages/versus.html
@@ -0,0 +1,7 @@
+<!--
+  ~ Copyright (c) 2014.
+  ~
+  ~ @author Andy Tang
+  -->
+<h1>Versus</h1>
+<section data-versus=""></section>
diff --git a/app/styles/game.less b/app/styles/game.less
@@ -85,6 +85,15 @@ nav {
   background: rgba(150, 150, 150, 0.5);
   padding: 20px;
   margin: 30px 30px;
+
+  .view-port {
+    width: 100%;
+    overflow: auto;
+
+    .view-content {
+      width: 200%;
+    }
+  }
 }
 
 .game-square {

diff --git a/app/widgets/firstAttackScene/firstAttackScene.html b/app/widgets/firstAttackScene/firstAttackScene.html
diff --git a/app/widgets/gameBoard/gameBoard.html b/app/widgets/gameBoard/gameBoard.html
@@ -0,0 +1,30 @@
+<!--
+  ~ Copyright (c) 2014.
+  ~
+  ~ @author Andy Tang
+  -->
+<section>
+    <div class="game-board"
+         data-ng-class="{ 'move-mode': isInMoveMode(), 'attack-mode': isInAttackMode()}">
+        <h2>{{ getCurrentPlayer().getName() }}</h2>
+
+        <div class="view-port">
+            <div class="view-content">
+                <div class="column"
+                     data-ng-repeat="column in map">
+                    <div data-ng-repeat="square in column">
+                        <div data-ng-class="{
+                        'move-allowed': isInMoveRange($parent.$index, $index),
+                        'attack-allowed': isInAttackRange($parent.$index, $index)
+                     }"
+                             data-game-square="square"
+                             data-ng-click="action($parent.$index, $index)"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="button"
+         data-ng-click="endTurn()">End Turn
+    </div>
+</section>
diff --git a/...gets/firstAttackScene/firstAttackScene.js → app/widgets/gameBoard/gameBoard.js b/...gets/firstAttackScene/firstAttackScene.js → app/widgets/gameBoard/gameBoard.js
@@ -3,14 +3,14 @@
  *
  * @author Andy Tang
  */
-(function firstAttackSceneWidget(angular) {
+(function gameBoardWidget(angular) {
     'use strict';
 
     var app = angular.module('jsWars');
 
-    app.controller('firstAttackSceneViewModel',
-        function firstAttackSceneViewModel($scope, FirstAttackScene) {
-            var scene = new FirstAttackScene(3, 2, 5, 2);
+    app.controller('gameBoardViewModel',
+        function gameBoardViewModel($scope) {
+            var scene = $scope.scene;
 
             $scope.getCurrentPlayer = scene.getCurrentPlayer;
 
@@ -27,13 +27,14 @@
             $scope.endTurn = scene.endTurn;
         });
 
-    app.directive('firstAttackScene', function firstAttackSceneDirective() {
+    app.directive('gameBoard', function gameBoardDirective() {
         return {
             restrict: 'A',
-            templateUrl: 'firstAttackScene',
+            templateUrl: 'gameBoard',
             scope: {
+                scene: '=gameBoard'
             },
-            controller: 'firstAttackSceneViewModel'
+            controller: 'gameBoardViewModel'
         };
     });
 

diff --git a/app/widgets/tutorial/tutorial.html b/app/widgets/tutorial/tutorial.html
@@ -0,0 +1,6 @@
+<!--
+  ~ Copyright (c) 2014.
+  ~
+  ~ @author Andy Tang
+  -->
+<div data-game-board="scene"/>
diff --git a/app/widgets/tutorial/tutorial.js b/app/widgets/tutorial/tutorial.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2014. 
+ *
+ * @author Andy Tang
+ */
+(function tutorialWidget(angular) {
+    'use strict';
+
+    var app = angular.module('jsWars');
+
+    app.controller('tutorialViewModel',
+        function tutorialViewModel($scope, FirstAttackScene) {
+            $scope.scene = new FirstAttackScene(3, 2, 5, 2);
+        });
+
+    app.directive('tutorial', function tutorialDirective() {
+        return {
+            restrict: 'A',
+            templateUrl: 'tutorial',
+            scope: {
+            },
+            controller: 'tutorialViewModel'
+        };
+    });
+}(window.angular));
diff --git a/app/widgets/versus/versus.html b/app/widgets/versus/versus.html
@@ -0,0 +1,6 @@
+<!--
+  ~ Copyright (c) 2014.
+  ~
+  ~ @author Andy Tang
+  -->
+<div data-game-board="scene"/>
diff --git a/app/widgets/versus/versus.js b/app/widgets/versus/versus.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2014. 
+ *
+ * @author Andy Tang
+ */
+(function versusWidget(angular) {
+    'use strict';
+
+    var app = angular.module('jsWars');
+
+    app.controller('versusViewModel',
+        function versusViewModel($scope, VersusScene) {
+            $scope.scene = new VersusScene();
+        });
+
+    app.directive('versus', function versusDirective() {
+        return {
+            restrict: 'A',
+            templateUrl: 'versus',
+            scope: {
+            },
+            controller: 'versusViewModel'
+        };
+    });
+}(window.angular));
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "JSWars",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "description": "Turn based strategy game",
     "author": "EnoF",
     "dependencies": {

diff --git a/test/e2e/FirstAttackScene.js → test/e2e/tutorial.js b/test/e2e/FirstAttackScene.js → test/e2e/tutorial.js
@@ -4,7 +4,7 @@
  * @author Andy Tang
  */
 (function FirstAttackSceneScenarios(whereIt) {
-
+    'use strict';
     describe('First Attack Scene Scenarios', function FirstAttackScene() {
 
         beforeEach(function () {

diff --git a/test/e2e/versus.js b/test/e2e/versus.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2014. 
+ *
+ * @author Andy Tang
+ */
+(function VersusScene() {
+    'use strict';
+
+    describe('Versus Scene Scenarios', function VersusScene() {
+
+        beforeEach(function navigateTo() {
+            browser().navigateTo('/#/versus');
+        });
+
+        it('should have 20 x 10 game squares', function gameSquares() {
+            expect(element('.game-square').count()).toEqual(20 * 10);
+        });
+
+        it('should spawn two sabers', function spawnTwoSabers() {
+            expect(element('.saber').count()).toEqual(2);
+        });
+
+        it('should spawn 10 sword soldiers', function swordSoldiers() {
+            expect(element('.sword-soldier').count()).toEqual(8);
+        });
+    });
+}());
diff --git a/test/specs/models/FirstAttackSceneSpec.js → ...ecs/models/scenes/FirstAttackSceneSpec.js b/test/specs/models/FirstAttackSceneSpec.js → ...ecs/models/scenes/FirstAttackSceneSpec.js
diff --git a/test/specs/models/SceneSpec.js → test/specs/models/scenes/SceneSpec.js b/test/specs/models/SceneSpec.js → test/specs/models/scenes/SceneSpec.js