Secret key form (#5)

* Secret key form

* lets hope its not broken this time

Co-authored-by: Dexter Leng <dexterlengcs@gmail.com>

client/GameClient.js

@@ -8,20 +8,14 @@ import PIXIRenderer from './graphics/PIXIRenderer'
 const ALLOW_ROTATION = false
 
 class GameClient {
-    constructor(secret) {
-        this.client = new nengi.Client(nengiConfig)
+    constructor(client) {
+        this.client = client
         this.renderer = new PIXIRenderer()
         this.input = new InputSystem()
 
-        this.client.onConnect(res => {
-            console.log('onConnect response:', res)
-        })
-
         this.client.onClose(() => {
             console.log('connection closed')
         })
-
-        this.client.connect('ws://localhost:8079', { secret })
     }
 
     update(delta, tick, now) {

client/clientMain.js

@@ -1,7 +1,64 @@
-import main from './runClient';
+import GameClient from './GameClient'
+import instantiateClient from './instantiateClient'
 
-window.onload = function() {
-    console.log('window loaded')
-    const secret = 'MAGIC_VALUE';
-    main(secret);
+const SECRET_KEY_FORM_ID = 'secret-key-form'
+
+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')
+        })
+}
+
+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/instantiateClient.js

@@ -0,0 +1,21 @@
+import nengi from 'nengi'
+import nengiConfig from '../common/nengiConfig'
+
+function instantiateClient(secret) {
+    return new Promise((resolve, reject) => {
+        const client = new nengi.Client(nengiConfig)
+
+        client.onConnect(res => {
+            console.log('onConnect response:', res)
+            if (!res.accepted) {
+                reject(res)
+            } else {
+                resolve(client)
+            }
+        })
+
+        client.connect('ws://localhost:8079', { secret })
+    })
+}
+
+export default instantiateClient

common/gameConfig.js

@@ -10,4 +10,4 @@ const config = {
     MAP_IMAGE: './images/bg.png',
 }
 
-export default config
+export default config

extension/src/js/background.js

@@ -1,6 +1,6 @@
-chrome.browserAction.onClicked.addListener(function (tab) {
-  // for the current tab, inject the "inject.js" file & execute it
-  chrome.tabs.executeScript(tab.ib, {
-    file: 'inject.bundle.js'
-  });
-});
+chrome.browserAction.onClicked.addListener(tab => {
+    // for the current tab, inject the "inject.js" file & execute it
+    chrome.tabs.executeScript(tab.ib, {
+        file: 'inject.bundle.js',
+    })
+})

extension/src/js/inject.js

@@ -1,41 +1,41 @@
-import nengiConfig from '../../../common/nengiConfig';
-import main from '../../../client/runClient';
+import nengiConfig from '../../../common/nengiConfig'
+import main from '../../../client/runClient'
 
-console.log(nengiConfig);
-const SECRET_KEY_FORM_ID = 'secret-key-form';
+console.log(nengiConfig)
+const SECRET_KEY_FORM_ID = 'secret-key-form'
 
 let container;
 
-(function() {
-  const discordElement = document.getElementById("app-mount");
+(function () {
+    const discordElement = document.getElementById('app-mount')
 
-  const body = discordElement.parentElement;
+    const body = discordElement.parentElement
 
-  discordElement.style.height = '60%';
-  discordElement.style.float = 'top';
+    discordElement.style.height = '60%'
+    discordElement.style.float = 'top'
 
-  container = document.createElement("div");
-  container.id = "game-container";
-  container.style.height = '40%';
-  container.style.width = '100%';
-  container.style.position = 'absolute';
-  container.style.top = '60%';
-  container.style.backgroundColor = 'white';
+    container = document.createElement('div')
+    container.id = 'game-container'
+    container.style.height = '40%'
+    container.style.width = '100%'
+    container.style.position = 'absolute'
+    container.style.top = '60%'
+    container.style.backgroundColor = 'white'
 
-  container.insertAdjacentHTML('beforeend', renderSecretKeyForm());
+    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 canvas = document.createElement('canvas');
+    // canvas.id = 'game-canvas';
+    // canvas.style.height = '100%';
+    // canvas.style.width = '100%';
+    // canvas.style.backgroundColor = 'red';
 
-  body.appendChild(container);
-  // container.appendChild(canvas)
-})();
+    body.appendChild(container)
+    // container.appendChild(canvas)
+}())
 
 function renderSecretKeyForm() {
-  return `
+    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>
@@ -45,27 +45,22 @@ function renderSecretKeyForm() {
 }
 
 function handleSecretKeyFormSubmit(e) {
-  const secretKey = document.getElementById('secret-key').value
+    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);
+    const canvas = '<canvas id=\'main-canvas\' style="height: 100%; width: 100%"></canvas>'
+    container.innerText = ''
+    container.insertAdjacentHTML('beforeend', canvas)
 
+    main(secretKey)
 }
 
-document.addEventListener('submit', function (e) {
-  e.preventDefault();
-
-  const form = e.target;
-  const formId = form.getAttribute('id');
-
-  if (formId === SECRET_KEY_FORM_ID) {
-    handleSecretKeyFormSubmit(e);
-    return;
-  }
+document.addEventListener('submit', e => {
+    e.preventDefault()
 
-}, false);
+    const form = e.target
+    const formId = form.getAttribute('id')
 
-
+    if (formId === SECRET_KEY_FORM_ID) {
+        handleSecretKeyFormSubmit(e)
+    }
+}, false)

extension/utils/build.js

@@ -1,9 +1,9 @@
-var webpack = require("webpack"),
-    config = require("../webpack.config");
+const webpack = require('webpack')
+const config = require('../webpack.config')
 
-delete config.chromeExtensionBoilerplate;
+delete config.chromeExtensionBoilerplate
 
 webpack(
-  config,
-  function (err) { if (err) throw err; }
-);
+    config,
+    err => { if (err) throw err },
+)

extension/utils/env.js

@@ -1,5 +1,5 @@
 // tiny wrapper with default env vars
 module.exports = {
-  NODE_ENV: (process.env.NODE_ENV || "development"),
-  PORT: (process.env.PORT || 3000)
-};
+    NODE_ENV: (process.env.NODE_ENV || 'development'),
+    PORT: (process.env.PORT || 3000),
+}

extension/utils/webserver.js

@@ -1,38 +1,35 @@
-var WebpackDevServer = require("webpack-dev-server"),
-    webpack = require("webpack"),
-    config = require("../webpack.config"),
-    env = require("./env"),
-    path = require("path");
+const WebpackDevServer = require('webpack-dev-server')
+const webpack = require('webpack')
+const path = require('path')
+const config = require('../webpack.config')
+const env = require('./env')
 
-var options = (config.chromeExtensionBoilerplate || {});
-var excludeEntriesToHotReload = (options.notHotReload || []);
+const options = (config.chromeExtensionBoilerplate || {})
+const excludeEntriesToHotReload = (options.notHotReload || [])
 
-for (var entryName in config.entry) {
-  if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
-    config.entry[entryName] =
-      [
-        ("webpack-dev-server/client?http://localhost:" + env.PORT),
-        "webpack/hot/dev-server"
-      ].concat(config.entry[entryName]);
-  }
+for (const entryName in config.entry) {
+    if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
+        config.entry[entryName] = [
+            (`webpack-dev-server/client?http://localhost:${env.PORT}`),
+            'webpack/hot/dev-server',
+        ].concat(config.entry[entryName])
+    }
 }
 
-config.plugins =
-  [new webpack.HotModuleReplacementPlugin()].concat(config.plugins || []);
+config.plugins = [new webpack.HotModuleReplacementPlugin()].concat(config.plugins || [])
 
-delete config.chromeExtensionBoilerplate;
+delete config.chromeExtensionBoilerplate
 
-var compiler = webpack(config);
+const compiler = webpack(config)
 
-var server =
-  new WebpackDevServer(compiler, {
+const server = new WebpackDevServer(compiler, {
     hot: true,
-    contentBase: path.join(__dirname, "../build"),
+    contentBase: path.join(__dirname, '../build'),
     sockPort: env.PORT,
     headers: {
-      "Access-Control-Allow-Origin": "*"
+        'Access-Control-Allow-Origin': '*',
     },
-    disableHostCheck: true
-  });
+    disableHostCheck: true,
+})
 
-server.listen(env.PORT);
+server.listen(env.PORT)