Intis/fairhopper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak frontend and game logic

Browse Source
This commit is contained in:
Eden Kirin
2023-03-26 00:37:58 +01:00
parent 3ac07f3072
commit f54344a17f
5 changed files with 88 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/index.html
View File

@ -14,7 +14,6 @@
<body>
<div class="container-fluid">
<h1>FairHopper WS Client</h1>
<div class="row">
<div class="col-10">
<div class="board-container">
@ -23,7 +22,7 @@
</div>
<div class="col-2">
<h3>Players</h3>
<ul id="players-content"></ul>
<ul class="players" id="players-content"></ul>
</div>
</div>
</div>
@ -46,8 +45,12 @@
document.getElementById("board-content").innerHTML = html;
}
function renderCellContent(x, y, content) {
const cell = document.getElementById(`cell-${x}-${y}`);
function findCell(position) {
return document.getElementById(`cell-${position.x}-${position.y}`);
}
function renderCellContent(position, content) {
const cell = findCell(position);
if (cell) {
cell.innerText = content;
}
@ -56,7 +59,10 @@
function renderPlayerList(players) {
const html = players.map((player) => {
return `
<li>${player.name} (${player.move_count})</li>
<li class="${player.reached_destination ? "text-success" : ""}">
${player.name} (${player.move_count})
${player.reached_destination ? "✅" : ""}
</li>
`;
}).join("");
document.getElementById("players-content").innerHTML = html;
@ -64,7 +70,20 @@
function renderPlayers(players) {
players.forEach(player => {
renderCellContent(player.position.x, player.position.y, "😎");
const cell = findCell(player.position);
if (cell) {
const playerIcon = "😎";
const html = `
<div class="player-tooltip">${player.name}</div>
${playerIcon}
`;
cell.innerHTML = html;
}
//renderCellContent(player.position.x, player.position.y, "😎");
});
}
@ -79,12 +98,12 @@
function renderObstacles(layers) {
const objects = getLayerObjectsOfType(layers, "OBSTACLE");
objects.forEach(obj => {
renderCellContent(obj.position.x, obj.position.y, "🔥");
renderCellContent(obj.position, "🔥");
});
}
function renderDestination(position) {
renderCellContent(position.x, position.y, "🏠");
renderCellContent(position, "🏠");
}
window.onload = function () {

28
frontend/styles.css
View File

@ -17,4 +17,32 @@ body {
flex: 1;
text-align: center;
background-color: beige;
position: relative;
}
ul.players {
list-style-type: none;
padding-left: 0;
}
.player-tooltip {
position: absolute;
top: -25px;
font-size: 8pt;
padding: 2px 10px;
color: white;
background-color: darkred;
border-radius: 5px;
z-index: 1000;
}
.player-tooltip::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: darkred transparent transparent transparent;
}