diff --git a/apps/playground-3d/src/main.ts b/apps/playground-3d/src/main.ts index 5b478b0b..bffac853 100644 --- a/apps/playground-3d/src/main.ts +++ b/apps/playground-3d/src/main.ts @@ -209,15 +209,15 @@ import Character from './classes/Character' character.onCollisionWith(FCuboid, ({ component }) => { // Cast the component to FCuboid const cube = component as FCuboid - console.log('Collision with cube : ', cube) + console.log('Character collided with a cube', cube) // Change the color of the cube to a random color // cube.setColor(Math.random() * 0xFFFFFF) }) character.onCollisionWith(sphere, () => { - console.log('Character collided with the sphere!') + console.log('Character collided with the sphere.') }) character.onCollisionWith(deathZone, () => { - console.log('Character fell into the death zone!') + console.log('Character fell into the death zone.') character.transform.position = { x: 0, y: 10, z: 0 } }) diff --git a/package-lock.json b/package-lock.json index 463e97dd..aa3d6cb2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,7 +49,7 @@ "vite": "^5.2.9", "vitepress": "^1.5.0", "vitest": "^2.1.2", - "vue": "^3.4.37", + "vue": "^3.5.13", "vue-tsc": "^2.0.29" } }, @@ -6030,45 +6030,112 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.0.tgz", - "integrity": "sha512-Ew3F5riP3B3ZDGjD3ZKb9uZylTTPSqt8hAf4sGbvbjrjDjrFb3Jm15Tk1/w7WwTE5GbQ2Qhwxx1moc9hr8A/OQ==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz", + "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==", + "dev": true, "dependencies": { - "@vue/shared": "3.5.0" + "@vue/shared": "3.5.13" } }, + "node_modules/@vue/reactivity/node_modules/@vue/shared": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", + "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", + "dev": true + }, "node_modules/@vue/runtime-core": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.0.tgz", - "integrity": "sha512-mQyW0F9FaNRdt8ghkAs+BMG3iQ7LGgWKOpkzUzR5AI5swPNydHGL5hvVTqFaeMzwecF1g0c86H4yFQsSxJhH1w==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz", + "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==", + "dev": true, "dependencies": { - "@vue/reactivity": "3.5.0", - "@vue/shared": "3.5.0" + "@vue/reactivity": "3.5.13", + "@vue/shared": "3.5.13" } }, + "node_modules/@vue/runtime-core/node_modules/@vue/shared": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", + "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", + "dev": true + }, "node_modules/@vue/runtime-dom": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.0.tgz", - "integrity": "sha512-NQQXjpdXgyYVJ2M56FJ+lSJgZiecgQ2HhxhnQBN95FymXegRNY/N2htI7vOTwpP75pfxhIeYOJ8mE8sW8KAW6A==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz", + "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==", + "dev": true, "dependencies": { - "@vue/reactivity": "3.5.0", - "@vue/runtime-core": "3.5.0", - "@vue/shared": "3.5.0", + "@vue/reactivity": "3.5.13", + "@vue/runtime-core": "3.5.13", + "@vue/shared": "3.5.13", "csstype": "^3.1.3" } }, + "node_modules/@vue/runtime-dom/node_modules/@vue/shared": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", + "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", + "dev": true + }, "node_modules/@vue/server-renderer": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.0.tgz", - "integrity": "sha512-HyDIFUg+l7L4PKrEnJlCYWHUOlm6NxZhmSxIefZ5MTYjkIPfDfkwhX7hqxAQHfgIAE1uLMLQZwuNR/ozI0NhZg==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz", + "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==", + "dev": true, "dependencies": { - "@vue/compiler-ssr": "3.5.0", - "@vue/shared": "3.5.0" + "@vue/compiler-ssr": "3.5.13", + "@vue/shared": "3.5.13" }, "peerDependencies": { - "vue": "3.5.0" + "vue": "3.5.13" + } + }, + "node_modules/@vue/server-renderer/node_modules/@vue/compiler-core": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz", + "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.25.3", + "@vue/shared": "3.5.13", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.0" } }, + "node_modules/@vue/server-renderer/node_modules/@vue/compiler-dom": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz", + "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==", + "dev": true, + "dependencies": { + "@vue/compiler-core": "3.5.13", + "@vue/shared": "3.5.13" + } + }, + "node_modules/@vue/server-renderer/node_modules/@vue/compiler-ssr": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz", + "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==", + "dev": true, + "dependencies": { + "@vue/compiler-dom": "3.5.13", + "@vue/shared": "3.5.13" + } + }, + "node_modules/@vue/server-renderer/node_modules/@vue/shared": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", + "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", + "dev": true + }, + "node_modules/@vue/server-renderer/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/@vue/shared": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.0.tgz", @@ -11926,9 +11993,9 @@ } }, "node_modules/postcss": { - "version": "8.4.47", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", - "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "funding": [ { "type": "opencollective", @@ -11945,7 +12012,7 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.1.0", + "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, "engines": { @@ -15136,133 +15203,12 @@ } } }, - "node_modules/vitepress/node_modules/@vue/compiler-core": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz", - "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==", - "dev": true, - "dependencies": { - "@babel/parser": "^7.25.3", - "@vue/shared": "3.5.12", - "entities": "^4.5.0", - "estree-walker": "^2.0.2", - "source-map-js": "^1.2.0" - } - }, - "node_modules/vitepress/node_modules/@vue/compiler-dom": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz", - "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==", - "dev": true, - "dependencies": { - "@vue/compiler-core": "3.5.12", - "@vue/shared": "3.5.12" - } - }, - "node_modules/vitepress/node_modules/@vue/compiler-sfc": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz", - "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==", - "dev": true, - "dependencies": { - "@babel/parser": "^7.25.3", - "@vue/compiler-core": "3.5.12", - "@vue/compiler-dom": "3.5.12", - "@vue/compiler-ssr": "3.5.12", - "@vue/shared": "3.5.12", - "estree-walker": "^2.0.2", - "magic-string": "^0.30.11", - "postcss": "^8.4.47", - "source-map-js": "^1.2.0" - } - }, - "node_modules/vitepress/node_modules/@vue/compiler-ssr": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz", - "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==", - "dev": true, - "dependencies": { - "@vue/compiler-dom": "3.5.12", - "@vue/shared": "3.5.12" - } - }, - "node_modules/vitepress/node_modules/@vue/reactivity": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz", - "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==", - "dev": true, - "dependencies": { - "@vue/shared": "3.5.12" - } - }, - "node_modules/vitepress/node_modules/@vue/runtime-core": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz", - "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==", - "dev": true, - "dependencies": { - "@vue/reactivity": "3.5.12", - "@vue/shared": "3.5.12" - } - }, - "node_modules/vitepress/node_modules/@vue/runtime-dom": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz", - "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==", - "dev": true, - "dependencies": { - "@vue/reactivity": "3.5.12", - "@vue/runtime-core": "3.5.12", - "@vue/shared": "3.5.12", - "csstype": "^3.1.3" - } - }, - "node_modules/vitepress/node_modules/@vue/server-renderer": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz", - "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==", - "dev": true, - "dependencies": { - "@vue/compiler-ssr": "3.5.12", - "@vue/shared": "3.5.12" - }, - "peerDependencies": { - "vue": "3.5.12" - } - }, "node_modules/vitepress/node_modules/@vue/shared": { "version": "3.5.12", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz", "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==", "dev": true }, - "node_modules/vitepress/node_modules/estree-walker": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true - }, - "node_modules/vitepress/node_modules/vue": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz", - "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==", - "dev": true, - "dependencies": { - "@vue/compiler-dom": "3.5.12", - "@vue/compiler-sfc": "3.5.12", - "@vue/runtime-dom": "3.5.12", - "@vue/server-renderer": "3.5.12", - "@vue/shared": "3.5.12" - }, - "peerDependencies": { - "typescript": "*" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, "node_modules/vitest": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.2.tgz", @@ -15334,15 +15280,16 @@ "dev": true }, "node_modules/vue": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.0.tgz", - "integrity": "sha512-1t70favYoFijwfWJ7g81aTd32obGaAnKYE9FNyMgnEzn3F4YncRi/kqAHHKloG0VXTD8vBYMhbgLKCA+Sk6QDw==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz", + "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==", + "dev": true, "dependencies": { - "@vue/compiler-dom": "3.5.0", - "@vue/compiler-sfc": "3.5.0", - "@vue/runtime-dom": "3.5.0", - "@vue/server-renderer": "3.5.0", - "@vue/shared": "3.5.0" + "@vue/compiler-dom": "3.5.13", + "@vue/compiler-sfc": "3.5.13", + "@vue/runtime-dom": "3.5.13", + "@vue/server-renderer": "3.5.13", + "@vue/shared": "3.5.13" }, "peerDependencies": { "typescript": "*" @@ -15439,6 +15386,68 @@ "typescript": ">=5.0.0" } }, + "node_modules/vue/node_modules/@vue/compiler-core": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz", + "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.25.3", + "@vue/shared": "3.5.13", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.0" + } + }, + "node_modules/vue/node_modules/@vue/compiler-dom": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz", + "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==", + "dev": true, + "dependencies": { + "@vue/compiler-core": "3.5.13", + "@vue/shared": "3.5.13" + } + }, + "node_modules/vue/node_modules/@vue/compiler-sfc": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz", + "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.25.3", + "@vue/compiler-core": "3.5.13", + "@vue/compiler-dom": "3.5.13", + "@vue/compiler-ssr": "3.5.13", + "@vue/shared": "3.5.13", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.11", + "postcss": "^8.4.48", + "source-map-js": "^1.2.0" + } + }, + "node_modules/vue/node_modules/@vue/compiler-ssr": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz", + "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==", + "dev": true, + "dependencies": { + "@vue/compiler-dom": "3.5.13", + "@vue/shared": "3.5.13" + } + }, + "node_modules/vue/node_modules/@vue/shared": { + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", + "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", + "dev": true + }, + "node_modules/vue/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", @@ -15759,6 +15768,66 @@ "vue": "3.5.0" } }, + "packages/devtools/node_modules/@vue/reactivity": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.0.tgz", + "integrity": "sha512-Ew3F5riP3B3ZDGjD3ZKb9uZylTTPSqt8hAf4sGbvbjrjDjrFb3Jm15Tk1/w7WwTE5GbQ2Qhwxx1moc9hr8A/OQ==", + "dependencies": { + "@vue/shared": "3.5.0" + } + }, + "packages/devtools/node_modules/@vue/runtime-core": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.0.tgz", + "integrity": "sha512-mQyW0F9FaNRdt8ghkAs+BMG3iQ7LGgWKOpkzUzR5AI5swPNydHGL5hvVTqFaeMzwecF1g0c86H4yFQsSxJhH1w==", + "dependencies": { + "@vue/reactivity": "3.5.0", + "@vue/shared": "3.5.0" + } + }, + "packages/devtools/node_modules/@vue/runtime-dom": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.0.tgz", + "integrity": "sha512-NQQXjpdXgyYVJ2M56FJ+lSJgZiecgQ2HhxhnQBN95FymXegRNY/N2htI7vOTwpP75pfxhIeYOJ8mE8sW8KAW6A==", + "dependencies": { + "@vue/reactivity": "3.5.0", + "@vue/runtime-core": "3.5.0", + "@vue/shared": "3.5.0", + "csstype": "^3.1.3" + } + }, + "packages/devtools/node_modules/@vue/server-renderer": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.0.tgz", + "integrity": "sha512-HyDIFUg+l7L4PKrEnJlCYWHUOlm6NxZhmSxIefZ5MTYjkIPfDfkwhX7hqxAQHfgIAE1uLMLQZwuNR/ozI0NhZg==", + "dependencies": { + "@vue/compiler-ssr": "3.5.0", + "@vue/shared": "3.5.0" + }, + "peerDependencies": { + "vue": "3.5.0" + } + }, + "packages/devtools/node_modules/vue": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.0.tgz", + "integrity": "sha512-1t70favYoFijwfWJ7g81aTd32obGaAnKYE9FNyMgnEzn3F4YncRi/kqAHHKloG0VXTD8vBYMhbgLKCA+Sk6QDw==", + "dependencies": { + "@vue/compiler-dom": "3.5.0", + "@vue/compiler-sfc": "3.5.0", + "@vue/runtime-dom": "3.5.0", + "@vue/server-renderer": "3.5.0", + "@vue/shared": "3.5.0" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "packages/event": { "name": "@fibbojs/event", "version": "0.0.11", diff --git a/package.json b/package.json index 3e858c4e..ce489073 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "vite": "^5.2.9", "vitepress": "^1.5.0", "vitest": "^2.1.2", - "vue": "^3.4.37", + "vue": "^3.5.13", "vue-tsc": "^2.0.29" }, "nx": {} diff --git a/packages/devtools/index.d.ts b/packages/devtools/index.d.ts index 70702663..0d7d3d27 100644 --- a/packages/devtools/index.d.ts +++ b/packages/devtools/index.d.ts @@ -8,3 +8,6 @@ declare module '*.ce.vue' { const component: ReturnType export default component } + +// Fibbo version +declare const __FIBBO_VERSION__: string diff --git a/packages/devtools/src/FDebug.ts b/packages/devtools/src/FDebug.ts index 1c788a41..c9ac8405 100644 --- a/packages/devtools/src/FDebug.ts +++ b/packages/devtools/src/FDebug.ts @@ -1,13 +1,12 @@ -import { defineCustomElement, reactive } from 'vue' +import { createApp, reactive } from 'vue' import type { FScene } from '@fibbojs/core' import type { FScene as FScene2d } from '@fibbojs/2d' import type { FScene as FScene3d } from '@fibbojs/3d' -import FDebugPanel from './components/FDebugPanel.ce.vue' +import FDebugComponent from './components/FDebug.vue' import { FDebug2d } from './FDebug2d' import { FDebug3d } from './FDebug3d' - -// Define the custom Web Component from the Vue component -const FDebugPanelElement = defineCustomElement(FDebugPanel) +import { State } from './State' +import { FLogger } from './FLogger' /** * A helper class to debug a given scene @@ -39,16 +38,51 @@ export class FDebug { // Define the scene this.scene = scene - // Define the custom element in the browser - customElements.define('f-debug-panel', FDebugPanelElement) - // Create and inject the custom element into the DOM - const debugPanel = new FDebugPanelElement({ - title: 'Fibbo', - scene: this.scene, - }) + // Load devtools state from local storage + State.load() + + /** + * Override console methods + */ + // Override console.log + const originalConsoleLog = console.log + console.log = (...args: any[]) => { + originalConsoleLog(...args) + FLogger.log(...args) + } + // Override console.warn + const originalConsoleWarn = console.warn + console.warn = (...args: any[]) => { + originalConsoleWarn(...args) + FLogger.warn(...args) + } + // Override console.error + const originalConsoleError = console.error + console.error = (...args: any[]) => { + originalConsoleError(...args) + FLogger.error(...args) + } + + // Fetch the CSS + fetch(import.meta.url.replace('index.es.js', 'style.css')) + .then(res => res.text()) + .then((css) => { + // Extract the CSS content + css = css + .split('const __vite__css = "')[1] + .split('\\n"')[0] + const style = document.createElement('style') + style.innerHTML = css + document.head.appendChild(style) + }) // Make the component array reactive this.scene.components = reactive(this.scene.components) as any + // Make sure added components are reactive + scene.onComponentAdded((component) => { + // @ts-expect-error - Core FComponent does not have transform property + component.transform = reactive(component.transform) + }) // 3D specific debug behavior if (scene.__IS_3D__) { @@ -61,8 +95,17 @@ export class FDebug { this.debugger2d = new FDebug2d(scene as FScene2d) } - // Add the debug panel to the body + // Create a HTML element for the debug panel + const debugPanel = document.createElement('div') + debugPanel.id = 'f-debug' + // Append the debug panel to the body document.body.appendChild(debugPanel) + // Mount the Vue instance + createApp(FDebugComponent, { + title: 'Fibbo', + version: __FIBBO_VERSION__, + scene: this.scene, + }).mount('#f-debug') } } diff --git a/packages/devtools/src/FDebug2d.ts b/packages/devtools/src/FDebug2d.ts index 24b01a6a..cc9b2f2a 100644 --- a/packages/devtools/src/FDebug2d.ts +++ b/packages/devtools/src/FDebug2d.ts @@ -1,5 +1,6 @@ import type { FScene } from '@fibbojs/2d' import type { DebugRenderBuffers } from '@dimforge/rapier2d' +import { State } from './State' /** * A helper class to debug a given 2d scene @@ -15,6 +16,7 @@ export class FDebug2d { constructor(scene: FScene) { // Add help grid const helpGrid = new scene.PIXI.Graphics() + helpGrid.visible = State.helpers // Draw the grid for (let i = -1000; i <= 1000; i += 100) { helpGrid.moveTo(i, -1000) @@ -34,6 +36,7 @@ export class FDebug2d { // Initiliaze debug graphics const DEBUG_GRAPHICS = new scene.PIXI.Graphics() + DEBUG_GRAPHICS.visible = State.hitboxes DEBUG_GRAPHICS.zIndex = 1000000 scene.viewport.addChild(DEBUG_GRAPHICS) @@ -65,5 +68,12 @@ export class FDebug2d { DEBUG_GRAPHICS.lineTo(x2, y2) } }) + + State.onHelpersChange((newState) => { + helpGrid.visible = newState + }) + State.onHitboxesChange((newState) => { + DEBUG_GRAPHICS.visible = newState + }) } } diff --git a/packages/devtools/src/FDebug3d.ts b/packages/devtools/src/FDebug3d.ts index 399620e1..65a0997f 100644 --- a/packages/devtools/src/FDebug3d.ts +++ b/packages/devtools/src/FDebug3d.ts @@ -1,4 +1,5 @@ import type { FLight, FScene } from '@fibbojs/3d' +import { State } from './State' /** * A helper class to debug a given 3d scene @@ -14,15 +15,18 @@ export class FDebug3d { constructor(scene: FScene) { // Add grid helper const gridHelper = new scene.THREE.GridHelper(10, 10) + gridHelper.visible = State.helpers scene.scene.add(gridHelper) // Axes helper const axesHelper = new scene.THREE.AxesHelper(5) + axesHelper.visible = State.helpers scene.scene.add(axesHelper) /** * When a light is added to the scene, add a helper for it */ + const lightHelpers: any[] = [] scene.onLightAdded((lightParam) => { // Cast light to a 3D FLight const light = lightParam as FLight @@ -38,28 +42,48 @@ export class FDebug3d { helper = new scene.THREE.SpotLightHelper(light.__LIGHT__) else return + helper.visible = State.helpers // Add the helper to the scene scene.scene.add(helper as any) + // Add the helper to the list of helpers + lightHelpers.push(helper) }) /** * Display debug lines on each frame */ scene.onFrame(() => { - // Remove previous debug lines - const previousLines = scene.scene.getObjectByName('DEBUG_LINES') - if (previousLines) - scene.scene.remove(previousLines) + if (State.hitboxes) { + // Remove previous debug lines + const previousLines = scene.scene.getObjectByName('DEBUG_LINES') + if (previousLines) + scene.scene.remove(previousLines) - // Render new debug lines - const { vertices, colors } = scene.world.debugRender() - const geometry = new scene.THREE.BufferGeometry() - geometry.setAttribute('position', new scene.THREE.Float32BufferAttribute(vertices, 3)) - geometry.setAttribute('color', new scene.THREE.Float32BufferAttribute(colors, 3)) - const material = new scene.THREE.LineBasicMaterial({ vertexColors: true }) - const lines = new scene.THREE.LineSegments(geometry, material) - lines.name = 'DEBUG_LINES' - scene.scene.add(lines) + // Render new debug lines + const { vertices, colors } = scene.world.debugRender() + const geometry = new scene.THREE.BufferGeometry() + geometry.setAttribute('position', new scene.THREE.Float32BufferAttribute(vertices, 3)) + geometry.setAttribute('color', new scene.THREE.Float32BufferAttribute(colors, 3)) + const material = new scene.THREE.LineBasicMaterial({ vertexColors: true }) + const lines = new scene.THREE.LineSegments(geometry, material) + lines.name = 'DEBUG_LINES' + scene.scene.add(lines) + } + }) + + State.onHitboxesChange((newState) => { + if (!newState) { + // Remove previous debug lines + const previousLines = scene.scene.getObjectByName('DEBUG_LINES') + if (previousLines) + scene.scene.remove(previousLines) + } + }) + + State.onHelpersChange((newState) => { + gridHelper.visible = newState + axesHelper.visible = newState + lightHelpers.forEach(helper => helper.visible = newState) }) } } diff --git a/packages/devtools/src/FLogger.ts b/packages/devtools/src/FLogger.ts new file mode 100644 index 00000000..a014c17e --- /dev/null +++ b/packages/devtools/src/FLogger.ts @@ -0,0 +1,57 @@ +export interface Log { + id: string + content: any[] + type: 'log' | 'warn' | 'error' + timestamp: number + showDetails: boolean +} + +export class FLogger { + private static __LOGS__: Log[] = [] + + private static __CALLBACKS_ON_NEW_LOGS__: ((newLog: Log) => void)[] = [] + + static log(...args: any[]) { + const newLog = { + id: Math.random().toString(36).substr(2, 9), + content: args, + type: 'log', + timestamp: Date.now(), + showDetails: false, + } as Log + this.__CALLBACKS_ON_NEW_LOGS__.forEach(callback => callback(newLog)) + this.__LOGS__.push(newLog) + } + + static warn(...args: any[]) { + const newLog = { + id: Math.random().toString(36).substr(2, 9), + content: args, + type: 'warn', + timestamp: Date.now(), + showDetails: false, + } as Log + this.__CALLBACKS_ON_NEW_LOGS__.forEach(callback => callback(newLog)) + this.__LOGS__.push(newLog) + } + + static error(...args: any[]) { + const newLog = { + id: Math.random().toString(36).substr(2, 9), + content: args, + type: 'error', + timestamp: Date.now(), + showDetails: false, + } as Log + this.__CALLBACKS_ON_NEW_LOGS__.forEach(callback => callback(newLog)) + this.__LOGS__.push(newLog) + } + + static onLog(callback: (newLog: Log) => void) { + this.__CALLBACKS_ON_NEW_LOGS__.push(callback) + } + + static getLogs() { + return this.__LOGS__ + } +} diff --git a/packages/devtools/src/State.ts b/packages/devtools/src/State.ts new file mode 100644 index 00000000..65c647f3 --- /dev/null +++ b/packages/devtools/src/State.ts @@ -0,0 +1,93 @@ +export class State { + // Properties + private static __HITBOXES__: boolean = false + private static __HELPERS__: boolean = true + private static __GLASSMORPHISM__: boolean = true + private static __COMPONENT_ROUND_TRANSFORM__: boolean = true + + // Callbacks + private static __CALLBACKS_ON_HITBOXES_CHANGE__: ((newState: boolean) => void)[] = [] + private static __CALLBACKS_ON_HELPERS_CHANGE__: ((newState: boolean) => void)[] = [] + private static __CALLBACKS_ON_GLASSMORPHISM_CHANGE__: ((newState: boolean) => void)[] = [] + private static __CALLBACKS_ON_COMPONENT_ROUND_TRANSFORM_CHANGE__: ((newState: boolean) => void)[] = [] + + // Methods + static load() { + // Check if the state is stored in the local storage + const state = localStorage.getItem('f-debug-state') + if (state) { + const parsedState = JSON.parse(state) + this.hitboxes = parsedState.hitboxes ?? false + this.helpers = parsedState.helpers ?? true + this.glassmorphism = parsedState.glassmorphism ?? true + this.componentRoundTransform = parsedState.componentRoundTransform ?? true + } + } + + static store() { + // Store the state in the local storage + localStorage.setItem('f-debug-state', JSON.stringify({ + hitboxes: this.hitboxes, + helpers: this.helpers, + glassmorphism: this.glassmorphism, + componentRoundTransform: this.componentRoundTransform, + })) + } + + static onHitboxesChange(callback: (newState: boolean) => void) { + this.__CALLBACKS_ON_HITBOXES_CHANGE__.push(callback) + } + + static onHelpersChange(callback: (newState: boolean) => void) { + this.__CALLBACKS_ON_HELPERS_CHANGE__.push(callback) + } + + static onGlassmorphismChange(callback: (newState: boolean) => void) { + this.__CALLBACKS_ON_GLASSMORPHISM_CHANGE__.push(callback) + } + + static onComponentCropTransformChange(callback: (newState: boolean) => void) { + this.__CALLBACKS_ON_COMPONENT_ROUND_TRANSFORM_CHANGE__.push(callback) + } + + // Getters & setters + static get hitboxes() { + return this.__HITBOXES__ + } + + static set hitboxes(newState: boolean) { + this.__HITBOXES__ = newState + this.__CALLBACKS_ON_HITBOXES_CHANGE__.forEach(callback => callback(newState)) + State.store() + } + + static get helpers() { + return this.__HELPERS__ + } + + static set helpers(newState: boolean) { + this.__HELPERS__ = newState + this.__CALLBACKS_ON_HELPERS_CHANGE__.forEach(callback => callback(newState)) + State.store() + } + + static get glassmorphism() { + return this.__GLASSMORPHISM__ + } + + static set glassmorphism(newState: boolean) { + this.__GLASSMORPHISM__ = newState + this.__CALLBACKS_ON_GLASSMORPHISM_CHANGE__.forEach(callback => callback(newState)) + State.store() + } + + static get componentRoundTransform() { + return this.__COMPONENT_ROUND_TRANSFORM__ + } + + static set componentRoundTransform(newState: boolean) { + this.__COMPONENT_ROUND_TRANSFORM__ = newState + this.__CALLBACKS_ON_COMPONENT_ROUND_TRANSFORM_CHANGE__.forEach(callback => callback(newState)) + State.store() + } +} diff --git a/packages/devtools/src/components/FDebug.vue b/packages/devtools/src/components/FDebug.vue new file mode 100644 index 00000000..02cb1e41 --- /dev/null +++ b/packages/devtools/src/components/FDebug.vue @@ -0,0 +1,41 @@ + + + diff --git a/packages/devtools/src/components/FDebugPanel.ce.vue b/packages/devtools/src/components/FDebugPanel.ce.vue deleted file mode 100644 index e2a53851..00000000 --- a/packages/devtools/src/components/FDebugPanel.ce.vue +++ /dev/null @@ -1,150 +0,0 @@ - - - - - diff --git a/packages/devtools/src/components/common/Console.vue b/packages/devtools/src/components/common/Console.vue new file mode 100644 index 00000000..7f8cbf7d --- /dev/null +++ b/packages/devtools/src/components/common/Console.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/packages/devtools/src/components/common/ConsoleJson.vue b/packages/devtools/src/components/common/ConsoleJson.vue new file mode 100644 index 00000000..4e7f7f5b --- /dev/null +++ b/packages/devtools/src/components/common/ConsoleJson.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/packages/devtools/src/components/common/DebugPanel.vue b/packages/devtools/src/components/common/DebugPanel.vue new file mode 100644 index 00000000..796aa3b5 --- /dev/null +++ b/packages/devtools/src/components/common/DebugPanel.vue @@ -0,0 +1,131 @@ + + + + + +q diff --git a/packages/devtools/src/components/common/FComponentHeader.vue b/packages/devtools/src/components/common/FComponentHeader.vue index d418ca42..1fe9ce7f 100644 --- a/packages/devtools/src/components/common/FComponentHeader.vue +++ b/packages/devtools/src/components/common/FComponentHeader.vue @@ -27,3 +27,42 @@ const props = defineProps({ const iconName = useComponentIcon(props.component) + + diff --git a/packages/devtools/src/components/common/FComponents.vue b/packages/devtools/src/components/common/FComponents.vue new file mode 100644 index 00000000..a7d5195f --- /dev/null +++ b/packages/devtools/src/components/common/FComponents.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/packages/devtools/src/components/common/Setting.vue b/packages/devtools/src/components/common/Setting.vue new file mode 100644 index 00000000..dafa9f07 --- /dev/null +++ b/packages/devtools/src/components/common/Setting.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/packages/devtools/src/components/common/Settings.vue b/packages/devtools/src/components/common/Settings.vue new file mode 100644 index 00000000..ae4a7bb9 --- /dev/null +++ b/packages/devtools/src/components/common/Settings.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/devtools/src/components/common/Tabs.vue b/packages/devtools/src/components/common/Tabs.vue new file mode 100644 index 00000000..abd0c277 --- /dev/null +++ b/packages/devtools/src/components/common/Tabs.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/packages/devtools/src/components/common/ToggleButton.vue b/packages/devtools/src/components/common/ToggleButton.vue new file mode 100644 index 00000000..b08f6513 --- /dev/null +++ b/packages/devtools/src/components/common/ToggleButton.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/packages/devtools/src/components/common/Tooltip.vue b/packages/devtools/src/components/common/Tooltip.vue new file mode 100644 index 00000000..b826ffe2 --- /dev/null +++ b/packages/devtools/src/components/common/Tooltip.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/packages/devtools/src/components/forms/InputCheckbox.vue b/packages/devtools/src/components/forms/InputCheckbox.vue new file mode 100644 index 00000000..d7430bc3 --- /dev/null +++ b/packages/devtools/src/components/forms/InputCheckbox.vue @@ -0,0 +1,86 @@ + + + + + + diff --git a/packages/devtools/src/components/forms/InputNumber.vue b/packages/devtools/src/components/forms/InputNumber.vue index 0375e62f..733be708 100644 --- a/packages/devtools/src/components/forms/InputNumber.vue +++ b/packages/devtools/src/components/forms/InputNumber.vue @@ -1,7 +1,7 @@