From 15be06b415c693dfe6a10750e619d3128b0b59de Mon Sep 17 00:00:00 2001 From: Arjun Satarkar Date: Wed, 30 Oct 2024 23:24:28 -0400 Subject: Add image support, page title; fix sleep issue Passing the ?image query param will use that as the background-image for the throwable div. I also had to add a `true` to the applyImpulse call to stop the ball from going unresponsive (this is because it can go to "sleep", the extra parameter ensures it's woken up.) --- src/index.html | 5 +++-- src/index.js | 22 ++++++++++++++++------ 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index aa49141..da667a9 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - Document + Throw diff --git a/src/index.js b/src/index.js index 1275360..e07ac8a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,13 @@ import RAPIER from "./rapier.es.js"; +const objElement = document.querySelector("div#throwable"); + +const queryParams = new URLSearchParams(window.location.search); +const image = queryParams.get("image"); +if (image !== null) { + objElement.style.backgroundImage = `url(${decodeURI(image)})`; +} + RAPIER.init().then(() => { const CLICK_IMPULSE_MULTIPLIER = 300_000; const GRAVITY = { x: 0.0, y: 2000 }; @@ -36,7 +44,6 @@ RAPIER.init().then(() => { obj, ); - const objElement = document.querySelector("div#throwable"); const objSize = { x: OBJ_BASE_SIZE.x, y: OBJ_BASE_SIZE.y, @@ -81,12 +88,15 @@ RAPIER.init().then(() => { y: clickPosition.y - objPosition.y, }; const distance = Math.sqrt(direction.x ** 2 + direction.y ** 2); - obj.setLinvel({x: 0, y: 0}); + obj.setLinvel({ x: 0, y: 0 }); if (distance > 0) { - obj.applyImpulse({ - x: (direction.x * CLICK_IMPULSE_MULTIPLIER) / distance, - y: (direction.y * CLICK_IMPULSE_MULTIPLIER) / distance, - }); + obj.applyImpulse( + { + x: (direction.x * CLICK_IMPULSE_MULTIPLIER) / distance, + y: (direction.y * CLICK_IMPULSE_MULTIPLIER) / distance, + }, + true, + ); } }); -- cgit v1.2.3-57-g22cb