initial commit

src/client/js/app.js

@@ -5,16 +5,16 @@ require.config({
 	baseUrl: '',
 	waitSeconds: 120,
 	paths: {
-		socket: 'plugins/socket',
-		wquery: 'plugins/jquery.min',
+		socket: 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.slim',
+		jquery: 'https://code.jquery.com/jquery-3.4.1.slim.min',
 		text: 'plugins/text',
 		html: 'plugins/html',
 		css: 'plugins/css',
 		main: 'js/main',
 		helpers: 'js/misc/helpers',
 		particles: 'plugins/pixi.particles',
-		picture: 'plugins/pixi.picture',
-		pixi: 'plugins/pixi.min',
+		//picture: 'plugins/pixi.picture',
+		pixi: 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min',
 		howler: 'plugins/howler.min'
 	},
 	shim: {
@@ -24,12 +24,12 @@ require.config({
 		socket: {
 			exports: 'io'
 		},
-		wquery: {
+		jquery: {
 			exports: '$'
 		},
 		helpers: {
 			deps: [
-				'wquery'
+				'jquery'
 			]
 		},
 		pixi: {
@@ -40,11 +40,11 @@ require.config({
 				'pixi'
 			]
 		},
-		picture: {
+		/*picture: {
 			deps: [
 				'pixi'
 			]
-		},
+		},*/
 		main: {
 			deps: [
 				'helpers',

src/client/js/components/lightPatch.js

@@ -1,10 +1,55 @@
 define([
-	'js/rendering/renderer',
-	'picture'
+	'js/rendering/renderer'/*,
+	'picture'*/
 ], function (
-	renderer,
-	picture
+	renderer/*,
+	picture*/
 ) {
+	const frag = `
+	varying vec2 vTextureCoord;
+	uniform sampler2D uSampler;
+	uniform vec4 targetColor;
+	void main(void)
+	{
+	    vec4 source = texture2D(uSampler, vTextureCoord);
+
+	    //reverse hardlight
+	    if (source.a == 0.0) {
+	        gl_FragColor = vec4(0, 0, 0, 0);
+	        return;
+	    }
+		
+	    //yeah, premultiplied
+	    vec3 Cb = source.rgb/source.a, Cs;
+	    if (targetColor.a > 0.0) {
+	        Cs = targetColor.rgb / targetColor.a;
+	    }
+	    vec3 multiply = Cb * Cs * 2.0;
+	    vec3 Cb2 = Cb * 2.0 - 1.0;
+	    vec3 screen = Cb2 + Cs - Cb2 * Cs;
+	    vec3 B;
+	    if (Cs.r <= 0.5) {
+	        B.r = 0.0;
+	    } else {
+	        B.r = screen.r;
+	    }
+	    if (Cs.g <= 0.5) {
+	        B.g = 0.0;
+	    } else {
+	        B.g = screen.g;
+	    }
+	    if (Cs.b <= 0.5) {
+	        B.b = 0.0;
+	    } else {
+	        B.b = screen.b;
+	    }
+	    vec4 res;
+	    res.xyz = (1.0 - source.a) * Cs + source.a * B;
+	    res.a = source.a + targetColor.a * (1.0-source.a);
+	    gl_FragColor = vec4(res.xyz * res.a, res.a);
+
+	}`;
+
 	return {
 		type: 'lightPatch',
 
@@ -34,11 +79,19 @@ define([
 						layerName: 'lightPatches'
 					});
 					sprite.alpha = (0.2 + (Math.random() * 1)) * alpha;
-					sprite.tint = '0x' + this.color;
+					//sprite.tint = '0x' + this.color;
+
+					//We assume that target alpha is 1.0 always
+					let overlayFilter = new PIXI.Filter(undefined, frag, {
+						targetColor: [0.0, 0.0, 0.0, 1.0]
+					});
+
+					//assign the color to rgb array
 
-					sprite.blendMode = PIXI.BLEND_MODES.OVERLAY;
-					sprite.pluginName = 'picture';
+					//sprite.blendMode = PIXI.BLEND_MODES.OVERLAY;
+					//sprite.pluginName = 'picture';
 
+					sprite.filters = [overlayFilter];
 					this.patches.push(sprite);
 				}
 			}

src/client/js/rendering/lightningBuilder.js

@@ -1,9 +1,9 @@
 define([
-	'js/rendering/renderer',
-	'picture'
+	'js/rendering/renderer'/*,
+	'picture'*/
 ], function (
-	renderer,
-	picture
+	renderer/*,
+	picture*/
 ) {
 	return {
 		build: function (config) {

src/client/js/rendering/renderer.js

@@ -6,8 +6,8 @@ define([
 	'js/rendering/tileOpacity',
 	'js/rendering/particles',
 	'js/rendering/shaders/outline',
-	'js/rendering/spritePool',
-	'picture'
+	'js/rendering/spritePool'/*,
+	'picture'*/
 ], function (
 	resources,
 	events,
@@ -16,8 +16,8 @@ define([
 	tileOpacity,
 	particles,
 	shaderOutline,
-	spritePool,
-	picture
+	spritePool/*,
+	picture*/
 ) {
 	let pixi = PIXI;
 	let mRandom = Math.random.bind(Math);
@@ -71,8 +71,8 @@ define([
 		hiddenRooms: null,
 
 		init: function () {
-			PIXI.GC_MODES.DEFAULT = PIXI.GC_MODES.AUTO;
-			PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
+			PIXI.settings.GC_MODE = PIXI.GC_MODES.AUTO;
+			PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
 
 			events.on('onGetMap', this.onGetMap.bind(this));
 			events.on('onToggleFullscreen', this.toggleScreen.bind(this));
@@ -84,7 +84,9 @@ define([
 			this.showTilesW = Math.ceil((this.width / scale) / 2) + 3;
 			this.showTilesH = Math.ceil((this.height / scale) / 2) + 3;
 
-			this.renderer = pixi.autoDetectRenderer(this.width, this.height, {
+			this.renderer = new PIXI.Renderer({
+				width: this.width,
+				height: this.height,
 				backgroundColor: '0x2d2136'
 			});
 
@@ -334,7 +336,7 @@ define([
 			this.clean();
 			spritePool.clean();
 
-			this.stage.filters = [new PIXI.filters.VoidFilter()];
+			this.stage.filters = [new PIXI.filters.AlphaFilter()];
 			this.stage.filterArea = new PIXI.Rectangle(0, 0, w * scale, h * scale);
 
 			this.hiddenRooms = msg.hiddenRooms;

src/client/ui/templates/options/options.js

@@ -26,7 +26,7 @@ define([
 		postRender: function () {
 			this.onEvent('onToggleOptions', this.toggle.bind(this));
 
-			//Can only toggle fullscreen directly in a listener, not deferred the way wQuery does it
+			//Can only toggle fullscreen directly in a listener, not deferred the way jQuery does it
 			this.el.find('.btnScreen')[0].addEventListener('click', this.toggleScreen.bind(this));
 			this.el.find('.btnNames').on('click', events.emit.bind(events, 'onKeyDown', 'v'));
 			this.el.find('.btnCharSelect').on('click', this.charSelect.bind(this));