working principle of arithematic game

index.html

@@ -8,7 +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="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>
@@ -52,11 +52,12 @@ AFRAME.registerComponent('startfunctions', {
   init: function(){
 
 	let untestedGames = ["checkers", "carcassone"]
-	addGame("voxelpaint")
-	addGame("simon")
-	addGame("physics-construct")
+	//addGame("voxelpaint")
+	//addGame("simon")
+	//addGame("physics-construct")
+	addGame("manipulable-arithemtic", true)
 	
-	addGames()
+	//addGames()
   }
 })
 
@@ -82,6 +83,7 @@ function addGame(gamename, visible="false"){
 	newEl.setAttribute("visible", visible)
 	newEl.classList.add( "game" )
 	AFRAME.scenes[0].appendChild(newEl)
+	return newEl
 }
 
 function addGames(){
@@ -114,6 +116,59 @@ function showOnlyThisGame(name){
 	document.querySelector("["+name+"]").emit("reset")
 }
 
+//___________________________________________________________________________________________________________________________________
+
+const fishTemplate = '<a-gltf-model onreleased="snapRightOf()" target scale=".001 .001 .001" src="../content/winterset/Fish.glb" position="0 1 -1"></a-gltf-model>'
+const functionAdderTemplate = '<a-troika-text value="x" onreleased="snapRightOf()" target scale=".1 .1 .1" position="0.1 1 -1"></a-troika-text>'
+const functionNumberTemplate = '<a-troika-text value="2" onreleased="snapRightOf()" target scale=".1 .1 .1" position="0.2 1 -1"></a-troika-text>'
+
+AFRAME.registerComponent('manipulable-arithemtic', {
+  init: function(){
+	let generatorName = this.attrName
+	let el = this.el
+	let templatesToAdd = [ fishTemplate, functionAdderTemplate ]
+	let numbers = Array(10).fill(functionNumberTemplate)
+	let numbersEl = addFromTemplateList( numbers, el )
+	setTimeout( _ => { // should listen to the event instead...
+		numbersEl.map( (el,i) => {
+			el.children[0].setAttribute("value", i)
+			el.children[0].setAttribute("position", "0.2 "+(1+i/10)+" -1")
+		})
+		// convenient but creates an offset which isn't great for direct manipulation
+	}, 100)
+	addFromTemplateList( templatesToAdd, el )
+	let equation = []
+	AFRAME.scenes[0].addEventListener('snapped', event => {
+		// could then try to get entities which are at the same position aligned on the relative x-axis
+		let functionToApply = event.detail.snappedOn.getAttribute("value")
+		let value = event.detail.snappedEl.getAttribute("value")
+		if ( functionToApply == "x" && !isNaN(value)) applyMath( fishTemplate, functionToApply, Number(value))
+	})
+	// works but doesn't stack, i.e much put FISH x 2, where 2 is added on x, not on FISH
+  }
+})
+
+function addFromTemplateList( templates, parentEl){
+	let elements = []
+	templates.map( t => {
+		let newEl = document.createElement("a-entity")
+		newEl.innerHTML = t
+		parentEl.appendChild(newEl)
+		elements.push( newEl )
+	})
+	return elements
+}
+
+function applyMath( template, functionToApply, value ){
+	let templatesToAdd = Array(value).fill(template)
+	// always assuming functionToApply to be "x" for now AND that the number of things to apply to is 1! (to faciliate selection)
+	let elements = addFromTemplateList( templatesToAdd, AFRAME.scenes[0] )
+	setTimeout( _ => { // should listen to the event instead...
+		elements.map( el => el.children[0].object3D.translateX( .5 + Math.random()/10 ) )
+		// convenient but creates an offset which isn't great for direct manipulation
+	}, 100)
+}
+
 //___________________________________________________________________________________________________________________________________
 AFRAME.registerComponent('throw-on-drop', {
   init: function(){
@@ -936,13 +991,14 @@ function snapMAB(){
 }
 
 function snapRightOf(){
+// does NOT stack, should consider snapMAB instead, also making stacking optional with default parameter
 	let latest =  selectedElements[selectedElements.length-1].element
 	let nearby = getClosestTargetElements( latest.getAttribute('position') )
 	if (nearby.length>0){
 		latest.setAttribute("rotation", AFRAME.utils.coordinates.stringify( nearby[0].el.getAttribute("rotation") ) )
 		latest.setAttribute("position", AFRAME.utils.coordinates.stringify( nearby[0].el.getAttribute("position") ) )
 		latest.object3D.translateX( 1/10 )
-		// somehow... works only the 2nd time, not the 1st?!
+		AFRAME.scenes[0].emit( 'snapped', {snappedOn: nearby[0].el, snappedEl: latest})
 	}
 }