-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgui.html
110 lines (104 loc) · 4.28 KB
/
gui.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>brot-gui</title>
</head>
<body>
<h1>brot-gui</h1>
<div id="players">
<div id="1__player" style="display: none; margin-bottom: 5px"><font id="1__color">███ </font><span id="1__name"></span></div>
<div id="2__player" style="display: none; margin-bottom: 5px"><font id="2__color">███ </font><span id="2__name"></span></div>
<div id="3__player" style="display: none; margin-bottom: 5px"><font id="3__color">███ </font><span id="3__name"></span></div>
<div id="4__player" style="display: none; margin-bottom: 5px"><font id="4__color">███ </font><span id="4__name"></span></div>
<div id="5__player" style="display: none; margin-bottom: 5px"><font id="5__color">███ </font><span id="5__name"></span></div>
<div id="6__player" style="display: none; margin-bottom: 5px"><font id="6__color">███ </font><span id="6__name"></span></div>
</div>
<canvas id="canvas", width="400", height="400"></canvas>
<h2>Duration between moves (milliseconds):</h2>
<div id="currentSpeed">Current speed: 200</div>
<button onclick="setSpeed(10)">10</button>
<button onclick="setSpeed(20)">20</button>
<button onclick="setSpeed(50)">50</button>
<button onclick="setSpeed(100)">100</button>
<button onclick="setSpeed(200)">200</button>
<button onclick="setSpeed(500)">500</button>
<button onclick="setSpeed(1000)">1000</button>
<script type="text/javascript">
const URL = "ws://localhost:8080/spe_ed/gui"
const SCALING = 16;
const colors = ["#dddddd", "#ff0000", "#00ff00", "#0000ff", "#00ffff", "#ffff00", "#ff00ff"];
const canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = colors[0]
let webSocket = new WebSocket("ws://localhost:8080/spe_ed/gui");
let width, height;
let speed = 200;
const currentSpeedDiv = document.getElementById("currentSpeed");
webSocket.onopen = function (event) {
console.log("socket is open");
setSpeed(speed);
};
webSocket.onclose = function(event) {
console.log("socket was closed");
};
webSocket.onerror = function(event) {
console.log("error");
}
function drawCells(status) {
for (let y = 0; y < status.height; y++) {
for (let x = 0; x < status.width; x++) {
const index = status.cells[y][x];
if (index < 0) {
ctx.fillStyle = "#000000";
} else {
ctx.fillStyle = colors[index];
}
ctx.fillRect(x * SCALING, y * SCALING, SCALING, SCALING);
}
}
}
function displayPlayers(status) {
for (const player of Object.keys(status.players)) {
const playerDiv = document.getElementById(player + '__player');
playerDiv.style.display = 'block';
const colorFont = document.getElementById(player + '__color');
colorFont.style.color = colors[player];
const nameSpan = document.getElementById(player + '__name');
nameSpan.innerText = status.players[player].name;
}
}
function drawPlayer(player) {
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = "5";
ctx.strokeRect(player.x * SCALING, player.y * SCALING, SCALING, SCALING);
}
function setSpeed(s) {
speed = s;
if (webSocket.readyState === WebSocket.OPEN) {
webSocket.send(JSON.stringify({speed}));
}
currentSpeedDiv.innerText = "Current speed: " + speed
}
webSocket.onmessage = function(event) {
const status = JSON.parse(event.data);
console.log(status)
if (width != status.width) {
canvas.setAttribute("width", status.width * SCALING);
width = status.width;
// ctx = canvas.getContext("2d");
}
if (height != status.height) {
canvas.setAttribute("height", status.height * SCALING);
height = status.height;
// ctx = canvas.getContext("2d");
}
drawCells(status)
for (const player of Object.values(status.players)) {
drawPlayer(player)
}
displayPlayers(status);
};
</script>
</body>
</html>