Updated attributes and weapons section

Add new elements and adjusted layout

package.json

@@ -11,27 +11,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.3",
-    "@angular/common": "^6.0.3",
-    "@angular/compiler": "^6.0.3",
-    "@angular/core": "^6.0.3",
-    "@angular/forms": "^6.0.3",
-    "@angular/http": "^6.0.3",
-    "@angular/platform-browser": "^6.0.3",
-    "@angular/platform-browser-dynamic": "^6.0.3",
-    "@angular/router": "^6.0.3",
-    "core-js": "^2.5.4",
-    "rxjs": "^6.0.0",
-    "zone.js": "^0.8.26"
+    "@angular/animations": "^8.1.2",
+    "@angular/common": "^8.1.2",
+    "@angular/compiler": "^8.1.2",
+    "@angular/core": "^8.1.2",
+    "@angular/forms": "^8.1.2",
+    "@angular/http": "^7.2.15",
+    "@angular/platform-browser": "^8.1.2",
+    "@angular/platform-browser-dynamic": "^8.1.2",
+    "@angular/router": "^8.1.2",
+    "@ng-bootstrap/ng-bootstrap": "^5.1.0",
+    "core-js": "^2.6.9",
+    "npm": "^6.10.2",
+    "rxjs": "^6.5.2",
+    "rxjs-compat": "^6.5.2",
+    "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.0.3",
-    "@angular-devkit/build-angular": "~0.6.5",
-    "typescript": "~2.7.2",
-    "@angular/cli": "~6.0.5",
-    "@angular/language-service": "^6.0.3",
-    "@types/jasmine": "~2.8.6",
-    "@types/jasminewd2": "~2.0.3",
+    "@angular-devkit/build-angular": "~0.801.2",
+    "@angular/cli": "~8.1.2",
+    "@angular/compiler-cli": "^8.1.2",
+    "@angular/language-service": "^8.1.2",
+    "@types/jasmine": "^2.8.16",
+    "@types/jasminewd2": "^2.0.6",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.2.1",
     "jasmine-core": "~2.99.1",
@@ -43,6 +45,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
-    "tslint": "~5.9.1"
+    "tslint": "~5.9.1",
+    "typescript": "~3.4.5"
   }
-}
+}

src/app/app.component.html

@@ -25,11 +25,6 @@ <h1>
   Kory @ 2018
 </footer>
 
-<!-- Optional JavaScript -->
-<!-- jQuery first, then Popper.js, then Bootstrap JS -->
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </body>
 </html>
 

src/app/app.module.ts

@@ -5,6 +5,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { SheetListComponent } from './sheetList/sheetList.component';
 
 import { RouterModule, Routes } from '@angular/router';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+
 import { ParanoiaModule } from "./paranoia/paranoia.module";
 
 const appRoutes: Routes = [
@@ -31,6 +33,7 @@ const appRoutes: Routes = [
           appRoutes,
           { enableTracing: true } // <-- debugging purposes only
       ),
+      NgbModule,
       ParanoiaModule
   ],
   providers: [],

src/app/paranoia/attribute/attribute.component.html

@@ -1 +1 @@
-<randomInput type="number" min="{{min}}" max="{{max}}" label="{{label}}" (randomizeEvent)="randomize()" ></randomInput>
+<random-input type="number" min="{{min}}" max="{{max}}" label="{{label}}" (randomizeEvent)="randomize()" ></random-input>

src/app/paranoia/attribute/attribute.component.ts

@@ -1,14 +1,14 @@
 import {Component, Output, Input, EventEmitter, ViewChild} from '@angular/core';
