blob: 83e00c2e7756b646c2f905c621ce0fca0e5bca15 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const sessionId = route.params.id;
const joiningGame = ref(true);
const connected = ref(false);
const gameState = ref('');
const socket = new WebSocket(`${import.meta.env.VITE_BACKEND_WS_URL}`);
socket.onopen = () => {
socket.send(JSON.stringify({
action: 'join',
sessionId: sessionId,
}));
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.action === 'state') {
gameState.value = data.state;
joiningGame.value = false;
connected.value = true;
}
};
function sendMove(move: string) {
socket.send(JSON.stringify({
action: 'move',
sessionId: sessionId,
move: move,
}));
}
function sendLeft() {
sendMove('left');
}
function sendRotate() {
sendMove('rotate');
}
function sendRight() {
sendMove('right');
}
</script>
<template>
<main>
<template v-if="joiningGame">
<h1>Joining game "{{ sessionId }}"...</h1>
<p>If you are stuck on this page then disconnect from eduroam and use the guest network (or mobile data).
UoN eduroam appears to block insecure websockets over the Internet which breaks this entire app.</p>
</template>
<h1 v-if="connected">Connected to "{{ sessionId }}"</h1>
<h1 v-if="gameState === 'waiting'">Waiting for host to start the game...</h1>
<div class='controls' v-if="gameState === 'playing'">
<button @click="sendLeft">Left</button>
<button @click="sendRotate">Rotate</button>
<button @click="sendRight">Right</button>
</div>
</main>
</template>
<style scoped>
.controls {
display: flex;
flex-direction: row;
height: 100vh;
gap: 0.5rem;
}
.controls button {
flex-grow: 1;
touch-action: none;
}
</style>
|
