Merge pull request #28 from SaltieRL/pa-perf-cleanup

Fix performance issues and bugs

Author: Abbondanzo

docs/package-lock.json

@@ -4,7 +4,7 @@
   "description": "Examples for the web replay viewer",
   "main": "src/index.tsx",
   "scripts": {
-    "start": "./node_modules/.bin/webpack-dev-server --mode development"
+    "start": "npx webpack-dev-server --mode development"
   },
   "keywords": [
     "Examples",

docs/package.json

@@ -1,86 +1,45 @@
+import Tab from "@material-ui/core/Tab"
+import Tabs from "@material-ui/core/Tabs"
 import React, { Component } from "react"
-import {
-  ReplayViewer,
-  GameManager,
-  loadBuilderFromReplay,
-  PlayControls,
-  PlayerCameraControls,
-  Slider,
-  FieldCameraControls,
-} from "../../src"
-import { Grid, withStyles, WithStyles } from "@material-ui/core"
+
+import Main from "./components/Main"
+
+type ActiveTab = "viewer" | "other"
 
 interface State {
-  gameManager?: GameManager
+  tab: ActiveTab
 }
 
-class App extends Component<WithStyles, State> {
+class App extends Component<any, State> {
   constructor(props: any) {
     super(props)
-    this.state = {}
+    this.state = {
+      tab: "viewer",
+    }
   }
 
-  componentDidMount() {
-    const REPLAY_ID = "BDC240CE11E96C735CEBCE8190E3C53A"
-
-    loadBuilderFromReplay(REPLAY_ID).then(gameManager => {
-      this.setState({ gameManager })
+  handleChange = (_: any, newTab: ActiveTab) => {
+    this.setState({
+      tab: newTab,
     })
   }
 
   render() {
-    const { gameManager } = this.state
-    const { root } = this.props.classes
+    const { tab } = this.state
     return (
       <div style={{ maxWidth: 900, width: "100%", margin: "0 auto" }}>
         <div>
           <h2>Welcome to React</h2>
         </div>
-        {gameManager ? (
-          <Grid
-            container
-            className={root}
-            direction="column"
-            justify="center"
-            spacing={24}
-          >
-            <Grid item style={{ minHeight: 0, maxWidth: 900, width: "100%" }}>
-              <ReplayViewer gameManager={gameManager} />
-            </Grid>
-            <Grid item>
-              <Grid
-                container
-                justify="space-between"
-                alignItems="center"
-                spacing={24}
-              >
-                <Grid item>
-                  <PlayControls />
-                </Grid>
-                <Grid item>
-                  <FieldCameraControls />
-                </Grid>
-              </Grid>
-            </Grid>
-            <Grid item>
-              <PlayerCameraControls />
-            </Grid>
-            <Grid item>
-              <Slider />
-            </Grid>
-          </Grid>
-        ) : (
-          "Loading..."
-        )}
+        <Tabs value={tab} onChange={this.handleChange}>
+          <Tab label="Viewer" value="viewer" />
+          <Tab label="Other" value="other" />
+        </Tabs>
+        {tab === "viewer" && <Main />}
+        {tab === "other" && <div>Other</div>}
       </div>
     )
   }
 }
 
-export default withStyles({
-  root: {
-    "&& > div:nth-child(even)": {
-      backgroundColor: "rgba(0, 0, 0, 0.05)",
-    },
-  },
-})(App)
+export default App

docs/src/App.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+
+const Empty = () => {
+  return <div>Empty component</div>
+}
+
+export default Empty

docs/src/components/Empty.tsx

@@ -0,0 +1,41 @@
+import React, { Component } from "react"
+
+import { FPSClock, GameBuilderOptions, loadReplay } from "../../../src"
+import Viewer from "./Viewer"
+
+interface State {
+  options?: GameBuilderOptions
+}
+
+class Main extends Component<any, State> {
+  constructor(props: any) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() {
+    const REPLAY_ID = "9944A36A11E987D3E286C1B524E68ECC"
+
+    loadReplay(REPLAY_ID).then(([replayData, replayMetadata]) => {
+      this.setState({
+        options: {
+          replayData,
+          replayMetadata,
+          clock: FPSClock.convertReplayToClock(replayData),
+        },
+      })
+    })
+  }
+
+  render() {
+    const { options } = this.state
+
+    if (!options) {
+      return "Loading..."
+    }
+
+    return <Viewer options={options} />
+  }
+}
+
+export default Main