FE tweak
This commit is contained in:
Submodule fairhopper-sdk updated: 5e8981953f...10290dba54
@ -34,6 +34,13 @@
|
|||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
const BOARD_ICONS = {
|
||||||
|
PLAYER: "😀",
|
||||||
|
PLAYER_ON_DESTINATION: "😎",
|
||||||
|
OBSTACLE: "🔥",
|
||||||
|
DESTINATION: "🏠",
|
||||||
|
};
|
||||||
|
|
||||||
function createBoard(board) {
|
function createBoard(board) {
|
||||||
let html = "";
|
let html = "";
|
||||||
for (let y = 0; y < board.height; y++) {
|
for (let y = 0; y < board.height; y++) {
|
||||||
@ -76,7 +83,7 @@
|
|||||||
function renderPlayers(players) {
|
function renderPlayers(players) {
|
||||||
players.filter(player => player.active).forEach(player => {
|
players.filter(player => player.active).forEach(player => {
|
||||||
const cell = findCell(player.position);
|
const cell = findCell(player.position);
|
||||||
const playerIcon = player.reached_destination ? "😎" : "😀";
|
const playerIcon = player.reached_destination ? BOARD_ICONS.PLAYER_ON_DESTINATION : BOARD_ICONS.PLAYER;
|
||||||
if (cell) {
|
if (cell) {
|
||||||
const html = `
|
const html = `
|
||||||
<div class="player-tooltip">${player.name}</div>
|
<div class="player-tooltip">${player.name}</div>
|
||||||
@ -98,12 +105,12 @@
|
|||||||
function renderObstacles(layers) {
|
function renderObstacles(layers) {
|
||||||
const objects = getLayerObjectsOfType(layers, "OBSTACLE");
|
const objects = getLayerObjectsOfType(layers, "OBSTACLE");
|
||||||
objects.forEach(obj => {
|
objects.forEach(obj => {
|
||||||
renderCellContent(obj.position, "🔥");
|
renderCellContent(obj.position, BOARD_ICONS.OBSTACLE);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderDestination(position) {
|
function renderDestination(position) {
|
||||||
renderCellContent(position, "🏠");
|
renderCellContent(position, BOARD_ICONS.DESTINATION);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -13,6 +13,10 @@ body {
|
|||||||
grid-gap: 2px;
|
grid-gap: 2px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
.flex-grid:last-of-type {
|
||||||
|
padding-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
|||||||
Reference in New Issue
Block a user