feat(): battle assets en player list menu

10 files changed, 284 insertions, 60 deletions

diff --git a/client/src/akkamon/DataWrappers.ts b/client/src/akkamon/DataWrappers.ts
new file mode 100644
index 0000000..22b25e2
--- /dev/null
+++ b/client/src/akkamon/DataWrappers.ts
@@ -0,0 +1,71 @@
+
+export class Queue<T> {
+    private _data = new Array();
+
+    constructor(data?: Array<T>) {
+        if (data !== undefined) {
+            this._data = data;
+        }
+    }
+
+    push(element: T): void {
+        this._data.push(element);
+    }
+
+    pushArray(arr: T[]): void {
+        for (var element of arr) {
+            this._data.push(element);
+        }
+    }
+
+    pop(): T | undefined {
+        return this._data.shift();
+    }
+
+    isEmpty(): boolean {
+        return this._data.length == 0;
+    }
+
+    peek() {
+        return this._data[0];
+    }
+}
+
+export class Stack<T> {
+    private _data = new Array();
+
+    constructor(data?: Array<T>) {
+        if (data !== undefined) {
+            this._data = data;
+        }
+    }
+
+    pop(): T | undefined {
+        return this._data.pop();
+    }
+
+    push(element: T): void {
+        this._data.push(element);
+    }
+
+    peek() {
+        if (this.length === 0) {
+            return undefined;
+        } else {
+            return this._data[this.length - 1];
+        }
+    }
+
+    get length() {
+        return this._data.length;
+    }
+
+    isEmpty() {
+        return this.length === 0;
+    }
+
+    clear() {
+        this._data = new Array();
+    }
+
+}
diff --git a/client/src/akkamon/client/Client.ts b/client/src/akkamon/client/Client.ts
index eef086f..40aa415 100644
--- a/client/src/akkamon/client/Client.ts
+++ b/client/src/akkamon/client/Client.ts
@@ -72,13 +72,14 @@ export class Client implements AkkamonClient
         this.remotePlayerEngine!.update(delta);
     }
 
-    setUIControls() {
-        this.controls = new UIControls(this.scene!.input, this.scene!.activeMenu!);
+    setUIControls(input: Phaser.Input.InputPlugin, menu: any) {
+        this.controls = new UIControls(input, menu);
     }
 
     async setGridControls() {
         function delay(ms: number) { return new Promise( resolve => setTimeout(resolve, ms) ); }
         await delay(100);
+        console.log('setting grid control');
         this.controls = new GridControls(this.scene!.input, this.gridPhysics!);
     }
 
@@ -144,4 +145,10 @@ export class Client implements AkkamonClient
         return this.gridPhysics!.getPlayerPixelPos();
     }
 
+    requestInitBattle() {
+    }
+
+    requestRemotePlayerData() {
+        return this.remotePlayerEngine!.getData();
+    }
 }
diff --git a/client/src/akkamon/render/BattleControls.ts b/client/src/akkamon/render/BattleControls.ts
new file mode 100644
index 0000000..d6699c8
--- /dev/null
+++ b/client/src/akkamon/render/BattleControls.ts
@@ -0,0 +1,25 @@
+import { Direction } from './Direction';
+import type { BattleEngine } from './BattleEngine';
+
+export class BattleControls {
+    private cursors: Phaser.Types.Input.Keyboard.CursorKeys;
+
+    constructor(
+        private input: Phaser.Input.InputPlugin,
+        private battleEngine: BattleEngine,
+    ) {
+        this.cursors = this.input.keyboard.createCursorKeys();
+    }
+
+    update() {
+        if (Phaser.Input.Keyboard.JustDown(this.cursors.left)) {
+            // this.battleEngine.
+        } else if (Phaser.Input.Keyboard.JustDown(this.cursors.right)) {
+            // this.battleEngine.
+        } else if (Phaser.Input.Keyboard.JustDown(this.cursors.up)) {
+            // this.battleEngine.
+        } else if (Phaser.Input.Keyboard.JustDown(this.cursors.down)) {
+            // this.battleEngine.
+        }
+    }
+}
diff --git a/client/src/akkamon/render/BattleEngine.ts b/client/src/akkamon/render/BattleEngine.ts
new file mode 100644
index 0000000..7127e2d
--- /dev/null
+++ b/client/src/akkamon/render/BattleEngine.ts
@@ -0,0 +1,2 @@
+export class BattleEngine {
+}
diff --git a/client/src/akkamon/render/engine/RemotePlayerEngine.ts b/client/src/akkamon/render/engine/RemotePlayerEngine.ts
index 917453b..65d54bf 100644
--- a/client/src/akkamon/render/engine/RemotePlayerEngine.ts
+++ b/client/src/akkamon/render/engine/RemotePlayerEngine.ts
@@ -6,10 +6,13 @@ import { AkkamonEngine } from '../engine/AkkamonEngine';
 import type { Direction } from '../Direction';
 
 import {
-    Queue,
     RemotePlayerSprite
 } from '../model/RemotePlayerSprite';
 
