Initial commit - cloned the Svelte todo's app with google login enabled as a starting point. This system will initially be used to let the chrome extension for students report which computers are used by which students and when.

client/main.js

@@ -0,0 +1,127 @@
+import {Meteor} from 'meteor/meteor';
+import App from '../imports/ui/App.svelte';
+import '../imports/startup/accounts-config.js';
+import Phaser from 'phaser';
+
+Meteor.startup(() => {
+	new App({
+		target: document.getElementById('app')
+	});
+
+
+
+
+	class playGame extends Phaser.Scene {
+		constructor() {
+			super("PlayGame");
+		}
+		create() {
+			// graphic object used to draw walls
+			this.wallGraphics = this.add.graphics();
+			this.wallGraphics.lineStyle(1, 0x00ff00);
+
+			// graphic object used to draw rays of light
+			this.lightGraphics = this.add.graphics();
+
+			// array with all polygons in game
+			this.polygons = [];
+
+			// add random boxes
+			for(let i = 0; i < gameOptions.boxes; i ++){
+				this.addRandomBox();
+			}
+
+			// walls around game perimeter
+			this.polygons.push([[-1, -1], [game.config.width + 1, -1], [game.config.width + 1, game.config.height+1], [-1, game.config.height + 1]]);
+
+			// listener for input movement
+			this.input.on("pointermove", this.renderLight, this);
+		}
+		addRandomBox() {
+			// use a do...while statement because there can't be intersecting polygons
+			do {
+				// random x and y coordinates, width and height
+				var startX = Phaser.Math.Between(10, game.config.width - 10 - gameOptions.sizeRange.max);
+				var startY = Phaser.Math.Between(10, game.config.height - 10 - gameOptions.sizeRange.max);
+				var width = Phaser.Math.Between(gameOptions.sizeRange.min, gameOptions.sizeRange.max);
+				var height = Phaser.Math.Between(gameOptions.sizeRange.min, gameOptions.sizeRange.max);
+
+				// check if current box intersects other boxes
+			} while(this.boxesIntersect(startX, startY, width, height));
+
+			// draw the box
+			this.wallGraphics.strokeRect(startX, startY, width, height);
+
+			// insert box vertices into polygons array
+			this.polygons.push([[startX, startY], [startX + width, startY], [startX + width, startY + height], [startX, startY + height]]);
+		}
+		// method to check if the box intersects other boxes
+		boxesIntersect(x, y, w, h) {
+			// loop through existing boxes
+			for(let i = 0; i < this.polygons.length; i ++) {
+				// if the box intersects the existing i-th box...
+				if(x < this.polygons[i][1][0] && x + w > this.polygons[i][0][0] && y < this.polygons[i][3][1] && y + h > this.polygons[i][0][1]){
+					// return true
+					return true;
+				}
+			}
+			// if we reach the end of the loop, return false
+			return false;
+		}
+		// method to render the light
+		renderLight(pointer) {
+			// determine light polygon starting from pointer coordinates
+			let visibility = this.createLightPolygon(pointer.x, pointer.y);
+
+			// clear and prepare lightGraphics graphic object
+			this.lightGraphics.clear();
+			this.lightGraphics.lineStyle(2, 0xff8800);
+			this.lightGraphics.fillStyle(0xffff00);
+
+			// begin a drawing path
+			this.lightGraphics.beginPath();
+
+			// move the graphic pen to first vertex of light polygon
+			this.lightGraphics.moveTo(visibility[0][0], visibility[0][1]);
+
+			// loop through all light polygon vertices
+			for(let i = 1; i <= visibility.length; i ++) {
+				// draw a line to i-th light polygon vertex
+				this.lightGraphics.lineTo(visibility[i % visibility.length][0], visibility[ i %visibility.length][1]);
+			}
+
+			// close, stroke and fill light polygon
+			this.lightGraphics.closePath();
+			this.lightGraphics.fillPath();
+			this.lightGraphics.strokePath();
+		}
+		// method to create light polygon using visibility_polygon.js
+		createLightPolygon(x, y) {
+			let segments = VisibilityPolygon.convertToSegments(this.polygons);
+			segments = VisibilityPolygon.breakIntersections(segments);
+			let position = [x, y];
+			if (VisibilityPolygon.inPolygon(position, this.polygons[this.polygons.length - 1])) {
+				return VisibilityPolygon.compute(position, segments);
+			}
+			return null;
+		}
+	}
+
+	let config = {
+		type: Phaser.AUTO,
+		parent: "game",
+		width: "100%",
+		height: "100%",
+		physics: {
+			default: 'arcade',
+			arcade: {
+				gravity: {y: 200}
+			}
+		},
+		scene: {
+			scene: playGame
+		}
+	};
+
+	let game = new Phaser.Game(config);
+});