Auth server (#1)

* Add secret auth * add auth db * lint * fix Co-authored-by: Lieu Zheng Hong <lieu@lieuzhenghong.com>
juxd · Jan 8, 2021 · 776f269 · 776f269
1 parent ef49b7d
commit 776f269
Show file tree

Hide file tree

Showing 28 changed files with 336 additions and 97 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,6 +15,6 @@
         "semi": ["error", "never"],
         "arrow-parens": ["error", "as-needed"],
         "max-len": ["error", { "code": 140 }],
-        "no-console": "off", // we hackathon
+        "no-console": "off" // we hackathon
     }
 }
diff --git a/client/GameClient.js b/client/GameClient.js
@@ -6,10 +6,10 @@ import MessageCommand from '../common/command/MessageCommand'
 import FireCommand from '../common/command/FireCommand'
 import PIXIRenderer from './graphics/PIXIRenderer'
 
-let ALLOW_ROTATION = true
+const ALLOW_ROTATION = false
 
 class GameClient {
-    constructor() {
+    constructor(secret) {
         this.client = new nengi.Client(nengiConfig)
         this.renderer = new PIXIRenderer()
         this.input = new InputSystem()
@@ -22,7 +22,7 @@ class GameClient {
             console.log('connection closed')
         })
 
-        this.client.connect('ws://localhost:8079')
+        this.client.connect('ws://localhost:8079', { secret })
     }
 
     update(delta, tick, now) {

diff --git a/client/InputSystem.js b/client/InputSystem.js
@@ -11,7 +11,7 @@ class InputSystem {
             r: false,
             mx: 0,
             my: 0,
-            mouseDown: false
+            mouseDown: false,
         }
 
         this.frameState = {
@@ -20,16 +20,14 @@ class InputSystem {
             a: false,
             d: false,
             r: false,
-            mouseDown: false
+            mouseDown: false,
         }
 
         // disable right click
-        document.addEventListener('contextmenu', event =>
-            event.preventDefault()
-        )
+        document.addEventListener('contextmenu', event => event.preventDefault())
 
         document.addEventListener('keydown', event => {
-            //console.log('keydown', event)
+            // console.log('keydown', event)
             // w or up arrow
             if (event.keyCode === 87 || event.keyCode === 38) {
                 this.currentState.w = true
@@ -53,7 +51,7 @@ class InputSystem {
         })
 
         document.addEventListener('keyup', event => {
-            //console.log('keyup', event)
+            // console.log('keyup', event)
             if (event.keyCode === 87 || event.keyCode === 38) {
                 this.currentState.w = false
             }
@@ -81,7 +79,6 @@ class InputSystem {
             this.frameState.mouseDown = true
         })
 
-
         document.addEventListener('mouseup', event => {
             this.currentState.mouseDown = false
         })

diff --git a/client/clientMain.js b/client/clientMain.js
@@ -1,12 +1,14 @@
+import GameClient from './GameClient'
 
-import GameClient from './GameClient';
-
-window.onload = function() {
+window.onload = function () {
     console.log('window loaded')
-    const gameClient = new GameClient()
+
+    // TODO: const secret = document.getElementById('secret-input').value
+    const secret = 'MAGIC_VALUE'
+    const gameClient = new GameClient(secret)
     let tick = 0
     let previous = performance.now()
-    const loop = function() {
+    const loop = function () {
         window.requestAnimationFrame(loop)
         const now = performance.now()
         const delta = (now - previous) / 1000
@@ -17,4 +19,4 @@ window.onload = function() {
     }
 
     loop()
-}
+}
diff --git a/client/graphics/BackgroundGrid.js b/client/graphics/BackgroundGrid.js
@@ -1,19 +1,19 @@
 import * as PIXI from 'pixi.js'
 
 class BackgroundGrid extends PIXI.Container {
-    constructor()  {
+    constructor() {
         super()
 
-        for (var i = 0; i < 11; i++) {           
-            let line = new PIXI.Graphics()
+        for (var i = 0; i < 11; i++) {
+            const line = new PIXI.Graphics()
             line.lineStyle(2, 0x333333)
             line.moveTo(i * 100, 0)
             line.lineTo(i * 100, 1000)
             this.addChild(line)
         }
 
-        for (var i = 0; i < 11; i++) {           
-            let line = new PIXI.Graphics()
+        for (var i = 0; i < 11; i++) {
+            const line = new PIXI.Graphics()
             line.lineStyle(2, 0x333333)
             line.moveTo(0, i * 100)
             line.lineTo(1000, i * 100)
@@ -22,4 +22,4 @@ class BackgroundGrid extends PIXI.Container {
     }
 }
 
-export default BackgroundGrid
+export default BackgroundGrid
diff --git a/client/graphics/GreenCircle.js b/client/graphics/GreenCircle.js
@@ -0,0 +1,25 @@
+import * as PIXI from 'pixi.js'
+
+class GreenCircle extends PIXI.Container {
+    constructor(entity) {
+        super()
+        this.x = entity.x
+        this.y = entity.y
+        this.isAlive = entity.isAlive // not really used...
+
+        this.body = new PIXI.Graphics()
+        this.body.beginFill(0xffffff)
+        this.body.drawCircle(0, 0, 25)
+        this.body.endFill()
+
+        this.body.tint = 0x00ff00
+
+        this.addChild(this.body)
+    }
+
+    update(delta) {
+
+    }
+}
+
+export default GreenCircle
diff --git a/client/graphics/PIXIRenderer.js b/client/graphics/PIXIRenderer.js
@@ -12,12 +12,12 @@ class PIXIRenderer {
         this.entities = new Map()
 
         this.renderer = PIXI.autoDetectRenderer({
-            width :window.innerWidth,
+            width: window.innerWidth,
             height: window.innerHeight,
             view: this.canvas,
             antialiasing: false,
             transparent: false,
-            resolution: 1
+            resolution: 1,
         })
 
         this.stage = new PIXI.Container()
@@ -60,7 +60,7 @@ class PIXIRenderer {
     updateEntity(update) {
         const entity = this.entities.get(update.nid)
         console.log(update.nid)
-        if (update.prop == "message") {
+        if (update.prop == 'message') {
             entity.showMessage(update.value)
         } else {
             entity[update.prop] = update.value
@@ -106,7 +106,7 @@ class PIXIRenderer {
             graphics.destroy({
                 children: true,
                 texture: true,
-                baseTexture: true
+                baseTexture: true,
             })
         }, 64)
     }
@@ -130,7 +130,7 @@ class PIXIRenderer {
     toWorldCoordinates(mouseX, mouseY) {
         return {
             x: -this.camera.x + mouseX,
-            y: -this.camera.y + mouseY
+            y: -this.camera.y + mouseY,
         }
     }
 
@@ -143,7 +143,7 @@ class PIXIRenderer {
         */
 
         if (this.myEntity) {
-            //this.centerCamera(this.myEntity)
+            // this.centerCamera(this.myEntity)
             this.followSmoothlyWithCamera(this.myEntity, delta)
         }
 

diff --git a/client/graphics/PlayerCharacter.js b/client/graphics/PlayerCharacter.js
@@ -36,17 +36,21 @@ class PlayerCharacter extends PIXI.Container {
 
         this.addChild(this.avatar)
 
-        let name = entity.name
+        const { name } = entity
 
-        let playerNameText = new PIXI.Text(name,{fontFamily : 'Arial', fontSize: 15, fill : 0xffffff, align : 'center'});
+        const playerNameText = new PIXI.Text(name, {
+            fontFamily: 'Arial', fontSize: 15, fill: 0xffffff, align: 'center',
+        })
         this.playerNameText = playerNameText
         this.playerNameText.y = 25
         this.playerNameText.x = -25
         this.addChild(this.playerNameText)
     }
 
     showMessage(msg) {
-        let messageCanvas = new PIXI.Text(msg ,{fontFamily : 'Arial', fontSize: 15, fill : 0xffffff, align : 'center'});
+        const messageCanvas = new PIXI.Text(msg, {
+            fontFamily: 'Arial', fontSize: 15, fill: 0xffffff, align: 'center',
+        })
         this.messageBubble = messageCanvas
         this.messageBubble.y = -30
         this.messageBubble.x = -25
@@ -56,7 +60,7 @@ class PlayerCharacter extends PIXI.Container {
             messageCanvas.destroy({
                 children: true,
                 texture: true,
-                baseTexture: true
+                baseTexture: true,
             })
         }, 5000)
     }
@@ -71,4 +75,4 @@ class PlayerCharacter extends PIXI.Container {
     }
 }
 
-export default PlayerCharacter
+export default PlayerCharacter
diff --git a/common/CollisionSystem.js b/common/CollisionSystem.js
@@ -6,9 +6,9 @@ class CollisionSystem {
     }
 
     checkLineCircle(x1, y1, x2, y2, circleCollider) {
-        let line = new SAT.Polygon(new SAT.Vector(), [
+        const line = new SAT.Polygon(new SAT.Vector(), [
             new SAT.Vector(x1, y1),
-            new SAT.Vector(x2, y2)
+            new SAT.Vector(x2, y2),
         ])
         return SAT.testCirclePolygon(circleCollider, line)
     }

diff --git a/common/WeaponSystem.js b/common/WeaponSystem.js
@@ -24,4 +24,4 @@ class WeaponSystem {
     }
 }
 
-export default WeaponSystem
+export default WeaponSystem
diff --git a/common/command/FireCommand.js b/common/command/FireCommand.js
@@ -9,7 +9,7 @@ class FireCommand {
 
 FireCommand.protocol = {
     x: nengi.Int32,
-    y: nengi.Int32
+    y: nengi.Int32,
 }
 
 export default FireCommand
diff --git a/common/command/MessageCommand.js b/common/command/MessageCommand.js
@@ -7,7 +7,7 @@ class MessageCommand {
 }
 
 MessageCommand.protocol = {
-    msg: nengi.String
+    msg: nengi.String,
 }
 
-export default MessageCommand;
+export default MessageCommand
diff --git a/common/command/MoveCommand.js b/common/command/MoveCommand.js
@@ -17,7 +17,7 @@ MoveCommand.protocol = {
     backward: nengi.Boolean,
     right: nengi.Boolean,
     rotation: nengi.Float32,
-    delta: nengi.Float32
+    delta: nengi.Float32,
 }
 
-export default MoveCommand;
+export default MoveCommand
diff --git a/common/entity/GreenCircle.js b/common/entity/GreenCircle.js
@@ -0,0 +1,18 @@
+import nengi from 'nengi'
+import SAT from 'sat'
+
+class GreenCircle {
+    constructor(x, y) {
+        this.x = x
+        this.y = y
+        this.isAlive = true
+        this.collider = new SAT.Circle(new SAT.Vector(this.x, this.y), 25)
+    }
+}
+
+GreenCircle.protocol = {
+    x: { type: nengi.Float32, interp: false },
+    y: { type: nengi.Float32, interp: false },
+}
+
+export default GreenCircle
diff --git a/common/entity/PlayerCharacter.js b/common/entity/PlayerCharacter.js
@@ -1,22 +1,21 @@
 import nengi from 'nengi'
-import WeaponSystem from '../WeaponSystem'
 import SAT from 'sat'
+import WeaponSystem from '../WeaponSystem'
 
 class PlayerCharacter {
-    constructor() {
+    constructor({ name }) {
         this.x = 0
         this.y = 0
         this.isAlive = true
 
-
         this.moveDirection = {
             x: 0,
-            y: 0
+            y: 0,
         }
 
         this.speed = 400
 
-        this.name = "weineng"
+        this.name = name
 
         this.rotation = 0
 
@@ -36,7 +35,7 @@ class PlayerCharacter {
     processChatMessage(command) {
         this.message = command.msg
         setTimeout(() => {
-            this.message = ""
+            this.message = ''
         }, 5000)
     }
 
@@ -69,8 +68,8 @@ class PlayerCharacter {
         // normalize
         const len = Math.sqrt(unitX * unitX + unitY * unitY)
         if (len > 0) {
-            unitX = unitX / len
-            unitY = unitY / len
+            unitX /= len
+            unitY /= len
         }
 
         this.moveDirection.x = unitX
@@ -92,7 +91,7 @@ PlayerCharacter.protocol = {
     isAlive: nengi.Boolean,
     hitpoints: nengi.UInt8,
     name: nengi.String,
-    message: nengi.String
+    message: nengi.String,
 }
 
 export default PlayerCharacter
diff --git a/common/message/Identity.js b/common/message/Identity.js
@@ -7,7 +7,7 @@ class Identity {
 }
 
 Identity.protocol = {
-    entityId: nengi.UInt16
+    entityId: nengi.UInt16,
 }
 
 export default Identity