Merge pull request #259 from ubclaunchpad/tommy/#236-init-pixiJS

tommy/#236-pixiJS-init
ubclaunchpad · Nov 16, 2018 · a40948a · a40948a
2 parents 40f306c + a01c52b
commit a40948a
Show file tree

Hide file tree

Showing 4 changed files with 162 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,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;
+    }
+}
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Bumper</title>
+    <style>
+        * {padding: 0; margin: 0}
+    </style> 
+</head>
+<body>
+    <script src="https://pixijs.download/v4.8.2/pixi.min.js"></script>
+    <script type="module" src="main.js"></script>
+</body>
+</html>
diff --git a/web/main.js 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();
+};