Merge branch 'main' of github.com:yuru-baku/InfintyDeck

yuru-baku · Mar 15, 2024 · fdd1dc9 · fdd1dc9
2 parents 8dc94a4 + a7f9547
commit fdd1dc9
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 25 deletions.
diff --git a/frontend-vue/src/components/ar-component/ArComponent.vue b/frontend-vue/src/components/ar-component/ArComponent.vue
@@ -64,7 +64,7 @@ props.conService.onConnection(() => {
                 var sceneEl = document.querySelector('a-scene');
 
                 hideZone = new Zone(124, 125, sceneEl, 'hide');
-                shareZone = new ShareZone(126, 127, sceneEl, 'share');
+                shareZone = new ShareZone(126, 127, sceneEl, 'share', props.cardService.cardBack);
 
                 console.log(`Adding ${props.cardService.numberOfCards} markers to the scene...`);
                 document.querySelector('a-scene').addEventListener('click', (event) => {
@@ -113,6 +113,7 @@ props.conService.onConnection(() => {
                                 shareZone.cardInZone(foundCard) &&
                                 foundCard != shareZone.lastFoundCard
                             ) {
+                                shareZone.setLastFoundCard(foundCard);
                                 props.cardService.shareLocal(foundCard.id);
                             }
                         }

diff --git a/frontend-vue/src/components/ar-component/ShareZone.js b/frontend-vue/src/components/ar-component/ShareZone.js
@@ -1,32 +1,44 @@
 import { Zone } from './Zone';
 
 export class ShareZone extends Zone {
-    constructor(marker1BarcodeValue, marker2BarcodeValue, sceneEl, name) {
+    constructor(marker1BarcodeValue, marker2BarcodeValue, sceneEl, name, cardBack) {
         super(marker1BarcodeValue, marker2BarcodeValue, sceneEl, name, 0xadd8e6);
-        this.imageElement = document.createElement('a-image');
+        this.imageElement = document.createElement('a-plane');
         this.imageElement.setAttribute('id', 'shareZone');
         this.imageElement.setAttribute('visible', 'false');
-        this.imageElement.object3D.rotation.set(Math.PI, 0, 0);
+        this.imageElement.setAttribute('src', cardBack);
+        this.imageElement.object3D.position.set(0, 0, -1);
+
         this.imageElement.object3D.scale.set(1, 1, 1);
-        this.imageElement.object3D.position.set(0, 0, 0);
+
+        this.imageElement.object3D.rotation.set(0, 0, 0);
     }
-    /**
-     * @param {CardMarker} card
-     */
-    cardInZone(card) {
-        var found = super.cardInZone(card);
-        if (found) {
-            //alte card
-            this.lastFoundCard?.showCardImage();
-            //neue card
-            this.lastFoundCard = card;
-            card.hideCardImage();
-        }
-        return found;
+
+    setLastFoundCard(lastFoundCard) {
+        this.lastFoundCard?.showCardImage();
+        this.lastFoundCard = lastFoundCard;
+        lastFoundCard.hideCardImage();
     }
 
     drawZone() {
         super.drawZone();
-        this.zoneEntity.appendChild(this.imageElement);
+        if (!this.scene.querySelector('#shareZone')) {
+            this.scene.appendChild(this.imageElement);
+        }
+        this.imageElement.setAttribute('visible', 'true');
+        if (this.zoneEntity) {
+            var zonePosition = this.zoneEntity.object3D.position;
+            this.imageElement.object3D.position.set(zonePosition.x, zonePosition.y, zonePosition.z);
+            var scalefac = 1;
+            this.imageElement.setAttribute('geometry', {
+                width: 0.64 * scalefac * Math.min(this.zoneWidth, this.zoneHeight),
+                height: scalefac * Math.min(this.zoneWidth, this.zoneHeight)
+            });
+        }
+    }
+
+    removeZone() {
+        super.removeZone();
+        this.imageElement.setAttribute('visible', 'false');
     }
 }
diff --git a/frontend-vue/src/components/ar-component/Zone.js b/frontend-vue/src/components/ar-component/Zone.js
@@ -63,20 +63,20 @@ export class Zone {
             }
             this.setTotalZonePosition();
 
-            const width = Math.abs(this.maxX - this.minX);
-            const height = Math.abs(this.maxY - this.minY);
+            this.zoneWidth = Math.abs(this.maxX - this.minX);
+            this.zoneHeight = Math.abs(this.maxY - this.minY);
 
             const midpoint = new THREE.Vector3(
-                this.minX + width / 2,
-                this.minY + height / 2, // Assuming y position is constant, adjust if necessary
+                this.minX + this.zoneWidth / 2,
+                this.minY + this.zoneHeight / 2, // Assuming y position is constant, adjust if necessary
                 this.zoneMarker1.getMarkerPosition().z
             );
 
             this.zoneEntity = document.createElement('a-entity');
             this.zoneEntity.setAttribute('geometry', {
                 primitive: 'plane',
-                width: width,
-                height: height
+                width: this.zoneWidth,
+                height: this.zoneHeight
             });
             this.zoneEntity.setAttribute('material', {
                 color: this.color,