add stats

README.md

@@ -7,9 +7,9 @@ The game blends some elements of traditional MMORPG dungeons with modern MOBAs.
 
 ## Design Pillars
 
-| Power | Creation | Competition |
+| Power | Reaction | Competition |
 | --- | --- | --- |
-| Players gradually get stronger as they complete quests. | The quests provide upgrade paths that provide customization. | If not by sheer power or a good build, teams have to outperform the opposing team to win by any means. |
+| Players gradually get stronger as they complete quests. | Quests provide upgrade paths that provide opportunity to adapt. | If not by sheer power or a good build, teams have to outperform the opposing team to win by any means. |
 
 ## Audience & Market
 

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@tweenjs/tween.js": "^25.0.0",
         "sat": "^0.9.0",
+        "stats.js": "^0.17.0",
         "three": "^0.171.0",
         "websocket-express": "^3.1.2"
       }
@@ -953,6 +954,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tweenjs/tween.js": "^25.0.0",
     "sat": "^0.9.0",
+    "stats.js": "^0.17.0",
     "three": "^0.171.0",
     "websocket-express": "^3.1.2"
   }

public/client.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three'
 import { Tween } from '@tweenjs/tween.js'
+import Stats from 'stats.js'
 
 const global = (0,eval)('this')
 const scene = new THREE.Scene()
@@ -70,10 +71,15 @@ const tweenDuration = 33
 const keysDown = {}
 const mouse = {}
 
+var stats = new Stats()
+stats.showPanel(0)
+
 function render() {
+  stats.begin()
   cameraMovement()
   Object.values(positionTweens).forEach((tween) => tween.update()) // TODO: clean up tweens
 	renderer.render(scene, camera)
+  stats.end()
 }
 
 function minimapRender() {
@@ -560,4 +566,6 @@ window.addEventListener('load', () => {
   const minimap = minimapRenderer.domElement
   minimap.classList.add('minimap')
   document.body.appendChild(minimap)
+
+  document.body.appendChild(stats.dom)
 })

public/index.html

@@ -7,7 +7,8 @@
         "imports": {
           "three": "/three/build/three.module.js",
           "three/addons/": "/three/examples/jsm/",
-          "@tweenjs/tween.js": "/@tweenjs/tween.js/dist/tween.esm.js"
+          "@tweenjs/tween.js": "/@tweenjs/tween.js/dist/tween.esm.js",
+          "stats.js": "/stats.js/src/stats.js"
         }
       }
     </script>

src/ability.js

@@ -1,9 +1,7 @@
 import Buff from './buff.js'
 import Projectile from './projectile.js'
 
-// major damage  OR minor self sustain / crowd control
+// Three classes: Blade, Armor, Charm
-// major support OR minor vision / selfless support / creative
-// major control OR minor mobility
 
 export default class Ability {
   id = crypto.randomUUID()

src/index.js

@@ -14,6 +14,7 @@ const game = new Game()
 app.use('/', express.static('public'))
 app.use('/three/', express.static('node_modules/three'))
 app.use('/@tweenjs/', express.static('node_modules/@tweenjs'))
+app.use('/stats.js/', express.static('node_modules/stats.js'))
 app.use(express.urlencoded({ extended: true }))
 
 app.ws('/ws', async (req, res) => {