blob: 8d6a6b9b39a20f9eb524bb44e4cfb0fad65469ef (
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
|
<script setup lang="ts">
import { ref, type Ref } from 'vue';
import type TetrisBoard from '../components/TetrisBoard.vue';
let started = ref(false)
let waitingForCode = ref(true)
let code = ref('')
let url = ref('');
let numClients = ref(0);
let inputQueue: Ref<Array<string>> = ref([]);
let socket: WebSocket;
function startGame() {
if (!socket) {
return;
}
socket.send(JSON.stringify({
action: 'start',
sessionId: code.value,
}));
}
fetch(`${import.meta.env.VITE_BACKEND_BASE_URL}/session`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
}
).then(async (response) => {
const data: any = await response.json();
code.value = data.id;
url.value = `${import.meta.env.VITE_FRONTEND_BASE_URL}/join/${data.id}`;
waitingForCode.value = false;
openSocket(data.id);
});
function openSocket(id: string) {
socket = new WebSocket(`${import.meta.env.VITE_BACKEND_WS_URL}`);
socket.onopen = () => {
socket.send(JSON.stringify({
action: 'host',
sessionId: id,
}));
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.action === 'join') {
numClients.value = data.clients;
} else if (data.action === 'state' && data.state === 'playing') {
started.value = true;
} else if (data.action === 'move') {
inputQueue.value.push(data.move);
}
};
}
</script>
<template>
<main>
<template v-if="waitingForCode">
<h1>Requesting session...</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>
<template v-if="!started && !waitingForCode">
<h1>Join this game</h1>
<QRCode size=500 level="M" :value="url"></QRCode>
<h2><a :href="url">{{ url }}</a></h2>
<p>Connected clients: {{ numClients }}</p>
<button @click="startGame">Start game</button>
</template>
<TetrisBoard v-if="started" :networked="true" :input-queue="inputQueue" :qrCode="url"></TetrisBoard>
</main>
</template>
|
