fixed emit() event details for onreleased/onpicked, added TTS example (FR)

game-multiple-levels
Fabien Benetou 2 weeks ago
parent 5c09425e47
commit 58b1ec5d69
  1. 31
      index.html
  2. 2
      jxr-core.js

@ -8,12 +8,14 @@
<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='jxr-core.js?1234567'></script>
<script src='jxr-core.js?123456'></script>
<script src='jxr-postitnote.js?13235'></script>
</head>
<body>
<script>
/* TODO :
- 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+'"})')
- 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
@ -27,11 +29,19 @@
../content/voicesBigguJulia/continu.mp3
../content/voicesBigguJulia/biggu-fem.mp3
example : tts --text "Regarde la couleur, ecoute le son, et pince avec ta main droite chaque cube dans le meme ordre" --model_name "tts_models/fr/mai/tacotron2-DDC" --out_path story.wav
Regarde la couleur, ecoute le son, et pince avec ta main droite chaque cube dans le meme ordre
Aide-moi a atteindre le poisson a la sortie du labyrinthe. Pour cela trouve les instructions pour me faire avancer, il y a en 4. Avec ta main gauche pince la premiere lettre et je bougerais dans cette direction !
Oops, les formes sont toutes melangees. Merci de les remettre a leur place en faisant attention que chaque fois ai la bonne couleur, comme indique par la ligne du haut et la colonne de droite. Pour deplacer les formes colorees pince les avec ta main droite.
Oh non, les lettres de ton prenom ont ete melangees. Pince chacune avec ta main droite et pose les dans le cube dans le bon ordre
- reset (as done for fishinbowl)
- better menu (e.g target with onreleased)
- fix maze/mazemap mismatch (causing emit() error on init)
- game ideas
- art deco / art nouveau facade as puzzle mixed pieces
- philosophical experimentation, cf https://video.benetou.fr/w/9KGbaxtAEx4JLnhAkwQKC1 featuring then the trolley problem
*/
AFRAME.registerComponent('startfunctions', {
@ -42,8 +52,8 @@ AFRAME.registerComponent('startfunctions', {
let newEl = document.createElement('a-entity')
//let gamename = "checkers"
//let gamename = "carcassone"
//let gamename = "simon"
let gamename = "voxelpaint"
let gamename = "simon"
//let gamename = "voxelpaint"
newEl.id = gamename
newEl.setAttribute(gamename, "")
newEl.classList.add( "game" )
@ -193,12 +203,7 @@ AFRAME.registerComponent('simon', {
newEl.setAttribute("sound", "src:url("+notePrefix+(i+1)+noteSuffix+")")
newEl.setAttribute("position", ""+(i%2)*this.scale+" 1.1 "+j*this.scale)
newEl.setAttribute("target","true")
newEl.setAttribute("onreleased", "document.querySelector('["+generatorName+"]').emit('check')")
// somehow unable to pass parameters via emit() ?!
//newEl.setAttribute("onreleased", "document.querySelector('["+generatorName+"]').emit('check', {'color':'red'})")
//newEl.setAttribute("onreleased", 'document.querySelector("[simon]").emit("check", {color: "red"})')
//newEl.setAttribute("onreleased", 'document.querySelector("[simon]").emit("check", {color: "green"})')
//newEl.setAttribute("onreleased", 'document.querySelector("['+generatorName+']").emit("check",{color:"'+color+'"})')
newEl.setAttribute("onreleased", 'document.querySelector("['+generatorName+']").emit("check",{color:"'+color+'"})')
newEl.classList.add( generatorName )
el.appendChild(newEl)
if (i==1) j++
@ -217,14 +222,10 @@ AFRAME.registerComponent('simon', {
setTimeout( _ => { document.querySelector("["+generatorName+"]").emit('playSequence') }, 1000)
},
check: function (evt) {
let latest = selectedElements[selectedElements.length-1].element
// could also snap it back, e.g clear rotation, possibily use initially position
let generatorName = this.attrName
let color = latest.getAttribute("color")
//this.userSeq.push(evt.detail.color)
//let box = this.el.querySelector("a-box[color="+evt.detail.color+"]")
this.userSeq.push(color)
let box = this.el.querySelector("a-box[color="+color+"]")
this.userSeq.push(evt.detail.color)
let box = this.el.querySelector("a-box[color="+evt.detail.color+"]")
box.components.sound.playSound()
console.log ('seq:', this.sequence.at( this.userSeq.length-1) ,'user:', this.userSeq.at(-1) )
if (this.userSeq.at(-1) == this.sequence.at( this.userSeq.length-1) ){

@ -241,6 +241,7 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
// avoiding setOnDropFromAttribute() as it is not idiosyncratic and creates timing issues
AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent with event name
schema: {default: ""}, // type: "string" forced to avoid object type guess parsing
// could support multi
// could check if target component is already present on this.el, if not, add it as it's required
events: {
@ -257,6 +258,7 @@ AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent w
})
AFRAME.registerComponent('onpicked', {
schema: {default: ""}, // type: "string" forced to avoid object type guess parsing
// could support multi
// could check if target component is already present on this.el, if not, add it as it's required
events: {

Loading…
Cancel
Save