catlab-remote-client 1.3.9 → 2.0.0

package/dist/css/style.css

@@ -55,6 +55,7 @@ body, #catlab-token-form
 
 #catlab-token-form {
     overflow: hidden;
+    min-width: 50vh;
 }
 
 #catlab-token-form p {
@@ -75,7 +76,7 @@ body, #catlab-token-form
 {
     box-sizing: border-box;
     font-size: 2em;
-    width: 80%;
+    width: 85%;
     margin: 10vh auto;
     padding: 5vmin 2vmin;
     background:#DBD4D6;
@@ -92,7 +93,7 @@ body, #catlab-token-form
 {
     box-sizing: border-box;
     font-size: 2em;
-    width: 80%;
+    width :85%;
     margin: 10vh auto;
     background: #492830;
     padding: 5vmin 2vmin;

package/dist/scripts/WorkerPolyfills.js

@@ -0,0 +1,219 @@
+/**
+ * WorkerPolyfills — Minimal browser-API stubs for WebWorker context.
+ *
+ * Only stubs what the catlab-remote-client library actually needs at
+ * module-definition time:
+ * - window/self: socket.io-client, backbone, screenfull reference window
+ * - document: backbone needs createElement, KeyboardUser registers keydown/keyup
+ * - localStorage/sessionStorage: Storage.js wraps localStorage
+ * - alert/confirm: Portal default start handler uses alert()
+ * - navigator: socket.io-client reads navigator.userAgent
+ * - Canvas stubs: EaselJS checks instanceof at load time
+ * - Event/CustomEvent/Image: referenced by EaselJS and event code
+ * - requestAnimationFrame: CreateJS ticker
+ *
+ * This file is plain JS (not AMD) — loaded via importScripts() in webworker.js.
+ * Game-specific consumers can extend with additional polyfills before loading
+ * the worker module.
+ */
+(function (scope) {
+	"use strict";
+
+	if (typeof alert === 'undefined') {
+		scope.alert = function (msg) { console.warn('[worker] alert:', msg); };
+	}
+	if (typeof confirm === 'undefined') {
+		scope.confirm = function (msg) { console.warn('[worker] confirm:', msg); return false; };
+	}
+
+	if (typeof window === 'undefined') {
+		scope.window = scope;
+	}
+	scope.window.addEventListener = scope.window.addEventListener || function () {};
+	scope.window.removeEventListener = scope.window.removeEventListener || function () {};
+
+	if (typeof navigator === 'undefined') {
+		scope.navigator = { userAgent: 'WebWorker', platform: 'WebWorker' };
+	}
+
+	// ---------- Canvas stubs (EaselJS) ----------
+
+	function StubCanvasContext() {}
+	StubCanvasContext.prototype = {
+		save: function () {}, restore: function () {}, scale: function () {},
+		rotate: function () {}, translate: function () {}, transform: function () {},
+		setTransform: function () {}, resetTransform: function () {},
+		createLinearGradient: function () { return { addColorStop: function () {} }; },
+		createRadialGradient: function () { return { addColorStop: function () {} }; },
+		createPattern: function () { return {}; },
+		clearRect: function () {}, fillRect: function () {}, strokeRect: function () {},
+		beginPath: function () {}, closePath: function () {}, moveTo: function () {},
+		lineTo: function () {}, quadraticCurveTo: function () {}, bezierCurveTo: function () {},
+		arcTo: function () {}, arc: function () {}, rect: function () {},
+		fill: function () {}, stroke: function () {}, clip: function () {},
+		measureText: function () { return { width: 0 }; },
+		fillText: function () {}, strokeText: function () {},
+		drawImage: function () {},
+		getImageData: function (x, y, w, h) { return { data: new Uint8ClampedArray(w * h * 4) }; },
+		putImageData: function () {},
+		createImageData: function (w, h) { return { data: new Uint8ClampedArray(w * h * 4) }; },
+		canvas: null
+	};
+
+	function StubCanvas() {
+		this.width = 0;
+		this.height = 0;
+		this.style = {};
+	}
+	StubCanvas.prototype.getContext = function () {
+		var ctx = new StubCanvasContext();
+		ctx.canvas = this;
+		return ctx;
+	};
+	StubCanvas.prototype.addEventListener = function () {};
+	StubCanvas.prototype.removeEventListener = function () {};
+	StubCanvas.prototype.setAttribute = function () {};
+	StubCanvas.prototype.appendChild = function () {};
+	StubCanvas.prototype.toDataURL = function () { return ''; };
+
+	// ---------- DOM element stubs ----------
+
+	function createStubElement(tag) {
+		if (tag === 'canvas') { return new StubCanvas(); }
+		return {
+			tagName: (tag || '').toUpperCase(),
+			style: {},
+			childNodes: [],
+			children: [],
+			setAttribute: function (key, value) { this[key] = value; },
+			getAttribute: function (key) { return this.hasOwnProperty(key) ? this[key] : null; },
+			appendChild: function (c) {
+				this.childNodes.push(c);
+				if (c) c.parentNode = this;
+				return c;
+			},
+			removeChild: function (c) {
+				var idx = this.childNodes.indexOf(c);
+				if (idx >= 0) this.childNodes.splice(idx, 1);
+				return c;
+			},
+			addEventListener: function () {},
+			removeEventListener: function () {},
+			getElementsByTagName: function () { return []; },
+			querySelector: function () { return null; },
+			querySelectorAll: function () { return []; },
+			classList: { add: function () {}, remove: function () {}, contains: function () { return false; } },
+			dataset: {},
+			parentNode: null,
+			textContent: '',
+			innerHTML: '',
+			id: '',
+			className: '',
+			getBoundingClientRect: function () { return { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 }; },
+			focus: function () {},
+			dispatchEvent: function () { return true; }
+		};
+	}
+
+	// ---------- document stub (with real event dispatch for KeyboardUser) ----------
+
+	if (typeof document === 'undefined') {
+		var _docListeners = {};
+
+		scope.document = {
+			nodeType: 9,
+			createElement: function (tag) { return createStubElement(tag); },
+			createElementNS: function (ns, tag) { return createStubElement(tag); },
+			createTextNode: function (text) { return { textContent: text || '', nodeType: 3 }; },
+			createDocumentFragment: function () {
+				var frag = createStubElement('fragment');
+				frag.nodeType = 11;
+				return frag;
+			},
+			createComment: function () { return { nodeType: 8 }; },
+			head: createStubElement('head'),
+			body: createStubElement('body'),
+			documentElement: createStubElement('html'),
+			getElementById: function () { return null; },
+			getElementsByTagName: function () { return []; },
+			getElementsByClassName: function () { return []; },
+			querySelector: function () { return null; },
+			querySelectorAll: function () { return []; },
+			addEventListener: function (type, listener) {
+				if (!_docListeners[type]) _docListeners[type] = [];
+				_docListeners[type].push(listener);
+			},
+			removeEventListener: function (type, listener) {
+				if (!_docListeners[type]) return;
+				var idx = _docListeners[type].indexOf(listener);
+				if (idx !== -1) _docListeners[type].splice(idx, 1);
+			},
+			dispatchEvent: function (event) {
+				var listeners = _docListeners[event.type];
+				if (listeners) {
+					for (var i = 0; i < listeners.length; i++) {
+						listeners[i](event);
+					}
+				}
+				return true;
+			},
+			createEvent: function () {
+				return { type: '', initEvent: function () {}, preventDefault: function () {}, stopPropagation: function () {} };
+			},
+			cookie: '',
+			readyState: 'complete',
+			title: '',
+			location: scope.location,
+			defaultView: scope
+		};
+	}
+
+	// ---------- Storage ----------
+
+	if (typeof localStorage === 'undefined') {
+		scope.localStorage = {
+			_data: {},
+			getItem: function (k) { return this._data.hasOwnProperty(k) ? this._data[k] : null; },
+			setItem: function (k, v) { this._data[k] = String(v); },
+			removeItem: function (k) { delete this._data[k]; },
+			clear: function () { this._data = {}; },
+			get length() { return Object.keys(this._data).length; },
+			key: function (i) { return Object.keys(this._data)[i] || null; }
+		};
+	}
+
+	if (typeof sessionStorage === 'undefined') {
+		scope.sessionStorage = {
+			_data: {},
+			getItem: function (k) { return this._data.hasOwnProperty(k) ? this._data[k] : null; },
+			setItem: function (k, v) { this._data[k] = String(v); },
+			removeItem: function (k) { delete this._data[k]; },
+			clear: function () { this._data = {}; }
+		};
+	}
+
+	// ---------- Type stubs ----------
+
+	if (typeof HTMLCanvasElement === 'undefined') { scope.HTMLCanvasElement = StubCanvas; }
+	if (typeof HTMLElement === 'undefined') { scope.HTMLElement = function () {}; }
+	if (typeof HTMLDocument === 'undefined') { scope.HTMLDocument = function () {}; }
+	if (typeof Element === 'undefined') { scope.Element = function () {}; }
+	if (typeof Node === 'undefined') { scope.Node = function () {}; }
+	if (typeof Event === 'undefined') { scope.Event = function (type) { this.type = type; }; }
+	if (typeof CustomEvent === 'undefined') {
+		scope.CustomEvent = function (type, params) { this.type = type; this.detail = params && params.detail; };
+	}
+	if (typeof Image === 'undefined') {
+		scope.Image = function () {
+			this.src = '';
+			this.addEventListener = function () {};
+			this.removeEventListener = function () {};
+		};
+	}
+	if (typeof requestAnimationFrame === 'undefined') {
+		scope.requestAnimationFrame = function (cb) { return setTimeout(cb, 1000 / 60); };
+		scope.cancelAnimationFrame = function (id) { clearTimeout(id); };
+	}
+
+})(typeof self !== 'undefined' ? self : typeof global !== 'undefined' ? global : this);
+