Update Chrome extension

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/runClient.js

@@ -0,0 +1,68 @@
+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%"></canvas>'
+                this.container.innerText = ''
+                this.container.insertAdjacentHTML('beforeend', canvas)
+                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/gameConfig.js

@@ -7,7 +7,7 @@ const config = {
     PLAYER_SPEED: 1200,
     PLAYER_CHAT_TIMEOUT: 5000, // 5s
 
-    MAP_IMAGE: './images/bg.png',
+    MAP_IMAGE: 'https://raw.githubusercontent.com/juxd/discord-spatial-layer/master/public/images/bg.png',
 
     NEUTRAL_FACE: './images/tile000.png',
     HAPPY_FACE: './images/tile002.png',

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 })

server/GameInstance.js

@@ -18,6 +18,10 @@ class GameInstance {
         this.nids = new Map()
         if (process.env.NODE_ENV === 'development') this.authDatabase.addUserWithSecret({ displayName: 'joe' }, 'MAGIC_VALUE')
         this.instance.onConnect((client, clientData, callback) => {
+            this.authDatabase.registered.forEach((k) => {
+                console.log(k);
+            })
+            console.log(clientData.fromClient.secret);
             const { user } = this.authDatabase.getUser(clientData.fromClient.secret) || { user: undefined }
             if (!user) {
                 callback({ accepted: false, text: 'Secret not correct!' })
@@ -62,6 +66,7 @@ class GameInstance {
     }
 
     handleMessage(msg) {
+        console.log(JSON.stringify(msg));
         const prefix = '!'
         if (msg.author.bot) return
         if (msg.content.startsWith(prefix)) {