Added progress/high score (#16)

Removed `Current/Best`, and added this: 
<img width="1063" alt="screen shot 2018-11-08 at 8 38 19 pm" src="https://user-images.githubusercontent.com/83221/48225735-f8e61900-e39d-11e8-9e12-90b938452075.png">

The "next" value is relative to yours, so you'll see it decrease while you increase your height, giving you an extra boost knowing how close you are to the next position on the leaderboard.

src/game/engine.jsx

@@ -1,6 +1,8 @@
 import React, { useRef, useState, useEffect } from 'react';
 import * as ex from 'excalibur';
 
+import useModel from '../hooks/model';
+import useLayout from '../hooks/layout';
 import Chopper from './chopper';
 import Cloud from './cloud';
 import Floor from './floor';
@@ -12,7 +14,33 @@ import HUD from './hud';
 
 import './engine.css';
 
+const genericProps = {
+  qInfo: {
+    qType: 'highscore',
+  },
+  qHyperCubeDef: {
+    qDimensions: [
+      { qDef: { qFieldDefs: ['[userid]'] } },
+      { qDef: { qFieldDefs: ['[name]'] } },
+      {
+        qDef: {
+          qFieldDefs: ['[score]'],
+          qReverseSort: true,
+          qSortCriterias: [{ qSortByNumeric: true }],
+        },
+        qNullSuppression: true,
+      }],
+    qInitialDataFetch: [{
+      qWidth: 3,
+      qHeight: 1000,
+    }],
+    qSuppressMissing: true,
+    qInterColumnSortOrder: [2, 0],
+  },
+};
+
 export default function ({ player, socket }) {
+  const layout = useLayout(useModel(genericProps));
   const gameid = useRef(null);
   const chopperRef = useRef(null);
   const [canvasId] = useState(`canvas${Date.now()}`);
@@ -34,6 +62,7 @@ export default function ({ player, socket }) {
   }, []);
 
   useEffect(() => {
+    if (!layout) return;
     const loader = new ex.Loader();
     Object.keys(Resources).forEach(key => loader.addResource(Resources[key]));
     const engine = new ex.Engine({
@@ -49,7 +78,7 @@ export default function ({ player, socket }) {
       Object.assign(Settings.scale, { x: scale, y: scale });
       const chopper = new Chopper(engine);
       const countDown = new CountDown(engine, chopper);
-      const hud = new HUD(engine, chopper);
+      const hud = new HUD(engine, chopper, layout);
       const gameOver = new GameOver(engine, chopper);
       countDown.go = () => {
         socket.send({
@@ -84,7 +113,7 @@ export default function ({ player, socket }) {
       });
       engine.currentScene.camera.strategy.lockToActor(chopper);
     });
-  }, []);
+  }, [layout]);
 
   return <div className="engine"><canvas id={canvasId} /></div>;
 }

src/game/hud.js

@@ -2,43 +2,41 @@ import * as ex from 'excalibur';
 
 import Settings from './settings';
 
+const createLabel = cfg => new ex.Label(Object.assign({}, Settings.labelBase, cfg));
+
 export default ex.UIActor.extend({
-  constructor(engine, chopper) {
+  constructor(engine, chopper, layout) {
     const centerModifier = engine.drawHeight / 4;
     ex.Actor.apply(this, [0, 0]);
+    this.highscores = layout.qHyperCube.qDataPages[0].qMatrix.reverse();
     this.chopper = chopper;
     this.maxScore = 0;
-    this.powerLabel = new ex.Label(Object.assign({}, Settings.labelBase, {
-      pos: new ex.Vector(20, 20),
-    }));
-    this.scoreLabel = new ex.Label(Object.assign({}, Settings.labelBase, {
-      pos: new ex.Vector(20, engine.drawHeight - 64),
-    }));
-    this.warningLabel = new ex.Label(Object.assign({}, Settings.labelBase, {
+    this.powerLabel = createLabel({ pos: new ex.Vector(20, 20) });
+    this.warningLabel = createLabel({
       fontSize: 78,
       textAlign: ex.TextAlign.Center,
       baseAlign: ex.BaseAlign.Top,
       pos: new ex.Vector(engine.drawWidth / 2, (engine.drawHeight / 2) - centerModifier - 75),
       color: ex.Color.Red,
-    }));
-    this.warningTextLabel = new ex.Label(Object.assign({}, Settings.labelBase, {
+    });
+    this.warningTextLabel = createLabel({
       fontSize: 60,
       textAlign: ex.TextAlign.Center,
       baseAlign: ex.BaseAlign.Top,
       pos: new ex.Vector(engine.drawWidth / 2, (engine.drawHeight / 2) - centerModifier),
-    }));
+    });
+    this.progressLabel = createLabel({
+      pos: new ex.Vector(20, engine.drawHeight - 64),
+    });
     this.add(this.powerLabel);
-    this.add(this.scoreLabel);
     this.add(this.warningLabel);
     this.add(this.warningTextLabel);
+    this.add(this.progressLabel);
   },
 
-  update(engine, delta) {
-    ex.Actor.prototype.update.apply(this, [engine, delta]);
-    let power = 0;
+  updatePower(power) {
     let modifiedPower = 0;
     if (this.chopper.vel.y < 0) {
-      power = Math.round((-this.chopper.vel.y / Settings.MAX_VELOCITY) * 100);
       modifiedPower = Math.round(
         (-this.chopper.unclampedVelocity / Settings.MAX_VELOCITY) * 100,
       ) - 100;
@@ -47,11 +45,21 @@ export default ex.UIActor.extend({
       }
     }
     this.powerLabel.text = `Velocity: ${power}% (${modifiedPower}%)`;
+  },
 
+  updateProgress() {
+    const hs = this.highscores;
     const current = Math.round(-this.chopper.y);
     this.maxScore = this.maxScore < current ? current : this.maxScore;
-    this.scoreLabel.text = `Height: ${current} Best: ${this.maxScore}`;
+    const nextPos = hs.find(s => s[2].qNum > this.maxScore);
+    const position = nextPos ? hs.length - hs.indexOf(nextPos) : 1;
+    const next = nextPos
+      ? `${nextPos[2].qNum - this.maxScore} (${nextPos[1].qText})`
+      : "You're in the lead!";
+    this.progressLabel.text = `You: ${this.maxScore} (#${position}) Next: ${next}`;
+  },
 
+  updateWarning(power) {
     let label = '';
     let labelText = '';
     if (this.chopper.hasBounced && Math.abs(this.chopper.y) > 200) {
@@ -67,4 +75,12 @@ export default ex.UIActor.extend({
     this.warningLabel.text = label;
     this.warningTextLabel.text = labelText;
   },
+
+  update(engine, delta) {
+    ex.Actor.prototype.update.apply(this, [engine, delta]);
+    const power = Math.round((-this.chopper.vel.y / Settings.MAX_VELOCITY) * 100);
+    this.updatePower(power);
+    this.updateWarning(power);
+    this.updateProgress();
+  },
 });