-import {RandomInputComponent} from "../../shared/components/randomInput/randomInput.component";
+import {RandomInputComponent} from '../../shared/components/randomInput/randomInput.component';
 
 @Component({
-    selector: 'randomAttribute',
+    selector: 'paranoia-random-attribute',
     templateUrl: './attribute.component.html',
     styleUrls: ['./attribute.component.scss']
 })
 export class RandomAttributeComponent extends RandomInputComponent {
 
-    @ViewChild(RandomInputComponent) randomInput: RandomInputComponent;
+    @ViewChild(RandomInputComponent, {static: false}) randomInput: RandomInputComponent;
     @Input() min: number;
     @Input() max: number;
     @Input() dices: string;

src/app/paranoia/bonus/bonus.comopnent.ts

@@ -0,0 +1,16 @@
+import {Component, Output, Input, EventEmitter, ViewChild} from '@angular/core';
+import {RandomInputComponent} from '../../shared/components/randomInput/randomInput.component';
+import {CalculatedInputComponent} from '../../shared/components/calculatedInput/calculatedInput.component';
+
+@Component({
+    selector: 'paranoia-bonus-input',
+    templateUrl: './bonus.component.html',
+    styleUrls: ['./bonus.component.scss']
+})
+export class BonusComponent extends CalculatedInputComponent {
+
+    @ViewChild(CalculatedInputComponent, {static: false}) randomInput: CalculatedInputComponent;
+
+    public randomize () {
+    }
+}

src/app/paranoia/bonus/bonus.component.html

@@ -1,10 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>$Title$</title>
-</head>
-<body>
-$END$
-</body>
-</html>
+<calculated-input [label]="label" [disabled]="disabled" [map]="map"></calculated-input>

src/app/paranoia/colorRank/colorRank.component.ts

@@ -2,7 +2,7 @@ import {Component, Output, Input} from '@angular/core';
 
 
 @Component({
-    selector: 'colorRank',
+    selector: 'paranoia-color-rank',
     templateUrl: './colorRank.component.html',
     styleUrls: ['./colorRank.component.scss']
 })

src/app/paranoia/paranoia.component.html

@@ -1,29 +1,93 @@
-<topMenu></topMenu>
+<top-menu></top-menu>
 <a href="home">< Back</a>
 <section class="notification"></section>
 <section id="paranoia">
     <section class="page front">
         <h1>Paranoia Character Sheet</h1>
         <section class="panel general">
-            <randomCharacterName type="text" label="Character Name"></randomCharacterName>
+            <paranoia-random-character-name type="text" label="Character Name"></paranoia-random-character-name>
 
-            <randomInput type="player" label="Player Name" showDice="false"></randomInput>
+            <random-input type="player" label="Player Name" [showDice]="false"></random-input>
 
-            <colorRank label="Color Rank"></colorRank>
+            <paranoia-color-rank label="Color Rank"></paranoia-color-rank>
 
-            <randomDropdown label="Service Group" ></randomDropdown>
+            <random-dropdown [label]="rules.service_group.label" [data]="rules.service_group.options" [name]="rules.service_group.name" dice="[rules.service_group.dice]" ></random-dropdown>
         </section>
         <section class="panel attributes-weapons">
-            <h2>Attributes</h2>
+            <article>
+                <h2>Attributes</h2>
 
-            <randomAttribute *ngFor="let attribute of rules.attributes.fields" [label]="attribute.label" [dices]="attribute.dice" ></randomAttribute>
+                <article class="attributes-bonus">
+                    <div class="attributes">
+                        <paranoia-random-attribute *ngFor="let attribute of rules.attributes.fields" [label]="attribute.label" [dices]="attribute.dice" ></paranoia-random-attribute>
 
-            <h2>Weapons & Armor</h2>
+                    </div>
+
+                    <div class="bonus">
+                        <calculated-input *ngFor="let carryingCapacity of rules.carrying_capacity.fields"  [showDice]="false" [disabled]="true" [label]="carryingCapacity.label" [unit]="'kg'"></calculated-input>
+
+                        <paranoia-bonus-input *ngFor="let bonus of rules.bonus.fields"  [showDice]="false" [disabled]="true" [label]="bonus.label"></paranoia-bonus-input>
+                    </div>
+
+                    <div class="skill-base">
+                        <calculated-input *ngFor="let skillBases of rules.skillbases.fields"  [showDice]="false" [disabled]="true" [label]="skillBases.label"></calculated-input>
+                    </div>
+                </article>
+
+            </article>
+
+            <article class="weapon-armour">
+                <h2>Weapons & Armor</h2>
+
+                <article class="weapon">
+                    <table>
+                        <thead>
+                            <tr>
+                                <td>Weapon</td>
+                                <td>Skill Number</td>
+                                <td>Type</td>
+                                <td>Damage Rating</td>
+                                <td>Range</td>
+                                <td>Exp?</td>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let weaponRowNumber of [0,1,2,3,4]">
+                                <td><input type="text" value="" /></td>
+                                <td><calculated-input
+                                        [showDice]="false"
+                                        [disabled]="true"
+                                        type="number"
+                                        [min]="1"
+                                        [max]="10"
+                                        ></calculated-input></td>
+                                <td>
+                                    <random-dropdown [data]="rules.weapon_types"
+                                                     [name]="'weapon' + weaponRowNumber"
+                                                     [showDice]="false">
+                                    </random-dropdown>
+                                </td>
+                                <td><input type="number" value="" /></td>
+                                <td><input type="number" value="" /></td>
+                                <td><input type="checkbox" value="" /></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </article>
+                <article class="armour">
+                    <random-input type="worn" label="Armour Worn" [showDice]="false"></random-input>
+                    <random-input type="number" min="1" max="10" label="Rating" [showDice]="false"></random-input>
+                </article>
+            </article>
 
         </section>
 
         <section class="panel skills">
 
+            <h2>Skills</h2>
+
+            <calculated-input [showDice]="false" [disabled]="true" [label]="'Avaliable Points'" value="30"></calculated-input>
+
         </section>
     </section>
     <section class="page secret">

src/app/paranoia/paranoia.component.scss

@@ -36,6 +36,75 @@ $white-color: #fff;
         color: $white-color;
         text-align: center;
       }
