Skip to content

Commit 3b7c960

Browse files
some-random-intsome-random-int
authored
Merge pull request #54 from yuru-baku/feature/click-events
Fixed with some buttons
2 parents 4273862 + 6822017 commit 3b7c960

File tree

6 files changed

+93
-25
lines changed

6 files changed

+93
-25
lines changed

‎frontend-vue/public/cardImages/zones/hide.svg

+1
Loading

‎frontend-vue/public/cardImages/zones/share.svg

+1
Loading

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

+39-14
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,34 @@ import { CardService } from '@/services/CardService';
77
import { CardMarker } from './CardMarker';
88
import { CardDisplay } from './CardDisplay';
99
import { ConnectionService } from '@/services/ConnectionService';
10-
import { onUnmounted, ref } from 'vue';
10+
import { onUnmounted, ref, watch } from 'vue';
1111
1212
const props = defineProps({
1313
cardService: {
1414
type: CardService
1515
},
1616
conService: {
1717
type: ConnectionService
18-
}
18+
},
19+
debugOverlay: {
20+
type: Boolean,
21+
default: false
22+
},
23+
pinShareZone: {
24+
type: Boolean,
25+
default: false
26+
},
27+
pinHideZone: {
28+
type: Boolean,
29+
default: false
30+
},
1931
});
2032
const connected = ref(false);
2133
34+
/**
35+
* This Eventlistener fits the canvas to the size of the arjs-video.
36+
* It will be stopped onUnmounted.
37+
*/
2238
const resizeController = new AbortController();
2339
window.addEventListener(
2440
'resize',
@@ -37,6 +53,7 @@ window.addEventListener(
3753
},
3854
{ signal: resizeController.signal }
3955
);
56+
4057
//Buttons
4158
const toggleHand = () => {
4259
handDisplay.toggleDisplay();
@@ -94,7 +111,6 @@ var hideZone;
94111
* @type {Zone}
95112
*/
96113
var shareZone;
97-
var debug = true;
98114
/**
99115
* @type {CardDisplay}
100116
*/
@@ -108,18 +124,12 @@ props.conService.onConnection(() => {
108124
109125
hideZone = new Zone(124, 125, sceneEl, 'hide');
110126
shareZone = new ShareZone(126, 127, sceneEl, 'share', props.cardService.cardBack);
127+
hideZone.zoneMarker1.toggleDebugNumber();
128+
hideZone.zoneMarker2.toggleDebugNumber();
129+
shareZone.zoneMarker1.toggleDebugNumber();
130+
shareZone.zoneMarker2.toggleDebugNumber();
111131
112132
console.log(`Adding ${props.cardService.numberOfCards} markers to the scene...`);
113-
document.querySelector('a-scene').addEventListener('click', (event) => {
114-
let x = (event.clientX / window.innerWidth) * 4 - 2;
115-
let y = 3 - (event.clientY / window.innerHeight) * 6;
116-
if (shareZone.isInZone(x, y)) {
117-
shareZone.redrawZoneToggle();
118-
}
119-
if (hideZone.isInZone(x, y)) {
120-
hideZone.redrawZoneToggle();
121-
}
122-
});
123133
generateMarkers(sceneEl);
124134
}
125135
});
@@ -212,7 +222,7 @@ function generateMarkers(sceneEl) {
212222
for (var k = 0; k < props.cardService.numberOfCards + 1; k++) {
213223
var cardBackSrc = props.cardService.cardBack;
214224
var card = new CardMarker(sceneEl, cardBackSrc, k.toString());
215-
if (debug) {
225+
if (props.debugOverlay) {
216226
card.toggleDebugNumber();
217227
}
218228
cardmarkers.push(card);
@@ -262,6 +272,21 @@ function removeFoundMarker(marker, markerList) {
262272
}
263273
}
264274
275+
watch(() => props.debugOverlay, (enable, _) => {
276+
hideZone.zoneMarker1.toggleDebugNumber();
277+
hideZone.zoneMarker2.toggleDebugNumber();
278+
shareZone.zoneMarker1.toggleDebugNumber();
279+
shareZone.zoneMarker2.toggleDebugNumber();
280+
for (let card of cardmarkers) {
281+
card.toggleDebugNumber();
282+
}
283+
});
284+
watch(() => props.pinHideZone, (enable, _) => {
285+
hideZone.redrawZoneToggle();
286+
});
287+
watch(() => props.pinShareZone, (enable, _) => {
288+
shareZone.redrawZoneToggle();
289+
});
265290
// is called to remove all remainings of AFRAME as far as possible
266291
onUnmounted(() => {
267292
// stop resizing and reset

‎frontend-vue/src/components/ar-component/InfinityMarker.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ export class InfinityMarker {
2424

2525
this.textElement.setAttribute('id', 'text');
2626
this.textElement.setAttribute('text', {
27-
color: 'red',
27+
color: 'black',
2828
align: 'center',
2929
value: this.id,
3030
width: '5.5'
3131
});
32-
this.textElement.object3D.position.set(0, 0.01, 0);
33-
this.textElement.object3D.rotation.set(-90, 0, 0);
32+
this.textElement.object3D.position.set(0, 0.2, 0);
33+
this.textElement.object3D.rotation.set(-Math.PI / 2, 0, 0);
3434

3535
this.markerElement.appendChild(this.textElement);
3636
this.textElement.setAttribute('visible', false);

‎frontend-vue/src/components/ar-component/ZoneMarker.js

+21-7
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,26 @@ export class ZoneMarker extends InfinityMarker {
66
super(sceneEl, barcodeValue, id);
77
this.markerElement.setAttribute('registerevents_zone', '');
88
this.zone = zone;
9-
var idNumber = parseInt(id.match(/\d+/)[0]);
10-
this.textElement.setAttribute('text', {
11-
color: 'red',
12-
align: 'center',
13-
value: idNumber,
14-
width: '5.5'
15-
});
9+
// var idNumber = parseInt(id.match(/\d+/)[0]);
10+
// // this.textElement.setAttribute('text', {
11+
// // color: 'red',
12+
// // align: 'center',
13+
// // value: idNumber,
14+
// // width: '5.5'
15+
// // });
16+
17+
// this.markerElement.setAttribute('clicker', "");
18+
this.#addCardImageToMarker()
19+
}
20+
21+
#addCardImageToMarker() {
22+
this.imageElement = document.createElement('a-image');
23+
this.imageElement.setAttribute('src', `url(/InfinityDeck/cardImages/zones/${this.zone.name}.svg)`);
24+
this.imageElement.setAttribute('id', 'card');
25+
26+
// this.imageElement.object3D.scale.set(6.4 / 5, 8.9 / 5, 1);
27+
this.imageElement.object3D.position.set(0, 0, 0);
28+
this.imageElement.object3D.rotation.set(-Math.PI / 2, 0, 0);
29+
this.markerElement.appendChild(this.imageElement);
1630
}
1731
}

‎frontend-vue/src/views/GameView.vue

+28-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import { ConnectionService } from '@/services/ConnectionService';
66
import { onUnmounted, ref } from 'vue';
77
88
var showMenu = ref(false);
9-
var showUsers = ref(false);
109
var showHand = ref(false);
1110
let handSpacing = ref<number | null>(null);
11+
let pinHideZone = ref(false);
12+
let pinShareZone = ref(false);
13+
let debugOverlay = ref(false);
1214
let cardSize = ref<number | null>(null);
1315
let resolution = ref();
1416
@@ -47,6 +49,9 @@ onUnmounted(() => {
4749
ref="arComponentViewRef"
4850
:card-service="cardService"
4951
:con-service="conService"
52+
:pin-hide-zone="pinHideZone"
53+
:pin-share-zone="pinShareZone"
54+
:debug-overlay="debugOverlay"
5055
></ArComponent>
5156
<div class="game-overlay" :class="showMenu ? 'expanded' : ''">
5257
<div id="left-container" v-if="showMenu">
@@ -98,6 +103,20 @@ onUnmounted(() => {
98103
>
99104
<font-awesome-icon :icon="['fas', 'bars']" />
100105
</button>
106+
<button
107+
type="button"
108+
@click="pinShareZone = !pinShareZone"
109+
:class="pinShareZone ? 'active' : 'non-active'"
110+
>
111+
<font-awesome-icon :icon="['fas', 'share-nodes']" />
112+
</button>
113+
<button
114+
type="button"
115+
@click="pinHideZone = !pinHideZone"
116+
:class="pinHideZone ? 'active' : 'non-active'"
117+
>
118+
<font-awesome-icon :icon="['fas', 'eye-slash']" />
119+
</button>
101120
<button
102121
type="button"
103122
@click="toggleHand"
@@ -117,6 +136,14 @@ onUnmounted(() => {
117136
<button type="button" @click="shuffle" v-if="showMenu && conService.you.value?.isOwner">
118137
<font-awesome-icon :icon="['fas', 'shuffle']" />
119138
</button>
139+
<button
140+
type="button"
141+
@click="debugOverlay = !debugOverlay"
142+
:class="debugOverlay ? 'active' : 'non-active'"
143+
v-if="showMenu"
144+
>
145+
<font-awesome-icon :icon="['fas', 'bug']" />
146+
</button>
120147
<button type="button" @click="endGame" v-if="showMenu && conService.you.value?.isOwner">
121148
<font-awesome-icon :icon="['fas', 'door-open']" />
122149
</button>

0 commit comments

Comments
 (0)