Skip to content

Commit 3f01c75

Browse files
author
Frederick Behringer
committed
Many changes, nothing works, but i needed a checkpoint :)
1 parent 11e5a02 commit 3f01c75

File tree

10 files changed

+385
-272
lines changed

10 files changed

+385
-272
lines changed

‎backend/src/models/MauMau.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export class MauMau {
7979
// });
8080
}
8181

82-
drawCard(user: User, _: any) {
82+
drawCard(user: User, data: any) {
8383
// check if it is the users turn
8484
if (this.room.users[this.turn] !== user) {
8585
user.ws.send(JSON.stringify({ error: 'It is not your turn!' }));
@@ -89,17 +89,18 @@ export class MauMau {
8989
if (this.drawPile.length <= 0) {
9090
this.shuffleDrawPile();
9191
}
92-
const newCard = this.drawPile.pop()!;
93-
user.handcards.unshift(newCard);
92+
const card = this.drawPile.pop()!;
93+
user.handcards.unshift(card);
9494
user.ws.send(JSON.stringify({
9595
action: 'drawCard',
9696
data: {
97-
newCard: newCard,
97+
card: card,
98+
markerId: data.data.markerid,
9899
handcards: user.handcards,
99100
nextActions: [ 'endTurn', 'playCard' ]
100101
}
101102
}));
102-
this.history.unshift(`+${user.id}:${newCard}`);
103+
this.history.unshift(`+${user.id}:${card}`);
103104
// do not hand to next user now, wait if he can play now
104105
}
105106

‎backend/src/models/room.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -137,12 +137,14 @@ export class Room {
137137
user.ws.send(JSON.stringify({
138138
action: 'gotRoomInfo',
139139
data: {
140-
you: { name: user.name, isOwner: user.isOwner, id: user.id },
141-
isLocal: false,
142-
selectedGame: this.selectedGame,
143-
state: this.state,
144-
users: this.getUserInformations(),
145-
id: this.id,
140+
you: { name: user.name, isOwner: user.isOwner, id: user.id, handcards: user.handcards },
141+
room: {
142+
isLocal: false,
143+
selectedGame: this.selectedGame,
144+
state: this.state,
145+
users: this.getUserInformations(),
146+
id: this.id,
147+
},
146148
game: { ...this.game, room: undefined }
147149
}
148150
}))

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

+139-125
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
<script setup lang="js">
22
import '@ar-js-org/ar.js';
33
import { Zone } from './Zone';
4+
import { CardService } from './CardService';
5+
import { ConnectionService } from '@/services/ConnectionService';
6+
import { ref } from 'vue';
7+
8+
const props = defineProps({
9+
cardService: {
10+
type: CardService
11+
},
12+
conService: {
13+
type: ConnectionService
14+
}
15+
});
16+
const connected = ref(false);
417
518
//Global Variable
619
var markersURLArray = [];
@@ -10,148 +23,147 @@ var foundCardMarkers = [];
1023
var foundZoneMarkers = [];
1124
var handZone;
1225
13-
AFRAME.registerComponent('markers_start', {
14-
init: function () {
15-
console.log('Add markers to the scene');
16-
17-
var sceneEl = document.querySelector('a-scene');
18-
var numberOfCards = 45;
19-
//list of the markers
20-
for (var i = 0; i < numberOfCards+1; i++) {
21-
var url = "/markers/pattern-" + i + ".patt";
22-
markersURLArray.push(url);
23-
markersNameArray.push(i);
24-
//console.log(url);
25-
}
26-
for (var k = 0; k < numberOfCards+1; k++) {
27-
var markerEl = document.createElement('a-marker');
28-
markerEl.setAttribute('type', 'pattern');
29-
markerEl.setAttribute('url', markersURLArray[k]);
30-
markerEl.setAttribute('id', markersNameArray[k]);
31-
32-
33-
markerEl.setAttribute('registerevents', '');
34-
sceneEl.appendChild(markerEl);
35-
markerEl.style.zIndex = '1'; // Adjust the value as needed
36-
37-
//Adding text to each marker
38-
var textEl = document.createElement('a-entity');
39-
40-
textEl.setAttribute('id', 'text');
41-
textEl.setAttribute('text', { color: 'red', align: 'center', value: markersNameArray[k], width: '5.5' });
42-
textEl.object3D.position.set(0, 0.7, 0);
43-
textEl.object3D.rotation.set(-90, 0, 0);
44-
45-
markerEl.appendChild(textEl);
46-
47-
var ImageEl = document.createElement('a-image');
48-
var imageUrl = "/cardImages/cardFront" + k + ".svg";
49-
ImageEl.setAttribute('src', 'url('+ imageUrl +')');
50-
ImageEl.setAttribute('id', 'card');
51-
52-
ImageEl.object3D.position.set(0, 0.0, 0);
53-
ImageEl.object3D.rotation.set(-90, 0, 0);
54-
markerEl.appendChild(ImageEl);
55-
56-
57-
}
58-
handZone = new Zone("/markers/ZoneMarker1.patt", "/markers/ZoneMarker2.patt", sceneEl, "hand", foundZoneMarkers);
59-
}
60-
});
61-
62-
//Detect marker found and lost
63-
AFRAME.registerComponent('registerevents', {
64-
init: function () {
65-
const marker = this.el;
66-
67-
marker.addEventListener("markerFound", () => {
68-
var markerId = marker.id;
69-
addFoundMarker(marker, foundCardMarkers)
70-
if (handZone.markerInZone(marker)) {
71-
turnCard(marker);
26+
props.conService.onConnection(() => {
27+
AFRAME.registerComponent('markers_start', {
28+
init: function () {
29+
console.log(`Adding ${props.cardService.numberOfCards} markers to the scene...`);
30+
31+
var sceneEl = document.querySelector('a-scene');
32+
//list of the markers
33+
for (var i = 0; i < props.cardService.numberOfCards+1; i++) {
34+
var url = "/markers/pattern-" + i + ".patt";
35+
markersURLArray.push(url);
36+
markersNameArray.push(i);
37+
}
38+
for (var k = 0; k < props.cardService.numberOfCards+1; k++) {
39+
var markerEl = document.createElement('a-marker');
40+
markerEl.setAttribute('type', 'pattern');
41+
markerEl.setAttribute('url', markersURLArray[k]);
42+
markerEl.setAttribute('id', markersNameArray[k]);
43+
44+
45+
markerEl.setAttribute('registerevents', '');
46+
sceneEl.appendChild(markerEl);
47+
markerEl.style.zIndex = '1'; // Adjust the value as needed
48+
49+
// Add text to each marker
50+
var textEl = document.createElement('a-entity');
51+
52+
textEl.setAttribute('id', 'text');
53+
textEl.setAttribute('text', { color: 'red', align: 'center', value: markersNameArray[k], width: '5.5' });
54+
textEl.object3D.position.set(0, 0.7, 0);
55+
textEl.object3D.rotation.set(-90, 0, 0);
56+
57+
markerEl.appendChild(textEl);
58+
59+
// Add the card Image
60+
var ImageEl = document.createElement('a-image');
61+
ImageEl.setAttribute('src', props.cardService.cardBack);
62+
ImageEl.setAttribute('id', 'card');
63+
64+
ImageEl.object3D.position.set(0, 0.0, 0);
65+
ImageEl.object3D.rotation.set(-90, 0, 0);
66+
markerEl.appendChild(ImageEl);
7267
}
73-
console.log('Marker Found: ', markerId, 'at ', marker.object3D.position);
74-
});
75-
76-
marker.addEventListener("markerLost", () => {
77-
var markerId = marker.id;
78-
removeFoundMarker(marker, foundCardMarkers);
79-
console.log('Marker Lost: ', markerId);
80-
});
81-
function checkMarkerInZone() {
82-
for (let foundMarker of foundCardMarkers) {
83-
if (handZone.markerInZone(foundMarker)) {
84-
turnCard(foundMarker);
85-
} else if (isCardBack(foundMarker)) {
86-
showCard(foundMarker);
68+
handZone = new Zone("/markers/ZoneMarker1.patt", "/markers/ZoneMarker2.patt", sceneEl, "hand", foundZoneMarkers);
69+
}
70+
});
71+
72+
//Detect marker found and lost
73+
AFRAME.registerComponent('registerevents', {
74+
init: function () {
75+
const marker = this.el;
76+
77+
marker.addEventListener("markerFound", () => {
78+
var markerId = marker.id;
79+
addFoundMarker(marker, foundCardMarkers)
80+
if (handZone.markerInZone(marker)) {
81+
turnCard(marker);
82+
}
83+
console.log('Marker Found: ', markerId, 'at ', marker.object3D.position);
84+
});
85+
86+
marker.addEventListener("markerLost", () => {
87+
var markerId = marker.id;
88+
removeFoundMarker(marker, foundCardMarkers);
89+
console.log('Marker Lost: ', markerId);
90+
});
91+
function checkMarkerInZone() {
92+
for (let foundMarker of foundCardMarkers) {
93+
if (handZone.markerInZone(foundMarker)) {
94+
turnCard(foundMarker);
95+
} else if (isCardBack(foundMarker)) {
96+
showCard(foundMarker);
97+
}
98+
}
99+
setTimeout(checkMarkerInZone, 100);
100+
};
101+
checkMarkerInZone();
102+
},
103+
104+
});
105+
106+
AFRAME.registerComponent('registerevents_zone', {
107+
init: function () {
108+
const marker = this.el;
109+
var lastPosition1;
110+
var lastPosition2;
111+
marker.addEventListener("markerFound", () => {
112+
113+
var markerId = marker.id;
114+
var image = marker.querySelector('#text');
115+
var position = marker.object3D.position;
116+
117+
addFoundMarker(marker, foundZoneMarkers)
118+
//add for loop here with zoneArray if we have multiple
119+
if (isMarkerIdFound(handZone.getMarker1Id(), foundZoneMarkers) && isMarkerIdFound(handZone.getMarker2Id(), foundZoneMarkers)) {
120+
lastPosition1 = handZone.getZoneMarker1().object3D.position.clone();
121+
lastPosition2 = handZone.getZoneMarker2().object3D.position.clone();
122+
handZone.drawZone();
87123
}
88-
}
89-
setTimeout(checkMarkerInZone, 100);
90-
};
91-
checkMarkerInZone();
92-
},
93-
94-
});
95-
96-
AFRAME.registerComponent('registerevents_zone', {
97-
init: function () {
98-
const marker = this.el;
99-
var lastPosition1;
100-
var lastPosition2;
101-
marker.addEventListener("markerFound", () => {
102-
103-
var markerId = marker.id;
104-
var image = marker.querySelector('#text');
105-
var position = marker.object3D.position;
106-
107-
addFoundMarker(marker, foundZoneMarkers)
108-
//add for loop here with zoneArray if we have multiple
109-
if (isMarkerIdFound(handZone.getMarker1Id(), foundZoneMarkers) && isMarkerIdFound(handZone.getMarker2Id(), foundZoneMarkers)) {
110-
lastPosition1 = handZone.getZoneMarker1().object3D.position.clone();
111-
lastPosition2 = handZone.getZoneMarker2().object3D.position.clone();
112-
handZone.drawZone();
113-
}
114124
115-
console.log('Zone Marker Found: ', markerId, 'at ', marker.object3D.position);
116-
});
125+
console.log('Zone Marker Found: ', markerId, 'at ', marker.object3D.position);
126+
});
117127
118-
marker.addEventListener("markerLost", () => {
119-
var markerId = marker.id;
128+
marker.addEventListener("markerLost", () => {
129+
var markerId = marker.id;
120130
121-
//add for loop here with zoneArray if we have multiple
122-
if (marker.id === handZone.getMarker1Id() || marker.id === handZone.getMarker2Id()) {
123-
handZone.removeZone();
124-
}
131+
//add for loop here with zoneArray if we have multiple
132+
if (marker.id === handZone.getMarker1Id() || marker.id === handZone.getMarker2Id()) {
133+
handZone.removeZone();
134+
}
125135
126-
removeFoundMarker(marker, foundZoneMarkers);
127-
console.log('Zone Marker Lost: ', markerId);
128-
});
136+
removeFoundMarker(marker, foundZoneMarkers);
137+
console.log('Zone Marker Lost: ', markerId);
138+
});
129139
130-
handZone.redrawZoneEnable();
131-
},
140+
handZone.redrawZoneEnable();
141+
},
142+
});
143+
connected.value = true;
132144
});
133145
146+
134147
function isCardBack(marker) {
135148
if (!marker) return false;
136149
const imageEl = marker.querySelector('#card');
137150
if (!imageEl) return false;
138-
return imageEl.getAttribute('src') === 'url(/cardImages/cardBackBlue.svg)';
151+
return imageEl.getAttribute('src') === props.cardService.cardBack;
139152
}
140153
141-
142-
143154
function turnCard(marker) {
144155
const imageEl = marker.querySelector('#card');
145-
imageEl.setAttribute('src', 'url(/cardImages/cardBackBlue.svg)');
156+
imageEl.setAttribute('src', props.cardService.cardBack);
146157
}
147158
148159
function showCard(marker) {
149160
const imageEl = marker.querySelector('#card');
150-
let id = marker.getAttribute('id')
151-
imageEl.setAttribute('src', 'url(/cardImages/cardFront' + id + '.svg)');
161+
let id = marker.getAttribute('id');
162+
props.cardService.getCardByMarker(id).then((card) => {
163+
imageEl.setAttribute('src', card.url);
164+
});
152165
}
153166
154-
155167
function addFoundMarker(marker, markerList) {
156168
if (!markerList.includes(marker)) {
157169
markerList.push(marker);
@@ -173,10 +185,12 @@ function isMarkerIdFound(markerId, list) {
173185
</script>
174186

175187
<template>
176-
<a-scene markers_start xr-mode-ui="enabled: false" color-space="sRGB" renderer="gammaOutput: true"
177-
arjs='debugUIEnabled: false; sourceType: webcam; patternRatio: 0.85; trackingMethod: best;'>
178-
<a-entity id='userCamera' camera>
179-
<!-- <a-cursor> </a-cursor> -->
180-
</a-entity>
181-
</a-scene>
188+
<div v-if="connected">
189+
<a-scene markers_start xr-mode-ui="enabled: false" color-space="sRGB" renderer="gammaOutput: true"
190+
arjs='debugUIEnabled: false; sourceType: webcam; patternRatio: 0.85; trackingMethod: best;'>
191+
<a-entity id='userCamera' camera>
192+
<!-- <a-cursor> </a-cursor> -->
193+
</a-entity>
194+
</a-scene>
195+
</div>
182196
</template>

0 commit comments

Comments
 (0)