initial commit ;)

.gitignore

@@ -1,7 +1,6 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
 /tmp
 /out-tsc
 # Only exists if Bazel was run

package-lock.json

@@ -1270,9 +1270,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "8.9.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.9.5.tgz",
-      "integrity": "sha512-jRHfWsvyMtXdbhnz5CVHxaBgnV6duZnPlQuRSo/dm/GnmikNcmZhxIES4E9OZjUmQ8C+HCl4KJux+cXN/ErGDQ==",
+      "version": "8.10.60",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.60.tgz",
+      "integrity": "sha512-YjPbypHFuiOV0bTgeF07HpEEqhmHaZqYNSdCKeBJa+yFoQ/7BC+FpJcwmi34xUIIRVFktnUyP1dPU8U0612GOg==",
       "dev": true
     },
     "@types/q": {

package.json

@@ -3,12 +3,13 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "node server.js",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
+  "engines":{"node":"8.12.0","npm":"6.4.1"},
   "private": true,
   "dependencies": {
     "@angular/animations": "~8.2.0",
@@ -28,9 +29,9 @@
     "@angular/cli": "~8.2.2",
     "@angular/compiler-cli": "~8.2.0",
     "@angular/language-service": "~8.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^8.10.60",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

server.js

@@ -0,0 +1,16 @@
+//Install express server
+const express = require('express');
+const path = require('path');
+
+const app = express();
+
+// Serve only the static files form the dist directory
+app.use(express.static('./dist/{{your-app-name}}'));
+
+app.get('/*', function(req,res) {
+    
+res.sendFile(path.join(__dirname,'/dist/{{your-app-name}}/index.html'));
+});
+
+// Start the app by listening on the default Heroku port
+app.listen(process.env.PORT || 8080);

src/app/app.component.html

@@ -1,20 +1 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<main></main>

src/app/app.module.ts

@@ -1,16 +1,25 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import {ReactiveFormsModule, FormsModule} from '@angular/forms'
 
 import { AppComponent } from './app.component';
+import { MainComponent } from './components/main/main.component';
+import { CardComponent } from './components/card/card.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MainComponent,
+    CardComponent,
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    ReactiveFormsModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+
+}

src/app/components/card/card.component.css

@@ -0,0 +1,3 @@
+.margins {
+    margin: 12px;
+}

src/app/components/card/card.component.html

@@ -0,0 +1,2 @@
+<!-- <img class="margins" *ngIf="!flipped" (click)="flipCard()" src="../../../assets/back.png" width="161" height="225"> -->
+<img class="margins" src="../../../assets/{{fileString}}.png" width="161" height="225">

src/app/components/card/card.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/card/card.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, Input, Output, SimpleChanges, ChangeDetectorRef } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css']
+})
+export class CardComponent implements OnInit {
+    @Input() public number;
+    @Input() public suit;
+    public fileString: string;
+    @Output() cardEmitter: EventEmitter<any> = new EventEmitter();
+  constructor(private changeDetector: ChangeDetectorRef) { }
+
+  ngOnInit() {
+      console.log(this.number);
+      if (this.number < 10) {
+        this.fileString = this.suit + '0' + this.number;
+      } if (this.number >= 10) {
+        this.fileString = this.suit + this.number;
+      }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+      //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+      //Add '${implements OnChanges}' to the class.
+      this.ngOnInit();
+      this.changeDetector.detectChanges();
+
+  }
+
+}

src/app/components/main/exercises.json

@@ -0,0 +1,26 @@
+{
+    "c": [
+        "Pull Up",
+        "Table/Desk Inverted Row",
+        "Rear Delt Fly (Dumbbell or Milk Jug",
+        "Upright Row (Backpack or Milk Jug)"
+    ],
+    "d": [
+        "Bicep Curl",
+        "Skullcrushers (on a table) or Close Grip Pus-Ups",
+        "Bicycle Crunch or Reverse Crunch",
+        "Standing Calf Raise"
+    ],
+    "h": [
+        "Walking Lunge (Dumbbell or backpack to load)",
+        "Bulgarian Split Squat",
+        "Single Leg Hip Thrust",
+        "Nordic Ham Curl"
+    ],
+    "s": [
+        "Push-Up or Incline Push-Up",
+        "Pike Push-Up or Vertical Push-Up",
+        "Standing Press (Milk jug or dumbbells)",
+        "Milk Jug Lateral Raise or Doorway Lateral Raise (for time)"
+    ]
+}

src/app/components/main/main.component.css

@@ -0,0 +1,16 @@
+.container {
+    margin-top: 2em;
+}
+
+.alert {
+    text-align: center;
+}
+
+.center {
+    display: flex;
+    justify-content: center;    
+}
+.sticky-card {
+    max-height: 50%;
+    width: 100%;
+}

src/app/components/main/main.component.html

