More overhaul to the Pokemon sections

junebug12851 · Mar 2, 2019 · 505f5a0 · 505f5a0
1 parent 230b0d6
commit 505f5a0
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 52 deletions.
diff --git a/src/app/fragments/card-pokemon-header/card-pokemon-header.component.pug b/src/app/fragments/card-pokemon-header/card-pokemon-header.component.pug
@@ -5,25 +5,24 @@ mat-card.sticky.ns(style='margin-bottom: 15px !important')
                 '[curHP]'='entry.hp'
                 '[maxHP]'='entry.maxHP || 1'
                 '[disabled]'='disabled'
+                '(input)'='updateHP($event)'
             )
         .row.s9
             name-box(
                 '[value]'='entry.nickname'
             )
-        .s3.right-align
-            mat-form-field(style='width: 100%')
-                mat-label Level
-                input(
-                    matInput=''
-                    placeholder='Level'
-                    type='number'
-                    '[(ngModel)]'='entry.level'
-                    '(ngModelChange)'="entry.updateExp()"
-                    required=''
-                    min='1'
-                    max='100'
-                    '[disabled]'='disabled'
-                )
+        .s3
+            mat-label.label-tiny Level
+            mat-slider(
+                matInput=''
+                '[min]'='1',
+                '[max]'='100',
+                '[thumbLabel]'='true',
+                '[(ngModel)]'="entry.level"
+                '(ngModelChange)'="updateData()"
+                'style'="width: 100%; margin-top: -15px; margin-left: -8px;"
+                '[disabled]'='disabled'
+            )
         .row.s4.s-lr.s-b(style='padding-bottom: 30px !important;')
             select-species(
                 '[(ngModel)]'='entry.species'

diff --git a/src/app/fragments/card-pokemon-header/card-pokemon-header.component.ts b/src/app/fragments/card-pokemon-header/card-pokemon-header.component.ts
@@ -17,6 +17,7 @@ import { EventEmitter, OnInit } from '@angular/core';
 
 import { Component, Input, Output } from '@angular/core';
 import { PokemonParty } from '../../data/savefile-expanded/fragments/PokemonParty';
+import { MatSliderChange } from '@angular/material';
 
 @Component({
     selector: 'card-pokemon-header',
@@ -31,6 +32,17 @@ export class CardPokemonHeader implements OnInit {
 
     }
 
+    public updateHP(event: MatSliderChange) {
+        this.entry.hp = event.value;
+    }
+
+    public updateData() {
+        this.entry.updateExp();
+
+        if(this.entry.updateStats)
+            this.entry.updateStats();
+    }
+
     @Input()
     public entry: any = new PokemonParty();
 

diff --git a/src/app/fragments/card-pokemon/card-pokemon.component.pug b/src/app/fragments/card-pokemon/card-pokemon.component.pug
@@ -5,25 +5,24 @@ mat-card.ns(style='margin-bottom: 15px !important')
                 '[curHP]'='entry.hp'
                 '[maxHP]'='entry.maxHP || entry.hpStat || 1'
                 '[disabled]'='disabled'
+                '(input)'='updateHP($event)'
             )
         .row.s9
             name-box(
                 '[value]'='entry.nickname'
             )
-        .s3.right-align
-            mat-form-field(style='width: 100%')
-                mat-label Level
-                input(
-                    matInput=''
-                    placeholder='Level'
-                    type='number'
-                    '[(ngModel)]'='entry.level'
-                    '(ngModelChange)'="updateData()"
-                    required=''
-                    min='1'
-                    max='100'
-                    '[disabled]'='disabled'
-                )
+        .s3
+            mat-label.label-tiny Level
+            mat-slider(
+                matInput=''
+                '[min]'='1',
+                '[max]'='100',
+                '[thumbLabel]'='true',
+                '[(ngModel)]'="entry.level"
+                '(ngModelChange)'="updateData()"
+                'style'="width: 100%; margin-top: -15px; margin-left: -8px;"
+                '[disabled]'='disabled'
+            )
         .row.s4.s-lr
             select-species(
                 '[(ngModel)]'='entry.species'
@@ -47,7 +46,16 @@ mat-card.ns(style='margin-bottom: 15px !important')
             mat-tab-group
                 mat-tab(label="Basic", '[disabled]'='disabled')
                     .container
-                        .row.s4
+                        .row.s8('*ngIf'='entry.isValidPokemon !== false')
+                            mat-form-field(style='width: 100%')
+                                mat-label HP
+                                input(
+                                    matInput=''
+                                    placeholder='HP'
+                                    '[value]'='hpStr'
+                                    '[disabled]'='true'
+                                )
+                        .row.s4('*ngIf'='entry.isValidPokemon === false')
                             mat-form-field(style='width: 100%')
                                 mat-label Cur HP
                                 input(
@@ -58,19 +66,8 @@ mat-card.ns(style='margin-bottom: 15px !important')
                                     required=''
                                     '[disabled]'='disabled'
                                 )
-                        .s4
-                            //- span('*ngIf'='entry.isValidPokemon !== false') / {{entry.maxHP || entry.hpStat}}
-                            mat-form-field('*ngIf'='entry.isValidPokemon !== false', style='width: 100%')
-                                mat-label Max HP
-                                input(
-                                    matInput=''
-                                    placeholder='Max HP'
-                                    type='number'
-                                    '[value]'='entry.maxHP || entry.hpStat'
-                                    required=''
-                                    '[disabled]'='true'
-                                )
-                            mat-form-field('*ngIf'='entry.isValidPokemon === false', style='width: 100%')
+                        .s4('*ngIf'='entry.isValidPokemon === false')
+                            mat-form-field(style='width: 100%')
                                 mat-label Max HP
                                 input(
                                     matInput=''

diff --git a/src/app/fragments/card-pokemon/card-pokemon.component.ts b/src/app/fragments/card-pokemon/card-pokemon.component.ts
@@ -19,6 +19,7 @@ import { OnInit } from '@angular/core';
 import { Component, Input } from '@angular/core';
 import { PokemonParty } from '../../data/savefile-expanded/fragments/PokemonParty';
 import {GameDataService} from '../../data/gameData.service';
+import { MatSliderChange } from '@angular/material';
 
 @Component({
     selector: 'card-pokemon',
@@ -42,6 +43,14 @@ export class CardPokemonComponent implements OnInit {
             this.entry.updateStats();
     }
 
+    public updateHP(event: MatSliderChange) {
+        this.entry.hp = event.value;
+    }
+
+    public get hpStr() {
+        return `${this.entry.hp} / ${this.entry.maxHP || this.entry.hpStat}`
+    }
+
     @Input()
     public entry: any = new PokemonParty();
 

diff --git a/src/app/fragments/hp-bar/hp-bar.component.pug b/src/app/fragments/hp-bar/hp-bar.component.pug
@@ -1,10 +1,20 @@
-mat-progress-bar(
-    mode="determinate"
-    '[value]'='percent'
-    style='height: 10px'
+.hp-wrapper.mat-slider-hp
+    mat-progress-bar(
+        mode="determinate"
+        '[value]'='percent'
+        style='height: 10px'
 
-    '[class.green]'='percent > 50 && !disabled'
-    '[class.amber]'='percent > 20 && percent <= 50 && !disabled'
-    '[class.red]'='percent <= 20 && !disabled'
-    '[class.grey]'='disabled'
-)
+        '[class.green]'='percent > 50 && !disabled'
+        '[class.amber]'='percent > 20 && percent <= 50 && !disabled'
+        '[class.red]'='percent <= 20 && !disabled'
+        '[class.grey]'='disabled'
+    )
+
+    mat-slider(
+        '[min]'='0',
+        '[max]'='maxHP',
+        '[value]'='curHP'
+        'style'="width: 100%; position: absolute; top: -19px; left: 0;"
+        '[disabled]'='disabled'
+        '(input)'='input.emit($event)'
+    )
diff --git a/src/app/fragments/hp-bar/hp-bar.component.scss b/src/app/fragments/hp-bar/hp-bar.component.scss
@@ -6,3 +6,9 @@
 .progress .determinate {
     transition: all .3s ease-in-out;
 }
+
+.hp-wrapper {
+    margin: 0;
+    padding: 0;
+    position: relative;
+}
diff --git a/src/app/fragments/hp-bar/hp-bar.component.ts b/src/app/fragments/hp-bar/hp-bar.component.ts
@@ -14,7 +14,8 @@
    limitations under the License.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { MatSliderChange } from '@angular/material';
 
 @Component({
     selector: 'hp-bar',
@@ -34,6 +35,9 @@ export class HPBarComponent {
     @Input()
     public disabled: boolean = false;
 
+    @Output()
+    public input: EventEmitter<MatSliderChange> = new EventEmitter<MatSliderChange>();
+
     // Divide curHP into maxHP to get percent (ex: .859245)
     // Then multiply by 100 to get readable and useable percent (ex: 85.9245)
     // Then trim off all but 2 decimals converting to a string (ex: "85.92") - In this component it's very silly to try and get into rounding and such

diff --git a/src/styles/app/_fixes.scss b/src/styles/app/_fixes.scss
@@ -22,6 +22,34 @@
     background-color: color("grey", "darken-2") !important;
 }
 
+.mat-slider-hp {
+    .mat-slider {
+        padding: 0 !important;
+
+        .mat-slider-track-background {
+            background: none !important;
+        }
+
+        .mat-slider-track-fill {
+            background: none !important;
+        }
+
+        .mat-slider-thumb {
+            width: 30px;
+            height: 30px;
+            right: -14px;
+            bottom: -15px;
+        }
+    }
+}
+
+.label-tiny {
+    font-family: Roboto, "Helvetica Neue", sans-serif !important;
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    color: rgba(255,255,255,.7);
+}
+
 .label-padding .mat-form-field-infix {
     padding-top: 18px;
 }