+      &.attributes-weapons {
+        display: flex;
+        flex-direction: row;
+        & > article {
+          flex: 50% 1 1;
+          .attributes {
+            paranoia-random-attribute:nth-child(2) {
+              display: inline-block;
+              padding-top: 70px;
+            }
+          }
+          & > article {
+            &.attributes-bonus {
+              display: grid;
+              grid-template-rows: 1fr 2fr;
+              grid-template-columns: 1fr 1fr;
+              .attributes {
+                grid-row-start: 1;
+                grid-row-end: 3;
+              }
+            }
+            &.weapon {
+
+              table {
+                thead > tr, tbody > tr {
+                  & > td:nth-child(2) {
+                    width: 20%;
+                    .input-group {
+                      width: 40px;
+                    }
+                    input {
+                      width: 40px;
+                    }
+                  }
+                  & > td:nth-child(3) {
+                    width: 20%;
+                    input {
+                      width: 50%;
+                    }
+                  }
+                  & > td:nth-child(4) {
+                    width: 10%;
+                    input {
+                      width: 50%;
+                    }
+                  }
+                  & > td:nth-child(5) {
+                    width: 10%;
+                    input {
+                      width: 50%;
+                    }
+                  }
+                  & > td:nth-child(6) {
+                    width: 5%;
+                    input {
+                      width: 50%;
+                    }
+                  }
+                }
+              }
+            }
+            &.armour {
+              display: flex;
+              flex-direction: row;
+              justify-content: center;
+            }
+          }
+        }
+      }
     }
   }
 }

src/app/paranoia/paranoia.component.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import {Component, ViewChild, ViewChildren} from '@angular/core';
 import {RulesService} from './services/rules/rules.service';
+import {CalculatedInputComponent} from '../shared/components/calculatedInput/calculatedInput.component';
 
 @Component({
     selector: 'paranoia',
@@ -9,11 +10,17 @@ import {RulesService} from './services/rules/rules.service';
 export class ParanoiaComponent {
     public rules: any;
 
+
+    @ViewChildren (CalculatedInputComponent) calculatedInputs: CalculatedInputComponent;
+
     constructor(public rulesService: RulesService) {
         this.rulesService.getBasicRules().subscribe(data => {
             console.log(data);
             this.rules = data;
         });
+
     }
 
+
+
 }

src/app/paranoia/paranoia.module.ts

@@ -5,7 +5,8 @@ import { RandomCharacterNameComponent } from "./randomCharacterName/randomCharac
 import { SharedModule } from "../shared/shared.module";
 import { ColorRankComponent } from "./colorRank/colorRank.component";
 import { RandomAttributeComponent } from "./attribute/attribute.component";
-import {CommonModule} from '@angular/common'
+import { BonusComponent } from './bonus/bonus.comopnent';
+import {CommonModule} from '@angular/common';
 
 const paranoiaRoutes: Routes = [
     {
@@ -20,6 +21,7 @@ const paranoiaRoutes: Routes = [
         RandomCharacterNameComponent,
         ColorRankComponent,
         RandomAttributeComponent,
+        BonusComponent
     ],
     imports: [
         CommonModule,

src/app/paranoia/randomCharacterName/randomCharacterName.component.html

@@ -1 +1 @@
-<randomInput type="text" label="{{label}}" (randomizeEvent)="randomize()" ></randomInput>
+<random-input type="text" label="{{label}}" (randomizeEvent)="randomize()" ></random-input>