Compile to ES5 properly

babel.config.js

@@ -0,0 +1,35 @@
+module.exports = function (api) {
+    api.cache(false);
+    const presets = [
+        [ "@babel/preset-typescript"],
+        [
+            "@babel/preset-env",
+            {
+                "corejs": { "version": "3.8" },
+                "useBuiltIns": "usage",
+                "targets": {
+                    "edge": "15",
+                    "firefox": "51",
+                    "chrome": "56",
+                    "safari": "11.1",
+                    "ie": "11"
+                }
+            }
+        ]
+    ];
+    const plugins = [
+        "@babel/plugin-proposal-class-properties",
+        [
+            "@babel/plugin-transform-runtime",
+            {
+                "corejs": 3,
+                "version": "^7.12.5",
+            },
+        ],
+        "@babel/plugin-transform-arrow-functions",
+    ];
+    return {
+        presets,
+        plugins
+    };
+};

package.json

@@ -3,25 +3,38 @@
   "version": "1.0.0",
   "description": "ChatChat ported to HTML5",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "start": "webpack serve"
   },
   "private": true,
   "repository": "https://gitdab.com/s/chatchat.git",
-  "author": "Soren",
+  "author": "Aly",
   "license": "GPL2",
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-transform-arrow-functions": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-typescript": "^7.12.7",
+    "@babel/runtime-corejs3": "^7.12.5",
     "@types/fontfaceobserver": "^0.0.6",
-    "css-loader": "^4.3.0",
-    "file-loader": "^6.1.0",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.0.1",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.0",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^8.0.4",
-    "typescript": "^4.0.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12"
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.12",
+    "typescript": "^4.1.3",
+    "webpack": "^5.11.0",
+    "webpack-cli": "^4.3.0",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
+    "@babel/runtime": "^7.12.5",
+    "core-js": "^3.8.1",
     "fontfaceobserver": "^2.1.0",
-    "pixi.js": "^5.3.3"
+    "pixi.js": "^5.3.6",
+    "whatwg-fetch": "^3.5.0"
   }
 }

src/PlayerIOAsync.ts

@@ -1,24 +0,0 @@
-import './PlayerIOClient.development';
-
-export const authenticate = function (
-    gameId: string,
-    connectionId: string,
-    authenticationArguments: Record<string, string>,
-    playerInsightSegments: Array<string>,
-): Promise<PlayerIO.Client> {
-    return new Promise<PlayerIO.Client>((resolve, reject) => {
-        PlayerIO.authenticate(gameId, connectionId, authenticationArguments, playerInsightSegments, resolve, reject);
-    });
-}
-
-export const listRooms = function (
-    multiplayer: PlayerIO.Multiplayer,
-    roomType: string,
-    searchCriteria: Record<string, string>,
-    resultLimit: number,
-    resultOffset: number,
-): Promise<Array<PlayerIO.RoomInfo>> {
-    return new Promise<Array<PlayerIO.RoomInfo>>((resolve, reject) => {
-        multiplayer.listRooms(roomType, searchCriteria, resultLimit, resultOffset, resolve, reject);
-    });
-}

src/PlayerIOClient.development.d.ts

@@ -1,31 +0,0 @@
-declare enum PlayerIOErrorCode {
-
-}
-
-declare class PlayerIOError {
-    code: PlayerIOErrorCode;
-    message: string;
-    stack: any;
-}
-
-declare namespace PlayerIO {
-    let useSecureApiRequests: boolean;
-    const authenticate: (gameId: string, connectionId: string, authenticationArguments: Record<string, string>, playerInsightSegments: Array<string>, successCallback: (client: PlayerIO.Client) => void, errorCallback: (error: PlayerIOError) => void) => void;
-
-    class Client {
-        multiplayer: Multiplayer;
-    }
-
-    class Multiplayer {
-        useSecureConnections: boolean;
-        listRooms: (roomType: string, searchCriteria: Record<string, string>, resultLimit: number, resultOffset: number, successCallback: (rooms: Array<RoomInfo>) => void, errorCallback: (error: PlayerIOError) => void) => void
-    }
-
-    class RoomInfo {
-        id: string;
-        onlineUsers: number;
-        roomData: Record<string, string>;
-        roomType: string;
-    }
-}
-

