Merge branch 'master' of github.com:juxd/discord-spatial-layer

client/InputSystem.js

@@ -34,9 +34,11 @@ class InputSystem {
         }
 
         // disable right click
-        document.addEventListener('contextmenu', event => event.preventDefault())
+        this.listen('contextmenu', event => {
+            event.preventDefault()
+        });
 
-        document.addEventListener('keydown', event => {
+        this.listen('keydown', event => {
             // console.log('keydown', event)
             // w or up arrow
             if (event.keyCode === 87 || event.keyCode === 38) {
@@ -85,7 +87,7 @@ class InputSystem {
             }
         })
 
-        document.addEventListener('keyup', event => {
+        this.listen('keyup', event => {
             // console.log('keyup', event)
             if (event.keyCode === 87 || event.keyCode === 38) {
                 this.currentState.w = false
@@ -116,24 +118,35 @@ class InputSystem {
             }
         })
 
-        document.addEventListener('mousemove', event => {
+        this.listen('mousemove', event => {
             this.currentState.mx = event.clientX
             this.currentState.my = event.clientY
             if (this.onmousemove) {
                 this.onmousemove(event)
             }
         })
 
-        document.addEventListener('pointerdown', event => {
+        this.listen('pointerdown', event => {
             this.currentState.mouseDown = true
             this.frameState.mouseDown = true
         })
 
-        document.addEventListener('mouseup', event => {
+        this.listen('mouseup', event => {
             this.currentState.mouseDown = false
         })
     }
 
+    listen(event, callback) {
+        document.addEventListener(event, (event) => {
+            const id = event.target.getAttribute('id');
+            if (id !== "main-canvas") {
+                return event;
+            }
+
+            callback(event);
+        })
+    }
+
     releaseKeys() {
         this.frameState.w = this.currentState.w
         this.frameState.a = this.currentState.a

client/clientMain.js

@@ -1,64 +1,11 @@
-import GameClient from './GameClient'
-import instantiateClient from './instantiateClient'
-
-const SECRET_KEY_FORM_ID = 'secret-key-form'
+import UI from './runClient';
 
 window.onload = function () {
     const container = document.getElementById('container')
     container.style.height = '100%'
     container.style.width = '100%'
     container.style.position = 'absolute'
 
-    container.insertAdjacentHTML('beforeend', renderSecretKeyForm())
-}
-
-function renderSecretKeyForm() {
-    return `
-    <form id="${SECRET_KEY_FORM_ID}">
-      <label for="secret-key">Secret Key:</label><br>
-      <input type="text" id="secret-key" name="secret-key"><br>
-      <input type="submit" value="Submit">
-    </form>
-  `
-}
-
-let gameClient
-
-function handleSecretKeyFormSubmit(e) {
-    const secretKey = document.getElementById('secret-key').value
-
-    instantiateClient(secretKey)
-        .then(client => {
-            const canvas = '<canvas id=\'main-canvas\' style="height: 100%; width: 100%"></canvas>'
-            container.innerText = ''
-            container.insertAdjacentHTML('beforeend', canvas)
-            gameClient = new GameClient(client)
-            let tick = 0
-            let previous = performance.now()
-            const loop = function () {
-                window.requestAnimationFrame(loop)
-                const now = performance.now()
-                const delta = (now - previous) / 1000
-                previous = now
-                tick++
-
-                gameClient.update(delta, tick, now)
-            }
-
-            loop()
-        })
-        .catch(res => {
-            alert('shit secret key')
-        })
+    const ui = new UI(container);
+    ui.start();
 }
-
-document.addEventListener('submit', e => {
-    e.preventDefault()
-
-    const form = e.target
-    const formId = form.getAttribute('id')
-
-    if (formId === SECRET_KEY_FORM_ID) {
-        handleSecretKeyFormSubmit(e)
-    }
-}, false)

client/graphics/PIXIRenderer.js

@@ -68,7 +68,9 @@ class PIXIRenderer {
 
     updateEntity(update) {
         const entity = this.entities.get(update.nid)
-        entity[update.prop] = update.value
+        if (entity) {
+            entity[update.prop] = update.value
+        }
     }
 
     processMessage(message) {
@@ -78,7 +80,7 @@ class PIXIRenderer {
         } else if (message.protocol.name === 'DiscordMessageReceived') {
             console.log('rec mesage', message)
             const entity = this.entities.get(message.authorEntityNid)
-            entity.showMessage(message.content)
+            entity && entity.showMessage(message.content)
         } else if (message.protocol.name === 'PlayerMoodChanged') {
             console.log("Player mood changed!", message.moodString)
             entity.processMood(message.moodString)
@@ -103,7 +105,7 @@ class PIXIRenderer {
     drawHitscan(x, y, targetX, targetY, color) {
         // draws a debug line showing a shot
         const graphics = new PIXI.Graphics()
-        graphics.lineStyle(10, color)
+        graphics.lineStyle(2, color)
         graphics.moveTo(x, y)
         graphics.lineTo(targetX, targetY)
         this.foreground.addChild(graphics)

client/graphics/PlayerCharacter.js

@@ -29,7 +29,6 @@ class PlayerCharacter extends PIXI.Container {
         this.x = entity.x
         this.y = entity.y
         this.mood = entity.mood
-        console.log("mood:", this.mood)
 
         this.avatar = new PlayerAvatar(0xff0000)
 
@@ -46,16 +45,17 @@ class PlayerCharacter extends PIXI.Container {
             wordWrap: true,
         })
         this.playerNameText = playerNameText
-        this.playerNameText.y = 25
+        this.playerNameText.y = CONFIG.PLAYER_DIAMETER / 2
         this.playerNameText.x = -playerNameText.width / 2
         this.addChild(this.playerNameText)
     }
 
     showMessage(msg) {
-        this.removeChild(this.messageBubble)
+        this.messageBubble && this.removeChild(this.messageBubble)
 
         const messageCanvas = new PIXI.Text(msg, {
             fontFamily: 'Arial',
+            fontWeight: 'bold',
             fontSize: 15,
             fill: 0xffffff,
             align: 'center',
@@ -81,9 +81,7 @@ class PlayerCharacter extends PIXI.Container {
     }
 
     update(delta) {
-        // this.rotation = 0
         this.moodFace && this.removeChild(this.moodFace)
-        // let playerNameText;
         let sprite;
 
         if (this.mood === "neutral") {
@@ -102,7 +100,6 @@ class PlayerCharacter extends PIXI.Container {
             sprite = new PIXI.Sprite.from(CONFIG.ANGRY_FACE);
         }
 
-        console.log(this.mood)
         sprite.width = 60
         sprite.height = 60
         sprite.anchor.set(0.5)

client/runClient.js

@@ -0,0 +1,69 @@
+import GameClient from './GameClient'
+import instantiateClient from './instantiateClient'
+
+const SECRET_KEY_FORM_ID = 'secret-key-form'
+
+class UI {
+    constructor(container) {
+        this.container = container;
+    }
+
+    start() {
+        this.container.innerText = '';
+        this.container.insertAdjacentHTML('beforeend', this.renderSecretKeyForm());
+        document.addEventListener('submit', e => {
+            e.preventDefault()
+
+            const form = e.target
+            const formId = form.getAttribute('id')
+
+            if (formId === SECRET_KEY_FORM_ID) {
+                this.handleSecretKeyFormSubmit(e)
+            }
+        }, false)
+    }
+
+    renderSecretKeyForm() {
+        return `
+        <form id="${SECRET_KEY_FORM_ID}">
+          <label for="secret-key">Secret Key:</label><br>
+          <input type="text" id="secret-key" name="secret-key"><br>
+          <input type="submit" value="Submit">
+        </form>
+      `
+    }
+
+    handleSecretKeyFormSubmit(e) {
+        const secretKey = document.getElementById('secret-key').value;
+
+        instantiateClient(secretKey)
+            .then(client => {
+                console.log("success");
+                const canvas = '<canvas id=\'main-canvas\' style="height: 100%; width: 100%" tabindex="1"></canvas>'
+                this.container.innerText = ''
+                this.container.insertAdjacentHTML('beforeend', canvas)
+                document.getElementById('main-canvas').focus();
+                const gameClient = new GameClient(client)
+                let tick = 0
+                let previous = performance.now()
+                const loop = function () {
+                    window.requestAnimationFrame(loop)
+                    const now = performance.now()
+                    const delta = (now - previous) / 1000
+                    previous = now
+                    tick++
+
+                    gameClient.update(delta, tick, now)
+                }
+
+                loop()
+            })
+            .catch(err => {
+                console.log(`error: ${err}`);
+                alert('shit secret key')
+            })
+    }
+}
+
+export default UI;
+

common/entity/PlayerCharacter.js

@@ -67,12 +67,12 @@ class PlayerCharacter {
 
     move(delta) {
         this.x += this.moveDirection.x * this.speed * delta
-        this.x = Math.max(0, this.x)
-        this.x = Math.min(CONFIG.MAP_X, this.x)
+        this.x = Math.max(CONFIG.PLAYER_DIAMETER/2, this.x)
+        this.x = Math.min(CONFIG.MAP_X - CONFIG.PLAYER_DIAMETER/2, this.x)
 
         this.y += this.moveDirection.y * this.speed * delta
-        this.y = Math.max(0, this.y)
-        this.y = Math.min(CONFIG.MAP_Y, this.y)
+        this.y = Math.max(CONFIG.PLAYER_DIAMETER/2, this.y)
+        this.y = Math.min(CONFIG.MAP_Y - CONFIG.PLAYER_DIAMETER/2, this.y)
 
         this.collider.pos.x = this.x
         this.collider.pos.y = this.y

common/gameConfig.js

@@ -1,3 +1,6 @@
+// TODO REPO MAY CHANGE!
+const REPO = "https://raw.githubusercontent.com/juxd/discord-spatial-layer/master/public/"
+
 const config = {
     UPDATE_RATE: 20,
 
@@ -7,17 +10,19 @@ const config = {
     PLAYER_SPEED: 1200,
     PLAYER_CHAT_TIMEOUT: 5000, // 5s
 
-    MAP_IMAGE: './images/bg.png',
 
-    NEUTRAL_FACE: './images/tile000.png',
-    HAPPY_FACE: './images/tile002.png',
-    KISSY_FACE: './images/tile020.png',
-    CRYING_FACE: './images/tile079.png',
-    ANGRY_FACE: './images/tile089.png',
+    MAP_IMAGE: REPO + 'images/bg.png',
+
+    NEUTRAL_FACE: REPO +'images/tile000.png',
+    HAPPY_FACE: REPO + 'images/tile002.png',
+    KISSY_FACE: REPO + 'images/tile020.png',
+    CRYING_FACE: REPO + 'images/tile079.png',
+    ANGRY_FACE: REPO + 'images/tile089.png',
 
     // Use this to randomly get a face from tile{number}.png
     EMOJI_TILE_MIN: 0,
     EMOJI_TILE_MAX: 135,
+    PLAYER_DIAMETER: 50,
 }
 
 export default config

extension/src/js/inject.js

@@ -1,8 +1,4 @@
-import nengiConfig from '../../../common/nengiConfig'
-import main from '../../../client/runClient'
-
-console.log(nengiConfig)
-const SECRET_KEY_FORM_ID = 'secret-key-form'
+import UI from '../../../client/runClient'
 
 let container;
 
@@ -22,45 +18,9 @@ let container;
     container.style.top = '60%'
     container.style.backgroundColor = 'white'
 
-    container.insertAdjacentHTML('beforeend', renderSecretKeyForm())
-
-    // const canvas = document.createElement('canvas');
-    // canvas.id = 'game-canvas';
-    // canvas.style.height = '100%';
-    // canvas.style.width = '100%';
-    // canvas.style.backgroundColor = 'red';
+    const ui = new UI(container);
+    ui.start();
 
     body.appendChild(container)
-    // container.appendChild(canvas)
-}())
-
-function renderSecretKeyForm() {
-    return `
-    <form id="${SECRET_KEY_FORM_ID}">
-      <label for="secret-key">Secret Key:</label><br>
-      <input type="text" id="secret-key" name="secret-key"><br>
-      <input type="submit" value="Submit">
-    </form>
-  `
-}
-
-function handleSecretKeyFormSubmit(e) {
-    const secretKey = document.getElementById('secret-key').value
 
-    const canvas = '<canvas id=\'main-canvas\' style="height: 100%; width: 100%"></canvas>'
-    container.innerText = ''
-    container.insertAdjacentHTML('beforeend', canvas)
-
-    main(secretKey)
-}
-
-document.addEventListener('submit', e => {
-    e.preventDefault()
-
-    const form = e.target
-    const formId = form.getAttribute('id')
-
-    if (formId === SECRET_KEY_FORM_ID) {
-        handleSecretKeyFormSubmit(e)
-    }
-}, false)
+}())

server/AuthDatabase.js

@@ -139,6 +139,8 @@ class AuthDatabase {
 
     // Returns the code which the user is added to AuthDatabase with
     addUser(user) {
+        console.log('auth');
+        console.log(user);
         let code = randCode()
         while (this.registered.has(code)) code = randCode()
         this.registered.set(code, { user, game_status: null })