61 lines
2.1 KiB
HTML
61 lines
2.1 KiB
HTML
<section class="world-page" aria-label="World View">
|
|
@if (worldStore.currentLocation(); as location) {
|
|
<section class="world-page__scene" [attr.aria-label]="'World map at ' + location.name">
|
|
<div class="world-page__atmosphere" aria-hidden="true"></div>
|
|
<p class="world-page__location-title">{{ location.name }}</p>
|
|
|
|
<svg
|
|
class="world-page__path"
|
|
viewBox="0 0 100 100"
|
|
preserveAspectRatio="none"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M 21.71 37.61 C 26 39, 29 50, 32.70 51.55" pathLength="1" />
|
|
</svg>
|
|
|
|
<app-location-node
|
|
[class]="'world-page__node world-page__node--' + location.key"
|
|
[location]="{ id: location.id, key: location.key, name: location.name }"
|
|
[current]="true"
|
|
[disabled]="true"
|
|
/>
|
|
|
|
@for (connection of location.connections; track connection.targetLocation.id) {
|
|
<app-location-node
|
|
[class]="'world-page__node world-page__node--' + connection.targetLocation.key"
|
|
[location]="connection.targetLocation"
|
|
[selected]="
|
|
worldStore.selectedConnection()?.targetLocation?.id === connection.targetLocation.id
|
|
"
|
|
[disabled]="worldStore.loading() || worldStore.currentTravel()?.status !== 'IDLE'"
|
|
(choose)="selectConnection(connection)"
|
|
/>
|
|
}
|
|
</section>
|
|
|
|
<app-travel-panel
|
|
class="world-page__travel-panel"
|
|
[selectedConnection]="worldStore.selectedConnection()"
|
|
[currentTravel]="worldStore.currentTravel()"
|
|
[remainingSeconds]="worldStore.remainingSeconds()"
|
|
[busy]="worldStore.loading()"
|
|
(travelStart)="worldStore.startTravel()"
|
|
/>
|
|
} @else {
|
|
<section class="world-page__empty" aria-live="polite">
|
|
<p>Preparing world map.</p>
|
|
</section>
|
|
}
|
|
|
|
@if (worldStore.loading()) {
|
|
<p class="world-page__loading" role="status">Loading world state…</p>
|
|
}
|
|
|
|
@if (worldStore.error(); as error) {
|
|
<section class="world-page__error" role="alert">
|
|
<p>{{ error }}</p>
|
|
<button type="button" data-world-retry (click)="retry()">Retry</button>
|
|
</section>
|
|
}
|
|
</section>
|