alpha

src/app/components/ships/buy/buy.component.html

@@ -0,0 +1,86 @@
+<div class="ui-panel">
+  <div class="ui-title" cdkDragHandle>
+    Raumschiff einsetzen
+  </div>
+
+  <div class="ui-section">
+    <div>🚀 Neues Schiff: Pioneer-1</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>