alpha

src/app/components/dialog/planet-dialog/planet-dialog.component.html

@@ -1,5 +1,5 @@
 <div class="ui-panel">
-  <div class="ui-title">
+  <div class="ui-title" cdkDragHandle>
     <div class="image"><img [src]="'sprites/planets/sm/'+ planet.image +'.png'" alt=""></div>
     <div>{{ planet.name }}</div>
   </div>
@@ -7,7 +7,8 @@
   
 
   <div class="ui-body">
-    <div class="ui-text-secondary" style="padding: 16px;">👥 Bevölkerung: {{ population }} 🚀</div>
+    @if (planet.hasHarbour) {
+      <div class="ui-text-secondary" style="padding: 16px;">👥 Bevölkerung: {{ population }} 🚀</div>
     <div class="ui-section">
       <div>Landebuchten: {{ planet.dockCapacity }}</div>
     </div>
@@ -21,7 +22,9 @@
     </div>
   
     <div class="ui-section">
-      <div>📦 Vorräte:</div>
+      <div style="display: inline-block;"
+      matTooltip="Jeder Planet braucht ausreichend Vorräte. Hat er genug Vorräte, ziehen Menschen in die Stadt des Raumhafens. Existieren nicht genug Rohstoffe, verlassen Menschen die Stadt. Je mehr Menschen hier leben, desto höher wird ihr Verbrauch."
+      >📦 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>
@@ -38,19 +41,42 @@
       </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>
+    @if (goodsInTransit.length > 0) {
+      <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>
+    }
+
+   
+    } @else {
+      <div class="ui-text-secondary" style="padding: 16px;">Baue einen Raumhafen um diesen Planeten zu erschließen, und auf die Ressourcen zuzugreifen. Es bildet sich eine kleine Siedlung um den Raumhafen. Je besser diese versorgt ist, desto mehr Menschen ziehen hin. Gibt es zu wenig Rohstoffe, verlassen die Menschen die Siedlung und ziehen ins Umland um sich selbst zu versorgen.</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>
 
-  <div class="ui-section">
-    <button class="button" (click)="upgradeHarbour()" >Raumhafen upgraden</button>
-    <button class="button">Siedeln</button>
+  <div class="ui-section flex">
+    @if (planet.hasHarbour) {
+      <button class="button" (click)="upgradeHarbour()"
+      matTooltip="Stellt eine zusätzliche Landebucht zur Verfügung. Pro Landebucht kann ein Raumschiff verladen werden. Das Upgrade kostet allerdings Geld."
+      >Raumhafen upgraden</button>
+    } @else {
+      <button class="button" (click)="buildHarbour()"
+      matTooltip="Baue einen Raumhafen um den Planeten anfliegen zu können."
+      >Raumhafen bauen</button>
+      
+    }
     <button class="button" (click)="close()" >Schließen</button>
   </div>
 </div>