Merge 46a2c29 into 7ebf530

ubclaunchpad · Nov 13, 2018 · 8083be5 · 8083be5
2 parents 7ebf530 + 46a2c29
commit 8083be5
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 0 deletions.
diff --git 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
@@ -0,0 +1,44 @@
+import { Game } from './main.js';
+
+const address = 'localhost:9090';
+
+function initializeArena(data) {
+    Game.player.id = data.playerID;
+    Object.assign(Game, {
+        arena: { width: data.arenaWidth, height: data.arenaHeight },
+        player: data.player,
+        timeStarted: new Date(),
+    });
+}
+
+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;
+    }
+}
+
+export default async function connectPlayer() {
+    const response = await fetch(`http://${address}/start`);
+    const res = await response.json();
+
+    // Address of lobby to connect to
+    console.log(res.location);
+
+    if (window.WebSocket) {
+        let socket = new WebSocket(`ws://${address}/connect`);
+        socket.onopen = () => {
+            socket.onmessage = event => handleMessage(JSON.parse(event.data));
+        };
+    }
+}
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Hello World</title>
+</head>
+  <script src="https://pixijs.download/v4.8.2/pixi.min.js"></script>
+<body>
+  <script type="module" src="main.js">
+  </script>
+</body>
+</html>
+<style>* {padding: 0; margin: 0}</style> 
+<!-- * is the CSS universal selector selects all tags dans ce document -->
diff --git a/web/main.js b/web/main.js
@@ -0,0 +1,75 @@
+
+import 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);
+    connectPlayer();
+    console.log(Game)
+}
+
+//must add things to the stage