120 lines
3.3 KiB
HTML
120 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
|
|
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h1>FairHopper WS Client</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<div class="board-container">
|
|
<div id="board-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<h3>Players</h3>
|
|
<ul id="players-content"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
function createBoard(board) {
|
|
let html = "";
|
|
for (let y = 0; y < board.height; y++) {
|
|
let colHtml = "";
|
|
for (let x = 0; x < board.width; x++) {
|
|
colHtml += `<div class="cell" id="cell-${x}-${y}"> </div>`;
|
|
}
|
|
html += `
|
|
<div class="flex-grid">
|
|
${colHtml}
|
|
</div>
|
|
`;
|
|
}
|
|
document.getElementById("board-content").innerHTML = html;
|
|
}
|
|
|
|
function renderCellContent(x, y, content) {
|
|
const cell = document.getElementById(`cell-${x}-${y}`);
|
|
if (cell) {
|
|
cell.innerText = content;
|
|
}
|
|
}
|
|
|
|
function renderPlayerList(players) {
|
|
const html = players.map((player) => {
|
|
return `
|
|
<li>${player.name} (${player.move_count})</li>
|
|
`;
|
|
}).join("");
|
|
document.getElementById("players-content").innerHTML = html;
|
|
}
|
|
|
|
function renderPlayers(players) {
|
|
players.forEach(player => {
|
|
renderCellContent(player.position.x, player.position.y, "😎");
|
|
});
|
|
}
|
|
|
|
function getLayerObjectsOfType(layers, type) {
|
|
let objects = [];
|
|
layers.forEach(layer => {
|
|
objects = objects.concat(layer.objects.filter(obj => obj.type === type))
|
|
});
|
|
return objects;
|
|
}
|
|
|
|
function renderObstacles(layers) {
|
|
const objects = getLayerObjectsOfType(layers, "OBSTACLE");
|
|
objects.forEach(obj => {
|
|
renderCellContent(obj.position.x, obj.position.y, "🔥");
|
|
});
|
|
}
|
|
|
|
function renderDestination(position) {
|
|
renderCellContent(position.x, position.y, "🏠");
|
|
}
|
|
|
|
window.onload = function () {
|
|
const ws = new WebSocket('ws://localhost:8011/bla-tra');
|
|
|
|
ws.onmessage = function (event) {
|
|
const data = JSON.parse(event.data);
|
|
console.log("message received:", data)
|
|
|
|
createBoard(data.board);
|
|
renderObstacles(data.layers)
|
|
renderDestination(data.destination.position);
|
|
renderPlayerList(data.players);
|
|
renderPlayers(data.players);
|
|
}
|
|
|
|
ws.onopen = function () {
|
|
console.log("open");
|
|
}
|
|
|
|
ws.onclose = function () {
|
|
console.log("close");
|
|
}
|
|
|
|
ws.onerror = function () {
|
|
console.log("error");
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
</html> |