AM deck + Loot deck toggles, refactor view, address #160

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomhavensecretariat",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "license": "AGPL3",
   "description": "Gloomhaven Secretariat is a Gloomhaven Companion app.",
   "homepage": "https://gloomhaven-secretariat.de",

src/app/game/model/AttackModifier.ts

@@ -244,6 +244,7 @@ export class AttackModifierDeck {
   current: number;
   cards: AttackModifier[];
   disgarded: number[] = [];
+  active: boolean = true;
 
   constructor(attackModifiers: AttackModifier[] | undefined = undefined) {
     this.attackModifiers = attackModifiers ? JSON.parse(JSON.stringify(attackModifiers.filter((am, index, self) => self.indexOf(am) == index))) : JSON.parse(JSON.stringify(defaultAttackModifier));
@@ -266,7 +267,7 @@ export class AttackModifierDeck {
   }
 
   toModel(): GameAttackModifierDeckModel {
-    return new GameAttackModifierDeckModel(this.current, this.cards.map((attackModifier) => attackModifier && attackModifier.id), this.disgarded);
+    return new GameAttackModifierDeckModel(this.current, this.cards.map((attackModifier) => attackModifier && attackModifier.id), this.disgarded, this.active);
   }
 
   fromModel(model: GameAttackModifierDeckModel) {
@@ -276,6 +277,7 @@ export class AttackModifierDeck {
 
     this.cards = model.cards.map((id) => this.cardById(id) || new AttackModifier(AttackModifierType.invalid));
     this.disgarded = model.disgarded || [];
+    this.active = model.active;
   }
 
   merge(attackModifierDeck: AttackModifierDeck) {
@@ -290,12 +292,15 @@ export class GameAttackModifierDeckModel {
   current: number;
   cards: string[];
   disgarded: number[];
+  active: boolean;
 
   constructor(current: number,
     cards: string[],
-    disgarded: number[]) {
+    disgarded: number[],
+    active: boolean) {
     this.current = current;
     this.cards = cards;
     this.disgarded = JSON.parse(JSON.stringify(disgarded));
+    this.active = active;
   }
 }

src/app/game/model/Game.ts

@@ -368,8 +368,8 @@ export class GameModel {
     roundResetsHidden: number[] = [],
     playSeconds: number = 0,
     totalSeconds: number = 0,
-    monsterAttackModifierDeck: GameAttackModifierDeckModel = new GameAttackModifierDeckModel(-1, defaultAttackModifierCards, []),
-    allyAttackModifierDeck: GameAttackModifierDeckModel = new GameAttackModifierDeckModel(-1, defaultAttackModifierCards, []),
+    monsterAttackModifierDeck: GameAttackModifierDeckModel = new GameAttackModifierDeckModel(-1, defaultAttackModifierCards, [], true),
+    allyAttackModifierDeck: GameAttackModifierDeckModel = new GameAttackModifierDeckModel(-1, defaultAttackModifierCards, [], true),
     elementBoard: ElementModel[] = [],
     solo: boolean = false,
     party: Party = new Party(),

src/app/ui/figures/attackmodifier/attackmodifierdeck.html

@@ -1,5 +1,6 @@
 <div class="attack-modifiers"
   [ngClass]="{'disabled' : gameManager.game.state == GameState.draw, 'vertical' : vertical}">
+
   <div #drawCard class="am-container draw"
     title="{{(gameManager.game.state == GameState.next ? (deck.current == deck.cards.length -1 ? 'game.cards.shuffle' : 'game.cards.draw') : 'game.cards.openDialog') | ghsLabel}}"
     [ngClass]="{'open-dialog' : gameManager.game.state == GameState.draw, 'denied' : gameManager.stateManager.permissions && !gameManager.stateManager.permissions.attackModifiers && (!character || !gameManager.stateManager.characterPermissions[character.name + '|' + character.edition])}"
@@ -10,11 +11,11 @@
         deck.cards.length - deck.current - 1 }}</span>
       <img *ngIf="deck.current == deck.cards.length -1" class="shuffle" title="{{'game.cards.openDialog' | ghsLabel}}"
         (click)="open($event)" src="./assets/images/shuffle.svg">
-      <img [title]="'game.cards.fullscreen' | ghsLabel" *ngIf="fullscreen" (click)="openFullscreen($event)"
+      <img [title]="'game.cards.fullscreen' | ghsLabel" *ngIf="fullscreen && !compact" (click)="openFullscreen($event)"
         class="fullscreen" src="./assets/images/fullscreen.svg">
 
-      <span *ngIf="!characterIcon" class="numeration">{{numeration}}</span>
-      <span *ngIf="characterIcon" class="character-icon">
+      <span *ngIf="!characterIcon && !bottom" class="numeration">{{numeration}}</span>
+      <span *ngIf="characterIcon && !bottom" class="character-icon">
         <img [src]="characterIcon" />
       </span>
     </div>

src/app/ui/figures/attackmodifier/attackmodifierdeck.scss

@@ -3,7 +3,6 @@
   width: 100%;
   height: 100%;
 
-
   .am-container {
     position: absolute;
     width: 40%;

src/app/ui/figures/attackmodifier/attackmodifierdeck.ts

@@ -62,6 +62,7 @@ export class AttackModifierDeckComponent implements OnInit {
 
   rollingIndex: number[] = [];
   rollingIndexPrev: number[] = [];
+  compact: boolean = false;
 
   @ViewChild('drawCard') drawCard!: ElementRef;
 
@@ -84,13 +85,14 @@ export class AttackModifierDeckComponent implements OnInit {
     }
     this.current = this.deck.current;
     this.internalDraw = -99;
+    this.compact = !this.drawing && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400);
 
     this.deck.cards.forEach((card, index) => {
       this.rollingIndex[index] = this.calcRollingIndex(index, this.current);
       this.rollingIndexPrev[index] = this.calcRollingIndex(index, this.current - 1);
     });
     gameManager.uiChange.subscribe({
-      next: (fromServer : boolean) => {
+      next: (fromServer: boolean) => {
         if (this.internalDraw == -99 && this.current < this.deck.current) {
           this.current = this.deck.current;
           this.internalDraw = this.deck.current;
@@ -126,6 +128,9 @@ export class AttackModifierDeckComponent implements OnInit {
           this.rollingIndex[index] = this.calcRollingIndex(index, this.current);
           this.rollingIndexPrev[index] = this.calcRollingIndex(index, this.current - 1);
         });
+
+
+        this.compact = !this.drawing && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400);
       }
     })
 
@@ -136,6 +141,14 @@ export class AttackModifierDeckComponent implements OnInit {
     if (settingsManager.settings.fhStyle) {
       this.newStyle = true;
     }
+
+    window.addEventListener('resize', (event) => {
+      this.compact = !this.drawing && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400);
+    });
+
+    window.addEventListener('fullscreenchange', (event) => {
+      this.compact = !this.drawing && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400);
+    });
   }
 
   drawAnimation() {
@@ -155,7 +168,7 @@ export class AttackModifierDeckComponent implements OnInit {
   }
 
   draw(event: any) {
-    if (!this.drawing && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400)) {
+    if (this.compact) {
       this.openFullscreen(event);
     } else if (this.standalone || gameManager.game.state == GameState.next) {
       if (!this.drawTimeout && this.deck.current < (this.deck.cards.length - (this.queue == 0 ? 0 : 1))) {
@@ -178,7 +191,6 @@ export class AttackModifierDeckComponent implements OnInit {
     }
   }
 
-
   openFullscreen(event: any) {
     this.dialog.open(AttackModifierDeckFullscreenComponent, {
       backdropClass: 'fullscreen-backdrop',

src/app/ui/figures/loot/loot-deck.html

@@ -7,8 +7,8 @@
             <span class="number" *ngIf="deck.current < deck.cards.length -1" (click)="open($event)">{{
                 deck.cards.length - deck.current - 1}}</span>
             <span class="number" *ngIf="deck.cards.length == 0" (click)="open($event)">0</span>
-            <img [title]="'game.cards.fullscreen' | ghsLabel" *ngIf="fullscreen" (click)="openFullscreen($event)"
-                class="fullscreen" src="./assets/images/fullscreen.svg">
+            <img [title]="'game.cards.fullscreen' | ghsLabel" *ngIf="fullscreen && !compact && this.deck.cards.length > 0"
+                (click)="openFullscreen($event)" class="fullscreen" src="./assets/images/fullscreen.svg">
         </div>
     </div>
 

src/app/ui/figures/loot/loot-deck.scss

@@ -7,8 +7,8 @@
         position: absolute;
         width: 40%;
         padding-top: 60%;
-        bottom: 5%;
-        left: 0;
+        bottom: 0;
+        right: 0;
     }
 
     .loot-card {
@@ -83,12 +83,12 @@
 
     @keyframes loot-draw {
         0% {
-            transform: scale(1) translate(-102%, 16.5%);
+            transform: scale(1) translate(102%, 16.5%);
         }
 
         35%,
         70% {
-            transform: scale(1.1) translate(-51%, 25%);
+            transform: scale(1.1) translate(51%, 25%);
         }
 
         100% {
@@ -98,12 +98,12 @@
 
     @keyframes loot-draw-bottom {
         0% {
-            transform: scale(1) translate(-102%, -16.5%);
+            transform: scale(1) translate(102%, -16.5%);
         }
 
         35%,
         70% {
-            transform: scale(1.6) translate(-110%, -90%);
+            transform: scale(1.6) translate(110%, -90%);
         }
 
         100% {
@@ -113,37 +113,34 @@
 
     @keyframes loot-last {
         0% {
-            bottom: 5%;
-            left: 42%;
+            right: 42%;
             transform: rotate(0);
         }
 
         70% {
-            bottom: 5%;
-            left: 42%;
+            right: 42%;
             transform: rotate(0);
         }
 
         100% {
-            bottom: 10%;
-            left: 75%;
-            transform: rotate(5deg);
+            right: 75%;
+            transform: rotate(-5deg);
         }
     }
 
     .current {
         position: absolute;
-        bottom: 5%;
-        left: 42%;
+        bottom: 0;
+        right: 42%;
         z-index: 1;
     }
 
     .disgarded,
     .last {
         position: absolute;
-        bottom: 10%;
-        left: 75%;
-        transform: rotate(5deg);
+        bottom: 0;
+        right: 75%;
+        transform: rotate(-5deg);
         z-index: 0;
 
         &.last:hover {

src/app/ui/figures/loot/loot-deck.ts

@@ -2,7 +2,7 @@ import { Dialog } from "@angular/cdk/dialog";
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { gameManager, GameManager } from "src/app/game/businesslogic/GameManager";
 import { LootManager } from "src/app/game/businesslogic/LootManager";
-import { settingsManager } from "src/app/game/businesslogic/SettingsManager";
+import { SettingsManager, settingsManager } from "src/app/game/businesslogic/SettingsManager";
 import { Character } from "src/app/game/model/Character";
 import { GameState } from "src/app/game/model/Game";
 import { appliableLootTypes, LootDeck, LootType } from "src/app/game/model/Loot";
@@ -40,6 +40,7 @@ export class LootDeckComponent implements OnInit {
     @Output('before') before: EventEmitter<LootDeckChange> = new EventEmitter<LootDeckChange>();
     @Output('after') after: EventEmitter<LootDeckChange> = new EventEmitter<LootDeckChange>();
     gameManager: GameManager = gameManager;
+    settingsManager: SettingsManager = settingsManager;
     lootManager: LootManager = gameManager.lootManager;
     current: number = -1;
     internalDraw: number = -99;
@@ -49,6 +50,7 @@ export class LootDeckComponent implements OnInit {
     drawTimeout: any = null;
     queue: number = 0;
     queueTimeout: any = null;
+    compact: boolean = false;
 
     constructor(private element: ElementRef, private dialog: Dialog) {
         this.element.nativeElement.addEventListener('click', (event: any) => {
@@ -62,6 +64,7 @@ export class LootDeckComponent implements OnInit {
     ngOnInit(): void {
         this.current = this.deck.current;
         this.internalDraw = -99;
+        this.compact = !this.drawing && this.deck.cards.length > 0 && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400);
         gameManager.uiChange.subscribe({
             next: () => {
                 if (this.internalDraw == -99 && this.current < this.deck.current) {
@@ -87,8 +90,18 @@ export class LootDeckComponent implements OnInit {
                         this.internalDraw = this.deck.current;
                     }
                 }
+
+                this.compact = !this.drawing && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400);
             }
         })
+
+        window.addEventListener('resize', (event) => {
+            this.compact = !this.drawing && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400);
+        });
+
+        window.addEventListener('fullscreenchange', (event) => {
+            this.compact = !this.drawing && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400);
+        });
     }
 
     update(local: boolean = true) {
@@ -133,7 +146,7 @@ export class LootDeckComponent implements OnInit {
     }
 
     draw(event: any) {
-        if (!this.drawing && this.deck.cards.length > 0 && this.fullscreen && settingsManager.settings.automaticAttackModifierFullscreen && (window.innerWidth < 800 || window.innerHeight < 400)) {
+        if (this.compact && this.deck.cards.length > 0) {
             this.openFullscreen(event);
         } else if ((this.standalone || gameManager.game.state == GameState.next) && this.deck.cards.length > 0) {
             if (!this.drawTimeout && this.deck.current < this.deck.cards.length - 1) {

src/app/ui/footer/footer.html

@@ -12,38 +12,48 @@
     </div>
   </div>
   <div class="flex-shrink"></div>
-  <div class="level-container"
-    [ngClass]="{'no-toggle' : !lootDeck && !settingsManager.settings.alwaysLootDeck && !gameManager.game.lootDeck.active}">
+  <div class="level-container">
     <ghs-scenario></ghs-scenario>
     <ghs-level></ghs-level>
   </div>
   <ghs-scenario-rules *ngIf="settingsManager.settings.scenarioRules"></ghs-scenario-rules>
   <div class="flex-shrink"></div>
   <div class="attack-modifier-spacer"></div>
 
-  <div class="loot-toggle" [ngClass]="{'fh' : settingsManager.settings.fhStyle}"
-    *ngIf="lootDeck || settingsManager.settings.alwaysLootDeck || gameManager.game.lootDeck.active">
-    <a (click)="toggleLootDeck()">
-      <img *ngIf="!gameManager.game.lootDeck.active" class="loot-token" src="./assets/images/fh/loot-token.png">
-      <img *ngIf="gameManager.game.lootDeck.active" src="./assets/images/attackmodifier/icon.png"></a>
-  </div>
-
-  <div class="deck ally-deck" *ngIf="hasAllyAttackModifierDeck"
-    [ngClass]="{'hidden' :  gameManager.game.lootDeck.active}">
+  <div class="deck am-deck ally-deck" *ngIf="hasAllyAttackModifierDeck"
+    [ngClass]="{'collapsed' : !gameManager.game.allyAttackModifierDeck.active || compact && gameManager.game.lootDeck.active, 'initial' : gameManager.game.allyAttackModifierDeck.active && gameManager.game.allyAttackModifierDeck.current < 0, 'partial' : gameManager.game.allyAttackModifierDeck.active && gameManager.game.allyAttackModifierDeck.current == 0, 'full' : gameManager.game.allyAttackModifierDeck.active && gameManager.game.allyAttackModifierDeck.current > 0}">
     <ghs-attackmodifier-deck [deck]="gameManager.game.allyAttackModifierDeck" [ally]="true"
       (before)="beforeAllyAttackModifierDeck($event)" (after)="afterAllyAttackModifierDeck($event)" numeration="A"
       [bottom]="true"></ghs-attackmodifier-deck>
+
+    <div class="active-toggle" (click)="toggleActiveAllyAttackModifierDeck()">
+      <span class="numeration">A</span>
+    </div>
   </div>
 
-  <div #monsterDeck class="deck monster-deck" [ngClass]="{'hidden' : gameManager.game.lootDeck.active}">
+  <div #monsterDeck class="deck am-deck monster-deck"
+    [ngClass]="{'collapsed' : !gameManager.game.monsterAttackModifierDeck.active || compact && gameManager.game.lootDeck.active, 'initial' : gameManager.game.monsterAttackModifierDeck.active && gameManager.game.monsterAttackModifierDeck.current < 0, 'partial' : gameManager.game.monsterAttackModifierDeck.active && gameManager.game.monsterAttackModifierDeck.current == 0, 'full' : gameManager.game.monsterAttackModifierDeck.active && gameManager.game.monsterAttackModifierDeck.current > 0}">
     <ghs-attackmodifier-deck [deck]="gameManager.game.monsterAttackModifierDeck"
       (before)="beforeMonsterAttackModifierDeck($event)" (after)="afterMonsterAttackModifierDeck($event)" numeration="m"
       [bottom]="true"></ghs-attackmodifier-deck>
+
+    <div class="active-toggle" (click)="toggleActiveMonsterAttackModifierDeck()">
+      <span class="numeration">m</span>
+    </div>
   </div>
 
-  <div class="deck loot-deck" [ngClass]="{'hidden' : !gameManager.game.lootDeck.active}">
+  <div class="deck loot-deck"
+    [ngClass]="{'collapsed' : !gameManager.game.lootDeck.active, 'initial' : gameManager.game.lootDeck.active && gameManager.game.lootDeck.current < 0,'partial' : gameManager.game.lootDeck.active &&  gameManager.game.lootDeck.current == 0, 'full' : gameManager.game.lootDeck.active && gameManager.game.lootDeck.current > 0}"
+    *ngIf="lootDeck ||
+    settingsManager.settings.alwaysLootDeck">
     <ghs-loot-deck [deck]="gameManager.game.lootDeck" (before)="beforeLootDeck($event)" (after)="afterLootDeck($event)"
       [bottom]="true"></ghs-loot-deck>
+
+    <div class="active-toggle" (click)="toggleLootDeck()">
+      <span class="numeration">
+        <img src="./assets/images/fh/loot-token.png">
+      </span>
+    </div>
   </div>
 
 </footer>