diff --git a/Makefile b/Makefile
index 1587c5c..9e9b1ae 100644
--- a/Makefile
+++ b/Makefile
@@ -31,6 +31,11 @@ bumper:
-p 80:$(SERVER_PORT) \
bumper
+# Starts a file server in the web/ directory
+.PHONY: web
+web:
+ (cd ./web ; python -m SimpleHTTPServer 8000)
+
# Starts the client (dev server on port 8080)
.PHONY: client
client:
diff --git a/web/connection.js b/web/connection.js
new file mode 100644
index 0000000..103a136
--- /dev/null
+++ b/web/connection.js
@@ -0,0 +1,62 @@
+import { Game } from './main.js';
+
+const address = 'localhost:9090';
+
+export class Connection {
+ constructor(params) {
+ this.address = params.address;
+
+ console.log(`Constructed with address: ${this.address}`);
+ }
+
+ async connectPlayer() {
+ if (window.WebSocket) {
+ const response = await fetch(`http://${this.address}/start`);
+ const res = await response.json();
+
+ // Address of lobby to connect to
+ console.log(res.location);
+ this.socket = new WebSocket(`ws://${this.address}/connect`);
+ this.socket.onopen = () => {
+ this.socket.onmessage = event => handleMessage(JSON.parse(event.data));
+ };
+
+ return true;
+ }
+
+ return false;
+ }
+
+ on(event, handler) {
+ console.log(event, handler);
+ }
+}
+
+
+// TODO: Should be in Game related functions
+function initializeArena(data) {
+ Game.player.id = data.playerID;
+ Object.assign(Game, {
+ arena: { width: data.arenaWidth, height: data.arenaHeight },
+ player: data.player,
+ timeStarted: new Date(),
+ });
+}
+
+// TODO: hould be in Game related functions
+function update(data) {
+ console.log(Game);
+}
+
+function handleMessage(msg) {
+ switch (msg.type) {
+ case 'initial':
+ initializeArena(msg.data);
+ break;
+ case 'update':
+ update(msg.data);
+ break;
+ default:
+ break;
+ }
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..8cd45a4
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Bumper
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/main.js b/web/main.js
new file mode 100644
index 0000000..dd79469
--- /dev/null
+++ b/web/main.js
@@ -0,0 +1,81 @@
+
+import { Connection, connectPlayer} from './connection.js';
+export const Game = {
+ showMiniMap: false,
+ showWelcomeModal: true,
+ showGameOverModal: false,
+ isInitialized: false,
+ player: {},
+ junk: null,
+ holes: null,
+ players: null,
+ playerAbsolutePosition: null,
+ timeStarted: null,
+ arena: {
+ width: null,
+ height: null,
+ },
+}
+
+//pixi
+let type = "WebGL"
+if(!PIXI.utils.isWebGLSupported()){
+ type = "canvas"
+}
+PIXI.utils.sayHello(type)
+
+//Create a Pixi Application
+let app = new PIXI.Application( {
+ width: 256, // default: 800
+ height: 256, // default: 600
+ antialias: true, // default: false
+ transparent: false, // default: false
+ resolution: 1 // default: 1
+ }
+);
+app.renderer.view.style.position = "absolute";
+app.renderer.view.style.display = "block";
+app.renderer.autoResize = true;
+app.renderer.resize(window.innerWidth, window.innerHeight);
+//Add the canvas that Pixi automatically created for you to the HTML document
+document.body.appendChild(app.view);
+
+// let texture = PIXI.utils.TextureCache["images/cat.png"];//cache a texture into WebGL for sprite loading
+// let sprite = new PIXI.Sprite(texture);//assign sprite object from cached texture
+PIXI.loader
+ .add([{
+ url: "https://cdn2.iconfinder.com/data/icons/outline-signs/350/spaceship-512.png",
+ onComplete: function () {},
+ crossOrigin: true,
+ }
+ ])
+ .on("progress", loadProgressHandler)
+ //list all files you want to load in an array inside a single add method or chain them
+ .load(setup); //call setup when loading is finished
+
+function loadProgressHandler(loader, resource) {
+ console.log("loading: " + resource.url)
+ console.log("progress: " + loader.progress + "%");
+}
+
+function setup() {
+ //run when loader finish image loading
+ let texture = PIXI.utils.TextureCache["https://cdn2.iconfinder.com/data/icons/outline-signs/350/spaceship-512.png"];
+ let rocket = new PIXI.Sprite(texture);
+ rocket.anchor.set(0.5,0.5);
+ rocket.x = 96;
+ rocket.y = 96;
+ rocket.scale.set(0.2, 0.2); //scale of original png object
+ rocket.rotation = 0.5; //radians
+ app.stage.addChild(rocket);
+}
+
+window.onload = async () => {
+ console.log('Starting...');
+
+ const socket = new Connection({
+ address: 'localhost:9090',
+ });
+
+ socket.connectPlayer();
+};
\ No newline at end of file