q5play 4.0.2 → 4.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5play",
-	"version": "4.0.2",
+	"version": "4.0.5",
 	"author": "quinton-ashley",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"description": "A web-based game engine that uses q5.js WebGPU for graphics and Box2D v3 WASM for physics.",

package/q5play.d.ts

@@ -41,17 +41,6 @@ declare global {
 		 * @default true
 		 */
 		friendlyRounding: boolean;
-		/**
-		 * Snaps sprites to the nearest `q5play.gridSize`
-		 * increment when they are moved.
-		 * @default false
-		 */
-		snapToGrid: boolean;
-		/**
-		 * The size of the grid cells that sprites are snapped to.
-		 * @default 0.5
-		 */
-		gridSize: number;
 		/**
 		 * Information about the operating system being used.
 		 */
@@ -596,11 +585,6 @@ declare global {
 		 */
 		get heading(): string;
 		set heading(val: string);
-		/**
-		 * True if the sprite is moving.
-		 * @readonly
-		 */
-		get isMoving(): boolean;
 		/**
 		 * Set this to true if the sprite goes really fast to prevent
 		 * inaccurate physics simulation.

package/q5play.js

@@ -30,8 +30,9 @@ if (typeof globalThis.Q5 == 'undefined') {
 let box2dPromise;
 
 // called when a new instance of Q5 is created
-async function q5playPreSetup($, q) {
-	const log = console.log;
+async function q5playPreSetup(q) {
+	const $ = this,
+		log = console.log;
 
 	if (!box2dPromise) {
 		box2dPromise = (async () => {
@@ -243,8 +244,6 @@ async function q5playPreSetup($, q) {
 			this.spritesDrawn = 0;
 			this.images = {};
 			this.palettes = [];
-			this.snapToGrid = false;
-			this.gridSize = 0.5;
 			this.emojiScale = 1;
 			this.os = {};
 			this.context = 'web';
@@ -1022,18 +1021,17 @@ async function q5playPreSetup($, q) {
 				else y = 0;
 			}
 
-			let rr;
-
 			let forcedBoxShape = false;
 			if (w === undefined) {
 				w = group.w || group.width || group.d || group.diameter;
 				if (!h && !group.d && !group.diameter) {
 					h = group.h || group.height;
 					forcedBoxShape = true;
-					rr = group.roundedRadius;
 				}
 			}
 
+			let rr = group.roundedRadius;
+
 			if (typeof x == 'function') x = x(group.length);
 			if (typeof y == 'function') y = y(group.length);
 			if (typeof w == 'function') w = w(group.length);
@@ -1506,11 +1504,11 @@ async function q5playPreSetup($, q) {
 				} else {
 					let hw = (w * 0.5) / meterSize;
 					let hh = (h * 0.5) / meterSize;
-					rr /= meterSize;
+					let _rr = rr / meterSize;
 
 					if (rr) {
-						hw = Math.max(hw - rr, 0.001);
-						hh = Math.max(hh - rr, 0.001);
+						hw = Math.max(hw - _rr, 0.001);
+						hh = Math.max(hh - _rr, 0.001);
 					}
 
 					if (offsetX || offsetY) {
@@ -1518,26 +1516,29 @@ async function q5playPreSetup($, q) {
 
 						if (!rr) geom = b2MakeOffsetBox(hw, hh, offset, ZERO_ROT);
 						else {
-							geom = b2MakeOffsetRoundedBox(hw, hh, offset, ZERO_ROT, rr);
+							geom = b2MakeOffsetRoundedBox(hw, hh, offset, ZERO_ROT, _rr);
 						}
 					} else {
 						if (!rr) geom = b2MakeBox(hw, hh);
-						else geom = b2MakeRoundedBox(hw, hh, rr);
+						else geom = b2MakeRoundedBox(hw, hh, _rr);
 					}
 
 					geom._hw = hw;
 					geom._hh = hh;
-					geom._rr = rr;
+					geom._rr = _rr;
 
 					id = b2CreatePolygonShape(bdID, shape.def, geom);
 					shape._init(id, 0, geom);
 				}
 
 				// TODO: use AABB to get extents
-				this._w = w;
-				this._hw = w * 0.5;
-				this._h = h;
-				this._hh = h * 0.5;
+				if (!shapes.length) {
+					this._w = w;
+					this._hw = w * 0.5;
+					this._h = h;
+					this._hh = h * 0.5;
+					this._roundedRadius = rr;
+				}
 			}
 
 			if (shape) {
@@ -1875,10 +1876,6 @@ async function q5playPreSetup($, q) {
 			this.direction = val;
 		}
 
-		get isMoving() {
-			return this.vel.x != 0 || this.vel.y != 0;
-		}
-
 		get isSuperFast() {
 			return b2Body_IsBullet(this.bdID);
 		}
@@ -2301,6 +2298,21 @@ async function q5playPreSetup($, q) {
 			this.d = val;
 		}
 
+		get roundedRadius() {
+			return this._roundedRadius;
+		}
+		set roundedRadius(val) {
+			if (val == this._roundedRadius) return;
+
+			this._roundedRadius = val;
+			if (this.watch) this.mod[37] = true;
+
+			while (this._shapes.length) {
+				this._shapes.at(-1).delete();
+			}
+			this._add(false, 0, 0, this._w, this._h, val);
+		}
+
 		/*
 		 * Validates convexity.
 		 */
@@ -2338,13 +2350,6 @@ async function q5playPreSetup($, q) {
 			this._customUpdate = val;
 		}
 
-		get postDraw() {
-			return this._postDraw;
-		}
-		set postDraw(val) {
-			this._customPostDraw = val;
-		}
-
 		get vel() {
 			return this._vel;
 		}
@@ -2619,13 +2624,6 @@ async function q5playPreSetup($, q) {
 			}
 		}
 
-		_postDraw() {
-			if (this._customPostDraw) this._customPostDraw();
-
-			this.autoDraw ??= true;
-			this.autoUpdate ??= true;
-		}
-
 		_args2Vec(x, y) {
 			if (Array.isArray(x)) {
 				return { x: x[0], y: x[1] };
@@ -3114,8 +3112,9 @@ async function q5playPreSetup($, q) {
 
 	// exclude props that are inherited in a special way or not traits
 	const spriteStdInheritedProps = $.Sprite.propsAll.filter(
+		// prettier-ignore
 		(p) =>
-			!['ani', 'd', 'diameter', 'h', 'height', 'physics', 'scale', 'tile', 'w', 'width', 'vel', 'x', 'y'].includes(p)
+			!['ani', 'd', 'diameter', 'h', 'height', 'physics', 'scale', 'tile', 'w', 'width', 'vel', 'x', 'y', 'roundedRadius'].includes(p)
 	);
 
 	let groupKeys = {};
@@ -3176,9 +3175,12 @@ async function q5playPreSetup($, q) {
 			}
 
 			// loading promise
-			this.promise = new Promise((resolve) => {
-				this._resolve = resolve;
-			});
+			if (args.length) {
+				this.promise = new Promise((resolve) => {
+					this._resolve = resolve;
+				});
+				$._loaders.push(this.promise);
+			}
 
 			this._frame = 0;
 			this._cycles = 0;
@@ -3393,12 +3395,16 @@ async function q5playPreSetup($, q) {
 
 			// play by default but a single frame ani doesn't need to play
 			this.playing = this.length != 1 && anis.playing != false;
+
+			if (this.length > 0 && !this.spriteSheet) {
+				Promise.all(this.map((img) => img.promise)).then(() => this._resolve(this));
+			}
 		}
 
-		// make loading Ani objects awaitable
-		// then(resolve, reject) {
-		// 	return this.promise.then(resolve, reject);
-		// }
+		// use a plain Array constructor for map/filter/etc.
+		static get [Symbol.species]() {
+			return Array;
+		}
 
 		get frame() {
 			return this._frame;
@@ -4724,12 +4730,6 @@ async function q5playPreSetup($, q) {
 
 			$.imageMode(ogImgMode);
 		}
-
-		postDraw() {
-			for (let s of this) {
-				s.postDraw();
-			}
-		}
 	};
 
 	$.Group.prototype.__step = $.Sprite.prototype.__step;
@@ -6120,8 +6120,11 @@ async function q5playPreSetup($, q) {
 	}
 
 	function isArrowFunction(fn) {
-		return !/^(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*\s*(?:(?:(?:async\s(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*\s*)?function|class)(?:\s|(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*)|(?:[_$\w][\w0-9_$]*\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*\()|(?:\[\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*(?:(?:['][^']+['])|(?:["][^"]+["]))\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*\]\())/.test(
-			fn.toString()
+		return (
+			fn.name == 'jsobj' || // brython lambda function check
+			!/^(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*\s*(?:(?:(?:async\s(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*\s*)?function|class)(?:\s|(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*)|(?:[_$\w][\w0-9_$]*\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*\()|(?:\[\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*(?:(?:['][^']+['])|(?:["][^"]+["]))\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*\]\())/.test(
+				fn.toString()
+			)
 		);
 	}
 
@@ -6238,6 +6241,8 @@ async function q5playPreSetup($, q) {
 
 		let img = g.get(left, top, right - left + 1, bottom - top + 1);
 		img.src = emoji;
+		img.defaultWidth = img.width;
+		img.defaultHeight = img.height;
 
 		g.remove();
 
@@ -6482,6 +6487,7 @@ async function q5playPreSetup($, q) {
 			args[0] = window.innerWidth;
 			args[1] = window.innerHeight;
 		}
+		args[1] ??= args[0];
 		args[0] = Math.floor(args[0] / 2) * 2;
 		args[1] = Math.floor(args[1] / 2) * 2;
 		let rend = _createCanvas.call($, ...args);
@@ -7057,18 +7063,26 @@ async function q5playPreSetup($, q) {
 			super();
 			this._default = ' ';
 
-			this.alt = 0;
-			this.arrowUp = 0;
-			this.arrowDown = 0;
-			this.arrowLeft = 0;
-			this.arrowRight = 0;
-			this.backspace = 0;
-			this.capsLock = 0;
-			this.control = 0;
-			this.enter = 0;
-			this.meta = 0;
-			this.shift = 0;
-			this.tab = 0;
+			let keys = [
+				' ',
+				'alt',
+				'arrowUp',
+				'arrowDown',
+				'arrowLeft',
+				'arrowRight',
+				'backspace',
+				'capsLock',
+				'control',
+				'enter',
+				'meta',
+				'shift',
+				'tab'
+			];
+			keys = keys.concat("abcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-=[];,./'".split(''));
+			// initializing these props to 0 makes brython happy
+			for (let key of keys) {
+				this[key] = 0;
+			}
 
 			let k = (this._simpleKeyControls = {
 				arrowUp: 'up',
@@ -7992,6 +8006,8 @@ async function q5playPreSetup($, q) {
 			window[p] = $[p];
 		}
 	}
+
+	if (Q5.applyLang) Q5.applyLang(q, q5playLibLangs, q5playClassLangs);
 }
 
 // called once after setup
@@ -8120,7 +8136,10 @@ function q5playPostDraw() {
 
 	if (cam.isActive) cam.off();
 
-	$.allSprites.postDraw();
+	for (let s of $.allSprites) {
+		s.autoDraw ??= true;
+		s.autoUpdate ??= true;
+	}
 
 	if ($.q5play.renderStats) $.renderStats();
 
@@ -8167,6 +8186,200 @@ function q5playRemove() {
 	this.world?.delete();
 }
 
+const q5playLibLangs = `
+allSprites -> es:todosLosSprites
+world -> es:mundo
+camera -> es:cámara
+mouse -> es:ratón
+kb -> es:tec
+keyboard -> es:teclado
+contro -> es:mando
+controllers -> es:mandos
+pointer -> es:puntero
+pointers -> es:punteros
+spriteArt -> es:arteSprite
+delay -> es:esperar
+animation -> es:animación
+renderStats -> es:estadísticasRenderizado
+EmojiImage -> es:ImagenEmoji
+parseTextureAtlas -> es:parsearAtlasTextura
+DYNAMIC -> es:DINÁMICO
+STATIC -> es:ESTÁTICO
+KINEMATIC -> es:CINEMÁTICO
+Group -> es:Grupo
+Joint -> es:Articulación
+`;
+
+const q5playClassLangs = {
+	Sprite: `
+rotation -> es:rotación
+rotationSpeed -> es:velocidadRotación
+rotationDrag -> es:resistenciaRotación
+rotationLock -> es:bloqueoRotación
+speed -> es:velocidad
+direction -> es:dirección
+drag -> es:amortiguación
+mass -> es:masa
+density -> es:densidad
+bounciness -> es:elasticidad
+friction -> es:fricción
+physicsEnabled -> es:físicaActivada
+physicsType -> es:tipoFísica
+physics -> es:física
+sleeping -> es:durmiendo
+allowSleeping -> es:permitirDormir
+layer -> es:capa
+life -> es:vida
+scale -> es:escala
+tint -> es:tinte
+opacity -> es:opacidad
+visible -> es:visible
+debug -> es:depurar
+deleted -> es:eliminado
+bearing -> es:rumbo
+heading -> es:orientación
+isSuperFast -> es:esUltraRápido
+pixelPerfect -> es:perfectoEnPíxeles
+gravityScale -> es:escalaGravedad
+diameter -> es:diámetro
+roundedRadius -> es:radioRedondeado
+centerOfMass -> es:centroMasa
+previousPosition -> es:posiciónAnterior
+previousRotation -> es:rotaciónAnterior
+velocity -> es:vectorVelocidad
+position -> es:posición
+canvasPos -> es:posiciónLienzo
+addCollider -> es:añadirColisionador
+addSensor -> es:añadirSensor
+deleteColliders -> es:eliminarColisionadores
+deleteSensors -> es:eliminarSensores
+collide -> es:colisionar
+collides -> es:colisiona
+colliding -> es:colisionando
+collided -> es:colisionó
+overlap -> es:solapar
+overlaps -> es:solapa
+overlapping -> es:solapando
+overlapped -> es:solapó
+passes -> es:pasa
+addAni -> es:añadirAni
+addAnis -> es:añadirAnis
+changeAni -> es:cambiarAni
+playAni -> es:reproducirAni
+playAnis -> es:reproducirAnis
+moveTowards -> es:moverHacia
+rotateTowards -> es:rotarHacia
+applyForce -> es:aplicarFuerza
+applyForceScaled -> es:aplicarFuerzaEscalada
+attractTo -> es:atraerA
+repelFrom -> es:repelerDe
+applyTorque -> es:aplicarTorque
+angleTo -> es:ánguloHacia
+rotationToFace -> es:rotaciónParaMirar
+angleToFace -> es:ánguloParaMirar
+setSpeedAndDirection -> es:establecerVelocidadYDirección
+scaleBy -> es:escalarPor
+resetMass -> es:reiniciarMasa
+distanceTo -> es:distanciaA
+delete -> es:eliminar
+addDefaultSensors -> es:añadirSensoresDefecto
+autoDraw -> es:autoDibujar
+draw -> es:dibujar
+autoUpdate -> es:autoActualizar
+update -> es:actualizar
+`,
+	Group: `
+Group -> es:Grupo
+amount -> es:cantidad
+autoCull -> es:descartarFueraCampo
+cull -> es:descartar
+contains -> es:contiene
+remove -> es:quitar
+removeAll -> es:quitarTodo
+delete -> es:eliminar
+deleteAll -> es:eliminarTodo
+`,
+	World: `
+gravity -> es:gravedad
+timeScale -> es:escalaVelocidad
+meterSize -> es:tamañoMetro
+allowSleeping -> es:permitirDormir
+awakeBodies -> es:cuerposDespiertos
+bounceThreshold -> es:umbralRebote
+hitThreshold -> es:umbralGolpe
+autoStep -> es:pasoAutomático
+subSteps -> es:subPasos
+explodeAt -> es:explosionEn
+delete -> es:eliminar
+`,
+	Camera: `
+position -> es:posición
+zoom ->
+moveTo -> es:moverA
+zoomTo -> es:acercarA
+on -> es:activar
+off -> es:desactivar
+`,
+	Ani: `
+play -> es:reproducir
+pause -> es:pausar
+stop -> es:parar
+loop -> es:bucle
+noLoop -> es:sinBucle
+rewind -> es:rebobinar
+nextFrame -> es:siguienteFotograma
+previousFrame -> es:fotogramaAnterior
+goToFrame -> es:irAlFotograma
+clone -> es:clonar
+frame -> es:fotograma
+lastFrame -> es:últimoFotograma
+frameImage -> es:imagenFotograma
+playing -> es:reproduciendo
+looping -> es:enBucle
+frameDelay -> es:retardoFotograma
+`,
+	InputDevice: `
+presses -> es:presiona
+pressing -> es:presionando
+holds -> es:mantiene
+holding -> es:manteniendo
+held -> es:mantuvo
+released -> es:soltó
+releases -> es:suelta
+holdThreshold -> es:umbralMantener
+`,
+	_Mouse: `
+position -> es:posición
+visible -> es:visible
+isOnCanvas -> es:estaEnLienzo
+scroll -> es:desplazamiento
+drags -> es:arrastra
+dragging -> es:arrastrando
+dragged -> es:arrastró
+scrolls -> es:desplaza
+scrolling -> es:desplazando
+scrolled -> es:desplazó
+`,
+	_Pointer: `
+prev -> es:previo
+canvasPos -> es:posEnLienzo
+type -> es:tipo
+duration -> es:duración
+holdThreshold -> es:umbralDeSostenido
+drags -> es:arrastra
+dragging -> es:arrastrando
+dragged -> es:arrastró
+grabs -> es:agarra
+grabbing -> es:agarrando
+grabbed -> es:agarró
+overlaps -> es:superpone
+overlapping -> es:superponiendo
+overlapped -> es:superpuso
+pressure -> es:presión
+`
+};
+q5playClassLangs.Group += q5playClassLangs.Sprite;
+
 Q5.addHook('presetup', q5playPreSetup);
 Q5.addHook('postsetup', q5playPostSetup);
 Q5.addHook('predraw', q5playPreDraw);