Add aires construction visu from game status

Author: eliottvantorre

src/app/components/map/input/game-status.manager.ts

@@ -1,30 +1,39 @@
 import Konva from 'konva';
 import {TABLE} from '../../../constants/constants';
-import {
-    GameStatus,
-    GradinBrut, GradinBrutId,
-    Team,
-} from '../../../models/showMustGoOn/GameStatus';
+import {GameStatus, GradinBrut, GradinBrutId, Team,} from '../../../models/showMustGoOn/GameStatus';
+import {start} from "@popperjs/core";
 
 export class GameStatusManager {
     gradinsBruts: Konva.Group;
+    airesConstruction: Konva.Group;
 
     constructor(private mainLayer: Konva.Layer) {
         this.gradinsBruts = new Konva.Group();
         this.mainLayer.add(this.gradinsBruts);
         this.gradinsBruts.moveToBottom();
+
+        this.airesConstruction = new Konva.Group();
+        this.mainLayer.add(this.airesConstruction);
+        this.airesConstruction.moveToBottom();
     }
 
     destroy() {
         this.gradinsBruts.destroy()
+        this.airesConstruction.destroy()
     }
 
     update(status: Partial<GameStatus>, team: Team) {
         this.gradinsBruts.destroyChildren()
+        this.airesConstruction.destroyChildren()
 
         status.gradinBrutStock?.forEach((gradinBrut) => {
             this.addGradinBrut(gradinBrut);
         });
+
+        this.addAireConstruction(status.airesConstruction?.petitEquipe, team === Team.JAUNE ? 550 : 2000)
+        this.addAireConstruction(status.airesConstruction?.grandEquipe, team === Team.JAUNE ? 1000 : 1550)
+        this.addAireConstruction(status.airesConstruction?.petitAdverse, team === Team.JAUNE ? 2000 : 550)
+        this.addAireConstruction(status.airesConstruction?.grandAdverse, team === Team.JAUNE ? 1550 : 1000)
     }
 
     private addGradinBrut(gradinBrut: GradinBrut) {
@@ -75,6 +84,53 @@ export class GameStatusManager {
         this.gradinsBruts.add(plancheGroup)
     }
 
+    private addAireConstruction(aireConstruction: boolean[][], startX: number) {
+        aireConstruction.forEach((gradinConstruit, index) => this.addGradinConstruit(gradinConstruit, startX, index))
+    }
+
+    private addGradinConstruit(gradinConstruit: boolean[], startX: number, index: number) {
+        if (!gradinConstruit[0]) return;
+
+        const gradinGroup = new Konva.Group({
+            x: (startX + 25) * TABLE.imageRatio,
+            y: (TABLE.height - 150 - index * 125) * TABLE.imageRatio,
+            width: 400,
+            height: 100,
+            scaleX: TABLE.imageRatio,
+            scaleY: TABLE.imageRatio,
+        })
+
+        const gradin = new Konva.Rect({
+            x: 0,
+            y: 0,
+            width: 400,
+            height: 100,
+            fill: '#a97a57',
+        })
+        gradinGroup.add(gradin)
+        gradin.moveToBottom()
+
+        const gradinText = new Konva.Text({
+            text: (gradinConstruit.lastIndexOf(true) + 1).toString(),
+            x: 0,
+            y: 0,
+            width: 400,
+            height: 100,
+            align: 'center',
+            verticalAlign: 'middle',
+            fontSize: 65,
+            fontStyle: 'bold',
+            fill: 'black',
+            stroke: 'white',
+            strokeWidth: 5,
+            fillAfterStrokeEnabled: true,
+        })
+        gradinGroup.add(gradinText)
+        gradinText.moveToTop()
+
+        this.gradinsBruts.add(gradinGroup)
+    }
+
     private isGradinVertical = (id: GradinBrutId): boolean => ([
         GradinBrutId.JAUNE_HAUT_GAUCHE,
         GradinBrutId.JAUNE_BAS_GAUCHE,

src/app/services/mock/mouvements.mock-service.ts

@@ -85,20 +85,20 @@ export class MouvementsMockService extends MouvementsService {
 
                 airesConstruction: {
                     grandEquipe: [
-                        [ false, false, false ],
-                        [ false, false, false ],
-                        [ false, false, false ],
+                        [ true, true, true ],
+                        [ true, true, false ],
+                        [ true, false, false ],
                     ],
                     petitAdverse: [
-                        [ false, false, false ],
+                        [ true, true, false ],
                     ],
                     petitEquipe: [
-                        [ false, false, false ],
+                        [ true, false, false ],
                     ],
                     grandAdverse: [
                         [ false, false, false ],
-                        [ false, false, false ],
-                        [ false, false, false ],
+                        [ true, false, false ],
+                        [ true, true, false ],
                     ]
                 },