diff --git a/client/InputSystem.js b/client/InputSystem.js
index 9fb8600..5dc2b41 100644
--- a/client/InputSystem.js
+++ b/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,7 +118,7 @@ class InputSystem {
             }
         })
 
-        document.addEventListener('mousemove', event => {
+        this.listen('mousemove', event => {
             this.currentState.mx = event.clientX
             this.currentState.my = event.clientY
             if (this.onmousemove) {
@@ -124,16 +126,27 @@ class InputSystem {
             }
         })
 
-        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
diff --git a/client/clientMain.js b/client/clientMain.js
index be05879..46b7e7d 100644
--- a/client/clientMain.js
+++ b/client/clientMain.js
@@ -1,7 +1,4 @@
-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')
@@ -9,56 +6,6 @@ window.onload = function () {
     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)
diff --git a/client/graphics/PIXIRenderer.js b/client/graphics/PIXIRenderer.js
index 4f33742..f0cfc63 100644
--- a/client/graphics/PIXIRenderer.js
+++ b/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)
diff --git a/client/graphics/PlayerCharacter.js b/client/graphics/PlayerCharacter.js
index 87c96b1..9cebb6b 100644
--- a/client/graphics/PlayerCharacter.js
+++ b/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)
diff --git a/client/runClient.js b/client/runClient.js
new file mode 100644
index 0000000..f0b4f09
--- /dev/null
+++ b/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;
+
diff --git a/common/entity/PlayerCharacter.js b/common/entity/PlayerCharacter.js
index 6c43ffa..22f262d 100644
--- a/common/entity/PlayerCharacter.js
+++ b/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
diff --git a/common/gameConfig.js b/common/gameConfig.js
index e664102..a32c373 100644
--- a/common/gameConfig.js
+++ b/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
diff --git a/extension/src/js/inject.js b/extension/src/js/inject.js
index 3f9a7bc..1b99e20 100644
--- a/extension/src/js/inject.js
+++ b/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)
+}())
diff --git a/server/AuthDatabase.js b/server/AuthDatabase.js
index 1b9d7b5..736958a 100644
--- a/server/AuthDatabase.js
+++ b/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 })
diff --git a/server/GameInstance.js b/server/GameInstance.js
index 840ae03..52f2200 100644
--- a/server/GameInstance.js
+++ b/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)) {