Merge pull request #4

feat/game

src/Components/character-card/character-card.component.html

@@ -0,0 +1,12 @@
+<div
+  [id]="'character-'+ character.index"
+  class="w-full cursor-pointer grid grid-cols-4 tracking-widest mt-2 mb-2 rounded-3xl border-b-4 bg-gray-800 Corleone w-full block p-4 flex justify-center content-center items-center"
+  [ngClass]="setCharacterClasses()"
+>
+  <div>
+    <img alt="character" class="rounded-full" src="../../assets/character.jpeg"/>
+  </div>
+  <div class="col-span-3 align-center justify-center">
+    <h4 class="text-center w-full text-4xl tracking-widest">{{character.name}}</h4>
+  </div>
+</div>

src/Components/character-card/character-card.component.ts

@@ -0,0 +1,22 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-character-card',
+  templateUrl: './character-card.component.html',
+  styleUrls: ['./character-card.component.scss']
+})
+export class CharacterCardComponent implements OnInit {
+  @Input() character:any;
+  @Input() isKilled:boolean = false;
+  @Input() characterTurn:boolean = false;
+  setCharacterClasses(){
+    return {
+      'border-red-600': this.isKilled,
+      'bg-red-900':this.isKilled,
+      'border-blue-600':this.characterTurn && !this.isKilled,
+    };
+  }
+  constructor() { }
+  ngOnInit(): void {}
+
+}

src/app/app.module.ts

@@ -7,7 +7,8 @@ import { MainBtnComponent } from '../Components/buttons/main-btn/main-btn.compon
 import { NewPageComponent } from '../pages/new-page/new-page.component';
 import { IndexPageComponent } from '../pages/index-page/index-page.component';
 import { MenuLayoutComponent } from '../Components/menu-layout/menu-layout.component';
-import {GameLayoutComponent} from '../Components/game-layout/game-layout.component'
+import {GameLayoutComponent} from '../Components/game-layout/game-layout.component';
+import { CharacterCardComponent } from '../Components/character-card/character-card.component'
 
 @NgModule({
   declarations: [
@@ -16,7 +17,8 @@ import {GameLayoutComponent} from '../Components/game-layout/game-layout.compone
     NewPageComponent,
     IndexPageComponent,
     MenuLayoutComponent,
-    GameLayoutComponent
+    GameLayoutComponent,
+    CharacterCardComponent
   ],
   imports: [
     BrowserModule,

src/pages/new-page/new-page.component.html

@@ -1,22 +1,15 @@
 <game-layout>
+  <div [style.visibility]="resultBannerOpacity ? 'visible' : 'hidden' " [style.opacity]="resultBannerOpacity" style="background-color: black;width: 100vw;height: 100vh;position: absolute;z-index: 2;"></div>
   <div class="grid md:grid-cols-4 sm:grid-cols-1">
-    <div class="col-span-1 w-full text-slate-200 h-screen bg-slate-700/80">
-      <div
-        *ngFor="let person of participants"
-        [class.bg-red-900]="!person.status"
-        [class.bg-green-900]="person.status"
-        [class.bg-blue-900]="turn === person.index && !gameOver"
-        class="tracking-widest Corleone w-full block p-4 flex justify-center content-center items-center"
-      >
-        <span class="text-5xl">
-          {{person.name}}
-        </span>
+    <div id="character-dock" class="col-span-1 p-3 w-full max-h-screen overflow-scroll text-slate-200 h-screen bg-slate-700">
+      <h1 class="text-4xl text-center tracking-widest">Players Dock : </h1>
+      <div *ngFor="let person of participants">
+        <app-character-card [id]="'character-' + person.index" [characterTurn]="turn === person.index" [isKilled]="!person.status" [character]="person"></app-character-card>
       </div>
     </div>
     <div class="col-span-3 w-full text-slate-200 flex justify-center content-center items-center h-screen bg-slate-700/80">
       <div>
         <main-btn (click)="Shoot()" [btn]="{title:'shoot'}"></main-btn>
-        <h1>turn : {{participants[turn].name}}</h1>
       </div>
     </div>
   </div>

src/pages/new-page/new-page.component.ts

@@ -50,6 +50,9 @@ export class NewPageComponent implements OnInit {
   bulletCount = 1
   turn = 0;
   gameOver = false;
+  resultBannerOpacity:number = 0;
+  ResultBannerInterval:any = null;
+
   reloadGun(){
     for (let counter = 0;counter < this.bulletCount;counter++){
       this.magazine.push(1)
@@ -70,14 +73,30 @@ export class NewPageComponent implements OnInit {
     }
     return array;
   }
+  dockScrollTop(){
+    let dockScrollTop = document!.getElementById("character-dock")!.scrollTop
+    let scrollTop:number = window.pageYOffset || dockScrollTop;
+    document!.getElementById("character-dock")!.scrollTop = scrollTop + 25
+  }
+  showResultBanner(){
+    this.ResultBannerInterval = setInterval(()=>{
+      console.log(this.resultBannerOpacity)
+      if (this.resultBannerOpacity >= 1){
+        clearInterval(this.ResultBannerInterval);
+      }
+      this.resultBannerOpacity += 0.1000
+    }, 40);
+  }
   Shoot(){
     if (this.magazine[this.turn]){
       this.shotSound()
       this.participants[this.turn].status = 0
       this.gameOver = true
+      this.showResultBanner()
     }
     else {
       this.turn = this.turn + 1
+      this.dockScrollTop()
       this.cockingSound()
     }
   }
@@ -92,8 +111,6 @@ export class NewPageComponent implements OnInit {
   constructor() {
     this.reloadGun()
   }
-
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
 }