trading

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

@@ -1,24 +1,45 @@
-@if (planet) {
-  <h1 mat-dialog-title>{{planet.name}}</h1>
-  <mat-dialog-content>
-    <div>Bevölkerung: {{ planet.population | number:'0.0-0' }}</div>
+<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="goods">
-      <h3>Güter:</h3>
-      @for (item of planet.getAllGoods(); track $index) {
-        <div>
-          {{ item.type }}: {{ item.amount }}
+  <div class="ui-body">
+    <div class="ui-text-secondary" style="padding: 16px;">👥 Bevölkerung: {{ population }} 🚀</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="goods">
-      <h3>Angebotene Güter:</h3>
-      @for (item of offeredItems(); track $index) {
-        {{ item.type }}: {{ item.amount | number }} / {{ item.productionStorage | number }}
-      }
+    <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>
-  </mat-dialog-content>
-}
+  </div>
+
+  <div class="ui-section">
+    <button class="button">Produktion upgraden</button>
+    <button class="button">Siedeln</button>
+    <button class="button" (click)="close()" >Schließen</button>
+  </div>
+</div>