From fde44fc1109441e60021726db7ef1ea2c62d18f0 Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Mon, 27 Nov 2023 18:50:57 +0100 Subject: [PATCH] exercise component with animation examples --- index.html | 89 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 72 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index e24a5a5..ffb97f4 100644 --- a/index.html +++ b/index.html @@ -92,19 +92,59 @@ function inspectModel(selectedModel){ return {animations:animations, bones:foundBones, skinnedMeshes: skinnedMeshes, morphTargets:morphTargets} } - function checkExerciseCompletion(targetNumber=2){ + const instructions = document.querySelector("#instructions>a-troika-text") let counter = 0 Array.from( document.querySelector("#fishes").children ).map( f => { if (f.object3D.position.distanceTo( document.querySelector('#plate').object3D.position ) < .3 ) counter++ }) - - console.log(counter) - if (counter == targetNumber) - document.querySelector("#bubble>a-troika-text").setAttribute("value", "bravo Julia!") - else - document.querySelector("#bubble>a-troika-text").setAttribute("value", "presque Julia,\ncontinue...") + if (counter == targetNumber) { + instructions.setAttribute("value", "bravo Julia!") + instructions.emit('win') + document.getElementById("biggu").setAttribute('animation-mixer', "clip:BigguAction_Yes;loop:once") + } else { + instructions.setAttribute("value", "presque Julia,\ncontinue...") + instructions.emit('failed', {counter:counter}) + document.getElementById("biggu").setAttribute('animation-mixer', "clip:BigguAction_No;loop:once") + //document.getElementById("biggu").setAttribute('animation-mixer', "clip:BigguAction;loop:once") // t-pose + //document.getElementById("biggu").setAttribute('animation-mixer', "clip:BigguAction_PointL;loop:once") + } } + +AFRAME.registerComponent('exercise', { + schema: { + instructions: {type: 'string'}, + win: {type: 'string'}, + failed: {type: 'string'}, + next: {type: 'selector'}, + first: {type: 'boolean', default: false}, + }, + init: function(){ + const emittedExerciseId = this.el.id + const instructions = document.querySelector("#instructions>a-troika-text") + if (!this.data.first) + this.el.setAttribute('position', '0 0 9999') + else + instructions.setAttribute("value", this.data.instructions ) + instructions.addEventListener('win', _ => { + instructions.setAttribute("value", this.data.win ) + // should setTimeout or let the player actively move on + this.el.setAttribute('position', '0 0 9999') + // must filter on id, making sure it's emited by matching excercise + if (this.data.next) { + console.log( this.data.next ) + console.log( this.data.next.id ) + this.data.next.setAttribute('position', '0 0 0') + } + }) + instructions.addEventListener('failed', ev => { + console.log(emittedExerciseId, this.id) + instructions.setAttribute("value", this.data.failed ) + }) + // should be replaced by drawings or even scaled down models with "5" and arrow or hand model + } +}) + @@ -140,23 +180,38 @@ function checkExerciseCompletion(targetNumber=2){ align="center" color="black" position="0 0 .2"> - + - - - - - - - - + + + + + + + + + + - + + + + + + + + + + + + +