buy ships

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

@@ -71,8 +71,7 @@
     
   </div>
   <div class="ui-section flex">
-    <button class="button">Produktion upgraden</button>
+    <button class="button" (click)="sell()" >Verkaufen</button>
-    <button class="button">Siedeln</button>
     <button class="button" (click)="onClick($event); close();" >Schließen</button>
   </div>
   

src/app/components/dialog/ship-dialog/ship-dialog.component.scss

@@ -5,7 +5,7 @@
   position: absolute;
   top: 24px;
   left: 24px;
-  // width: 240px;
+  width: 400px;
   // height: 240px;
   // background-color: var(--background-color);
   // color: var(--primary-color);

src/app/components/dialog/ship-dialog/ship-dialog.component.ts

@@ -42,4 +42,8 @@ export class ShipDialogComponent {
   get activeRoute(): string[] {
     return this.ship.route?.planetNames ?? []
   }
+
+  sell() {
+    this.gameService.sellShip(this.ship);
+  }
 }

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

@@ -5,6 +5,7 @@
 
   <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>

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

@@ -24,11 +24,12 @@ export class BuyComponent {
     loadingSpeed: 25,
     maxSpeed: 500,
     planetRoute: [],
-    buyCost: 2000
+    buyCost: 2000,
+    desciption: 'Ein kleines, schnelles Schiff. Es hat wenig Platz für Ladung, lädt aber schnell und ist sehr wendig.'
   }
 
   canAffordShip() {
-    return this.gameService.money >= 3000;
+    return this.gameService.money >= this.config.buyCost;
   }
 
   buyShip() {

src/app/components/tutorial/welcome/welcome.component.html

@@ -1,6 +1,6 @@
 <div class="ui-panel welcome-container">
   <div class="ui-title">
-    <h1>🚀 Willkommen bei StellarLines</h1>
+    <h1>🚀 Willkommen bei Stellar Lines</h1>
   </div>
 
   <div class="ui-body">
@@ -30,13 +30,13 @@
 
     <div class="ui-section">
       <h3>🎮 So spielst du:</h3>
-      <ol>
+      <ul>
         <li>Wähle einen Planeten und baue einen Raumhafen</li>
         <li>Kaufe dein erstes Handelsschiff (Hierfür brauchst du 2 Planeten)</li>
         <li>Lege Handelsrouten zwischen Planeten fest</li>
         <li>Versorge die Siedlungen mit Rohstoffen</li>
         <li>Erwirtschafte Gewinne durch geschickten Handel</li>
-      </ol>
+      </ul>
     </div>
 
     <div class="ui-section tips">
@@ -45,13 +45,15 @@
         Achte auf die Bedürfnisse der Siedlungen. Gut versorgte Kolonien wachsen und 
         erhöhen ihren Bedarf an Waren. Bei Mangel wandern die Siedler ab! Für den Anfang benötigen die Kolonien nur Nahrung und Wasser. Mit wachsender Bevölkerung steigt auch der Bedarf an weiteren Rohstoffen.
         <br><br>
-        Du beginnst mit 10.000 Credits. Gib sie weise aus, Schiffe und Raumhäfen kosten Unterhalt. Je mehr Waren du transportierst, desto mehr Geld verdienst du auch. Planeten kaufen allerdings nur Waren, die sie auch brauchen.
+        Du beginnst mit {{ gameService.money | number }} Credits. Gib sie weise aus, Schiffe und Raumhäfen kosten Unterhalt. Je mehr Waren du transportierst, desto mehr Geld verdienst du auch. Planeten kaufen allerdings nur Waren, die sie auch brauchen.
         Schiffe auf Handelsrouten fliegen die Planeten ab, und versorgen sie automatisch mit den Gütern die sie benötigen.
+        <br><br>
+        Gute Planeten für den Start sind Terra Nova und Aqualis, da sie Nahrung und Wasser produzieren.
       </p>
     </div>
   </div>
 
   <div class="ui-section">
-    <button class="button" (click)="close()" >Spiel starten</button>
+    <button class="button" (click)="close()" >Starten</button>
   </div>
 </div>

src/app/components/tutorial/welcome/welcome.component.scss

@@ -17,4 +17,8 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+}
+
+p {
+  font-size: 13px;
 }

src/app/components/tutorial/welcome/welcome.component.ts

@@ -1,9 +1,10 @@
 import { Component, inject } from '@angular/core';
 import { GameService } from '../../../service/game.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-welcome',
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './welcome.component.html',
   styleUrl: './welcome.component.scss'
 })

src/app/model/ships/ship.model.ts

@@ -13,6 +13,7 @@ export interface ShipConfig {
   cost: number;
   planetRoute: Planet[];
   buyCost: number;
+  desciption: string;
 }
 
 export class Ship {
@@ -26,8 +27,12 @@ export class Ship {
   public name = "Pioneer-01-" + Math.round(Math.random() * 100);
   public loadingSpeed = 3.5;
   public cost = 0.5
+  public buyCost = 0;
+  public description: string = "";
 
-  private updateInterval = interval(1000);
+  private updateInterval = interval(1000).subscribe(() => {
+    this.update();
+  })
   private gameService: GameService;
 
   constructor(gameService: GameService, config: ShipConfig) {
@@ -37,11 +42,10 @@ export class Ship {
     this.maxSpeed = config.maxSpeed;
     this.loadingSpeed = config.loadingSpeed;
     this.cost = config.cost;
+    this.buyCost = config.buyCost;
+    this.description = config.desciption;
     this.route = new TradeRoute(config.planetRoute)
 
-    this.updateInterval.subscribe(() => {
-      this.update();
-    })
   }
 
 
@@ -163,6 +167,11 @@ export class Ship {
   update() {
     this.gameService.money -= this.cost;
   }
+
+
+  sell() {
+    this.updateInterval.unsubscribe();
+  }
 }
 
 export enum FlightMode {

src/app/scene/map.scene.ts

@@ -101,6 +101,14 @@ export class MapScene extends Phaser.Scene {
       this.physics.world.enable(ui);
       this.ships.push(ui);
     })
+
+    this.gameService.onShipDestroy.subscribe(ship => {
+      const ui = this.ships.find(i => i.model = ship);
+      if (ui) {
+        ui.destroy();
+      }
+      this.ships = this.ships.filter(s => s != ui);
+    })
     // this.enableMouseLogging();
     
   }

src/app/service/game.service.ts

@@ -15,9 +15,10 @@ export class GameService {
 
   showTutorial = true;
 
-  public money = 10000;
+  public money = 12000;
 
   onShipCreate: EventEmitter<Ship> = new EventEmitter();
+  onShipDestroy: EventEmitter<Ship> = new EventEmitter();
 
   constructor() {}
 
@@ -43,4 +44,11 @@ export class GameService {
     this.ships.push(ship);
     this.onShipCreate.emit(ship);
   }
+
+  sellShip(ship: Ship) {
+    this.ships = this.ships.filter(s => s != ship);
+    ship.sell();
+    this.onShipDestroy.emit(ship);
+    this.money += ship.buyCost;
+  }
 }