Add stock info from game status

Author: eliottvantorre

src/app/components/map/info/map-info.component.html

@@ -10,7 +10,7 @@ <h5 class="card-header">
                 <span
                     class="badge badge-big"
                     [style.background]="team === 'BLEU' ? '#4E84A2' : team === 'JAUNE' ? '#DA9A14' : '#555'"
-                    >{{ team }}</span
+                >{{ team }}</span
                 >
             </div>
             <div class="col">
@@ -36,6 +36,28 @@ <h5 class="card-header">
                 {{ item.key }}
             </div>
         </div>
+        <div class="row">
+            <strong class="col">Stock Avt. :</strong>
+            <strong class="col">Stock Arr. :</strong>
+        </div>
+        <div class="row">
+            <div class="col">
+                <ng-container
+                    *ngTemplateOutlet="
+                        stock;
+                        context: { stockFace: mainPosition?.gameStatus?.faceAvant }
+                    "
+                ></ng-container>
+            </div>
+            <div class="col">
+                <ng-container
+                    *ngTemplateOutlet="
+                        stock;
+                        context: { stockFace: mainPosition?.gameStatus?.faceArriere }
+                    "
+                ></ng-container>
+            </div>
+        </div>
         <div class="row">
             <span class="col">Etats :</span>
         </div>
@@ -50,3 +72,41 @@ <h5 class="card-header">
         </div>
     </div>
 </div>
+
+<ng-template #stock let-stockFace="stockFace">
+    <div class="d-flex flex-column" *ngIf="stockFace">
+        <div>
+            <div
+                class="planche"
+                [class.planche--PRESENTE]="stockFace.tiroirHaut"
+                style="margin-bottom: 0"
+            ></div>
+        </div>
+        <div>
+            <div
+                class="planche"
+                [class.planche--PRESENTE]="stockFace.tiroirBas"
+            ></div>
+        </div>
+        <div class="d-flex flex-row">
+            <div
+                class="conserve"
+                [class.conserve--PRESENTE]="stockFace.pinceGauche"
+            ></div>
+            <div
+                class="conserve"
+                [class.conserve--PRESENTE]="stockFace.pinceDroite"
+            ></div>
+        </div>
+        <div class="d-flex flex-row">
+            <div
+                class="conserve"
+                [class.conserve--PRESENTE]="stockFace.solGauche"
+            ></div>
+            <div
+                class="conserve"
+                [class.conserve--PRESENTE]="stockFace.solDroite"
+            ></div>
+        </div>
+    </div>
+</ng-template>

src/app/components/map/info/map-info.component.scss

@@ -4,3 +4,32 @@
     border: 1px solid transparent;
     margin-top: 0.25rem;
 }
+
+.planche {
+    height: 10px;
+    width: 56px;
+    margin: 3px;
+    padding: 0;
+    border: 2px solid black;
+    background-color: transparent;
+
+    &--PRESENTE {
+        border-width: 1px;
+        background-color: #a97a57;
+    }
+}
+
+.conserve {
+    height: 25px;
+    width: 25px;
+    margin: 3px;
+    padding: 0;
+    border-radius: 50%;
+    border: 2px solid black;
+    background-color: transparent;
+
+    &--PRESENTE {
+        border-width: 1px;
+        background-color: #c0c0c0;
+    }
+}