diff --git a/client/GameClient.js b/client/GameClient.js
index d4c5a5c..9e6a2bf 100644
--- a/client/GameClient.js
+++ b/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) {
diff --git a/client/clientMain.js b/client/clientMain.js
index 4adf8ad..be05879 100644
--- a/client/clientMain.js
+++ b/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)
diff --git a/client/instantiateClient.js b/client/instantiateClient.js
new file mode 100644
index 0000000..cf07b09
--- /dev/null
+++ b/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
diff --git a/client/runClient.js b/client/runClient.js
deleted file mode 100644
index 4f00b23..0000000
--- a/client/runClient.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import GameClient from './GameClient'
-
-function main(secret) {
-
-    // TODO: const secret = document.getElementById('secret-input').value
-    const gameClient = new GameClient(secret)
-    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()
-}
-
-export default main
diff --git a/common/gameConfig.js b/common/gameConfig.js
index d482795..fe1b441 100644
--- a/common/gameConfig.js
+++ b/common/gameConfig.js
@@ -10,4 +10,4 @@ const config = {
     MAP_IMAGE: './images/bg.png',
 }
 
-export default config
\ No newline at end of file
+export default config
diff --git a/extension/src/js/background.js b/extension/src/js/background.js
index ffacd79..2fc4966 100644
--- a/extension/src/js/background.js
+++ b/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'
-  });
-});
\ No newline at end of file
+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',
+    })
+})
diff --git a/extension/src/js/inject.js b/extension/src/js/inject.js
index ab99206..3f9a7bc 100644
--- a/extension/src/js/inject.js
+++ b/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')
 
- 
\ No newline at end of file
+    if (formId === SECRET_KEY_FORM_ID) {
+        handleSecretKeyFormSubmit(e)
+    }
+}, false)
diff --git a/extension/utils/build.js b/extension/utils/build.js
index 5c4609d..6b1c0c6 100644
--- a/extension/utils/build.js
+++ b/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 },
+)
diff --git a/extension/utils/env.js b/extension/utils/env.js
index 27f2a3c..6e1be1b 100644
--- a/extension/utils/env.js
+++ b/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),
+}
diff --git a/extension/utils/webserver.js b/extension/utils/webserver.js
index 4e8cf27..b8e1373 100644
--- a/extension/utils/webserver.js
+++ b/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)
diff --git a/extension/webpack.config.js b/extension/webpack.config.js
index 3404d9f..3795f25 100644
--- a/extension/webpack.config.js
+++ b/extension/webpack.config.js
@@ -1,101 +1,101 @@
-const { Client } = require('discord.js');
-const glob = require('glob');
+const { Client } = require('discord.js')
+const glob = require('glob')
 
-var webpack = require("webpack"),
-    path = require("path"),
-    fileSystem = require("fs"),
-    env = require("./utils/env"),
-    CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin,
-    CopyWebpackPlugin = require("copy-webpack-plugin"),
-    HtmlWebpackPlugin = require("html-webpack-plugin"),
-    WriteFilePlugin = require("write-file-webpack-plugin");
+const webpack = require('webpack')
+const path = require('path')
+const fileSystem = require('fs')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const WriteFilePlugin = require('write-file-webpack-plugin')
+const env = require('./utils/env')
 
 // load the secrets
-var alias = {};
+const alias = {}
 
-var secretsPath = path.join(__dirname, ("secrets." + env.NODE_ENV + ".js"));
+const secretsPath = path.join(__dirname, (`secrets.${env.NODE_ENV}.js`))
 
-var fileExtensions = ["jpg", "jpeg", "png", "gif", "eot", "otf", "svg", "ttf", "woff", "woff2"];
+const fileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'eot', 'otf', 'svg', 'ttf', 'woff', 'woff2']
 
 if (fileSystem.existsSync(secretsPath)) {
-  alias["secrets"] = secretsPath;
+    alias.secrets = secretsPath
 }
 