+import {
+    Queue
+} from '../../DataWrappers';
+
 import type {
     RemoteMovementQueues
 } from '../../client/Events';
@@ -86,4 +89,8 @@ export class RemotePlayerEngine extends AkkamonEngine {
             }
         });
     }
+
+    getData() {
+        return this.trainerIdToRemotePlayerSprite;
+    }
 }
diff --git a/client/src/akkamon/render/model/RemotePlayerSprite.ts b/client/src/akkamon/render/model/RemotePlayerSprite.ts
index 0b8d3e9..aae911f 100644
--- a/client/src/akkamon/render/model/RemotePlayerSprite.ts
+++ b/client/src/akkamon/render/model/RemotePlayerSprite.ts
@@ -4,37 +4,7 @@ import { PlayerSprite } from '../model/PlayerSprite';
 import { GridPhysics } from '../engine/GridPhysics';
 import { Direction } from '../Direction';
 
-export class Queue<T> {
-    private _data = new Array();
-
-    constructor(data?: Array<T>) {
-        if (data !== undefined) {
-            this._data = data;
-        }
-    }
-
-    push(element: T): void {
-        this._data.push(element);
-    }
-
-    pushArray(arr: T[]): void {
-        for (var element of arr) {
-            this._data.push(element);
-        }
-    }
-
-    pop(): T | undefined {
-        return this._data.shift();
-    }
-
-    isEmpty(): boolean {
-        return this._data.length == 0;
-    }
-
-    peek() {
-        return this._data[0];
-    }
-}
+import { Queue } from '../../DataWrappers';
 
 type RemotePlayerSpriteConfig = {
     scene: Phaser.Scene,
diff --git a/client/src/akkamon/scenes/AkkamonWorldScene.ts b/client/src/akkamon/scenes/AkkamonWorldScene.ts
index 4cdaee1..6a97f4a 100644
--- a/client/src/akkamon/scenes/AkkamonWorldScene.ts
+++ b/client/src/akkamon/scenes/AkkamonWorldScene.ts
@@ -4,8 +4,9 @@ import { client } from '../../app';
 
 import { PauseMenu, AkkamonMenu } from '../scenes/UIElement';
 
-export let eventsCenter = new Phaser.Events.EventEmitter();
+import { Stack } from '../DataWrappers';
 
+export let eventsCenter = new Phaser.Events.EventEmitter();
 
 export class AkkamonWorldScene extends Phaser.Scene {
     static readonly TILE_SIZE = 32;
@@ -23,9 +24,7 @@ export class AkkamonWorldScene extends Phaser.Scene {
 
     spawnPoint: Phaser.Types.Tilemaps.TiledObject | undefined;
 
-    pauseMenu?: PauseMenu;
-
-    activeMenu?: AkkamonMenu;
+    menus: Stack<AkkamonMenu> = new Stack();
 
     create(mapKey: string, tileSetKey: string) {
         this.map = this.make.tilemap({ key: mapKey });
@@ -55,9 +54,13 @@ export class AkkamonWorldScene extends Phaser.Scene {
 
         let akey = this.input.keyboard.addKey('a');
         akey.on('down', () => {
-            if (this.activeMenu === undefined) {
-                this.activeMenu = new PauseMenu(this);
-                this.isUsingUIControls();
+            if (this.menus.isEmpty()) {
+                this.menus.push(new PauseMenu(this));
+                console.log("here is the menu stack:");
+                console.log(this.menus);
+                this.menuTakesUIControl(this.input, this.menus.peek());
+                console.log("here is the menu stack, after taking controls:");
+                console.log(this.menus);
             }
         });
 
@@ -72,15 +75,44 @@ export class AkkamonWorldScene extends Phaser.Scene {
 
     }
 
-    isUsingUIControls() {
-        this.client.setUIControls();
+    menuTakesUIControl(input: Phaser.Input.InputPlugin, menu: AkkamonMenu) {
+        this.client.setUIControls(input, menu);
     }
 
     isUsingGridControls() {
         this.client.setGridControls();
     }
 
+    pushMenu(menu: AkkamonMenu) {
+        this.menus.push(menu);
+        this.menuTakesUIControl(this.input, menu);
+    }
+
+    popMenu() {
+        return this.menus.pop();
+    }
+
+    traverseMenusBackwards() {
+        console.log("menu stack before traversing back:");
+        console.log(this.menus);
+        this.popMenu();
+        if (!this.menus.isEmpty()) {
+            this.menuTakesUIControl(this.input, this.menus.peek());
+        } else {
+            this.isUsingGridControls();
+        }
+    }
+
     getPlayerPixelPosition(): Phaser.Math.Vector2 {
         return this.client.requestPlayerPixelPosition();
     }
+
+    getRemotePlayerNames(): Array<string> {
+        let remotePlayerData = this.client.requestRemotePlayerData();
+        if (remotePlayerData.size === 0) {
+            return ['Nobody Online'];
+        } else {
+            return Array.from(remotePlayerData.keys());
+        }
+    }
 }
diff --git a/client/src/akkamon/scenes/BattleScene.ts b/client/src/akkamon/scenes/BattleScene.ts
new file mode 100644
index 0000000..320712f
--- /dev/null
+++ b/client/src/akkamon/scenes/BattleScene.ts
@@ -0,0 +1,18 @@
+import { client } from '../../app';
+
+export class BattleScene extends Phaser.Scene {
+
+    client = client;
+
+
+    constructor() {
+        super('BattleScene')
+    }
+
+    create() {
+        this.client.requestInitBattle(this);
+    }
+
+    update() {
+    }
+}
diff --git a/client/src/akkamon/scenes/BootScene.ts b/client/src/akkamon/scenes/BootScene.ts
index 99accca..af70953 100644
--- a/client/src/akkamon/scenes/BootScene.ts
+++ b/client/src/akkamon/scenes/BootScene.ts
@@ -30,6 +30,9 @@ export class BootScene extends AkkamonWorldScene {
 
         this.load.pack("pokemon-yellow-front", "assets/pokemon/main-sprites/yellow/pokemon-yellow-front.json")
         this.load.pack("pokemon-yellow-back", "assets/pokemon/main-sprites/yellow/pokemon-yellow-back.json")
+
+        this.load.pack("general-interface", "assets/images/general-ui.json")
+        this.load.pack("battle-interface", "assets/images/battle-ui.json")
     }
 
     create(): void {
diff --git a/client/src/akkamon/scenes/UIElement.ts b/client/src/akkamon/scenes/UIElement.ts
index 37cad32..1f0de90 100644
--- a/client/src/akkamon/scenes/UIElement.ts
+++ b/client/src/akkamon/scenes/UIElement.ts
@@ -3,7 +3,7 @@ import { Direction } from '../render/Direction';
 
 
 class MenuText extends Phaser.GameObjects.Text {
-    constructor(scene: Phaser.Scene, group: Phaser.GameObjects.Group, x: number, y: number, text: string) {
+    constructor(scene: Phaser.Scene, group: Phaser.GameObjects.Group, groupDepth: number, x: number, y: number, text: string) {
         let style: Phaser.Types.GameObjects.Text.TextStyle = {
                 fontFamily: 'Courier',
                 fontSize: '16px',
@@ -15,9 +15,9 @@ class MenuText extends Phaser.GameObjects.Text {
                 align: 'left',  // 'left'|'center'|'right'|'justify'
         }
         super(scene, x, y, text, style);
-        console.log("adding text to scene");
         scene.add.existing(this);
         group.add(this);
+        this.setDepth(groupDepth);
     }
 }
 
@@ -41,36 +41,38 @@ export interface AkkamonMenu {
 
 class Menu extends Phaser.GameObjects.Image implements AkkamonMenu {
 
-    private akkamonScene: AkkamonWorldScene
+    akkamonScene: AkkamonWorldScene
 
     public group?: Phaser.GameObjects.Group;
 
-    private buttons?: Array<MenuText>;
+    groupDepth?: number
+
+    buttons?: Array<MenuText>;
 
     private picker?: Picker;
 
-    private index?: number;
+    index?: number;
 
     private camera?: Phaser.Cameras.Scene2D.Camera;
 
+    ySpacing?: number
+    yOffsetFromTop?: number
+    xOffsetFromRight?: number
+
     destroyMe() {
-        console.log(this.group);
-        console.log("destroying group");
+        this.akkamonScene.traverseMenusBackwards();
         this.group!.destroy(true);
-        this.akkamonScene.isUsingGridControls();
-        this.akkamonScene.activeMenu = undefined;
     }
 
     confirm() {
         // communicate with client
+        throw new Error('Confirm method should be present in a Menu implementation');
     }
 
     constructor(scene: AkkamonWorldScene) {
-        console.log("Making pause Menu");
-
         let camera = scene.cameras.main;
 
-        super(scene, camera.scrollX + camera.width, camera.scrollY, "menu")
+        super(scene, camera.scrollX + camera.width, camera.scrollY, "pause-menu")
         this.setOrigin(1,0)
         this.setVisible(true)
         this.setDisplaySize(296, 400)
@@ -80,13 +82,18 @@ class Menu extends Phaser.GameObjects.Image implements AkkamonMenu {
 
         this.group = new Phaser.GameObjects.Group(scene);
 
-        console.log("Adding this to scene");
         scene.add.existing(this);
         this.group.add(this);
 
         this.buttons = new Array();
 
         this.index = 0;
+
+        this.ySpacing = 100;
+        this.yOffsetFromTop = 40;
+        this.xOffsetFromRight = 150;
+
+        this.groupDepth = 20;
     }
 
     setPicker(index: number) {
@@ -98,7 +105,7 @@ class Menu extends Phaser.GameObjects.Image implements AkkamonMenu {
                 this.group!,
                 pickerX,
                 pickerY,
-                "picker")
+                "menupicker")
         } else {
             this.picker.setY(
                 pickerY
@@ -107,16 +114,19 @@ class Menu extends Phaser.GameObjects.Image implements AkkamonMenu {
     }
 
     private indexToYpixel(index: number) {
-        return index * 100 + 46 + this.y;
+        return index * this.ySpacing! + this.yOffsetFromTop! + 7 + this.y;
     }
 
     setButtons(buttonTextArray: Array<string>) {
         for (let i = 0; i < buttonTextArray.length; i++) {
-            this.buttons!.push(new MenuText(this.scene, this.group!, this.x - 150, this.y + 40 + i * 100, buttonTextArray[i]));
+            this.buttons!.push(new MenuText(this.scene, this.group!, this.groupDepth!, this.x - this.xOffsetFromRight!, this.y + this.yOffsetFromTop! + i * this.ySpacing!, buttonTextArray[i]));
         }
     }
 
     clearButtons() {
+        for (let button of this.buttons!) {
+            button.destroy();
+        }
         this.buttons = new Array();
     }
 
@@ -134,6 +144,7 @@ class Menu extends Phaser.GameObjects.Image implements AkkamonMenu {
 export class PauseMenu extends Menu implements AkkamonMenu {
     constructor(scene: AkkamonWorldScene) {
         super(scene)
+        this.ySpacing
         this.setPicker(0);
         this.setButtons([
             'POKéDEX',
@@ -141,6 +152,84 @@ export class PauseMenu extends Menu implements AkkamonMenu {
             'PHONE',
             'CLOSE'
         ]);
-        this.group!.setDepth(20);
+        this.group!.setDepth(this.groupDepth!);
+    }
+
+    confirm() {
+        if (this.buttons![this.index!].text === 'PHONE') {
+            this.akkamonScene.pushMenu(new RemotePlayerList(this.akkamonScene, this.akkamonScene.getRemotePlayerNames()));
+        }
+    }
+}
+
+class ListMenu extends Menu implements AkkamonMenu {
+    options: Array<string>
+
+    viewTop: number = 0;
+
+    viewBot: number = 4;
+
+    constructor(
+        scene: AkkamonWorldScene,
+        options: Array<string>
+    ) {
+        super(scene)
+        this.options = options;
+
+        this.xOffsetFromRight = 210;
+        this.yOffsetFromTop = 50;
+
+        let contacts = new MenuText(this.scene, this.group!, this.groupDepth!, this.x - this.xOffsetFromRight, this.y + 20, "Nearby trainers:")
+        // this.yOffsetFromTop
+        // this.ySpacing
+
+        this.setPicker(0);
+        this.setButtons(
+            this.options.slice(
+                this.viewTop,
+                this.viewBot
+            )
+        );
+
+        this.groupDepth = 30;
+        this.group!.setDepth(this.groupDepth);
     }
+
+    selectButton(direction: Direction) {
+        if (direction === Direction.UP) {
+            if (this.index! !== 0) {
+                this.setPicker(this.index! - 1);
+                this.index! -= 1;
+            } else if (this.viewTop !== 0) {
+                console.log("traversing the list upwards!");
+                this.viewTop -= 1;
+                this.viewBot -= 1;
+                this.clearButtons();
+                this.setButtons(
+                    this.options.slice(
+                        this.viewTop,
+                        this.viewBot
+                    ));
+            }
+        } else if (direction === Direction.DOWN) {
+            if (this.index! !== this.buttons!.length - 1) {
+                this.setPicker(this.index! + 1);
+                this.index! += 1;
+            } else if (this.viewBot !== this.options.length) {
+                console.log("traversing the list downwards!");
+                this.viewTop += 1;
+                this.viewBot += 1;
+                this.clearButtons();
+                this.setButtons(
+                    this.options.slice(
+                        this.viewTop,
+                        this.viewBot
+                    ));
+            }
+        }
+    }
+
+}
+
+class RemotePlayerList extends ListMenu implements AkkamonMenu {
 }