physics example

index.html

@@ -8,6 +8,7 @@
     <script src='dependencies/aframe-troika-text.min.js'></script>
     <script src='dependencies/webdav.js'></script> 
     <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.1.0/dist/aframe-extras.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.2/dist/aframe-physics-system.min.js"></script>
     <script src='jxr-core.js?12345'></script> 
     <script src='jxr-postitnote.js?13235'></script> 
   </head>
@@ -17,7 +18,8 @@
 - refactor to use emit('eventname', {eventdata:'data'}) for onreleased and onpicked rather than latest element
 	e.g newEl.setAttribute("onreleased", 'document.querySelector("['+generatorName+']").emit("check",{color:"'+color+'"})')
 	let latest = selectedElements[selectedElements.length-1].element 
-	check for this pattern and replace by event.detail.element instead
+	check for this pattern and replace by event.detail.element instead (for now e.detail.element)
+		might want to reconsider the el convention and do e.g let eventFromEl = e.detail.element over the eval() scope
 - insure scene setup, e.g starting position and orientation of environment and main character (until now assumed unchanged)
 - isolate emit('eventname', {test:0}) versus same with onreleased (which does NOT work) and same without event detail (which works)
 - add audio instructions
@@ -52,6 +54,7 @@ AFRAME.registerComponent('startfunctions', {
 	let untestedGames = ["checkers", "carcassone"]
 	addGame("voxelpaint")
 	addGame("simon")
+	addGame("physics-construct")
 	
 	addGames()
   }
@@ -111,6 +114,78 @@ function showOnlyThisGame(name){
 	document.querySelector("["+name+"]").emit("reset")
 }
 
+//___________________________________________________________________________________________________________________________________
+/*
+ physics https://github.com/c-frame/aframe-physics-system and setup docs https://github.com/c-frame/aframe-physics-system/blob/master/CannonDriver.md#installation
+    should append to head script with src="https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.2/dist/aframe-physics-system.min.js"
+
+  <!-- Floor -->
+  <a-plane static-body></a-plane>
+
+  <!-- Immovable box -->
+  <a-box static-body position="0 0.5 -5" width="3" height="1" depth="1"></a-box>
+
+  <!-- Dynamic box -->
+  <a-box dynamic-body position="5 0.5 0" width="1" height="1" depth="1"></a-box>
+*/
+AFRAME.registerComponent('physics-construct', {
+  init: function(){
+	let generatorName = this.attrName
+	let el = this.el
+
+	let sphereEl = document.createElement('a-sphere')
+        sphereEl.setAttribute('radius', '.01')
+        sphereEl.setAttribute('target', '')
+        sphereEl.setAttribute('position', '0 1 -.5')
+        sphereEl.setAttribute("onpicked", "window.pfb = selectedElements.at(-1).element.getAttribute('position').clone();")
+        sphereEl.setAttribute("onreleased", "twoPosToBox(window.pfb, selectedElements.at(-1).element.getAttribute('position'),'"+generatorName+"');")
+        AFRAME.scenes[0].appendChild(sphereEl)
+
+	let ballEl = document.createElement('a-sphere')
+        ballEl.setAttribute('radius', '.01')
+        ballEl.setAttribute('color', 'blue')
+        ballEl.setAttribute('target', '')
+        ballEl.setAttribute('position', '0 1.5 -0.2')
+        //ballEl.setAttribute('dynamic-body', '') // does not fall?
+        ballEl.setAttribute("onpicked", 'e.detail.element.removeAttribute("dynamic-body")') // untested
+        ballEl.setAttribute("onreleased", 'e.detail.element.setAttribute("dynamic-body","")')
+        AFRAME.scenes[0].appendChild(ballEl)
+
+        AFRAME.scenes[0].setAttribute("physics", "debug:true")
+
+	//let script = document.createElement("script")
+	//script.setAttribute("src", "https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.2/dist/aframe-physics-system.min.js")
+	//document.head.appendChild(script) // does not work, check older tricks
+  },
+  events: {
+    reset: function (evt) {
+        console.log(this.attrName, 'component was resetted!');
+	let generatorName = this.attrName
+	Array.from( this.el.querySelectorAll("."+generatorName) ).map( el => deleteTarget(el) )
+    },
+    check: function (evt) {
+    },
+  },
+})
+
+// should be in the component instead
+function twoPosToBox(A, B, generatorName){
+	let center = A.clone()
+	center.add(B)
+	center.divideScalar(2)
+	let lengthes = A.clone()
+	lengthes.sub(B)
+	let el = document.createElement("a-box")
+	el.setAttribute("position", center )
+	el.setAttribute('target', '')
+	el.setAttribute('static-body', '')
+	//el.setAttribute("onpicked", 'e.detail.element.removeAttribute("dynamic-body")') // untested
+	//el.setAttribute("onreleased", 'e.detail.element.setAttribute("dynamic-body","")')
+	el.classList.add( generatorName )
+	el.setAttribute("scale", lengthes.toArray().map( i => Math.abs(i) ).join(" ") )
+	AFRAME.scenes[0].appendChild(el)
+}
+
 //___________________________________________________________________________________________________________________________________
 AFRAME.registerComponent('voxelpaint', {
   init: function(){

jxr-core.js

@@ -218,6 +218,7 @@ AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent w
 			// if multi, should also look for onreleased__ not just onreleased
                         try {   
                                 eval( code ) // should be jxr too e.g if (txt.match(prefix)) interpretJXR(txt)
+				// note that event details are avaible within that code as e.detail which might not be very clear
                         } catch (error) {
                                 console.error(`Evaluation failed with ${error}`);
                         }
@@ -235,6 +236,7 @@ AFRAME.registerComponent('onpicked', {
 			// if multi, should also look for onreleased__ not just onreleased
                         try {   
                                 eval( code ) // should be jxr too e.g if (txt.match(prefix)) interpretJXR(txt)
+				// note that event details are avaible within that code as e.detail which might not be very clear
                         } catch (error) {
                                 console.error(`Evaluation failed with ${error}`);
                         }