src/PlayerIOClient.ts

@@ -0,0 +1,170 @@
+type Settings = {
+    apiRoot: string,
+}
+
+export const settings: Settings = {
+    apiRoot: "https://api.playerio.com/json/",
+}
+
+type KVPair = {
+    key: string,
+    value: string,
+}
+
+const map2KV = function(rec: Record<string, any>): Array<KVPair> {
+    return Object.entries(rec).map(([key, value]) => {
+        return {
+            key: key,
+            value: value,
+        }
+    })
+}
+
+const kv2Map = function(kv: Array<KVPair>): Record<string, any> {
+    let obj: Record<string, any> = {}
+
+    kv.forEach(p => {
+        obj[p.key] = p.value
+    })
+
+    return obj
+}
+
+class Channel {
+    token: string | undefined
+
+    call<A>(method: number, args: Record<string, any>, converter: (response: Record<string, any>) => A): Promise<A> {
+        const body = "[" + method + "|" + (this.token || "") + "]" + JSON.stringify(args)
+
+        return fetch(settings.apiRoot, {
+            method: "POST",
+            body: body,
+        }).then(resp => resp.text()).then(resp => {
+            if(resp.startsWith("[")) {
+                const end = resp.indexOf("]")
+                this.token = resp.substring(1, end)
+                resp = resp.substring(end + 1)
+            }
+            return JSON.parse(resp)
+        }).then(result => {
+            return converter(result)
+        })
+    }
+
+    authenticate(
+        gameId: string,
+        connectionId: string,
+        authenticationArguments: Array<KVPair>,
+        playerInsightSegments: Array<string>,
+        clientApi: string,
+        clientInfo: Array<KVPair>,
+        playCodes: Array<string>,
+        converter: (response: Record<string, any>) => Client
+    ): Promise<Client> {
+        return this.call(13, {
+            gameid: gameId,
+            connectionid: connectionId,
+            authenticationarguments: authenticationArguments,
+            playerinsightsegments: playerInsightSegments,
+            clientapi: clientApi,
+            clientinfo: clientInfo,
+            playcodes: playCodes
+        }, converter)
+    }
+
+    listRooms(
+        roomType: string,
+        searchCriteria: Record<string, any>,
+        resultLimit: number,
+        resultOffset: number,
+        onlyDevRooms: boolean,
+        converter: (response: Record<string, any>) => Array<RoomInfo>
+    ): Promise<Array<RoomInfo>> {
+        return this.call(30, {
+            roomtype: roomType,
+            searchcriteria: searchCriteria,
+            resultlimit: resultLimit,
+            resultoffset: resultOffset,
+            onlydevrooms: onlyDevRooms
+        }, converter)
+    }
+}
+
+export const authenticate = function (
+    gameId: string,
+    connectionId: string,
+    authenticationArguments: Record<string, string>,
+    playerInsightSegments: Array<string>,
+): Promise<Client> {
+    const channel = new Channel();
+    return channel.authenticate(
+        gameId,
+        connectionId,
+        map2KV(authenticationArguments),
+        playerInsightSegments,
+        "javascript",
+        map2KV({}),
+        [],
+        (result: Record<string, any>) => {
+            channel.token = result.token;
+            return new Client(channel, gameId, result.gamefsredirectmap, result.userid);
+        }
+    )
+}
+
+export class Client {
+    connectUserId: string
+    gameId: string
+    multiplayer: Multiplayer
+
+    constructor(channel: Channel, gameId: string, gameFsRedirectMap: string, userId: string) {
+        this.connectUserId = userId;
+        this.gameId = gameId;
+
+        this.multiplayer = new Multiplayer(channel)
+    }
+}
+
+export class Multiplayer {
+    developmentServer: string | null
+    useSecureConnections: boolean
+
+    listRooms: (roomType: string, searchCriteria: Record<string, any>, resultLimit: number, resultOffset: number) => Promise<Array<RoomInfo>>
+
+    constructor(channel: Channel) {
+        this.developmentServer = null
+        this.useSecureConnections = true
+
+        this.listRooms = (roomType: string, searchCriteria: Record<string, any>, resultLimit: number, resultOffset: number) =>
+            channel.listRooms(
+                roomType,
+                map2KV(searchCriteria),
+                resultLimit,
+                resultOffset,
+                this.developmentServer != null,
+                (result: Record<string, any>) =>
+                    result.rooms.map((room: any) =>
+                        new RoomInfo(
+                            room.id,
+                            room.roomtype,
+                            room.onlineusers,
+                            kv2Map(room.roomdata)
+                        )
+                    )
+            )
+    }
+}
+
+class RoomInfo {
+    id: string
+    roomType: string
+    onlineUsers: number
+    roomData: Record<string, any>
+
+    constructor(id: string, roomType: string, onlineUsers: number, roomData: Record<string, any>) {
+        this.id = id
+        this.roomType = roomType
+        this.onlineUsers = onlineUsers
+        this.roomData = roomData
+    }
+}