-var options = {
-  mode: process.env.NODE_ENV || "development",
-  entry: {
+const options = {
+    mode: process.env.NODE_ENV || 'development',
+    entry: {
     // popup: path.join(__dirname, "src", "js", "popup.js"),
-    inject: path.join(__dirname, "src", "js", "inject.js"),
-    background: path.join(__dirname, "src", "js", "background.js"),
-    common: glob.sync(path.join(__dirname, "../common/**/*.js*")),
-    client: glob.sync(path.join(__dirname, "../client/**/*.js*"))
-  },
-  output: {
-    path: path.join(__dirname, "build"),
-    filename: "[name].bundle.js"
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        loader: "style-loader!css-loader",
-        exclude: /node_modules/
-      },
-      {
-        test: new RegExp('.(' + fileExtensions.join('|') + ')$'),
-        loader: "file-loader?name=[name].[ext]",
-        exclude: /node_modules/
-      },
-      {
-        test: /\.html$/,
-        loader: "html-loader",
-        exclude: /node_modules/
-      }
-    ]
-  },
-  resolve: {
-    alias: alias
-  },
-  plugins: [
+        inject: path.join(__dirname, 'src', 'js', 'inject.js'),
+        background: path.join(__dirname, 'src', 'js', 'background.js'),
+        common: glob.sync(path.join(__dirname, '../common/**/*.js*')),
+        client: glob.sync(path.join(__dirname, '../client/**/*.js*')),
+    },
+    output: {
+        path: path.join(__dirname, 'build'),
+        filename: '[name].bundle.js',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                loader: 'style-loader!css-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: new RegExp(`.(${fileExtensions.join('|')})$`),
+                loader: 'file-loader?name=[name].[ext]',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        alias,
+    },
+    plugins: [
     // clean the build folder
-    new CleanWebpackPlugin(),
-    // expose and write the allowed env vars on the compiled bundle
-    new webpack.EnvironmentPlugin(["NODE_ENV"]),
-    new CopyWebpackPlugin([{
-      from: "src/manifest.json",
-      transform: function (content, path) {
-        // generates the manifest file using the package.json informations
-        return Buffer.from(JSON.stringify({
-          description: process.env.npm_package_description,
-          version: process.env.npm_package_version,
-          ...JSON.parse(content.toString())
-        }))
-      }
-    }]),
-    // new HtmlWebpackPlugin({
-    //   template: path.join(__dirname, "src", "popup.html"),
-    //   filename: "popup.html",
-    //   chunks: ["popup"]
-    // }),
-    // new HtmlWebpackPlugin({
-    //   template: path.join(__dirname, "src", "options.html"),
-    //   filename: "options.html",
-    //   chunks: ["options"]
-    // }),
-    // new HtmlWebpackPlugin({
-    //   template: path.join(__dirname, "src", "background.html"),
-    //   filename: "background.html",
-    //   chunks: ["background"]
-    // }),
-    new WriteFilePlugin()
-  ]
-};
+        new CleanWebpackPlugin(),
+        // expose and write the allowed env vars on the compiled bundle
+        new webpack.EnvironmentPlugin(['NODE_ENV']),
+        new CopyWebpackPlugin([{
+            from: 'src/manifest.json',
+            transform(content, path) {
+                // generates the manifest file using the package.json informations
+                return Buffer.from(JSON.stringify({
+                    description: process.env.npm_package_description,
+                    version: process.env.npm_package_version,
+                    ...JSON.parse(content.toString()),
+                }))
+            },
+        }]),
+        // new HtmlWebpackPlugin({
+        //   template: path.join(__dirname, "src", "popup.html"),
+        //   filename: "popup.html",
+        //   chunks: ["popup"]
+        // }),
+        // new HtmlWebpackPlugin({
+        //   template: path.join(__dirname, "src", "options.html"),
+        //   filename: "options.html",
+        //   chunks: ["options"]
+        // }),
+        // new HtmlWebpackPlugin({
+        //   template: path.join(__dirname, "src", "background.html"),
+        //   filename: "background.html",
+        //   chunks: ["background"]
+        // }),
+        new WriteFilePlugin(),
+    ],
+}
 
 // if (env.NODE_ENV === "development") {
 //   options.devtool = "cheap-module-eval-source-map";
 // }
 
 // do not use eval()
-options.devtool = 'cheap-source-map';
+options.devtool = 'cheap-source-map'
 
-module.exports = options;
+module.exports = options
diff --git a/public/index.html b/public/index.html
index 7e99043..11724da 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,6 @@
 <body>
     <!--<script src='../client/clientMain.js'></script>-->
     <script src='js/app-v0.0.1.js'></script>
-    <canvas id='main-canvas'></canvas>
+    <div id="container"></div>
 </body>
 </html>
diff --git a/server/GameInstance.js b/server/GameInstance.js
index 8ee8780..3e004b1 100644
--- a/server/GameInstance.js
+++ b/server/GameInstance.js
@@ -65,7 +65,9 @@ class GameInstance {
         if (msg.content.startsWith(prefix)) {
             const cmd = msg.content.slice(prefix.length)
             if (cmd === 'joinspace') {
-                msg.author.send(`Your entrance code is: ${this.authDatabase.addUser(msg.member)}`)
+                const code = this.authDatabase.addUser(msg.member)
+                console.log(`code assigned: ${code}`)
+                msg.author.send(`Your entrance code is: ${code}`)
             }
             return
         }