example game by typing

2 changed files with 43 additions and 71 deletions
--- a/README.md
+++ b/README.md
@ -8,69 +8,7 @@ You can test it live at https://fabien.benetou.fr/pub/home/future_of_text_demo/e
 See also the AR version https://video.benetou.fr/w/x7HeEBF9HGfdVyf7vWsKsQ
 Note that the master branch is never the most up to date branch. Instead see https://git.benetou.fr/utopiah/text-code-xr-engine/branches for an overview. To explore branches in VR see https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/branches.html
 In order to have a better view of the different features accross branches see https://mastodon.pirateparty.be/web/@utopiah and https://twitter.com/utopiah/ which act as a kind of live documentation of the process.
 ![Manipulation prevew image](https://fabien.benetou.fr/pub/home/future_of_text_demo/content/primitives_manipulation.gif)
 ![Preview image](https://fabien.benetou.fr/pub/home/future_of_text_demo/content/engine-preview.png)
 First communicated on https://twitter.com/utopiah/status/1531188862415929344 as way to work on (WebXR) code during a flight.
 ## Minimalist example
 See for details the [minimalist-template branch](https://git.benetou.fr/utopiah/text-code-xr-engine/src/branch/minimalist-template/index.html) and [deployment issue](https://git.benetou.fr/utopiah/text-code-xr-engine/issues/72).
 ```html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>JXR minimalist template</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/kylebakerio/a-console@1.0.2/a-console.js"></script>
    <script src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/jxr.js"></script>
        <!-- use to define targets and left/right pinch interactions, respectively execute code and move targets -->
  </head>
  <body>
    <div style="position:fixed;z-index:1; top: 0%; left: 0%; border-bottom: 70px solid transparent; border-left: 70px solid #eee;">
        <a href="https://git.benetou.fr/utopiah/text-code-xr-engine/issues/">
                <img style="position:fixed;left:10px;" title="code repository" 
                     src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/gitea_logo.svg">
        </a>
 </div>
 <button id="mainbutton" style="display:none; z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick="startExperience()">Start the experience (hand tracking recommended)</button>
 <a-scene>
      <a-entity id="rig">
                <a-entity id="player"
                        hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0"></a-entity>
                <a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity>
                <a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
      </a-entity>
      <a-troika-text value="SpaSca : Spatial Scaffolding" anchor="left" outline-width="5%" font="https://fabien.benetou.fr/pub/home/future_of_text_demo/content/ChakraPetch-Regular.ttf" position="-5.26197 6.54224 -1.81284"
        scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #c061cb"></a-troika-text>
      <a-sky hide-on-enter-ar color="black"></a-sky>
      <a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" ></a-entity>
      <a-troika-text anchor="left" target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 0.65 -0.2" scale="0.1 0.1 0.1"></a-troika-text>
      <a-troika-text anchor=left target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
      <a-troika-text anchor=left target id="makeAnchorsVisibleOnTargets" value="jxr makeAnchorsVisibleOnTargets()" position="0 1.05 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
      <a-console position="0 1.1 -0.8" rotation="-45 0 0" font-size="34" height="0.5" skip-intro="true"></a-console>
    </a-scene>
  </body>
 </html>
 ```
--- a/index.html
+++ b/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 >
+	toolbox disable-components-via-url enable-components-via-url NOcommands-from-external-json keyboard text-game>
-	<!-- screenstack dynamic-view selectionboxonpinches keyboard glossary timeline issues fot
+	<!-- 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="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-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-scene>
  </body>