Merge branch 'dev' of https://github.com/cryptoblivious/Last-Stand into dev

Author: cryptoblivious

dev/tutorials/colyseus-phaser-server-client-setup-template/src/client/FirstGame.ts

@@ -2,6 +2,7 @@ import Phaser from 'phaser'
 
 import Bootstrap from './scenes/Bootstrap';
 import Game from './scenes/Game';
+import FirstGame from './scenes/FirstGame';
 
 const config: Phaser.Types.Core.GameConfig = {
 	type: Phaser.AUTO,

dev/tutorials/colyseus-phaser-server-client-setup-template/src/client/main.ts

@@ -1,22 +1,27 @@
 import Phaser from 'phaser'
-
+import Server from '../services/Server'
 
 //holds logic for switching between scenes
 
 export default class Bootstrap extends Phaser.Scene {
+
+    private server!: Server
+
     constructor() 
     {
         super('bootstrap')
     }
 
-    preload() 
-    {
-
+    init(){
+        this.server = new Server()
     }
 
+
     create() 
     {
-        console.log('bootstrap scene')
-        this.scene.launch('game')
+        //launch game scene from here and pass server instance to it
+        this.scene.launch('game', {
+            server: this.server
+        })
     }
 }

dev/tutorials/colyseus-phaser-server-client-setup-template/src/client/scenes/Bootstrap.ts

@@ -29,13 +29,22 @@ export default class FirstGame extends Phaser.Scene
         console.log(room.sessionId)
 
         // onMessage handler for "keydown" message that we created in the server "MyRoom" class
-        room.onMessage('keydown', ( message) => {
+        room.onMessage('action', ( message) => {
             console.log(message)
         })
 
         // on key down send the key to the server
         this.input.keyboard.on('keydown' , (event: KeyboardEvent) => {
-            room.send('keydown', event.key)
+            // translate key to action and send to server
+            // ClientInputHandler
+            const action_map : Record<string,integer> = {
+                'w': 0,
+                'a': 1,
+                's': 2,
+                'd': 3,
+            }
+            
+            room.send('action', action_map[event.key])
         })
 	}
 

dev/tutorials/colyseus-phaser-server-client-setup-template/src/client/scenes/FirstGame.ts

@@ -1,4 +1,5 @@
 import Phaser from "phaser";
+import type Server from '../services/Server';
 
 export default class Game extends Phaser.Scene {
     constructor() {
@@ -15,9 +16,11 @@ export default class Game extends Phaser.Scene {
 
     }
 
-    create()
+    create(data : { server : Server})
     {
-        console.log("game scene");
+        //game recieves server instance from bootstrap scene
+        const { server } = data
+        server.join()
     }
 
     update() 

dev/tutorials/colyseus-phaser-server-client-setup-template/src/client/scenes/Game.ts

@@ -0,0 +1,18 @@
+import { Client } from 'colyseus.js'
+
+export default class Server {
+
+    private client: Client
+
+    // create a client instance
+    constructor() {
+        this.client = new Client('ws://localhost:2567')
+        console.log(this.client)
+    }
+
+    async join() {
+        // join room tic-tac-toe
+        const room = await this.client.joinOrCreate('tic-tac-toe')
+        console.log(room)
+    }
+}

dev/tutorials/colyseus-phaser-server-client-setup-template/src/client/services/Server.ts

@@ -5,7 +5,7 @@ import { monitor } from "@colyseus/monitor";
  * Import your Room files
  */
 import { MyRoom } from "./rooms/MyRoom";
-
+import { TicTacToe } from "./rooms/TicTacToe";
 export default Arena({
     getId: () => "Your Colyseus App",
 
@@ -14,6 +14,9 @@ export default Arena({
          * Define your room handlers:
          */
         gameServer.define('my_room', MyRoom);
+        
+        //create a tic-tac-toe room
+        gameServer.define('tic-tac-toe', TicTacToe);
 
     },
 

dev/tutorials/colyseus-phaser-server-client-setup-template/src/server/arena.config.ts

@@ -0,0 +1,13 @@
+import { Room } from "colyseus";
+import { TicTacToeState } from "./schema/TicTacToeState";
+
+
+// export default didnt work here but classic export did
+export class TicTacToe extends Room<TicTacToeState> {
+
+    onCreate(){
+        // set initial room state
+        this.setState(new TicTacToeState())
+    }
+
+}

dev/tutorials/colyseus-phaser-server-client-setup-template/src/server/rooms/TicTacToe.ts

@@ -0,0 +1,9 @@
+import { Schema, type } from '@colyseus/schema';
+
+export class TicTacToeState extends Schema {
+
+    //state setup for tic tac toe game 
+    @type('string')
+    name = "TicTacToeState";
+
+}