moves model classes into factories

package.json

@@ -2,16 +2,17 @@
   "name": "benoitzohar-2014",
   "version": "1.0.0",
   "description": "",
-  "scripts" : {
-      "start": "webpack-dev-server",
-      "build" : "webpack",
-      "test": "TODO"
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack",
+    "test": "TODO"
   },
   "devDependencies": {
     "assets-webpack-plugin": "^3.4.0",
     "autoprefixer-loader": "^3.2.0",
     "babel-core": "^6.17.0",
     "babel-loader": "^6.2.5",
+    "babel-plugin-lodash": "^3.2.9",
     "babel-preset-es2015": "^6.16.0",
     "clean-webpack-plugin": "^0.1.13",
     "css-loader": "^0.25.0",
@@ -27,6 +28,7 @@
     "webpack-dev-server": "^1.16.2"
   },
   "dependencies": {
-    "angular": "^1.5.0"
+    "angular": "^1.5.0",
+    "lodash": "^4.16.4"
   }
 }

src/game/game-component.js

@@ -9,7 +9,8 @@ import GridComponent from '../grid/grid-component.js';
 import InteractionComponent from '../interaction/interaction-component.js';
 
 export default angular.module('game', [GridComponent.name, InteractionComponent.name])
-    .component("gameComponent", {
+    .factory('GameModel', GameModel)
+    .component('gameComponent', {
         controller: GameController,
         templateUrl: GameTemplate
     });

src/game/game-controller.js

@@ -1,7 +1,6 @@
-import GameModel from './game-model'
-
 export default class GameController {
-    constructor(InteractionService) {
+    constructor(GameModel, InteractionService) {
+
         //create the game
         this.game = new GameModel()
 
@@ -14,4 +13,4 @@ export default class GameController {
     }
 }
 
-GameController.$inject = ["InteractionService"];
+GameController.$inject = ["GameModel", "InteractionService"];

src/game/game-model.js

@@ -1,14 +1,16 @@
-import GridModel from '../grid/grid-model'
+class GameModel {
 
-export default class GameModel {
-
-    constructor() {
-        this.grid = new GridModel()
+    constructor(GridModel) {
+        this.grid = GridModel()
 
     }
 
     addRandomTiles(count) {
-        console.log("[debug] count", count);
-        this.grid.addRandomTiles(count);
+        this.grid.addRandomTiles(count)
     }
 }
+
+//This part is necessary to use our model class as a factory
+export default ['GridModel', (GridModel) => {
+    return () => new GameModel(GridModel)
+}]

src/grid/grid-component.js

@@ -1,17 +1,19 @@
-import angular from 'angular';
+import angular from 'angular'
+import MapToArrayFilter from '../shared/maptoarray-filter'
 
-import GridController from './grid-controller.js';
-import GridModel from './grid-model.js';
-import GridTemplate from './grid-template.html';
-import GridStyles from './grid-styles.scss';
+import GridController from './grid-controller.js'
+import GridModel from './grid-model.js'
+import GridTemplate from './grid-template.html'
+import GridStyles from './grid-styles.scss'
 
-import TileComponent from '../tile/tile-component.js';
+import TileComponent from '../tile/tile-component.js'
 
-export default angular.module('grid', [TileComponent.name])
+export default angular.module('grid', [TileComponent.name, MapToArrayFilter.name])
+    .factory("GridModel", GridModel)
     .component("gridComponent", {
         bindings: {
             grid: '<'
         },
         controller: GridController,
         templateUrl: GridTemplate
-    });
+    })

src/grid/grid-model.js

@@ -1,28 +1,80 @@
-import {
-    randomInt
-} from '../helpers'
-import TileModel from '../tile/tile-model'
+import _random from 'lodash/random'
 
-export default class GridModel {
+class GridModel {
 
-    constructor() {
-        this.tiles = []
+    constructor(TileModel, TILES_PER_ROW) {
+        this.TILES_PER_ROW = TILES_PER_ROW
+        this.TileModel = TileModel;
+        this.tiles = new Map()
+    }
+
+    /**
+     * slotgetMapIndexFromPositionsIsFree(Int x, Int y)
+     * returns a string made of the 2 axis components
+     **/
+    getMapIndexFromPositions(x, y) {
+        return `${x}-${y}`
     }
 
     createTile(x, y, value) {
-        this.tiles.push(
-            new TileModel(x, y, value)
-        )
-        console.log("[debug] this.tiles", this.tiles);
+        console.log("[debug] this.TileModel", this.TileModel);
+        this.tiles.set(this.getMapIndexFromPositions(x, y), new this.TileModel(x, y, value))
+    }
+
+    /**
+     *  getTileAtPosition(Int x, Int y)
+     *  returns a TileModel object or null
+     **/
+    getTileAtPosition(x, y) {
+        return this.tiles.get(this.getMapIndexFromPositions(x, y))
     }
 
+    /**
+     * slotIsFree(Int x, Int y)
+     * returns a boolean: true if the slot is not taken by a tile
+     **/
+    slotIsFree(x, y) {
+        return !this.tiles.has(this.getMapIndexFromPositions(x, y))
+    }
+
+    /**
+     *  slotsLeft()
+     *  returns the amount of free slots
+     **/
+    slotsLeft() {
+        return Math.pow(this.TILES_PER_ROW, 2) - this.tiles.size > 0;
+    }
+
+    /**
+     *  addRandomTiles(Int count)
+     *  creates a defined number of random tiles if there is free slots
+     *  returns a boolean defining if all the tiles could have been added or not
+     **/
     addRandomTiles(count) {
         for (let i = 0; i < count; i++) {
-            this.createTile(randomInt(0, 4), randomInt(0, 4), 2) //TODO: add TILES_PER_ROW constant here.
+
+            if (!this.slotsLeft()) {
+                return false
+            }
+            let x, y;
+            do {
+                x = _random(0, this.TILES_PER_ROW - 1);
+                y = _random(0, this.TILES_PER_ROW - 1);
+            } while (!this.slotIsFree(x, y))
+
+            this.createTile(x, y, 2)
         }
+        return true
     }
 
-    move(axis, direction) {
-        console.log("[debug] move", axis, direction);
+    moveTiles(axis, direction) {
+        console.log("[debug] moveTiles", axis, direction);
     }
+
+
 }
+
+//This part is necessary to use our model class as a factory
+export default ['TileModel', 'TILES_PER_ROW', (TileModel, TILES_PER_ROW) => {
+    return () => new GridModel(TileModel, TILES_PER_ROW)
+}]

src/grid/grid-template.html

@@ -1,3 +1,3 @@
 <div class="grid">
-    <tile-component model="tile" ng-repeat="tile in $ctrl.grid.tiles"></tile-component>
+    <tile-component model="tile" ng-repeat="tile in $ctrl.grid.tiles | mapToArray"></tile-component>
 </div>

src/helpers.js

@@ -2,6 +2,7 @@
  *  Helpers: a collection of general functions that are used in the app
  **/
 
+/* DEPRECATED: to remove TODO
 export function randomInt(from = 0, to = 99) {
     return Math.floor((Math.random() * to) + 1) + from //TODO: write Test & check why there is never 0
-}
+}*/

src/shared/maptoarray-filter.js

@@ -0,0 +1,17 @@
+/**
+ *  Transforms a Map into an array
+ *  Inspired by  the filter at https://github.com/petebacondarwin/angular-toArrayFilter
+ *  use this to ng-repeat on a Map
+ **/
+
+import angular from 'angular'
+
+export default angular.module('MapToArrayFilter', [])
+
+.filter('mapToArray', () => function(obj) {
+
+    if (!angular.isObject(obj) || !obj.get) {
+        return obj
+    }
+    return Array.from(obj.values())
+})

src/tile/tile-component.js

@@ -6,6 +6,7 @@ import TileTemplate from './tile-template.html'
 import TileStyles from './tile-styles.scss'
 
 export default angular.module('tile', [])
+    .factory('TileModel', TileModel)
     .component("tileComponent", {
         bindings: {
             model: '<'

src/tile/tile-model.js

@@ -1,6 +1,6 @@
-export default class TileModel {
+class TileModel {
 
-    constructor(x = 0, y = 0, value = 2) {
+    constructor(x, y, value) {
         //save positions for the tile
         this.x = x
         this.y = y
@@ -18,3 +18,8 @@ export default class TileModel {
     }
 
 }
+
+//This part is necessary to use our model class as a factory
+export default () => {
+    return (x = 0, y = 0, value = 2) => new TileModel(x, y, value)
+}

yarn.lock

@@ -331,6 +331,13 @@ babel-plugin-check-es2015-constants@^6.3.13:
   dependencies:
     babel-runtime "^6.0.0"
 
+babel-plugin-lodash:
+  version "3.2.9"
+  resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.2.9.tgz#062f85aa7810fbb4374a1a7372ecc44b09168760"
+  dependencies:
+    glob "^7.0.6"
+    lodash "^4.15.0"
+
 babel-plugin-transform-es2015-arrow-functions@^6.3.13:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d"
@@ -1478,7 +1485,7 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
   dependencies:
@@ -1973,6 +1980,10 @@ loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.3, loader-utils@^0
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+lodash, lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.2.0:
+  version "4.16.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.4.tgz#01ce306b9bad1319f2a5528674f88297aeb70127"
+
 lodash._arraycopy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
@@ -2127,10 +2138,6 @@ lodash.words@^3.0.0:
   dependencies:
     lodash._root "^3.0.0"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.2, lodash@^4.2.0:
-  version "4.16.4"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.4.tgz#01ce306b9bad1319f2a5528674f88297aeb70127"
-
 lodash@~4.9.0:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.9.0.tgz#4c20d742f03ce85dc700e0dd7ab9bcab85e6fc14"