Backend connection is now workign!

Author: Frederick Behringer

backend/src/models/MauMau.ts

@@ -95,7 +95,7 @@ export class MauMau {
             action: 'drawCard',
             data: {
                 card: card,
-                markerId: data.data.markerid,
+                markerId: data.data.markerId,
                 handcards: user.handcards,
                 nextActions: [ 'endTurn', 'playCard' ]
             }

frontend-vue/src/components/ar-component/ArComponent.vue

@@ -153,15 +153,23 @@ function isCardBack(marker) {
 
 function turnCard(marker) {
 	const imageEl = marker.querySelector('#card');
-	imageEl.setAttribute('src', props.cardService.cardBack);
+	const cardState = imageEl.getAttribute('data-state');
+	if (cardState !== 'back') {
+		imageEl.setAttribute('data-state', 'back');
+		imageEl.setAttribute('src', props.cardService.cardBack);
+	}
 }
 
 function showCard(marker) {
 	const imageEl = marker.querySelector('#card');
+	const cardState = imageEl.getAttribute('data-state');
 	let id = marker.getAttribute('id');
-	props.cardService.getCardByMarker(id).then((card) => {
-		imageEl.setAttribute('src', card.url);
-	});
+	if (cardState !== 'front') {
+		imageEl.setAttribute('data-state', 'front');
+		props.cardService.getCardByMarker(id).then((card) => {
+			imageEl.setAttribute('src', card.url);
+		});
+	}
 }
 
 function addFoundMarker(marker, markerList) {

frontend-vue/src/components/ar-component/CardService.ts

@@ -19,6 +19,7 @@ export class CardService {
         this.cardCallbacks = new Map<string, Function>();
         // conService.onConnection(() => this.numberOfCards = conService.game.value!.deck.length);
         conService.onConnection(() => this.numberOfCards = 40); // Todo: Marker Anzahl?!
+        conService.onCardDrawed((markerId, cardName) => this.registerMarker(markerId, cardName));
     }
 
     private getCardUrl(cardName: string) {

frontend-vue/src/services/ConnectionService.ts

@@ -13,6 +13,7 @@ export class ConnectionService {
     store: any;
     cookies = useCookies(['username', 'roomId', 'userId']);
     connectionCallbacks: (() => void)[] = [ ];
+    drawCardCallbacks: ((markerId: string, cardName: string) => void)[] = [ ];
 
     public room = ref<Room>();
     public game = ref<Game>();
@@ -108,7 +109,7 @@ export class ConnectionService {
                     this.router.push(`/${this.room.value.selectedGame}?roomId=${data.data.roomId}`);
                     break;
                 case 'drawCard':
-                    // registerMarker(data.data.markerId, data.data.card);
+                    this.drawCardCallbacks.forEach((callback) => callback(data.data.markerId, data.data.card))
                     break;
                 default:
                     console.warn('Unhandled action', data.action, data);
@@ -141,4 +142,8 @@ export class ConnectionService {
         }
         this.connectionCallbacks.push(callback);
     }
+
+    public onCardDrawed(callback: (markerId: string, cardName: string) => void) {
+        this.drawCardCallbacks.push(callback);
+    }
 }