Some testing with React

package.json

@@ -15,8 +15,13 @@
   "author": "E. Popov",
   "license": "MIT",
   "dependencies": {
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.4",
+    "awesome-typescript-loader": "^5.2.1",
     "babylonjs": "^4.0.3",
     "babylonjs-loaders": "^4.0.3",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "three": "^0.109.0",
     "ts-loader": "^6.1.0",
     "tslint": "^5.20.0",

src/MainUI.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import jQuery from "jquery";
+
+import Browser from "./Utils/Browser";
+import { ProgressBar } from "./Utils/ProgressBar";
+
+import { CutScene } from "./Behaviour/CutScene";
+import MasterLoader from "./Loading/MasterLoader";
+import Play from "./Player/Play";
+import { ConfigManager } from "./ConfigManager";
+
+import { Game } from "./UI/test2";
+
+const showTiles = false;
+
+function setContainerDimensions() {
+    if (!showTiles) {
+        jQuery('#container').width(window.innerWidth);
+        jQuery('#container').height(window.innerHeight);
+    }
+}
+
+jQuery(window).on('resize', setContainerDimensions);
+jQuery(window).on('load', setContainerDimensions);
+
+jQuery(document).on('keydown', function(event) {
+    //console.log(event.which)
+    switch (event.which) {
+        case 72: // H
+            jQuery("#help").css('display', jQuery('#help').css('display') == 'block' ? 'none' : 'block');
+            break;
+        case 13: // Enter
+            jQuery("#panel").css('display', jQuery('#panel').css('display') == 'block' ? 'none' : 'block');
+            jQuery("#stats").css('display', jQuery('#stats').css('display') == 'block' ? 'none' : 'block');
+            break;
+        case 36: // Home
+            let qgame = Browser.QueryString.trgame, qengine = Browser.QueryString.engine,
+                prm = '?';
+
+            if (qengine) {
+                prm += 'engine=' + qengine;
+            }
+
+            if (qgame) {
+                prm += '&trgame=' + qgame;
+            }
+
+            document.location.href = '/index.html' + prm;
+            break;
+    }
+});
+
+function loadAndPlayLevel(level: string | any) {
+    const progressbar = new ProgressBar(document.getElementById('container') as Element);
+
+    progressbar.show();
+
+    fetch('/resources/level/TRLevels.xml').then((response) => {
+        response.text().then((txt) => {
+            const confMgr = new ConfigManager(jQuery.parseXML(txt));
+
+            MasterLoader.loadLevel(level, confMgr).then((res) => {
+                if (!showTiles) {
+                    const play = new Play(document.getElementById('container') as Element);
+                    (window as any).play = play;
+                    fetch('/resources/template/help.html').then((response) => {
+                        response.text().then((html) => {
+                            jQuery(html).appendTo(document.body);
+                        });
+                    });
+                    if (Browser.QueryString.autostart == '1') {
+                        play.initialize(res[0], res[1]).then(() => {
+                            progressbar.hide();
+                            play.play();
+                        });
+                    } else {
+                        play.initialize(res[0], res[1]).then(() => {
+                            if (play.gameData.isCutscene) {
+                                const idTimer = setInterval(() => {
+                                    if (play.gameData.sceneRender.allMeshesReady) {
+                                        clearInterval(idTimer);
+                                        progressbar.hide();
+                                        play.play(true, true);
+                                        play.play(true, false); // we need a 2nd call to display the particle systems in Babylon...
+                                        const bhvCutScene = (play.gameData.bhvMgr.getBehaviour("CutScene") as Array<CutScene>)[0] as CutScene;
+                                        bhvCutScene.showController();
+                                    }
+                                }, 10);
+                            } else {
+                                progressbar.showStart(function() {
+                                    progressbar.hide();
+                                    play.play();
+                                });
+                            }
+                        });
+                    }
+                } else {
+                    progressbar.hide();
+                }
+            });
+        });
+    });
+}
+
+function handleFileSelect(evt: Event) {
+
+    function readFile(idx: number) {
+        const f = files[idx - 1];
+        const freader = new FileReader();
+        freader.onload = ((theFile) => {
+            return function(e: any) {
+                jQuery('#files').css('display', 'none');
+
+                loadAndPlayLevel({
+                    "data":         e.target.result,
+                    "name":         theFile.name,
+                    "showTiles":    showTiles,
+                });
+            };
+        })(f);
+        freader.readAsArrayBuffer(f);
+    }
+
+    let files = (evt.target! as any).files as Array<any>;
+
+    readFile(1);
+}
+
+if (Browser.QueryString.level) {
+    loadAndPlayLevel('/resources/level/' + Browser.QueryString.level);
+} else {
+    jQuery('body').prepend('<input type="file" id="files" multiple="multiple" _style="display: none" />');
+
+    jQuery('#files').css('display', 'block');
+    jQuery('#files').on('change', handleFileSelect);
+}
+
+// ========================================
+
+ReactDOM.render(
+    <>
+    <Game />
+    <Game />
+    </>
+    ,
+    document.getElementById('root')
+);

src/UI/test.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+
+interface ISquareProps {
+    value: string;
+    onClick: () => void;
+    selected: boolean;
+}
+
+function Square(props: ISquareProps) {
+    return (
+        <button
+            className={props.selected ? "square square-select" : "square"}
+            onClick={props.onClick}
+        >
+        {props.value}
+        </button>
+    );
+}
+
+interface IBoardProps {
+    squares: Array<string>;
+    onClick: (i: number) => void;
+    squaresSel: Array<boolean>;
+}
+
+interface IBoardState {
+    squares: Array<string>;
+    xIsNext: boolean;
+}
+
+class Board extends React.Component<IBoardProps, IBoardState> {
+
+    renderSquare(i: number) {
+        return (
+            <Square
+                key={"square" + i}
+                selected={this.props.squaresSel[i]}
+                value={this.props.squares[i]}
+                onClick={() => this.props.onClick(i)}
+            />
+        );
+    }
+
+    render() {
+        let rows = [];
+        for (let j = 0; j < 3; ++j) {
+            let sq = [];
+            for (let i = 0; i < 3; ++i) {
+                sq.push(this.renderSquare(j * 3 + i));
+            }
+            rows.push(
+                <div
+                    key={"row" + j}
+                    className="board-row"
+                    children={sq}
+                />
+            );
+        }
+
+        return (
+            <div
+                children={rows}
+            />
+        );
+    }
+}
+
+interface IGameState {
+    history: Array<IBoardState>;
+    stepNumber: number;
+    xIsNext: boolean;
+}
+
+export class Game extends React.Component<{}, IGameState> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            history: [{
+                squares: Array(9).fill(null),
+                xIsNext: true,
+            }],
+            stepNumber: 0,
+            xIsNext: true,
+        };
+    }
+
+    handleClick(i: number): void {
+        const history = this.state.history.slice(0, this.state.stepNumber + 1);
+        const current = history[history.length - 1];
+        const squares = current.squares.slice();
+        if (calculateWinner(squares) || squares[i]) {
+            return;
+        }
+        squares[i] = this.state.xIsNext ? 'X' : 'O';
+        this.setState({
+            history: history.concat([{
+                squares: squares,
+                xIsNext: !this.state.xIsNext,
+            }]),
+            stepNumber: history.length,
+            xIsNext: !this.state.xIsNext,
+        });
+    }
+
+    jumpTo(step: number): void {
+        this.setState({
+            stepNumber: step,
+            xIsNext: (step % 2) === 0,
+        });
+    }
+
+    render() {
+        const history = this.state.history;
+        const current = history[this.state.stepNumber];
+        const winner = calculateWinner(current.squares);
+        const squaresSel = Array(9).fill(false);
+
+        const moves = history.map((step: IBoardState, move: number) => {
+            const desc = move ?
+                'Go to move #' + move :
+                'Go to game start';
+            return (
+                <li key={move} style={{ fontWeight: move === this.state.stepNumber ? 'bold' : 'normal'}}>
+                    <button onClick={() => this.jumpTo(move)}>{desc}</button>
+                </li>
+            );
+        });
+
+        let status: string;
+        if (winner) {
+            status = 'Winner: ' + winner[0];
+            squaresSel[winner[1]] = squaresSel[winner[2]] = squaresSel[winner[3]] = true;
+        } else {
+            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+        }
+
+        return (
+            <div className="game">
+                <div className="game-board">
+                    <Board
+                        squaresSel={squaresSel}
+                        squares={current.squares}
+                        onClick={(i: number) => this.handleClick(i)}
+                    />
+                </div>
+                <div className="game-info">
+                    <div>{status}</div>
+                    <ol>{moves}</ol>
+                </div>
+            </div>
+        );
+    }
+}
+
+function calculateWinner(squares: Array<string>): [string, number, number, number] | null {
+    const lines = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [0, 3, 6],
+      [1, 4, 7],
+      [2, 5, 8],
+      [0, 4, 8],
+      [2, 4, 6],
+    ];
+    for (let i = 0; i < lines.length; i++) {
+      const [a, b, c] = lines[i];
+      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+        return [squares[a], a, b, c];
+      }
+    }
+    return null;
+  }