@@ -0,0 +1,63 @@
+<div class="container">
+    <div class="row">
+        <div class="col">
+            <div class="card">
+                <div class="card-header">
+                    Card Workout!
+                </div>
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="numCards">Number of cards</label>
+                        <input type="number" class="form-control" id="numCards" [(ngModel)]="numCards">
+                    </div>
+                    <button href="#" class="btn btn-primary" (click)="createCards()">Submit</button>
+                    <button style="margin-left: 1em" href="#" class="btn btn-danger" (click)="resetCards()">Reset</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div *ngIf="workoutDeck && showCards" class="container">
+    <div class="row">
+        <!-- Previous card -->
+        <div class="col">
+            <div class="alert alert-danger" role="alert">
+                Previous Card
+              </div>
+        </div>
+        <!-- Current card -->
+        <div class="col">
+            <div class="alert alert-success" role="alert">
+                Current Card
+              </div>
+        </div>
+        <!-- Exercise info -->
+        <div class="col">
+            <div class="alert alert-success" role="alert">
+                Current Exercise
+              </div>
+        </div>
+    </div>
+    <div class="row">
+        <!-- Previous card -->
+        <div class="col center">
+            <card *ngIf="previousCardNumber > -1" class="" [number]="workoutDeck[previousCardNumber].value" [suit]="workoutDeck[previousCardNumber].suit"
+                (cardEmitter)="displayExercise($event)" (click)="decrementCardCounter()"></card>
+        </div>
+        <!-- Current card -->
+        <div class="col center">
+            <card *ngIf="currentCardNumber < workoutDeck.length" class="" [number]="workoutDeck[currentCardNumber].value" 
+                [suit]="workoutDeck[currentCardNumber].suit" (click)="incrementCardCounter()"></card>
+        </div>
+        <!-- Exercise info -->
+        <div class="col center">
+            <div *ngIf="exercise && reps" class="card sticky-card">
+                <div class="card-body">
+                    <h5 class="card-title">{{exercise}}</h5>
+                    <p class="card-text">{{reps}} reps</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/main/main.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/main/main.component.ts

@@ -0,0 +1,130 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+
+@Component({
+  selector: 'main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.css']
+})
+export class MainComponent implements OnInit {
+    public deck;
+    public numCards: number = 20;
+    public showCards: boolean;
+    public workoutDeck: any;
+    public previousCardNumber: number = -1;
+    public currentCardNumber: number = 0;
+    public defaultCardNumber: number = 20;
+    public suits = ['s', 'd', 'c', 'h'];
+    public values = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'];
+
+    public reps: number;
+    public rest: boolean;
+    public exercise: any;
+    public exercisesJson = require('./exercises.json');
+
+    public cCounter: number = 0;
+    public dCounter: number = 0;
+    public hCounter: number = 0;
+    public sCounter: number = 0;
+
+    constructor(private changeDetector: ChangeDetectorRef) { }
+
+    public ngOnInit() {
+        this.deck = this.createDeck();
+        this.shuffleDeck(this.deck);
+    }
+
+    public createCards(): void {
+        this.showCards = true;
+        this.workoutDeck = this.deck.slice(0,this.numCards);
+        this.displayExercise();
+    }
+
+    public resetCards(): void {
+        this.showCards = false;
+        this.deck = undefined;
+        this.deck = this.createDeck();
+        this.shuffleDeck(this.deck);
+        this.workoutDeck = this.deck.slice(0,this.numCards);
+        this.showCards = true;
+        this.reps = undefined;
+        this.rest = false;
+        this.exercise = undefined;
+        this.currentCardNumber = 0;
+        this.previousCardNumber = -1;
+    }
+
+    public createDeck() {
+        let deck = new Array();
+        let card;
+        for(let i=0; i < this.suits.length; i++) {
+            for(let n=0; n < this.values.length; n++) {
+                card = {value: this.values[n], suit: this.suits[i]};
+                deck.push(card);
+            }
+        }
+        return deck;
+    }
+
+    public shuffleDeck(deck) {
+        let location1;
+        let location2;
+        let temp;
+        for(let i = 0; i < 2000; i++) {
+            location1 = Math.floor((Math.random() * deck.length));
+            location2 = Math.floor((Math.random() * deck.length));
+            temp = deck[location1];
+
+            deck[location1] = deck[location2];
+            deck[location2] = temp;
+        }
+    }
+
+    public displayExercise() {
+        const currentCard = this.workoutDeck[this.currentCardNumber]
+        console.log(currentCard);
+        if (currentCard.value !== 1) {
+            this.rest = undefined
+            this.reps = Number(currentCard.value)+10;
+
+            if (currentCard.suit === 'c') {
+                this.exercise = this.exercisesJson.c[this.cCounter];
+                this.cCounter += 1;
+            } else if (currentCard.suit === 'd') {
+                this.exercise = this.exercisesJson.d[this.dCounter];
+                this.dCounter += 1;
+            } else if (currentCard.suit === 'h') {
+                this.exercise = this.exercisesJson.h[this.hCounter];
+                this.hCounter += 1;
+            } else if (currentCard.suit === 's') {
+                this.exercise = this.exercisesJson.s[this.sCounter];
+                this.sCounter += 1;
+            }
+    
+            if (this.cCounter > 3) {
+                this.cCounter = 0;
+            } else if (this.dCounter > 3) {
+                this.dCounter = 0;
+            } else if (this.hCounter > 3) {
+                this.hCounter = 0;
+            } else if (this.sCounter > 3) {
+                this.sCounter = 0;
+            }
+        } else {
+            this.exercise = undefined;
+            this.reps = undefined;
+            this.rest = true;
+        }
+    }
+
+    public incrementCardCounter() {
+        this.displayExercise();
+        this.currentCardNumber += 1;
+        this.previousCardNumber += 1;
+    }
+
+    public decrementCardCounter() {
+        this.displayExercise()
+        this.currentCardNumber -= 1;
+        this.previousCardNumber -= 1;
+    }
+}

src/index.html

@@ -1,14 +1,28 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>CardWorkout</title>
-  <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+<head>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+        crossorigin="anonymous"></script>
+    <meta charset="utf-8">
+    <title>CardWorkout</title>
+    <base href="/">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body>
-  <app-root></app-root>
+    <app-root></app-root>
 </body>
+
 </html>

tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": ["node"],
+    "typeRoots": ["../node_modules/@types"]
   },
   "files": [
     "src/main.ts",