The game, Moskito Asasinato Commit #2

karma.conf.js

@@ -30,6 +30,6 @@ module.exports = function (config) {
     browsers: ['ChromeHeadless'],
     singleRun: false,
     concurrency: Infinity,
-    files: ["node_modules/raphael/raphael.min.js"]
+    files: ["node_modules/raphael/raphael.min.js", "node_modules/jquery/dist/jquery.js"]
   });
 };

src/app/material.module.ts

@@ -9,6 +9,7 @@ import { MatTooltipModule } from '@angular/material';
 import { MatFormFieldModule } from '@angular/material';
 import { MatInputModule } from '@angular/material';
 import { MatIconModule } from '@angular/material';
+import { MatSnackBarModule } from '@angular/material';
 
 @NgModule({
   imports: [
@@ -22,6 +23,7 @@ import { MatIconModule } from '@angular/material';
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
+    MatSnackBarModule
   ],
   exports: [
     MatToolbarModule,
@@ -34,6 +36,7 @@ import { MatIconModule } from '@angular/material';
     MatFormFieldModule,
     MatInputModule,
     MatIconModule,
+    MatSnackBarModule
   ]
 })
 export class MaterialModule {

src/app/unlocked-stage/unlocked-stage.component.html

@@ -10,27 +10,12 @@
             <div id="human-health-bar"></div>
         </div>
       <div id="performance">
-      <div id="stars"><i class="fa fa-star" aria-hidden="true"></i> 1</div>
-      <div id="score">Score: {{score}}</div>
+      <div id="stars" *ngIf="starCount"><i class="fa fa-star" aria-hidden="true"></i>&nbsp;{{starCount}}</div>
       </div>
-        <div id="mosquito-health-text" [hidden]="!spray">{{language?.legend.mosquito1}}Mosquito</div>
-        <div id="mosquito-health" [hidden]="!spray">
-            <div id="mosquito-health-bar"></div>
-        </div>
-      <div id="net-health-text" [hidden]="!net">{{language?.legend.mosquito1}}Net</div>
-      <div id="net-health" [hidden]="!net">
-        <div id="net-health-bar"></div>
-      </div>
-      <!--<img id="human" src="../assets/img/unlocked-stage/human.png"/>-->
-        <!--<img class="moz" id="moz1" name="animate" src="../assets/img/unlocked-stage/mosquito.gif"/>-->
-        <!--<img id="spray" src="../assets/img/unlocked-stage/spray-cursor.gif" />-->
-        <!--<img id="net" src="../assets/img/unlocked-stage/net.png" />-->
     </div>
     <div id="inventory">
-        <div id="inventory-heading">{{language?.legend.inventory}}</div>
-        <img id="spray-item" src="../assets/img/unlocked-stage/spray-item.gif"/>
-        <img id="net-item" src="../assets/img/unlocked-stage/net.png"/>
-        <img id="pill-item" src="../assets/img/unlocked-stage/pill.png"/>
+        <img id="pill-item" src="../assets/img/unlocked-stage/pill.png" (click)="healthBoost()" [matTooltip]="language?.toolTips.pill"/>
+        <img id="spray-item" src="../assets/img/unlocked-stage/spray-item.gif" (click)="sprayRefill()" [matTooltip]="language?.toolTips.spray"/>
     </div>
 </div>
 <div class="row col-lg-6 col-lg-offset-3 text-center" id="game-loss-status" [hidden]="!gameOver">

src/app/unlocked-stage/unlocked-stage.component.scss

@@ -99,13 +99,15 @@
 #inventory {
     @include positioning(absolute, 125px, 83%);
     border: 1px solid $black;
+    border-radius: 10px;
     width: 8%;
-    background: $orange;
-    padding-top: 30%;
+    height: 25%;
+    background: $light-grey;
 }
 
 #inventory-heading {
     @include legendText(0, 20%);
+    color: $white ;
 }
 
 #human-health-text {
@@ -119,12 +121,6 @@
   color: $yellow;
 }
 
-#score {
-  position: absolute;
-  top: 11%;
-  left: 83.5%;
-}
-
 #mosquito-health-text {
     @include legendText(1%, 11.5%);
 }
@@ -161,7 +157,7 @@
 }
 
 #spray-item {
-    @include positioning(absolute, 7%, 20%);
+    @include positioning(absolute, 50%, 20%);
     width: 50%;
     cursor: pointer;
 }
@@ -173,32 +169,31 @@
 }
 
 #pill-item {
-  @include positioning(absolute, 55%, 35%);
-  width: 30%;
+  @include positioning(absolute, 10%, 36%);
+  width: 20%;
   cursor: pointer;
 }
 
+#sprayRefill {
+  @include positioning(absolute, 0%, 15%);
+  color: white;
+  border-radius: 10px;
+
+}
+
+#healthRefill {
+  @include positioning(absolute, 30%, 15%);
+  color: white;
+  border-radius: 10px;
+}
+
 #human-health {
     @include health(5%, 77%);
     #human-health-bar {
         @include healthBar(green)
     }
 }
 
-#mosquito-health {
-    @include health(5%, 5%);
-    #mosquito-health-bar {
-        @include healthBar(red)
-    }     
-}
-
-#net-health {
-  @include health(5%, 5%);
-  #net-health-bar {
-    @include healthBar(blue)
-  }
-}
-
 .swal2-success-circular-line-left,
 .swal2-success-fix,
 .swal2-success-circular-line-right {

src/app/unlocked-stage/unlocked-stage.component.spec.ts

@@ -8,6 +8,8 @@ import { DashboardService } from '../services/dashboard.service';
 import { SharedDataService } from '../services/shared.data.service';
 import { ToastrModule, ToastrService } from 'ngx-toastr';
 import { RouterTestingModule } from '@angular/router/testing';
+import { MatSnackBarModule } from '@angular/material';
+
 
 describe('UnlockedStageComponent', () => {
   let component: UnlockedStageComponent;
@@ -18,7 +20,7 @@ describe('UnlockedStageComponent', () => {
       declarations: [UnlockedStageComponent, ButtonNavComponent],
       providers: [LanguageService, HttpClient, HttpHandler, APIService,
         DashboardService, SharedDataService, ToastrService],
-      imports: [ToastrModule.forRoot(), RouterTestingModule]
+      imports: [ToastrModule.forRoot(), RouterTestingModule, MatSnackBarModule]
     })
       .compileComponents();
   }));
@@ -27,10 +29,10 @@ describe('UnlockedStageComponent', () => {
     fixture = TestBed.createComponent(UnlockedStageComponent);
     component = fixture.componentInstance;
   });
-
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
+  // Rest, the entire game depends on JQuery
 });