71 collection

assets/levels/brandenburg.json

@@ -69,5 +69,6 @@
             "first": "Rangsdorf",
             "second": "Mahlow"
         }
-    ]
+    ],
+    "playerStock": 3
 }

assets/levels/mitte-in-misery.json

@@ -46,5 +46,6 @@
             "first": "Mitte",
             "second": "Spandau"
         }
-    ]
+    ],
+    "playerStock": 3
 }

assets/levels/wesnoth.json

@@ -58,5 +58,6 @@
             "first": "Dan Tonk",
             "second": "Careyn"
         }
-    ]
+    ],
+    "playerStock": 3
 }

src/scenes/ILevel.ts

@@ -1,6 +1,7 @@
 export interface ILevel {
     cities: ICity[];
     travelPaths: Array<{ first: string; second: string }>;
+    playerStock: number;
 }
 
 export interface ICity {

src/scenes/Player.test.ts

@@ -7,10 +7,14 @@ describe("Player", () => {
     it("constructs a new player", () => {
         const graph = new Graph();
 
-        const result = new Player(graph, {
-            name: "Athens",
-            economy: { stock: 1 },
-        });
+        const result = new Player(
+            graph,
+            {
+                name: "Athens",
+                economy: { stock: 1 },
+            },
+            3
+        );
 
         expect(result).to.exist;
     });

src/scenes/Player.ts

@@ -6,7 +6,7 @@ export class Player implements IPlayer {
     constructor(
         private graph: Graph,
         private location: ILocation,
-        public stock = 3,
+        public stock: number,
         public turn = 0,
         public factories = 0
     ) {}

src/scenes/levels.ts

@@ -10,6 +10,7 @@ const level1: ILevel = {
         { first: "Athens", second: "Bern" },
         { first: "Bern", second: "Cairo" },
     ],
+    playerStock: 3,
 };
 const level2: ILevel = {
     cities: [
@@ -24,6 +25,7 @@ const level2: ILevel = {
         { first: "Bern", second: "Cairo" },
         { first: "Dublin", second: "Athens" },
     ],
+    playerStock: 3,
 };
 
 export const levelArray = [level1, level2];

src/scenes/logicBuilder.ts

@@ -19,7 +19,11 @@ export class LogicBuilder {
         level.travelPaths.forEach(edge => {
             graph.setEdge(edge.first, edge.second);
         });
-        const player = new Player(graph, graph.node(level.cities[0].name));
+        const player = new Player(
+            graph,
+            graph.node(level.cities[0].name),
+            level.playerStock
+        );
         return {
             graph,
             player,

src/scenes/mainScene.ts

@@ -30,6 +30,7 @@ export class MainScene extends Scene {
     private playerTurnInfo!: GameObjects.Text;
     private buildFactoryButton!: GameObjects.Image;
     private level = 2;
+    private travelPathLines!: GameObjects.Graphics;
 
     constructor() {
         super({
@@ -67,6 +68,9 @@ export class MainScene extends Scene {
             .addEventListener("change", event => this.handleFileSelect(event));
 
         const cityData = levelArray[this.level - 1].cities;
+        this.travelPathLines = this.add.graphics({
+            lineStyle: { width: 4, color: 0x0 },
+        });
         const logicObjects = LogicBuilder.create(levelArray[this.level - 1]);
         this.player = logicObjects.player;
         this.graph = logicObjects.graph;
@@ -76,7 +80,6 @@ export class MainScene extends Scene {
         this.drawEdges(cityData);
         this.addCities(cityData);
         this.addPlayerInfo();
-
         this.addLevelButton();
         this.addLoadLevelFromFileButton();
     }
@@ -86,6 +89,54 @@ export class MainScene extends Scene {
         this.playerTurnInfo.setText(this.player.turn.toString());
         this.updateBuildFactoryButton();
         this.updateCityInfos();
+        this.updateVisibilityTradeButtons();
+    }
+
+    private defineContainerDrag(container: GameObjects.Container) {
+        this.input.setDraggable(container);
+        this.input.on("drag", (pointer, gameObject, dragX, dragY) => {
+            gameObject.x = dragX;
+            gameObject.y = dragY;
+            this.updateEdges(this.containerArray);
+            // to prevent turn advance after dragging
+            container.off("pointerup");
+            container.on("pointerdown", () =>
+                this.defineContainerClick(container)
+            );
+        });
+    }
+
+    private updateVisibilityTradeButtons() {
+        this.containerArray.forEach(container => {
+            (container.getAt(5) as GameObjects.Image).setVisible(
+                container.name === this.player.getLocationName()
+            );
+            (container.getAt(6) as GameObjects.Image).setVisible(
+                container.name === this.player.getLocationName()
+            );
+        });
+    }
+
+    private updateEdges(containerArray: GameObjects.Container[]) {
+        this.travelPathLines.clear();
+        this.travelPathLines = this.add.graphics({
+            lineStyle: { width: 4, color: 0x0 },
+        });
+        this.graph.edges().forEach(edge => {
+            const nodeV = containerArray.find(
+                container => edge.v === container.name
+            );
+            const nodeW = containerArray.find(
+                container => edge.w === container.name
+            );
+            const line = new Phaser.Geom.Line(
+                nodeV.x,
+                nodeV.y,
+                nodeW.x,
+                nodeW.y
+            );
+            this.travelPathLines.strokeLineShape(line);
+        });
     }
 
     private handleFileSelect(event: any) {
@@ -118,13 +169,21 @@ export class MainScene extends Scene {
             (container.getAt(1) as GameObjects.Text).setText(
                 getNode(this.graph, container.name).economy.stock.toString()
             );
+            const production = getNode(this.graph, container.name).economy
+                .production;
             // getAt(2) returns the production text
-            (container.getAt(2) as GameObjects.Text).setText(
-                getNode(
-                    this.graph,
-                    container.name
-                ).economy.production.toString()
-            );
+            const productionText = (container.getAt(
+                2
+            ) as GameObjects.Text).setText(production.toString());
+            if (production < 0) {
+                productionText.setColor("#f80606");
+            }
+            if (production > 0) {
+                productionText.setColor("#0db80b");
+            }
+            if (production === 0) {
+                productionText.setColor("#000000");
+            }
         });
     }
 
@@ -170,6 +229,7 @@ export class MainScene extends Scene {
         getNode(this.graph, locationName).economy.production++;
         this.player.factories--;
         if (this.isWin()) {
+            this.sound.stopAll();
             this.scene.add("GoodEndScene", GoodEndScene, true, {
                 x: 400,
                 y: 300,
@@ -220,19 +280,15 @@ export class MainScene extends Scene {
                 .setScale(0.5)
                 .setInteractive();
             plus.on("pointerup", () => {
-                if (name === this.player.getLocationName()) {
-                    this.player.store();
-                }
+                this.player.store();
             });
 
             const minus = this.add
                 .image(-105, 30, "minus")
                 .setScale(0.5)
                 .setInteractive();
             minus.on("pointerup", () => {
-                if (name === this.player.getLocationName()) {
-                    this.player.take();
-                }
+                this.player.take();
             });
 
             const container = this.add.container(city.x, city.y, [
@@ -245,45 +301,47 @@ export class MainScene extends Scene {
                 minus,
                 nameText,
             ]);
+            container.setDepth(1);
             container.setName(name);
             this.containerArray.push(container);
         });
         this.containerArray.forEach(container => {
-            const index = this.containerArray.indexOf(container);
             container.setSize(170, 60);
             if (container.name === this.player.getLocationName()) {
                 (container.getAt(0) as GameObjects.Image).setTint(0x44ff44);
             }
-            container.setInteractive();
-            container.on("pointerup", () => {
-                if (
-                    // no edges between city and itself
-                    this.graph.hasEdge(
-                        this.player.getLocationName(),
-                        container.name
-                    )
-                ) {
-                    this.player.setLocation(
-                        getNode(this.graph, container.name)
-                    );
-                    (container.getAt(0) as GameObjects.Image).setTint(0x44ff44);
-                    this.containerArray.forEach(cont => {
-                        const consumCity = getNode(this.graph, cont.name);
-                        consumCity.economize();
-                        if (consumCity.economy.stock < 0) {
-                            this.endScene();
-                        }
-                    });
-                    this.containerArray.forEach((other, otherIndex) => {
-                        if (!(index === otherIndex)) {
-                            const otherImg = other.getAt(
-                                0
-                            ) as GameObjects.Image;
-                            otherImg.clearTint();
-                        }
-                    });
-                }
-            });
+            this.defineContainerClick(container);
+            this.defineContainerDrag(container);
+        });
+    }
+
+    private defineContainerClick(container: GameObjects.Container) {
+        const index = this.containerArray.indexOf(container);
+        container.setInteractive();
+        container.on("pointerup", () => {
+            if (
+                // no edges between city and itself
+                this.graph.hasEdge(
+                    this.player.getLocationName(),
+                    container.name
+                )
+            ) {
+                this.player.setLocation(getNode(this.graph, container.name));
+                (container.getAt(0) as GameObjects.Image).setTint(0x44ff44);
+                this.containerArray.forEach(cont => {
+                    const consumCity = getNode(this.graph, cont.name);
+                    consumCity.economize();
+                    if (consumCity.economy.stock < 0) {
+                        this.badEndScene();
+                    }
+                });
+                this.containerArray.forEach((other, otherIndex) => {
+                    if (!(index === otherIndex)) {
+                        const otherImg = other.getAt(0) as GameObjects.Image;
+                        otherImg.clearTint();
+                    }
+                });
+            }
         });
     }
 
@@ -314,6 +372,7 @@ export class MainScene extends Scene {
     }
 
     private drawEdges(cities: ICity[]) {
+        this.addLineGraphics(4, 0x0);
         this.graph.edges().forEach(edge => {
             const nodeV = cities.find(city => edge.v === city.name);
             const nodeW = cities.find(city => edge.w === city.name);
@@ -323,19 +382,24 @@ export class MainScene extends Scene {
                 nodeW.x,
                 nodeW.y
             );
-            const graphics = this.add.graphics({
-                lineStyle: { width: 4, color: 0x0 },
-            });
-            graphics.strokeLineShape(line);
+            this.travelPathLines.strokeLineShape(line);
+        });
+    }
+
+    private addLineGraphics(thickness: number, hexDecimal: number) {
+        this.travelPathLines = this.add.graphics({
+            lineStyle: { width: thickness, color: hexDecimal },
         });
     }
 
-    private endScene() {
+    private badEndScene() {
+        this.sound.stopAll();
         this.scene.add("badEndScene", BadEndScene, true, { x: 400, y: 300 });
     }
 
     private toggleLevel(selectedLevel?: number) {
         this.level = selectedLevel || (this.level % levelArray.length) + 1;
+        this.sound.stopAll();
         this.scene.restart();
     }
 }