41 lines
1.1 KiB
Svelte
41 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { serverIdentity } from '../server-labels.js';
|
|
let {
|
|
name,
|
|
mapLabel,
|
|
showGame = true
|
|
}: { name: string; mapLabel?: string; showGame?: boolean } = $props();
|
|
const identity = $derived(serverIdentity(name));
|
|
</script>
|
|
|
|
<span class="identity" title={name}
|
|
><span class="map">{mapLabel ?? identity.map}</span>{#if identity.lobby !== null}<span
|
|
class="lobby">Lobby {identity.lobby}</span
|
|
>{/if}{#if showGame && identity.game}<small>{identity.game}</small>{/if}</span
|
|
>
|
|
|
|
<style>
|
|
.identity {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: 4px 8px;
|
|
min-width: 0;
|
|
}
|
|
.map {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.lobby {
|
|
white-space: nowrap;
|
|
font-size: max(var(--text-xs), 0.85em);
|
|
color: var(--text-secondary);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
small {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
font-weight: var(--weight-regular);
|
|
}
|
|
</style>
|