87 lines
2.6 KiB
HTML
87 lines
2.6 KiB
HTML
<div class="ui-panel">
|
|
<div class="ui-title" cdkDragHandle>
|
|
Raumschiff einsetzen
|
|
</div>
|
|
|
|
<div class="ui-section">
|
|
<div>🚀 Neues Schiff: Pioneer-1</div>
|
|
<div style="margin-top: 12px; font-size: 12px;">{{ config.desciption }}</div>
|
|
<ul>
|
|
<li class="flex">
|
|
<div>Kosten: </div>
|
|
<div>{{ config.buyCost | number:'0.0-2'}} Credits</div>
|
|
</li>
|
|
<li class="flex">
|
|
<div>Frachtraum: </div>
|
|
<div>{{ config.cargoSize | number: '0.0-2'}} t</div>
|
|
</li>
|
|
<li class="flex">
|
|
<div>Max Geschwindigkeit: </div>
|
|
<div>{{ config.maxSpeed | number: '0.0-2'}} km/s</div>
|
|
</li>
|
|
|
|
<li class="flex">
|
|
<div>Unterhalt: </div>
|
|
<div>{{ config.cost | number: '0.0-2'}} Credits</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="ui-section">
|
|
<div>🛣️ Route festlegen:</div>
|
|
@if (availablePlanets.length == 0) {
|
|
<div style="margin-top: 12px;">
|
|
Um Planeten anfliegen zu können, musst du einen Weltraumhafen bauen.
|
|
</div>
|
|
}
|
|
<div class="flex route-containers">
|
|
<div class="route-column">
|
|
<div class="route-header">Ausgewählte Planeten</div>
|
|
<div class="route-selection" cdkDropList #selected="cdkDropList"
|
|
[cdkDropListData]="selectedPlanets"
|
|
[cdkDropListConnectedTo]="[available]"
|
|
(cdkDropListDropped)="drop($event)">
|
|
@for (planet of selectedPlanets; track planet.name) {
|
|
<div class="planet-option" cdkDrag>
|
|
{{ planet.name }}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="route-column">
|
|
<div class="route-header">Verfügbare Planeten</div>
|
|
|
|
<div class="route-selection" cdkDropList #available="cdkDropList"
|
|
[cdkDropListData]="availablePlanets"
|
|
[cdkDropListConnectedTo]="[selected]"
|
|
(cdkDropListDropped)="drop($event)">
|
|
@for (planet of availablePlanets; track planet.name) {
|
|
<div class="planet-option" cdkDrag>
|
|
{{ planet.name }}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui-section">
|
|
<div>Ausgewählte Route:</div>
|
|
<div class="flex route">
|
|
@for (planet of selectedPlanets; track planet.name) {
|
|
<div>{{ planet.name }}</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui-section flex">
|
|
|
|
<button class="button"
|
|
[disabled]="selectedPlanets.length < 2 || !canAffordShip()"
|
|
(click)="buyShip()">
|
|
Schiff kaufen
|
|
</button>
|
|
<button class="button" (click)="close()">Abbrechen</button>
|
|
</div>
|
|
</div> |