Merge pull request #11 from Abstractolotl/feature/buy-tiles

Feature: Buy Properties

package.json

@@ -25,5 +25,5 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.5"
   },
-  "buildNumber": "master-C77"
+  "buildNumber": "board_rework-C80"
 }

src/board/board-tile-popup.ts

@@ -0,0 +1,62 @@
+import {COLOR_PRIMARY, COLOR_PRIMARY_2, FONT_STYLE_BODY, FONT_STYLE_BUTTON, FRAME_PADDING} from "@/style.ts";
+import {AzNopolyButton} from "@/ui/button.ts";
+
+export default class BoardTilePopUp extends Phaser.GameObjects.Container {
+
+    private graphics!: Phaser.GameObjects.Graphics;
+    private titleText!: Phaser.GameObjects.Text;
+    private priceText!: Phaser.GameObjects.Text;
+
+    private submitButton!: AzNopolyButton;
+    private cancelButton!: AzNopolyButton;
+
+    constructor(scene: Phaser.Scene, x: number, y: number, bounds = {width: 300, height: 200}, onCancel: () => void, onSubmit: () => void) {
+        super(scene, x - (bounds.width / 2), y - (bounds.height / 2));
+
+        this.width = bounds.width;
+        this.height = bounds.height;
+
+        this.graphics = new Phaser.GameObjects.Graphics(scene);
+
+        this.titleText = new Phaser.GameObjects.Text(scene, this.width*0.5, -FRAME_PADDING - 45, "PLACEHOLDER", FONT_STYLE_BUTTON);
+        this.titleText.setOrigin(0.5, 0);
+
+        this.priceText = new Phaser.GameObjects.Text(scene, this.width*0.5, this.height - 150, "Price: ???", FONT_STYLE_BODY);
+        this.priceText.setOrigin(0.5, 0.5);
+
+        this.cancelButton = new AzNopolyButton(scene, "Cancel", 0, this.height - 50, this.width, 50, onCancel);
+        this.submitButton = new AzNopolyButton(scene, "Accept", 0, this.height - 100, this.width, 50, onSubmit);
+
+        this.add(this.graphics);
+        this.add(this.priceText)
+        this.add(this.titleText);
+        this.add(this.submitButton);
+        this.add(this.cancelButton);
+    }
+
+    show(upgrade: boolean, price: number) {
+        this.setVisible(true);
+        this.redrawUi()
+
+        if (!upgrade) {
+            this.titleText.setText("Buy Property");
+        } else {
+            this.titleText.setText("Upgrade Property");
+        }
+
+        this.priceText.setText("Price: " + price);
+    }
+
+    hide() {
+        this.setVisible(false);
+    }
+
+    private redrawUi() {
+        this.graphics.clear();
+        this.graphics.fillStyle(COLOR_PRIMARY_2);
+        this.graphics.fillRect(-FRAME_PADDING, -FRAME_PADDING - 50, this.width + FRAME_PADDING * 2, this.height + FRAME_PADDING * 2 + 50);
+
+        this.graphics.fillStyle(COLOR_PRIMARY);
+        this.graphics.fillRect(-FRAME_PADDING + 5, -FRAME_PADDING - 50 + 5, this.width + FRAME_PADDING * 2 - 10, 45);
+    }
+}

src/board/board-tile.ts

