Instantiate backend and game and link properly

src/backends/base.js

+class BaseBackend() {
+}
+
+export default BaseBackend;

src/backends/widget.js

+import BaseBackend from './base';
 import WidgetApi from 'matrix-widget-api';
 
-class WidgetBackend {
+const eventNamespace = 'team.auglement.augmentile';
+const EventTypes = {
+  map: eventNamespace + '.map',
+  player: eventNamepsace + '.player'
+}
+
+class WidgetBackend extends BaseBackend {
+  constructor(widgetId, userId) {
+    this.api = new WidgetApi(widgetId);
+    this.requestCapabilities();
+    this.api.star();
+  }
+
+  requestCapabilities() {
+    this.api.requestCapabilityToReceiveState(EventTypes.map);
+    this.api.requestCapabilityToReceiveState(EventTypes.player);
+
+    this.api.requestCapabilityToSendState(EventTypes.player);
+  }
+
+  set game(value) {
+    this.api.setContentLoaded();
+  }
 }
 
 export default WidgetBackend;

src/frontend/game.js

@@ -2,7 +2,7 @@ import Phaser from 'phaser';
 import TestScene from './scenes/test';
 
 class Game {
-  constructor(width, height) {
+  constructor(width, height, backend) {
     this.config = {
       type: Phaser.AUTO,
       width: width,
@@ -11,6 +11,9 @@ class Game {
     };
 
     this.game = new Phaser.Game(this.config);
+
+    this.backend = backend;
+    this.backend.game = this;
   }
 }
 

src/widget.js

 import WidgetBackend from './backends/widget';
 import Game from './frontend/game';
 
+const urlParams = new URLSearchParams(window.location.search);
+const widgetId = urlParams.get('widgetId');
+const userId = urlParams.get('userId');
+
 const width = 800;
 const height = 600;
 
-let game = new Game(width, height);
+let backend = new WidgetBackend(widgetId, userId);
+let game = new Game(width, height, backend);