56 lines
1.7 KiB
HTML
56 lines
1.7 KiB
HTML
<div class="ui-panel">
|
|
<div class="ui-title">
|
|
<div class="image"><img [src]="'sprites/planets/sm/'+ planet.image +'.png'" alt=""></div>
|
|
<div>{{ planet.name }}</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="ui-body">
|
|
<div class="ui-text-secondary" style="padding: 16px;">👥 Bevölkerung: {{ population }} 🚀</div>
|
|
<div class="ui-section">
|
|
<div>Landebuchten: {{ planet.dockCapacity }}</div>
|
|
</div>
|
|
<div class="ui-section">
|
|
<div>🏭 Produktion:</div>
|
|
<ul>
|
|
@for (item of producedItems; track $index) {
|
|
<li>{{ item.type }}: +{{ item.productionRate | number:'0.0-2' }}/s</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="ui-section">
|
|
<div>📦 Vorräte:</div>
|
|
@for (item of storedItems; track $index) {
|
|
<div class="ui-progress-bar" [ngClass]="item.type.toLowerCase()">
|
|
<div class="progress-fill" [style.width.%]="getFillPercentange(item)">{{ item.type }}: {{ item.amount | number:'0.0-1' }}</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="ui-section">
|
|
<div>📦 Verbrauch:</div>
|
|
<ul>
|
|
@for (item of consumedItems; track $index) {
|
|
<li>{{ item.type }}: {{ item.demandRate * planet.population | number:'0.0-1' }}/s</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="ui-section">
|
|
<div>📦 In Lieferung:</div>
|
|
<ul>
|
|
@for (item of goodsInTransit; track $index) {
|
|
<li>{{ item.type }}: {{ item.amount | number:'0.0-1' }}</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui-section">
|
|
<button class="button" (click)="upgradeHarbour()" >Raumhafen upgraden</button>
|
|
<button class="button">Siedeln</button>
|
|
<button class="button" (click)="close()" >Schließen</button>
|
|
</div>
|
|
</div> |