src/index.ts

@@ -1,12 +1,12 @@
+import "core-js/stable";
+import "whatwg-fetch";
+
 import * as FontFaceObserver from 'fontfaceobserver';
 
 import * as PIXI from 'pixi.js';
 import './assets/css/chatchat.css';
 
-import './PlayerIOClient.development';
-import * as Pio from "./PlayerIOAsync";
-
-PlayerIO.useSecureApiRequests = true;
+import * as PlayerIO from "./PlayerIOClient";
 
 (async function() {
     let app = new PIXI.Application({width: 640, height: 600});
@@ -26,17 +26,16 @@ PlayerIO.useSecureApiRequests = true;
 
     app.stage.addChild(message);
 
-    const cli = await Pio.authenticate(
+    const cli = await PlayerIO.authenticate(
         "kittygame-48om7qu7teeazkf9gana",
         "public",
-        { userId: "soren" },
+        { userId: "aly" },
         []
     );
     console.log(cli);
     const multiplayer = cli.multiplayer;
     console.log(multiplayer);
-    const rooms = await Pio.listRooms(
-        multiplayer,
+    const rooms = await multiplayer.listRooms(
         "KittyRpg2",
         {},
         50,
@@ -44,7 +43,7 @@ PlayerIO.useSecureApiRequests = true;
     )
     console.log(rooms);
 
-    let messageN = new PIXI.Text("Hello, world! ββ", chatStyle);
+    let messageN = new PIXI.Text("Hello, world! μ : (A ⊗ A) ⇝ A", chatStyle);
     messageN.position.set(32, 32);
 
     app.stage.addChild(messageN);

tsconfig.json

@@ -4,9 +4,9 @@
     "sourceMap": true,
     "noImplicitAny": true,
     "module": "commonjs",
-    "lib": ["dom", "es2020"],
+    "lib": ["dom"],
     "target": "es5",
-    "jsx": "react",
+    "strict": true,
     "allowJs": true
   }
 }

webpack.config.js

@@ -2,13 +2,15 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 
 module.exports = {
-  entry: './src/index.ts',
-  devtool: 'inline-source-map',
+  entry: {
+    app: ['whatwg-fetch', 'core-js/stable', './src/index.ts'],
+  },
+  devtool: 'source-map',
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
+        test: /\.ts$/,
+        use: 'babel-loader',
         exclude: /node_modules/,
       },
       {
@@ -28,6 +30,10 @@ module.exports = {
     filename: 'main.js',
     path: path.resolve(__dirname, 'dist'),
   },
+  target: ["web", "es5"],
   plugins: [new HtmlWebpackPlugin()],
+  devServer: {
+    contentBase: './dist',
+  },
 };