example game by typing

index.html

@@ -785,6 +785,10 @@ function appendToHUD(txt){
 		setHUD( textHUD + " " + txt )
 }
 
+function getHUD(){
+	return document.querySelector("#typinghud").getAttribute("value")
+}
+
 function setHUD(txt){
 	document.querySelector("#typinghud").setAttribute("value",txt)
 }
@@ -1468,6 +1472,42 @@ function toggleVisibilityAllButClass(classname){
 	toggleVisibilityEntitiesFromClass("hidableassets")
 }
 
+AFRAME.registerComponent('text-game', {
+	init: function(){
+		// could also add the keyboard component if not already present
+		this.words = [
+			{glb:"../content/textGameAssets/bag.glb",text_en:"bag",text_fr:"sac"},
+			{glb:"../content/textGameAssets/cat.glb",text_en:"cat",text_fr:"chat",scale:.01}
+		]
+		let generatorName = this.attrName
+		this.status_won=false
+		this.words.map( w => {
+			addNewNote(w.text_fr)
+			let el = document.createElement("a-gltf-model");
+			el.setAttribute("src", w.glb)
+			el.setAttribute("position", "" + Math.random()*10/2-2 +  " 1 -1");
+			el.setAttribute("visible", "false");
+			el.id = generatorName+"_"+w.text_en
+			if (w.scale)
+				el.setAttribute("scale", " " + w.scale + " " + w.scale + " " + w.scale );
+			AFRAME.scenes[0].appendChild(el) 
+			// could add back the element to change visibility later
+		})
+	},
+	tick: function () {
+		let generatorName = this.attrName
+		// check if typed properly
+		const text = getHUD() // unecessary, should have add then listen to a new letter typed event instead
+		this.words.map( w => {
+			if (w.text_fr == text) {
+				this.status_won = true
+				setFeedbackHUD( "you won" )
+				document.getElementById( generatorName+"_"+w.text_en ).setAttribute("visible", "true");
+			}
+		})
+	}
+})
+
 AFRAME.registerComponent('adjust-height-in-vr', {
 	init: function(){
 		AFRAME.scenes[0].addEventListener("enter-vr", _ => {
@@ -1635,8 +1675,8 @@ function cloneAndDistribute(){
     <div id="observablehq-result_as_html-ab4c1560"></div>
 </div>
 <a-scene cursor="rayOrigin: mouse" raycaster="objects: [html]; interval:100;" adjust-height-in-vr
-	toolbox disable-components-via-url enable-components-via-url NOcommands-from-external-json >
-	<!-- screenstack dynamic-view selectionboxonpinches keyboard glossary timeline issues fot
+	toolbox disable-components-via-url enable-components-via-url NOcommands-from-external-json keyboard text-game>
+	<!-- screenstack dynamic-view selectionboxonpinches glossary timeline issues fot
 	networked-scene="serverURL: https://naf.benetou.fr/; adapter: easyrtc; audio: true;"
 	-->
       <a-assets>
@@ -1704,13 +1744,7 @@ function cloneAndDistribute(){
 	      <a-plane position="0 1 -1" scale="0.21 0.15 1" rotation="-30 0 0" wireframe="true"></a-plane>
 	-->
 
-	<a-text target value="instructions : pinch twice for distance then select element then execute cloneAndDistribute() " position="0 1.65 -0.2" scale="0.1 0.1 0.1"></a-text>
-	<a-text target value="jxr AFRAME.scenes[0].components.inspector.openInspector()" position="0 1.25 -0.2" scale="0.1 0.1 0.1"></a-text>
-	<a-text target value="jxr observe selectedElement" position="0 1.15 -0.2" scale="0.1 0.1 0.1"></a-text>
-	<a-text target value="jxr observe dl2p" position="0 1.35 -0.2" scale="0.1 0.1 0.1"></a-text>
-	<a-text target value="jxr cloneAndDistribute()" position="0 1.45 -0.2" scale="0.1 0.1 0.1"></a-text>
-      <a-box target position="-0.1 1.2 -0.3" scale=".1 1 0.01" rotation="0 45 0"
-	src="https://vatelier.benetou.fr/MyDemo/newtooling/textures/fabien.benetou.fr_Analysis_LibrarianMoveWalls.png"></a-box>
+	<a-text target value="instructions : pinch letters to make a 3D model appear " position="0 1.65 -0.2" scale="0.1 0.1 0.1"></a-text>
 
     </a-scene>
   </body>