add stats of compile time / fps sent to server

Author: gre

server/index.js

@@ -13,6 +13,7 @@ const promisify = (f, ctx = null) => (...args) =>
 const connectMongo = promisify(MongoClient.connect);
 const scores = () =>
   connectMongo(env.MONGO).then(db => db.collection("scores"));
+const stats = () => connectMongo(env.MONGO).then(db => db.collection("stats"));
 
 scores().then(coll => promisify(coll.count, coll)()).then(count => {
   console.log(count + " scores");
@@ -46,6 +47,17 @@ const recordScore = doc =>
     );
   });
 
+const fetchStats = () =>
+  stats().then(coll => {
+    const q = coll.find();
+    return promisify(q.toArray, q)();
+  });
+
+const recordStats = doc =>
+  stats().then(coll => {
+    return promisify(coll.insertOne, coll)(doc);
+  });
+
 const app = require("express")();
 app.use(require("body-parser").json());
 app.use(require("cors")());
@@ -81,6 +93,88 @@ app.post("/test", (req, res) => {
   }
 });
 
+function checkValidStat(body) {
+  if (!body || typeof body !== "object") {
+    throw new Error("invalid body");
+  }
+  if (typeof body.userAgent !== "string") {
+    throw new Error("invalid body.userAgent");
+  }
+  if (
+    typeof body.config !== "object" ||
+    typeof body.config.quality !== "string" ||
+    typeof body.config.seed !== "string"
+  ) {
+    throw new Error("invalid body.config");
+  }
+}
+function checkValidSuccessStat(body) {
+  if (!body.stats || typeof body.stats !== "object")
+    throw new Error("missing body.stats");
+  if (typeof body.stats.averageFPS !== "number")
+    throw new Error("invalid body.stats.averageFPS");
+  if (typeof body.stats.bootTime !== "number")
+    throw new Error("invalid body.stats.bootTime");
+}
+function checkValidFailureStat(body) {
+  if (typeof body.error !== "string") throw new Error("missing body.error");
+}
+
+app.get("/stats", (req, res) => {
+  fetchStats()
+    .then(stats => {
+      const successEntries = stats.filter(s => s.type === "success");
+      const failureEntries = stats.filter(s => s.type === "failure");
+      const out = {
+        successCount: successEntries.length,
+        failureCount: failureEntries.length,
+        statsPerQuality: {
+          low: successEntries
+            .filter(s => s.config.quality === "low")
+            .map(s => s.stats),
+          medium: successEntries
+            .filter(s => s.config.quality === "medium")
+            .map(s => s.stats),
+          high: successEntries
+            .filter(s => s.config.quality === "high")
+            .map(s => s.stats)
+        }
+      };
+      res.json(out);
+    })
+    .catch(e => {
+      console.error(e);
+      res.status(500).send();
+    });
+});
+
+app.post("/stats/failure", (req, res) => {
+  Promise.resolve(req.body)
+    .then(body => {
+      checkValidStat(body);
+      checkValidFailureStat(body);
+      return recordStats(Object.assign({ type: "failure" }, body));
+    })
+    .then(res.send())
+    .catch(e => {
+      console.log(e);
+      res.status(500).send();
+    });
+});
+app.post("/stats/success", (req, res) => {
+  Promise.resolve(req.body)
+    .then(body => {
+      checkValidStat(body);
+      checkValidSuccessStat(body);
+      return recordStats(Object.assign({ type: "success" }, body));
+    })
+    .then(res.send())
+    .catch(e => {
+      console.log(e);
+      res.status(500).send();
+    });
+});
+
 app.post("/", (req, res) => {
   // a GameState is sent to server
   Promise.resolve(req.body)

src/Game/Render.js

@@ -184,7 +184,7 @@ class Game extends Component {
   componentDidMount() {
     const { body } = document;
     const { canvas } = this;
-    const { onGLFailure } = this.props;
+    const { onGLFailure, onSuccessStart } = this.props;
     if (!body || !canvas) return;
     const { getGameState, action } = this.props;
     for (let k = 0; k < 500; k++) {
@@ -326,11 +326,29 @@ class Game extends Component {
     });
 
     let lastTime;
+    let bootTime;
+    let timeAtTick100;
+    let timeAtTick100After10sReached = false;
 
     regl.frame(e => {
       const prevState = getGameState();
       const state = action("tick", e, this.getUserEvents());
 
+      if (e.tick === 30) {
+        bootTime = Math.max(0, e.time - 0.5); // 30 ticks assumed to be 0.5s
+      } else if (e.tick === 100) {
+        timeAtTick100 = e.time;
+      } else if (
+        !timeAtTick100After10sReached &&
+        e.tick > 100 &&
+        e.time - timeAtTick100 >= 10
+      ) {
+        // 10 seconds after tick 100
+        timeAtTick100After10sReached = true;
+        const averageFPS = (e.tick - 100) / 10;
+        onSuccessStart({ bootTime, averageFPS });
+      }
+
       if (prevState.track !== state.track) {
         encodeTrack(state.track, trackData);
         track({

src/Game/Stats.js

@@ -0,0 +1,24 @@
+//@flow
+import env from "../env";
+import type { Config } from "./Config";
+
+const getExtraParams = () => {
+  return {
+    userAgent: navigator.userAgent,
+    href: window.location.href
+  };
+};
+
+export const sendSuccess = (config: Config, stats: *) =>
+  fetch(env.highscoresAPI + "/stats/success", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ ...getExtraParams(), config, stats })
+  }).then(res => res.json());
+
+export const sendFailure = (config: Config, error: string) =>
+  fetch(env.highscoresAPI + "/stats/failure", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ ...getExtraParams(), config, error })
+  }).then(res => res.json());

src/Game/index.js

@@ -6,6 +6,7 @@ import "./index.css";
 import * as Conf from "./Config";
 import type { Config } from "./Config";
 import * as HighScores from "./HighScores";
+import * as Stats from "./Stats";
 let Logic = require("./Logic").default;
 let { default: Render } = require("./Render");
 
@@ -218,10 +219,14 @@ class GameComponent extends Component {
     });
   };
   onGLFailure = (errorMessage: string) => {
+    Stats.sendFailure(this.state.config, errorMessage);
     this.gameState = null;
     this.forceUpdate();
     if (process.env.NODE_ENV === "production") alert(errorMessage);
   };
+  onSuccessStart = (stats: *) => {
+    Stats.sendSuccess(this.state.config, stats);
+  };
   render() {
     const {
       config,
@@ -257,6 +262,7 @@ class GameComponent extends Component {
           action={this.action}
           gameContext={{ highscores, title: gameContextTitle }}
           onGLFailure={this.onGLFailure}
+          onSuccessStart={this.onSuccessStart}
         />
       );
     } else {