From 0741953057635092bea5fca5f8d10f55ff06236f Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Mon, 24 Jun 2024 15:00:19 +0200 Subject: [PATCH] working principle of arithematic game --- index.html | 68 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 62 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index b2d1ef8..f1d34f7 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -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 = '' +const functionAdderTemplate = '' +const functionNumberTemplate = '' + +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}) } }