@@ -38,10 +38,10 @@ export default class BoardTile extends Phaser.GameObjects.Container {
 
         this.image.setInteractive();
         this.image.on(Phaser.Input.Events.POINTER_OVER, () => {
-            this.image.setTint(0xaaaaaa);
+            this.image.setAlpha(0.75)
         });
         this.image.on(Phaser.Input.Events.POINTER_OUT, () => {
-            this.updateTint();
+            this.image.setAlpha(1)
         });
         this.updateTint();
 

src/board/board.ts

@@ -1,64 +1,63 @@
-import GameObject = Phaser.GameObjects.Shape;
-import { PacketType } from "../types/client";
-import AzNopolyGame from "../game";
 import { getColorFromUUID } from "../util";
 import BoardTile from "./board-tile.ts";
-import BoardGenerator from "./board-generator.ts";
 import { TileOrientation, TileType } from "../types/board.ts";
 
 interface BoardPlayer {
-    gameObject: GameObject,
+    gameObject: Phaser.GameObjects.Shape,
     position: number,
 }
 
 const PLAYER_SIZE = 16;
-const BOARD_SIDE_LENGTH = 5; // Without corners
 export default class GameBoard extends Phaser.GameObjects.Container {
 
     public static preload(scene: Phaser.Scene) {
         BoardTile.preload(scene);
     }
 
     private players: Map<string, BoardPlayer>;
-    private boardTiles: BoardTile[];
-    private tiles: TileType[];
+    private boardTiles!: BoardTile[];
+    private boardLength: number;
+    private tiles!: TileType[];
 
-    constructor(seed: string, scene: Phaser.Scene, x: number, y: number, size: number) {
+    constructor(scene: Phaser.Scene, x: number, y: number, size: number, boardLength: number) {
         super(scene, x, y);
         this.players = new Map();
         this.width = size;
         this.height = size;
+        this.boardLength = boardLength;
+    }
 
-        this.tiles = BoardGenerator.generateFields(seed, BOARD_SIDE_LENGTH);
-        this.boardTiles = GameBoard.generateBoardTiles(scene, this.tiles, size / (BOARD_SIDE_LENGTH + 4));
+    public init(tiles: TileType[]) {
+        this.tiles = tiles;
+        this.boardTiles = this.generateBoardTiles(this.scene, this.tiles, this.width / (this.boardLength + 4));
         this.boardTiles.forEach(e => this.add(e));
     }
 
-    private static generateBoardTiles(scene: Phaser.Scene, tiles: TileType[], tileWidth: number) {
+    private generateBoardTiles(scene: Phaser.Scene, tiles: TileType[], tileWidth: number) {
         const size = tileWidth;
-        const length = BOARD_SIDE_LENGTH + 2;
+        const length = this.boardLength + 2;
 
         const boardTiles: BoardTile[] = [];
-        tiles.length = BOARD_SIDE_LENGTH * 4 + 4;
+        tiles.length = this.boardLength * 4 + 4;
         let index;
-        for (let i = 0; i < BOARD_SIDE_LENGTH; i++) {
-            index = 1 + (1 + BOARD_SIDE_LENGTH) * 0 + i;
+        for (let i = 0; i < this.boardLength; i++) {
+            index = this.boardLength - i;
             boardTiles[index] = new BoardTile(scene, size * (i + 2)     , size * length, size      , size * 2  , tiles[index], TileOrientation.UP);
-            index = 1 + (1 + BOARD_SIDE_LENGTH) * 1 + i;
+            index = 1 + (this.boardLength * 2) - i;
             boardTiles[index] = new BoardTile(scene, 0                  , size * (i + 2)    , size * 2  , size      , tiles[index], TileOrientation.RIGHT);
-            index = 1 + (1 + BOARD_SIDE_LENGTH) * 2 + i;
+            index = 1 + (1 + this.boardLength) * 2 + i;
             boardTiles[index] = new BoardTile(scene, size * (i + 2)     , 0                 , size      , size * 2  , tiles[index], TileOrientation.DOWN);
-            index = 1 + (1 + BOARD_SIDE_LENGTH) * 3 + i;
+            index = 1 + (1 + this.boardLength) * 3 + i;
             boardTiles[index] = new BoardTile(scene, size * length , size * (i + 2)    , size * 2  , size      , tiles[index], TileOrientation.LEFT);
         }
 
-        index = (BOARD_SIDE_LENGTH + 1) * 0;
+        index = (this.boardLength + 1) * 0;
         boardTiles[index] = new BoardTile(scene, size * length, size * length, size * 2, size * 2, tiles[index], TileOrientation.CORNER);
-        index = (BOARD_SIDE_LENGTH + 1) * 1;
+        index = (this.boardLength + 1) * 1;
         boardTiles[index] = new BoardTile(scene, 0, size * length, size * 2, size * 2, tiles[index], TileOrientation.CORNER);
-        index = (BOARD_SIDE_LENGTH + 1) * 2;
+        index = (this.boardLength + 1) * 2;
         boardTiles[index] = new BoardTile(scene, 0, 0, size * 2, size * 2, tiles[index], TileOrientation.CORNER);
-        index = (BOARD_SIDE_LENGTH + 1) * 3;
+        index = (this.boardLength + 1) * 3;
         boardTiles[index] = new BoardTile(scene, size * length, 0, size * 2, size * 2, tiles[index], TileOrientation.CORNER);
         return boardTiles;
     }
@@ -101,6 +100,35 @@ export default class GameBoard extends Phaser.GameObjects.Container {
         return this.boardTiles[player.position % this.boardTiles.length];
     }
 
+    teleportPlayerToPosition(uuid: string, pos: number) {
+        const player = this.players.get(uuid);
+        if (!player) {
+            throw new Error(`Player with UUID ${uuid} does not exist!`);
+        }
+
+        player.position = pos;
+        const coords = this.boardTiles[player.position % this.boardTiles.length].getPlayerCenter();
+
+        player.gameObject.setPosition(coords.x, coords.y)
+        this.checkPlayerCollisions();
+
+        return this.boardTiles[player.position % this.boardTiles.length];
+    }
+
+    getTile(pos: number) {
+        return this.boardTiles[pos % this.boardTiles.length];
+    }
+
+    getTilesOfType(type: TileType) {
+        let tiles: number[] = [];
+        this.boardTiles.forEach((tile, i) => {
+            if (tile.getTileType() === type) {
+                tiles.push(i);
+            }
+        });
+        return tiles;
+    }
+
     private checkPlayerCollisions() {
         const positions: { [key: number]: string[] } = {};
         this.players.forEach((player, uuid) => {

src/main.ts

@@ -11,6 +11,7 @@ import { COLOR_BACKGROUND } from './style';
 
 export const WIDTH = 1280;
 export const HEIGHT = 720;
+export const BOARD_SIDE_LENGTH = 5;
 
 window.onload = async () => {
     let game = new Phaser.Game({

src/scene/base/base-scene-controller.ts

@@ -18,6 +18,7 @@ export default abstract class NetworkSceneController {
     /**
      * A proxy object that allows for calling methods on the controller.
      * Functions called on the proxy will be sent to all clients and executed asynchonously
+     * Only primitive data types that survive JSON.stringify can be sent as arguments
      * Functions must be registered with registerSyncedMethod
      */
     public syncProxy = new Proxy(this, {

src/scene/base/base-scene.ts

@@ -1,5 +1,4 @@
 import AzNopolyGame from "../../game";
-import NetworkSceneController from "../base/base-scene-controller";
 
 export abstract class BaseScene<T> extends Phaser.Scene {
 

src/scene/base/minigame-scene-controller.ts

@@ -1,8 +1,12 @@
 import AzNopolyGame from "../../game";
-import { SceneSwitcher } from "../../scene-switcher";
 import MinigameScene from "./minigame-scene";
 import SyncedSceneController from "./synced-scene-controller";
 
+export interface ResultData {
+    playerWon: string[];
+    sorted: boolean;
+}
+
 const RESULT_DISPLAY_TIME = 2000;
 export default abstract class MinigameSceneController extends SyncedSceneController {
 
@@ -35,19 +39,19 @@ export default abstract class MinigameSceneController extends SyncedSceneControl
         this.scene.showStartOverlay();
     }
 
-    protected endGame(playerWon: string[], sorted: boolean) {
-        this.scene.showResultOverlay(playerWon);
-        setTimeout(() => this.onGameOver(), RESULT_DISPLAY_TIME);
+    protected endGame(result: ResultData) {
+        this.scene.showResultOverlay(result);
+        setTimeout(() => this.onGameOver(result), RESULT_DISPLAY_TIME);
     }
 
     abstract onMiniGameStart() : void;
 
-    private onGameOver() {
+    private onGameOver(result: ResultData) {
         if (!this.aznopoly.isHost) {
             return;
         }
         this.scene.scene.stop();
-        this.scene.scene.wake(this.previousScene);
+        this.scene.scene.wake(this.previousScene, result);
     }
 
 }

src/scene/base/minigame-scene.ts

@@ -2,7 +2,7 @@ import AzNopolyBar from "@/ui/bar";
 import { HEIGHT, WIDTH } from "../../main";
 import { FONT_STYLE_HEADLINE, FRAME_PADDING } from "../../style";
 import { BaseScene } from "./base-scene";
-import MinigameSceneController from "./minigame-scene-controller";
+import MinigameSceneController, { ResultData } from "./minigame-scene-controller";
 import AzNopolyPanel from "@/ui/panel";
 
 const START_TIME = 500;
@@ -85,7 +85,7 @@ export default abstract class MinigameScene<T extends MinigameSceneController> e
         this.overlay.setVisible(false);
     }
 
-    public showResultOverlay(playerWon: string[]) {
+    public showResultOverlay({playerWon}: ResultData) {
         const won = playerWon.includes(this.aznopoly.uuid);
         this.overlay.setVisible(false);
         this.overlay.alpha = 1;

src/scene/base/synced-scene-controller.ts

@@ -27,7 +27,7 @@ export default abstract class SyncedSceneController extends NetworkSceneControll
         SceneSwitcher.broadcastSceneReady(this.aznopoly, this.scene.scene.key + "_CREATE")
     }
 
-    onSceneWake(): void {
+    onSceneWake(sys: Phaser.Scenes.Systems, data: any): void {
         if (this.aznopoly.isHost) {
             SceneSwitcher.waitForPlayers(this.aznopoly, this.scene.scene.key + "_WAKE", "wake", this.onAllPlayersRejoined.bind(this));
         }