-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (115 loc) · 4.69 KB
/
index.html
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<h1>Server-Sent Events Example</h1>
<div id="events"></div>
<button id="action">...</button>
<script>
const roomId = prompt("Enter Room ID:");
const actionButton = document.getElementById("action")
let player;
let source;
function parseJSONAsync(jsonString) {
return new Promise((resolve, reject) => {
try {
const result = JSON.parse(jsonString);
resolve(result);
} catch (error) {
reject(error);
}
});
}
function getRoom(){
if (roomId && typeof(EventSource) !== "undefined") {
source = new EventSource(`/rooms/${roomId}`);
source.onmessage = function(event) {
let eventList = document.getElementById("events");
let idElement = "sse:event-data"
let newElement = document.getElementById(idElement);
console.log({data: event.data})
parseJSONAsync(event.data)
.then(
roomData => {
if(roomData?.room?.state === 'Ready'){
actionButton.onclick = () => sendSuit(roomData.player.id)
actionButton.innerHTML = "Suit"
actionButton.disabled = false
} else if (roomData?.room?.state === 'WaitingSuit'){
if(roomData?.room?.WaitingSuit.id === roomData.player.id){
actionButton.onclick = () => sendSuit(roomData.player.id)
actionButton.innerHTML = "Suit"
} else {
actionButton.onclick = () => {};
actionButton.disabled = true;
actionButton.innerHTML = "Waiting...";
}
} else if(
roomData?.room?.state === 'ShowingResult'
|| (roomData?.room?.state === 'Rematch'
&& roomData?.room?.WaitingSuit.id === roomData.player.id)){
actionButton.onclick = () => sendRematch(roomData.player.id)
actionButton.disabled = false;
actionButton.innerHTML = "Rematch";
}
if(newElement){
newElement.innerHTML = event.data;
}else{
newElement = document.createElement('div');
newElement.id = idElement;
eventList.appendChild(newElement);
}
}
).catch(() => {})
};
} else {
document.getElementById("events").innerHTML = "Sorry, your browser does not support server-sent events or you did not provide a Room ID.";
}
}
function sendSuit(playerID){
const prevText = actionButton.innerHTML;
actionButton.disabled = true;
actionButton.innerHTML = "Loading...";
const suit = prompt("Enter suit: ");
fetch(`/rooms/play/${roomId}/${playerID}/${suit}`)
.then(r=>{
if(r.status===200){
actionButton.disabled = true;
actionButton.innerHTML = "Waiting...";
console.log(`Submission Success`)
return 0;
}
throw Error("Failed submission");
})
.catch(()=>{
actionButton.disabled = false;
actionButton.innerHTML = prevText;
})
}
function sendRematch(playerID){
const prevText = actionButton.innerHTML;
actionButton.disabled = true;
actionButton.innerHTML = "Loading...";
fetch(`/rooms/rematch/${roomId}/${playerID}`)
.then(r=>{
if(r.status===200){
actionButton.disabled = true;
actionButton.innerHTML = "Waiting...";
console.log(`Submission Success`)
return 0;
}
throw Error("Failed submission");
})
.catch(()=>{
actionButton.disabled = false;
actionButton.innerHTML = prevText;
})
}
if(!source){
getRoom();
}
</script>
</body>
</html>