WIP

src/app/games/avalon/avalon.component.ts

@@ -8,12 +8,12 @@ import * as signalR from "@microsoft/signalr"
 import { StringUtils } from '../../utilities/string-utils';
 import { ActivatedRoute } from '@angular/router';
 import { MsgBoxService } from '../../services/msg-box.service';
-import { ADButtons, ADIcon } from '../../ui/alert-dlg/alert-dlg.component';
 import { UuidUtils } from '../../utilities/uuid-utils';
 import { ObjectUtils } from '../../utilities/object-utils';
 import { NbToastrService } from '@nebular/theme';
 import { AvalonBase } from './avalonBase';
 import { HeaderService } from '../../services/header.service';
+import { ADIcon, ADButtons } from '../../ui/alert-dlg/alert-dlg.model';
 
 const minimumPlayers = 5;
 const maximumPlayers = 10;
@@ -181,7 +181,7 @@ export class AvalonComponent extends AvalonBase implements OnInit {
 
   public showMyRole() {
     let roleInfo = this.getRoleInfoByRole(this.me.role);
-    this.msgBoxService.show(roleInfo.name, roleInfo.description, ADIcon.INFO)
+    this.msgBoxService.show(roleInfo.name, { text: roleInfo.description, icon: ADIcon.INFO });
   }
   public showMySecret() {
     //let roleInfo = this.getRoleInfoByRole(this.me.role);
@@ -208,7 +208,7 @@ export class AvalonComponent extends AvalonBase implements OnInit {
         break;
     }
 
-    this.msgBoxService.show('噓...', description, ADIcon.INFO);
+    this.msgBoxService.show('噓...', { text: description, icon: ADIcon.INFO });
   }
 
   private initializeQuestInfo() {
@@ -251,7 +251,7 @@ export class AvalonComponent extends AvalonBase implements OnInit {
 
   previousStage() {
 
-    this.msgBoxService.show('上一棟', '你確定?', ADIcon.QUESTION, ADButtons.YesNo).pipe(first()).subscribe(result => {
+    this.msgBoxService.show('上一棟', { text: '你確定?', icon: ADIcon.QUESTION, buttons: ADButtons.YesNo }).pipe(first()).subscribe(result => {
       if (result) {
         this.avalonService.data.stage -= 1;
         this.clearVoteStatus();
@@ -264,14 +264,14 @@ export class AvalonComponent extends AvalonBase implements OnInit {
     switch (this.avalonService.data.stage) {
       case AvalonStage.JoinGame:
         if (this.players.length < 5) {
-          this.msgBoxService.show("人數不足!", "遊戲最少需要五人");
+          this.msgBoxService.show("人數不足!", { text: "遊戲最少需要五人" });
           return;
         }
 
         this.gameSize = Math.max(0, this.players.length - 6);
 
         if (this.avalonService.data.roles.filter(r => r.enabled && false == r.isGood).length != players_evil[this.gameSize]) {
-          this.msgBoxService.show("反派人數錯誤!", "反派人數需要 " + players_evil[this.gameSize].toString() + " 人");
+          this.msgBoxService.show("反派人數錯誤!", { text: "反派人數需要 " + players_evil[this.gameSize].toString() + " 人" });
           return;
         }
 

src/app/games/avalon/choose-character/choose-character.component.ts

@@ -4,7 +4,7 @@ import { first } from 'rxjs/operators';
 import { GameInfo, Player, Role, RoleInfo } from '../../../entity/Avalon';
 import { AvalonService } from '../../../services/avalon.service';
 import { MsgBoxService } from '../../../services/msg-box.service';
-import { ADButtons, ADIcon } from '../../../ui/alert-dlg/alert-dlg.component';
+import { ADButtons, ADIcon } from '../../../ui/alert-dlg/alert-dlg.model';
 import { AvalonBase } from '../avalonBase';
 
 @Component({
@@ -38,7 +38,7 @@ export class ChooseCharacterComponent extends AvalonBase implements OnInit {
     // return;
     this.ngZone.run(
       _ => {
-        this.msgBoxService.show(roleInfo.name, roleInfo.description + '<br>你確定你是?', ADIcon.QUESTION, ADButtons.YesNo).pipe(first()).subscribe(result => {
+        this.msgBoxService.show(roleInfo.name, { text: roleInfo.description + '<br>你確定你是?', icon: ADIcon.QUESTION, buttons: ADButtons.YesNo }).pipe(first()).subscribe(result => {
           if (result) {
             if (this.players.find(p => p.role == roleInfo.role) && roleInfo.role != Role.ArthurKnight) {
               this.toastrService.danger('腳色重複:' + roleInfo.name, '你確定沒有選錯腳色??')

src/app/games/avalon/pick-teammate/pick-teammate.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, NgZone, OnInit } from '@angular/core';
 import { Player, AvalonStage } from '../../../entity/Avalon';
 import { AvalonService } from '../../../services/avalon.service';
 import { MsgBoxService } from '../../../services/msg-box.service';
-import { ADIcon } from '../../../ui/alert-dlg/alert-dlg.component';
+import { ADIcon } from '../../../ui/alert-dlg/alert-dlg.model';
 import { AvalonBase } from '../avalonBase';
 
 @Component({
@@ -38,7 +38,7 @@ export class PickTeammateComponent extends AvalonBase implements OnInit {
       this.avalonService.applyCdChange$.next();
     } else {
       this.ngZone.run(_ => {
-        this.msgBoxService.show('任務編組錯誤!', `本次任務出場人數為 ${this.currentQuest.teamSize} 人!`, ADIcon.WARNING);
+        this.msgBoxService.show('任務編組錯誤!', { text: `本次任務出場人數為 ${this.currentQuest.teamSize} 人!`, icon: ADIcon.WARNING });
       });
     }
   }

src/app/games/games-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AvalonComponent } from './avalon/avalon.component';
 import { GamesComponent } from './games.component';
+import { MassiveDarkness2Component } from './massive-darkness2/massive-darkness2.component';
 
 const routes: Routes = [
   {
@@ -12,6 +13,7 @@ const routes: Routes = [
       [
         { path: 'avalon', component: AvalonComponent },
         { path: 'avalonHost', component: AvalonComponent },
+        { path: 'MD2', component: MassiveDarkness2Component },
       ]
   },
 

src/app/games/games.module.ts

@@ -16,6 +16,7 @@ import { TeamVoteComponent } from './avalon/team-vote/team-vote.component';
 import { QuestVoteComponent } from './avalon/quest-vote/quest-vote.component';
 import { VoteResultComponent } from './avalon/vote-result/vote-result.component';
 import { QuestTableComponent } from './avalon/quest-table/quest-table.component';
+import { MassiveDarkness2Component } from './massive-darkness2/massive-darkness2.component';
 
 
 @NgModule({
@@ -28,7 +29,8 @@ import { QuestTableComponent } from './avalon/quest-table/quest-table.component'
     TeamVoteComponent,
     QuestVoteComponent,
     VoteResultComponent,
-    QuestTableComponent
+    QuestTableComponent,
+    MassiveDarkness2Component
   ],
   imports: [
     CommonModule,

src/app/games/massive-darkness2/massive-darkness2.component.html

@@ -0,0 +1,25 @@
+<div class="row">
+
+    <div class="col-12 col-md-4">
+        <nb-card>
+            <nb-card-header>
+                Treasure Bag
+                <button nbButton hero status="primary" size="small">Reset</button>
+                <button nbButton hero status="primary" size="small" (click)="addTreasure(TreasureType.Rare)">Add
+                    Rare</button>
+                <button nbButton hero status="primary" size="small" (click)="addTreasure(TreasureType.Epic)">Add
+                    Epic</button>
+            </nb-card-header>
+            <nb-card-body>
+                <div>
+                    <ng-template *ngFor="let treasure of treasureBag.drawingItems">
+                        <img src="{{treasure.imageUrl}}"> X {{treasure.unitAmount}}
+                    </ng-template>
+                </div>
+                <button nbButton hero status="primary">I feel LUCKY!!!!!</button>
+            </nb-card-body>
+        </nb-card>
+    </div>
+
+
+</div>

src/app/games/massive-darkness2/massive-darkness2.component.spec.ts

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

src/app/games/massive-darkness2/massive-darkness2.component.ts

@@ -0,0 +1,143 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { FileService } from '../../services/file.service';
+import { MsgBoxService } from '../../services/msg-box.service';
+import { ArrayUtils } from '../../utilities/array-utils';
+import { ObjectUtils } from '../../utilities/object-utils';
+
+@Component({
+  selector: 'ngx-massive-darkness2',
+  templateUrl: './massive-darkness2.component.html',
+  styleUrls: ['./massive-darkness2.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MassiveDarkness2Component implements OnInit {
+  TreasureType = TreasureType;
+  treasureBag: DrawingBag = new DrawingBag();
+
+  constructor(
+    private fileService: FileService,
+    private cdRef: ChangeDetectorRef,
+    private msgBoxService: MsgBoxService
+  ) { }
+
+  ngOnInit(): void {
+    this.resetTreasureBag();
+    this.detectChanges();
+  }
+  detectChanges() {
+
+    if (!this.cdRef['destroyed']) {
+      this.cdRef.detectChanges();
+    }
+  }
+  resetTreasureBag() {
+    this.treasureBag.ClearAllItems();
+    this.addTreasure(TreasureType.Common, 15);
+  }
+  addTreasure(type: TreasureType, amount: number = 1) {
+    let item = new DrawingItem(`${TreasureType[type]} Treasure`, `It's a ${TreasureType[type]} Treasure!`, this.fileService.ImageUrl(`TreasureToken/${TreasureType[type]}.png`), amount);
+
+    this.treasureBag.AddItem(item);
+    this.detectChanges();
+  }
+  treasureImage(type: TreasureType) {
+    return this.fileService.ImageUrl(`TreasureToken/${TreasureType[type]}.png`);
+  }
+  drawTreasure() {
+
+  }
+}
+export enum TreasureType {
+  Common,
+  Rare,
+  Epic,
+  Legendary
+}
+export class DrawingBag {
+  constructor() {
+    this.drawingItems = [];
+    this.removedItems = [];
+  }
+  drawingItems: DrawingItem[]
+  removedItems: DrawingItem[]
+
+  public Draw(amount: number): DrawingItem[] {
+    let drawItems: DrawingItem[] = [];
+    for (let i = 0; i < amount; i++) {
+
+      drawItems.push(this.DrawAndRemove());
+    }
+    this.RestoreRemoveItems();
+    return drawItems;
+  }
+  public DrawAndRemove(): DrawingItem {
+    if (this.drawingItems.length > 0) {
+      let drawItem = null as DrawingItem;
+      let drawIndex = Math.random() * this.drawingItems.reduce((sum, current) => sum + current.unitAmount, 0);
+
+      let drawCalc = 0;
+      for (let i = 0; i < this.drawingItems.length; i++) {
+        const item = this.drawingItems[i];
+        drawCalc += item.unitAmount;
+        if (drawCalc >= drawIndex) {
+          drawItem = ObjectUtils.CloneValue(item);
+          drawItem.unitAmount = 1;
+          item.unitAmount -= 1;
+          break;
+        }
+      }
+      //ObjectUtils.CloneValue
+      this.RemoveItem(drawItem);
+      return drawItem;
+    }
+    return null;
+  }
+
+  public RestoreRemoveItems() {
+    for (let i = 0; i < this.removedItems.length; i++) {
+      const removedItem = this.removedItems[i];
+      this.AddItem(removedItem);
+    }
+
+  }
+  public AddItem(item: DrawingItem) {
+    let existingItem = this.drawingItems.find(i => i.name == item.name);
+    if (existingItem) {
+      existingItem.unitAmount += item.unitAmount;
+    } else {
+      this.drawingItems.push(item);
+    }
+  }
+
+  public RemoveItem(item: DrawingItem) {
+    let existingItem = this.removedItems.find(i => i.name == item.name);
+    if (existingItem) {
+      existingItem.unitAmount += item.unitAmount;
+    } else {
+      this.removedItems.push(item);
+    }
+  }
+  public ClearAllItems() {
+
+    this.drawingItems = [];
+    this.removedItems = [];
+  }
+}
+export class DrawingItem {
+  constructor(
+    name: string,
+    description: string,
+    imageUrl: string,
+    unitAmount: number = 1
+  ) {
+    this.imageUrl = imageUrl
+    this.name = name
+    this.description = description
+    this.unitAmount = unitAmount
+  }
+  imageUrl: string
+  name: string
+  description: string
+  unitAmount: number
+}