stuff

package-lock.json

@@ -5399,6 +5399,15 @@
       "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=",
       "dev": true
     },
+    "infinite-scroll": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/infinite-scroll/-/infinite-scroll-3.0.3.tgz",
+      "integrity": "sha512-MwhXytjtcGI/TpGvjxS3RuJwG19HkCH4HGsWhOaKRNA1vfNH4ZvHgqO9Ifo2U8ZUjKFRmak4OUrKqHQbFaVdhg==",
+      "requires": {
+        "ev-emitter": "1.1.1",
+        "fizzy-ui-utils": "2.0.7"
+      }
+    },
     "inflection": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.10.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@angular/router": "^5.2.0",
     "bootstrap": "^4.0.0",
     "core-js": "^2.4.1",
+    "infinite-scroll": "^3.0.3",
     "jquery": "^3.3.1",
     "masonry-layout": "^4.2.1",
     "rxjs": "^5.5.6",

src/app/game-grid/game-grid.component.css

@@ -1,5 +1,5 @@
-.grid-sizer, .grid-item{
-	width: 25%;
+.grid-item{
+	min-height:250px;
 }
 .grid-item {
 	margin-bottom: 10px;
@@ -7,3 +7,32 @@
 .grid-item-img{
 	width: 250px;
 }
+
+.flex-row {
+	display: flex;
+	flex-wrap: wrap;
+}
+.flex-row > [class*='col-'] {
+	display: flex;
+	flex-direction: column;
+}
+
+.flex-row .thumbnail,
+.flex-row .caption {
+	flex-direction: column;
+	display: flex;
+	flex: 1 0 auto;
+	height: auto;
+	position: relative;
+}
+.flex-text {
+	flex-grow: 1;
+}
+.flex-row img {
+	min-width: 0;
+	width: 100%;
+}
+
+.cardParent{
+	margin: 10px 5px;
+}

src/app/game-grid/game-grid.component.html

@@ -1,18 +1,28 @@
-<div class="row">
-	<div class="col-sm-12">
+
+<div class="container">
 <div *ngIf="isEmptyObject(gamesData)">
+	<div class="flex-row row"  *ngIf="gamesData">
 	
-	<div class="grid">
-		<div class="grid-sizer"></div>
-		<div *ngFor="let game of gamesData; last as isLast;" style="margin:auto">
-			{{renderGridItems(isLast)}}
-			<div class="grid-item text-center">
-				<img class="grid-item-img" src="http://lazypug.net/globalAssets/images/temp1.png">
-				<p>{{game.Title}}</p>
+		<div *ngFor="let game of gamesData;">
+
+			
+				<div class="col-xs-6 col-sm-4 col-lg-3 cardParent">
+					<div class="card" style="width: 18rem;">
+						<img class="card-img-top" src="http://lazypug.net/globalAssets/images/temp1.png" alt="">
+						<div class="card-body">
+							<h5 class="card-title">{{game.Title}}</h5>
+							<p class="card-text">{{game.Title}}</p>
+							<a href="#" class="btn btn-primary">Go somewhere</a>
+						</div>
+					</div>
 				</div>
 			</div>
 
 		</div>
 	
+
 </div>
 </div>
+
+<button (click)="myFunc()">New Call</button>
+

src/app/game-grid/game-grid.component.ts

@@ -20,6 +20,10 @@ export class GameGridComponent implements OnInit {
 	rawGamesContent;
 	gamesData;
 
+	queryFilters;
+	querryPage;
+	queryOrder;
+
 	constructor(
 		private route: ActivatedRoute,
 		private gamesService: GamesService
@@ -28,33 +32,36 @@ export class GameGridComponent implements OnInit {
 	}
 
 	ngOnInit() {
-
 		this.getGamesList();
-		
-	
-		
-
 	}
 
 
 	getGamesList(  ): any{
-		this.gameListSubscription = this.gamesService.getGames(  ).subscribe( data => {
+
+		this.queryFilters = "Played,eq,true";
+		this.querryPage = 1;
+		this.queryOrder = "Title";
+
+		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder ).subscribe( data => {
 			console.log( data );
 			this.gamesData = data.games;
-			//var tempItemContent = [];
-
-			/* parse out just the input data and set that in object array */
-			/*for( var key in data['ContentBlocks'] ){
-				console.log( data['ContentBlocks'][key]['Type'] );
-				if( data['ContentBlocks'][key]['Type'] == "ItemSelectionSetting" ){
-					tempItemContent.push( data['ContentBlocks'][key]['Content'] );
-				}
-			}
-			this.formItemContent = tempItemContent;
-			*/
 		});
 	}
 
+	getGamesList2(  ): any{
+
+		this.queryFilters = "Played,eq,true";
+		this.querryPage = 2;
+		this.queryOrder = "Title";
+
+		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder ).subscribe( data => {
+			console.log( data );
+			this.gamesData = data.games;
+		});
+	}
+
+
+
 	isEmptyObject(obj) {
 		return (obj != undefined);
 	}
@@ -66,13 +73,21 @@ export class GameGridComponent implements OnInit {
 	renderGridItems(lastItem: boolean) {
 		if (lastItem) {
 			$('.grid').masonry({
-				columnWidth: '.grid-sizer',
+				columnWidth: 250,
 				itemSelector: '.grid-item',
-				percentPosition: true
+				gutter: 10
 				
 
 			});
+			
 		}
+
+	}
+
+	myFunc(){
+		$('.grid').masonry('destroy')
+this.getGamesList2();
+
 	}
 
 

src/app/games.service.ts

@@ -21,8 +21,8 @@ export class GamesService {
   		private http: HttpClient
 	){ }
 
-	getGames(  ): Observable<any> {
-		return this.http.get( this.APIURL + "/games?filter=Played,eq,true&page=1&order=Title&transform=1" )
+	getGames( queryFilters, querryPage, queryOrder ): Observable<any> {
+		return this.http.get( this.APIURL + "/games?filter="+ queryFilters +"&page="+ querryPage +"&order="+ queryOrder +"&transform=1" )
 			.map(res => {
 				return(
 					res