Re: [WebDNA] Extract a JS variable into a form input value which can

This WebDNA talk-list message is from

2019


It keeps the original formatting.
numero = 114543
interpreted = N
texte = 2163 --Apple-Mail=_6E7DA3AC-3F32-4A33-9ECB-753C4EE03038 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=utf-8 Hi Tom I have tried many timew to get this working with your inspiration but = without any luck. Anyway thanks for your input=E2=80=A6 I might revive = the thread when I get the right inspiration. /Palle > On 28 Feb 2019, at 15.24, Tom Duke wrote: >=20 > Palle, >=20 > Set up your input with an ID: >=20 > >=20 > Then update the input every time the score gets updated in the = javascript code. This code below isn't tested but you should get the = idea. >=20 > - Tom >=20 >=20 >=20 > console.clear(); >=20 > interface BlockReturn > { > placed?:any; > chopped?:any; > plane: 'x' | 'y' | 'z'; > direction: number; > bonus?: boolean; > } >=20 > class Stage > { > private container: any; > private camera: any; > private scene: any; > private renderer: any; > private light: any; > private softLight: any; > private group: any; > =09 > constructor() > { > // container > =09 > this.container =3D document.getElementById('game'); > =09 > // renderer > =09 > this.renderer =3D new THREE.WebGLRenderer({ > antialias: true, > alpha: false > }); > =09 > this.renderer.setSize(window.innerWidth, = window.innerHeight); > this.renderer.setClearColor('#D0CBC7', 1); > this.container.appendChild( this.renderer.domElement ); > =09 > // scene >=20 > this.scene =3D new THREE.Scene(); >=20 > // camera >=20 > let aspect =3D window.innerWidth / window.innerHeight; > let d =3D 20; > this.camera =3D new THREE.OrthographicCamera( - d * = aspect, d * aspect, d, - d, -100, 1000); > this.camera.position.x =3D 2; > this.camera.position.y =3D 2;=20 > this.camera.position.z =3D 2;=20 > this.camera.lookAt(new THREE.Vector3(0, 0, 0)); > =09 > //light >=20 > this.light =3D new THREE.DirectionalLight(0xffffff, = 0.5); > this.light.position.set(0, 499, 0); > this.scene.add(this.light); >=20 > this.softLight =3D new THREE.AmbientLight( 0xffffff, 0.4 = ); > this.scene.add(this.softLight) > =09 > window.addEventListener('resize', () =3D> = this.onResize()); > this.onResize(); > } > =09 > setCamera(y:number, speed:number =3D 0.3) > { > TweenLite.to(this.camera.position, speed, {y: y + 4, = ease: Power1.easeInOut}); > TweenLite.to(this.camera.lookAt, speed, {y: y, ease: = Power1.easeInOut}); > } > =09 > onResize() > { > let viewSize =3D 30; > this.renderer.setSize(window.innerWidth, = window.innerHeight); > this.camera.left =3D window.innerWidth / - viewSize; > this.camera.right =3D window.innerWidth / viewSize; > this.camera.top =3D window.innerHeight / viewSize; > this.camera.bottom =3D window.innerHeight / - viewSize; > this.camera.updateProjectionMatrix(); > } > =09 > render =3D function() > { > this.renderer.render(this.scene, this.camera); > } >=20 > add =3D function(elem) > { > this.scene.add(elem); > } >=20 > remove =3D function(elem) > { > this.scene.remove(elem); > } > } >=20 > class Block > { > const STATES =3D {ACTIVE: 'active', STOPPED: 'stopped', MISSED: = 'missed'}; > const MOVE_AMOUNT =3D 12; >=20 > dimension =3D { width: 0, height: 0, depth: 0} > position =3D {x: 0, y: 0, z: 0}; > =09 > mesh:any; > state:string; > index:number; > speed:number; > direction:number; > colorOffset:number; > color:number; > material:any; >=20 > workingPlane:string; > workingDimension:string; >=20 > targetBlock:Block; > =09 > constructor(block:Block) > { > // set size and position > =09 > this.targetBlock =3D block; > =09 > this.index =3D (this.targetBlock ? = this.targetBlock.index : 0) + 1; > this.workingPlane =3D this.index % 2 ? 'x' : 'z'; > this.workingDimension =3D this.index % 2 ? 'width' : = 'depth'; > =09 > // set the dimensions from the target block, or = defaults. > =09 > this.dimension.width =3D this.targetBlock ? = this.targetBlock.dimension.width : 10; > this.dimension.height =3D this.targetBlock ? = this.targetBlock.dimension.height : 2; > this.dimension.depth =3D this.targetBlock ? = this.targetBlock.dimension.depth : 10; > =09 > this.position.x =3D this.targetBlock ? = this.targetBlock.position.x : 0; > this.position.y =3D this.dimension.height * this.index; > this.position.z =3D this.targetBlock ? = this.targetBlock.position.z : 0; > =09 > this.colorOffset =3D this.targetBlock ? = this.targetBlock.colorOffset : Math.round(Math.random() * 100); > =09 > // set color > if(!this.targetBlock)=20 > { > this.color =3D 0x333344; > } > else > { > let offset =3D this.index + this.colorOffset; > var r =3D Math.sin(0.3 * offset) * 55 + 200; > var g =3D Math.sin(0.3 * offset + 2) * 55 + 200; > var b =3D Math.sin(0.3 * offset + 4) * 55 + 200; > this.color =3D new THREE.Color( r / 255, g / = 255, b / 255 ); > } > =09 > // state > =09 > this.state =3D this.index > 1 ? this.STATES.ACTIVE : = this.STATES.STOPPED; > =09 > // set direction > =09 > this.speed =3D -0.1 - (this.index * 0.005); > if(this.speed < -4) this.speed =3D -4; > this.direction =3D this.speed; > =09 > // create block > =09 > let geometry =3D new THREE.BoxGeometry( = this.dimension.width, this.dimension.height, this.dimension.depth); > geometry.applyMatrix( new = THREE.Matrix4().makeTranslation(this.dimension.width/2, = this.dimension.height/2, this.dimension.depth/2) ); > this.material =3D new THREE.MeshToonMaterial( {color: = this.color, shading: THREE.FlatShading} ); > this.mesh =3D new THREE.Mesh( geometry, this.material ); > this.mesh.position.set(this.position.x, this.position.y = + (this.state =3D=3D this.STATES.ACTIVE ? 0 : 0), this.position.z); > =09 > if(this.state =3D=3D this.STATES.ACTIVE)=20 > { > this.position[this.workingPlane] =3D = Math.random() > 0.5 ? -this.MOVE_AMOUNT : this.MOVE_AMOUNT; > } > }=20 >=20 > reverseDirection() > { > this.direction =3D this.direction > 0 ? this.speed : = Math.abs(this.speed); =09 > } >=20 > place():BlockReturn > { > this.state =3D this.STATES.STOPPED; > =09 > let overlap =3D = this.targetBlock.dimension[this.workingDimension] - = Math.abs(this.position[this.workingPlane] - = this.targetBlock.position[this.workingPlane]); > =09 > let blocksToReturn:BlockReturn =3D { > plane: this.workingPlane, > direction: this.direction > }; > =09 > if(this.dimension[this.workingDimension] - overlap < = 0.3) > { > overlap =3D = this.dimension[this.workingDimension]; > blocksToReturn.bonus =3D true; > this.position.x =3D this.targetBlock.position.x; > this.position.z =3D this.targetBlock.position.z; > this.dimension.width =3D = this.targetBlock.dimension.width; > this.dimension.depth =3D = this.targetBlock.dimension.depth; > } > =09 > if(overlap > 0) > { > let choppedDimensions =3D { width: = this.dimension.width, height: this.dimension.height, depth: = this.dimension.depth }; > choppedDimensions[this.workingDimension] -=3D = overlap; > this.dimension[this.workingDimension] =3D = overlap; > =09 > let placedGeometry =3D new THREE.BoxGeometry( = this.dimension.width, this.dimension.height, this.dimension.depth); > placedGeometry.applyMatrix( new = THREE.Matrix4().makeTranslation(this.dimension.width/2, = this.dimension.height/2, this.dimension.depth/2) ); > let placedMesh =3D new THREE.Mesh( = placedGeometry, this.material ); > =09 > let choppedGeometry =3D new THREE.BoxGeometry( = choppedDimensions.width, choppedDimensions.height, = choppedDimensions.depth); > choppedGeometry.applyMatrix( new = THREE.Matrix4().makeTranslation(choppedDimensions.width/2, = choppedDimensions.height/2, choppedDimensions.depth/2) ); > let choppedMesh =3D new THREE.Mesh( = choppedGeometry, this.material ); > =09 > let choppedPosition =3D { > x: this.position.x, > y: this.position.y, > z: this.position.z > } > =09 > if(this.position[this.workingPlane] < = this.targetBlock.position[this.workingPlane]) > { > this.position[this.workingPlane] =3D = this.targetBlock.position[this.workingPlane] > } > else > { > choppedPosition[this.workingPlane] +=3D = overlap; > } > =09 > placedMesh.position.set(this.position.x, = this.position.y, this.position.z); > choppedMesh.position.set(choppedPosition.x, = choppedPosition.y, choppedPosition.z); > =09 > blocksToReturn.placed =3D placedMesh; > if(!blocksToReturn.bonus) blocksToReturn.chopped = =3D choppedMesh; > } > else > { > this.state =3D this.STATES.MISSED; > } > =09 > this.dimension[this.workingDimension] =3D overlap; >=20 > return blocksToReturn; > } > =09 > tick() > { > if(this.state =3D=3D this.STATES.ACTIVE) > { > let value =3D this.position[this.workingPlane]; > if(value > this.MOVE_AMOUNT || value < = -this.MOVE_AMOUNT) this.reverseDirection(); > this.position[this.workingPlane] +=3D = this.direction;=09 > this.mesh.position[this.workingPlane] =3D = this.position[this.workingPlane];=09 > } > } > } >=20 > class Game > { > const STATES =3D { > 'LOADING': 'loading', > 'PLAYING': 'playing', > 'READY': 'ready', > 'ENDED': 'ended', > 'RESETTING': 'resetting' > } > blocks:Block[] =3D []; > state:string =3D this.STATES.LOADING; > =09 > // groups >=20 > newBlocks:any; > placedBlocks:any; > choppedBlocks:any; >=20 > // UI elements >=20 > scoreContainer:any; > mainContainer:any; > startButton:any; > instructions:any; > =09 > constructor() > { > this.stage =3D new Stage(); > =09 > this.mainContainer =3D = document.getElementById('container'); > this.scoreContainer =3D = document.getElementById('score'); > this.webdnaScoreContainer =3D = document.getElementById('webdna-score'); > this.startButton =3D = document.getElementById('start-button'); > this.instructions =3D = document.getElementById('instructions'); > this.scoreContainer.innerHTML =3D '0'; > this.webdnaScoreContainer.value =3D '0'; > =09 > this.newBlocks =3D new THREE.Group(); > this.placedBlocks =3D new THREE.Group(); > this.choppedBlocks =3D new THREE.Group(); > =09 > this.stage.add(this.newBlocks); > this.stage.add(this.placedBlocks); > this.stage.add(this.choppedBlocks); > =09 > this.addBlock(); > this.tick(); > =09 > this.updateState(this.STATES.READY); > =09 > document.addEventListener('keydown', e =3D> > { > if(e.keyCode =3D=3D 32) this.onAction() > }); > =09 > document.addEventListener('click', e =3D> > { > this.onAction(); > });=09 > =09 > document.addEventListener('touchstart', e =3D> > { > e.preventDefault(); > // this.onAction(); > =09 > // =E2=98=9D=EF=B8=8F this triggers after click = on android so you > // insta-lose, will figure it out later. > }); > } >=20 > updateState(newState) > { > for(let key in this.STATES) = this.mainContainer.classList.remove(this.STATES[key]); > this.mainContainer.classList.add(newState); > this.state =3D newState; > } >=20 > onAction() > { > switch(this.state) > { > case this.STATES.READY: > this.startGame(); > break; > case this.STATES.PLAYING: > this.placeBlock(); > break; > case this.STATES.ENDED: > this.restartGame(); > break;=09 > } > } > =09 > startGame() > { > if(this.state !=3D this.STATES.PLAYING) > { > this.scoreContainer.innerHTML =3D '0'; > this.webdnaScoreContainer.value =3D '0'; > this.updateState(this.STATES.PLAYING); > this.addBlock(); > } > } >=20 > restartGame() > { > this.updateState(this.STATES.RESETTING); > =09 > let oldBlocks =3D this.placedBlocks.children; > let removeSpeed =3D 0.2; > let delayAmount =3D 0.02; > for(let i =3D 0; i < oldBlocks.length; i++) > { > TweenLite.to(oldBlocks[i].scale, removeSpeed, = {x: 0, y: 0, z: 0, delay: (oldBlocks.length - i) * delayAmount, ease: = Power1.easeIn, onComplete: () =3D> = this.placedBlocks.remove(oldBlocks[i])}) > TweenLite.to(oldBlocks[i].rotation, removeSpeed, = {y: 0.5, delay: (oldBlocks.length - i) * delayAmount, ease: = Power1.easeIn}) > } > let cameraMoveSpeed =3D removeSpeed * 2 + = (oldBlocks.length * delayAmount); > this.stage.setCamera(2, cameraMoveSpeed); > =09 > let countdown =3D {value: this.blocks.length - 1}; > TweenLite.to(countdown, cameraMoveSpeed, {value: 0, = onUpdate: () =3D> { >=20 > this.scoreContainer.innerHTML =3D = String(Math.round(countdown.value)); > this.webdnaScoreContainer.value =3D = String(Math.round(countdown.value)); >=20 > }}) > =09 > this.blocks =3D this.blocks.slice(0, 1); > =09 > setTimeout(() =3D> { > this.startGame(); > }, cameraMoveSpeed * 1000) > =09 > } > =09 > placeBlock() > { > let currentBlock =3D this.blocks[this.blocks.length - = 1]; > let newBlocks:BlockReturn =3D currentBlock.place(); > this.newBlocks.remove(currentBlock.mesh); > if(newBlocks.placed) = this.placedBlocks.add(newBlocks.placed); > if(newBlocks.chopped) > { > this.choppedBlocks.add(newBlocks.chopped); > let positionParams =3D {y: '-=3D30', ease: = Power1.easeIn, onComplete: () =3D> = this.choppedBlocks.remove(newBlocks.chopped)} > let rotateRandomness =3D 10; > let rotationParams =3D { > delay: 0.05, > x: newBlocks.plane =3D=3D 'z' ? = ((Math.random() * rotateRandomness) - (rotateRandomness/2)) : 0.1, > z: newBlocks.plane =3D=3D 'x' ? = ((Math.random() * rotateRandomness) - (rotateRandomness/2)) : 0.1, > y: Math.random() * 0.1, > }; > if(newBlocks.chopped.position[newBlocks.plane] > = newBlocks.placed.position[newBlocks.plane]) > { > positionParams[newBlocks.plane] =3D '+=3D'= + (40 * Math.abs(newBlocks.direction)); > } > else > { > positionParams[newBlocks.plane] =3D '-=3D'= + (40 * Math.abs(newBlocks.direction)); > } > TweenLite.to(newBlocks.chopped.position, 1, = positionParams); > TweenLite.to(newBlocks.chopped.rotation, 1, = rotationParams); > =09 > } > =09 > this.addBlock(); > } > =09 > addBlock() > { > let lastBlock =3D this.blocks[this.blocks.length - 1]; > =09 > if(lastBlock && lastBlock.state =3D=3D = lastBlock.STATES.MISSED) > { > return this.endGame(); > } > =09 > this.scoreContainer.innerHTML =3D = String(this.blocks.length - 1); > this.webdanScoreContainer.value =3D = String(this.blocks.length - 1); >=20 > let newKidOnTheBlock =3D new Block(lastBlock); > this.newBlocks.add(newKidOnTheBlock.mesh); > this.blocks.push(newKidOnTheBlock); >=20 > this.stage.setCamera(this.blocks.length * 2); > =09 > if(this.blocks.length >=3D 5) = this.instructions.classList.add('hide'); > } > =09 > endGame() > { > this.updateState(this.STATES.ENDED); > } >=20 > tick() > { > this.blocks[this.blocks.length - 1].tick(); > this.stage.render(); > requestAnimationFrame(() =3D> {this.tick()}); > } > } >=20 > let game =3D new Game(); >=20 >=20 >=20 > On Wed, 27 Feb 2019 at 09:52, Hetzner Powerpalle = > wrote: > I know I have touched this once before a the question below is not = directly a webdna issue, al though webdna will be involved later on to = received some data using ajax, which I have already figured out. >=20 > My question is the following. How can I extract the score value = provided by JS and sets it as an html form input variable=20 >=20 > In this case I would like to extract the final score of this game (url = provided) and take the JS score variable into an htm input context.=20 >=20 > https://codepen.io/ste-vg/pen/ppLQNW = >=20 > >=20 > =E2=80=99new_score_value_var=E2=80=99 would be parsed on the webdna = manipulated using webdna. >=20 > When the js variable can be set inside the input statement I am quite = sure I am able to parse it on to some ajax code I have produced and then = store in a db together some other relevant data. >=20 > Anyone like to try to help out here? Actual examples would be great = stuff >=20 > /Palle > --------------------------------------------------------- This message = is sent to you because you are subscribed to the mailing list = talk@webdna.us To unsubscribe, E-mail to: = talk-leave@webdna.us archives: = http://www.webdna.us/page.dna?numero=3D55 = Bug Reporting: = support@webdna.us = ------------------------------------------------= --------- This message is sent to you because you are subscribed to the = mailing list talk@webdna.us To unsubscribe, E-mail to: = talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55 = Bug Reporting: support@webdna.us --Apple-Mail=_6E7DA3AC-3F32-4A33-9ECB-753C4EE03038 Content-Transfer-Encoding: quoted-printable Content-Type: text/html; charset=utf-8 Hi = Tom

I have tried = many timew to get this working with your inspiration but without any = luck. Anyway thanks for your input=E2=80=A6 I might revive the thread = when I get the right inspiration.

/Palle

On 28 = Feb 2019, at 15.24, Tom Duke <tom@revolutionaries.ie> wrote:

Palle,

Set up your input with an ID:

<input type=3D"hidden=E2=80=9D = name=3D=E2=80=9Cnew_score_value_var=E2=80=9D value=3D=E2=80=9Cthe score = ja value form the codeine game=E2=80=9D id=3D"webdna-score">

Then update the input = every time the score gets updated in the javascript code.  This = code below isn't tested but you should get the idea.

- Tom



console.clear();

interface BlockReturn
{
= placed?:any;
= chopped?:any;
= plane: 'x' | 'y' | 'z';
= direction: number;
= bonus?: boolean;
}

class Stage
{
private container: any;
= private camera: any;
= private scene: any;
= private renderer: any;
= private light: any;
= private softLight: any;
= private group: any;
=
constructor()
= {
// container
= 
= this.container =3D document.getElementById('game');
= 
= // renderer
=
this.renderer =3D new = THREE.WebGLRenderer({
= antialias: true,
= alpha: false
= });

= this.renderer.setSize(window.innerWidth, = window.innerHeight);
= this.renderer.setClearColor('#D0CBC7', 1);
= this.container.appendChild( = this.renderer.domElement );
=
// scene

= this.scene =3D new THREE.Scene();

// camera

= let aspect =3D window.innerWidth / window.innerHeight;
= let d =3D 20;
= this.camera =3D new THREE.OrthographicCamera( - d * aspect, d * = aspect, d, - d, -100, 1000);
= this.camera.position.x =3D 2;
= this.camera.position.y =3D 2; 
= this.camera.position.z =3D 2; 
= this.camera.lookAt(new THREE.Vector3(0, 0, 0));
= 
= //light

= this.light =3D new = THREE.DirectionalLight(0xffffff, 0.5);
= this.light.position.set(0, 499, 0);
= this.scene.add(this.light);

this.softLight =3D new = THREE.AmbientLight( 0xffffff, 0.4 );
= this.scene.add(this.softLight)
=
= window.addEventListener('resize', () =3D> = this.onResize());
= this.onResize();
= }

= setCamera(y:number, speed:number =3D 0.3)
= {
= TweenLite.to(this.camera.position, speed, {y: y + 4, ease: = Power1.easeInOut});
= TweenLite.to(this.camera.lookAt, speed, {y: y, ease: = Power1.easeInOut});
= }

= onResize()
= {
let viewSize =3D = 30;
= this.renderer.setSize(window.innerWidth, = window.innerHeight);
= this.camera.left =3D window.innerWidth / - viewSize;
= this.camera.right =3D window.innerWidth / = viewSize;
this.camera.top =3D = window.innerHeight / viewSize;
= this.camera.bottom =3D window.innerHeight / - viewSize;
= this.camera.updateProjectionMatrix();
= }

= render =3D function()
= {
= this.renderer.render(this.scene, this.camera);
= }

= add =3D function(elem)
= {
= this.scene.add(elem);
= }

= remove =3D function(elem)
= {
= this.scene.remove(elem);
= }
}

class Block
{
const STATES =3D {ACTIVE: = 'active', STOPPED: 'stopped', MISSED: 'missed'};
= const MOVE_AMOUNT =3D 12;

dimension =3D { width: 0, height: = 0, depth: 0}
position =3D {x: 0, y: 0, z: = 0};

= mesh:any;
state:string;
= index:number;
= speed:number;
= direction:number;
= colorOffset:number;
= color:number;
= material:any;

= workingPlane:string;
= workingDimension:string;

targetBlock:Block;
= 
= constructor(block:Block)
= {
// set size and = position

= this.targetBlock =3D block;
=
this.index =3D = (this.targetBlock ? this.targetBlock.index : 0) + 1;
= this.workingPlane =3D this.index % 2 ? 'x' : = 'z';
this.workingDimension =3D = this.index % 2 ? 'width' : 'depth';
=
// set the dimensions = from the target block, or defaults.
=
this.dimension.width =3D = this.targetBlock ? this.targetBlock.dimension.width : 10;
= this.dimension.height =3D this.targetBlock ? = this.targetBlock.dimension.height : 2;
= this.dimension.depth =3D this.targetBlock ? = this.targetBlock.dimension.depth : 10;
=
this.position.x =3D = this.targetBlock ? this.targetBlock.position.x : 0;
= this.position.y =3D this.dimension.height * = this.index;
this.position.z =3D = this.targetBlock ? this.targetBlock.position.z : 0;
= 
= this.colorOffset =3D this.targetBlock ? = this.targetBlock.colorOffset : Math.round(Math.random() * = 100);

= // set color
= if(!this.targetBlock) 
= {
this.color =3D = 0x333344;
}
= else
= {
let offset =3D = this.index + this.colorOffset;
= var r =3D Math.sin(0.3 * offset) * 55 + 200;
= var g =3D Math.sin(0.3 * offset + 2) * 55 = + 200;
var b =3D = Math.sin(0.3 * offset + 4) * 55 + 200;
= this.color =3D new THREE.Color( r / 255, g / 255, b / 255 = );
}
= 
= // state

= this.state =3D this.index > 1 ? this.STATES.ACTIVE : = this.STATES.STOPPED;
=
// set = direction

= this.speed =3D -0.1 - (this.index * 0.005);
= if(this.speed < -4) this.speed =3D = -4;
this.direction =3D = this.speed;

= // create block
=
let geometry =3D new = THREE.BoxGeometry( this.dimension.width, this.dimension.height, = this.dimension.depth);
= geometry.applyMatrix( new = THREE.Matrix4().makeTranslation(this.dimension.width/2, = this.dimension.height/2, this.dimension.depth/2) );
= this.material =3D new THREE.MeshToonMaterial( = {color: this.color, shading: THREE.FlatShading} );
= this.mesh =3D new THREE.Mesh( geometry, = this.material );
= this.mesh.position.set(this.position.x, this.position.y + = (this.state =3D=3D this.STATES.ACTIVE ? 0 : 0), = this.position.z);
=
if(this.state =3D=3D = this.STATES.ACTIVE) 
= {
= this.position[this.workingPlane] =3D Math.random() > 0.5 ? = -this.MOVE_AMOUNT : this.MOVE_AMOUNT;
= }
} 

reverseDirection()
= {
this.direction =3D = this.direction > 0 ? this.speed : Math.abs(this.speed); =
}

place():BlockReturn
= {
this.state =3D = this.STATES.STOPPED;
=
let overlap =3D = this.targetBlock.dimension[this.workingDimension] - = Math.abs(this.position[this.workingPlane] - = this.targetBlock.position[this.workingPlane]);
=
let = blocksToReturn:BlockReturn =3D {
= plane: this.workingPlane,
= direction: this.direction
= };

= if(this.dimension[this.workingDimension] - overlap < = 0.3)
{
= overlap =3D = this.dimension[this.workingDimension];
= blocksToReturn.bonus =3D true;
= this.position.x =3D this.targetBlock.position.x;
= this.position.z =3D = this.targetBlock.position.z;
= this.dimension.width =3D = this.targetBlock.dimension.width;
= this.dimension.depth =3D = this.targetBlock.dimension.depth;
= }

= if(overlap > 0)
= {
let = choppedDimensions =3D { width: this.dimension.width, height: = this.dimension.height, depth: this.dimension.depth };
= choppedDimensions[this.workingDimension] = -=3D overlap;
= this.dimension[this.workingDimension] =3D overlap;
= 
= let placedGeometry =3D new THREE.BoxGeometry( = this.dimension.width, this.dimension.height, = this.dimension.depth);
= placedGeometry.applyMatrix( new = THREE.Matrix4().makeTranslation(this.dimension.width/2, = this.dimension.height/2, this.dimension.depth/2) );
= let placedMesh =3D new THREE.Mesh( = placedGeometry, this.material );
=
let = choppedGeometry =3D new THREE.BoxGeometry( choppedDimensions.width, = choppedDimensions.height, choppedDimensions.depth);
= choppedGeometry.applyMatrix( new = THREE.Matrix4().makeTranslation(choppedDimensions.width/2, = choppedDimensions.height/2, choppedDimensions.depth/2) );
= let choppedMesh =3D new THREE.Mesh( = choppedGeometry, this.material );
=
let = choppedPosition =3D {
= x: this.position.x,
= y: this.position.y,
= z: this.position.z
= }

= if(this.position[this.workingPlane] < = this.targetBlock.position[this.workingPlane])
= {
= this.position[this.workingPlane] =3D = this.targetBlock.position[this.workingPlane]
= }
else
= {
= choppedPosition[this.workingPlane] +=3D = overlap;
}
= 
= placedMesh.position.set(this.position.x, this.position.y, = this.position.z);
= choppedMesh.position.set(choppedPosition.x, choppedPosition.y, = choppedPosition.z);
=
= blocksToReturn.placed =3D placedMesh;
= if(!blocksToReturn.bonus) blocksToReturn.chopped =3D = choppedMesh;
}
= else
= {
this.state =3D = this.STATES.MISSED;
= }

= this.dimension[this.workingDimension] =3D overlap;

= return blocksToReturn;
= }

= tick()
{
= if(this.state =3D=3D this.STATES.ACTIVE)
= {
let value =3D = this.position[this.workingPlane];
= if(value > this.MOVE_AMOUNT || value < -this.MOVE_AMOUNT) = this.reverseDirection();
= this.position[this.workingPlane] +=3D this.direction;=
= this.mesh.position[this.workingPlane] =3D = this.position[this.workingPlane];
= }
}
}

class Game
{
const STATES =3D {
= 'LOADING': 'loading',
= 'PLAYING': 'playing',
= 'READY': 'ready',
= 'ENDED': 'ended',
= 'RESETTING': 'resetting'
= }
blocks:Block[] =3D [];
= state:string =3D this.STATES.LOADING;
= 
// groups

newBlocks:any;
= placedBlocks:any;
= choppedBlocks:any;

= // UI elements

scoreContainer:any;
= mainContainer:any;
= startButton:any;
= instructions:any;
=
constructor()
= {
this.stage =3D new = Stage();

= this.mainContainer =3D = document.getElementById('container');
= this.scoreContainer =3D = document.getElementById('score');
= this.webdnaScoreContainer =3D = document.getElementById('webdna-score');
= this.startButton =3D = document.getElementById('start-button');
= this.instructions =3D = document.getElementById('instructions');
= this.scoreContainer.innerHTML =3D '0';
= this.webdnaScoreContainer.value =3D = '0';

= this.newBlocks =3D new THREE.Group();
= this.placedBlocks =3D new THREE.Group();
= this.choppedBlocks =3D new THREE.Group();
= 
= this.stage.add(this.newBlocks);
= this.stage.add(this.placedBlocks);
= this.stage.add(this.choppedBlocks);
=
= this.addBlock();
= this.tick();
=
= this.updateState(this.STATES.READY);
=
= document.addEventListener('keydown', e =3D>
= {
= if(e.keyCode =3D=3D 32) this.onAction()
= });

= document.addEventListener('click', e =3D>
= {
= this.onAction();
= });= 

= document.addEventListener('touchstart', e =3D>
= {
= e.preventDefault();
= // this.onAction();
=
// =E2=98=9D=EF=B8=8F= this triggers after click on android so you
= // insta-lose, will figure it out later.
= });
}

updateState(newState)
= {
for(let key in = this.STATES) = this.mainContainer.classList.remove(this.STATES[key]);
= = this.mainContainer.classList.add(newState);
= this.state =3D newState;
= }

= onAction()
= {
= switch(this.state)
= {
case = this.STATES.READY:
= this.startGame();
= break;
= case this.STATES.PLAYING:
= this.placeBlock();
= break;
= case this.STATES.ENDED:
= this.restartGame();
= break;
= }
}
=
startGame()
= {
if(this.state !=3D = this.STATES.PLAYING)
= {
= this.scoreContainer.innerHTML =3D '0';
= this.webdnaScoreContainer.value =3D = '0';
= this.updateState(this.STATES.PLAYING);
= this.addBlock();
= }
}

restartGame()
= {
= this.updateState(this.STATES.RESETTING);
=
let oldBlocks =3D = this.placedBlocks.children;
= let removeSpeed =3D 0.2;
= let delayAmount =3D 0.02;
= for(let i =3D 0; i < oldBlocks.length; i++)
= {
= TweenLite.to(oldBlocks[i].scale, removeSpeed, {x: 0, y: 0, z: 0, = delay: (oldBlocks.length - i) * delayAmount, ease: Power1.easeIn, = onComplete: () =3D> = this.placedBlocks.remove(oldBlocks[i])})
= TweenLite.to(oldBlocks[i].rotation, removeSpeed, {y: 0.5, delay: = (oldBlocks.length - i) * delayAmount, ease: Power1.easeIn})
= }
= let cameraMoveSpeed =3D removeSpeed * 2 + (oldBlocks.length * = delayAmount);
this.stage.setCamera(2, = cameraMoveSpeed);
=
let countdown =3D {value: = this.blocks.length - 1};
= TweenLite.to(countdown, cameraMoveSpeed, {value: 0, onUpdate: () = =3D> {

= this.scoreContainer.innerHTML =3D = String(Math.round(countdown.value));
= this.webdnaScoreContainer.value =3D = String(Math.round(countdown.value));

}})
= 
= this.blocks =3D this.blocks.slice(0, 1);
=
setTimeout(() =3D> = {
= this.startGame();
= }, cameraMoveSpeed * 1000)
=
}
=
placeBlock()
= {
let currentBlock =3D = this.blocks[this.blocks.length - 1];
= let newBlocks:BlockReturn =3D currentBlock.place();
= = this.newBlocks.remove(currentBlock.mesh);
= if(newBlocks.placed) = this.placedBlocks.add(newBlocks.placed);
= if(newBlocks.chopped)
= {
= this.choppedBlocks.add(newBlocks.chopped);
= let positionParams =3D {y: '-=3D30', = ease: Power1.easeIn, onComplete: () =3D> = this.choppedBlocks.remove(newBlocks.chopped)}
= let rotateRandomness =3D 10;
= let rotationParams =3D {
= delay: 0.05,
= x: newBlocks.plane =3D=3D 'z' ? ((Math.random() * = rotateRandomness) - (rotateRandomness/2)) : 0.1,
= z: newBlocks.plane =3D=3D 'x' ? = ((Math.random() * rotateRandomness) - (rotateRandomness/2)) : = 0.1,
y: = Math.random() * 0.1,
= };
= if(newBlocks.chopped.position[newBlocks.plane] > = newBlocks.placed.position[newBlocks.plane])
= {
= positionParams[newBlocks.plane] =3D '+=3D' + (40 * = Math.abs(newBlocks.direction));
= }
else
= {
= positionParams[newBlocks.plane] =3D '-=3D' + (40 * = Math.abs(newBlocks.direction));
= }
= TweenLite.to(newBlocks.chopped.position, 1, = positionParams);
= TweenLite.to(newBlocks.chopped.rotation, 1, = rotationParams);

= }
=
= this.addBlock();
= }

= addBlock()
= {
let lastBlock =3D = this.blocks[this.blocks.length - 1];
=
if(lastBlock && = lastBlock.state =3D=3D lastBlock.STATES.MISSED)
= {
return = this.endGame();
}
= 
= this.scoreContainer.innerHTML =3D String(this.blocks.length - = 1);
= this.webdanScoreContainer.value =3D String(this.blocks.length - = 1);

= let newKidOnTheBlock =3D new Block(lastBlock);
= = this.newBlocks.add(newKidOnTheBlock.mesh);
= this.blocks.push(newKidOnTheBlock);

= this.stage.setCamera(this.blocks.length * 2);
= 
= if(this.blocks.length >=3D 5) = this.instructions.classList.add('hide');
= }

= endGame()
{
= this.updateState(this.STATES.ENDED);
= }

= tick()
{
= this.blocks[this.blocks.length - 1].tick();
= this.stage.render();
= requestAnimationFrame(() =3D> {this.tick()});
= }
}

let game =3D new = Game();



On Wed, 27 Feb 2019 at 09:52, Hetzner Powerpalle = <powerpalle@powerpalle.dk> wrote:
I = know I have touched this once before a the question below is not = directly a webdna issue, al though webdna will be involved later on to = received some data using ajax, which I have already figured out.

My question is the following. How can I = extract the score value provided by JS and sets it as an html form input = variable 

In this case I would like to = extract the final score of this game (url provided) and take the JS = score variable into an htm input context. 

https://codepen.io/ste-vg/pen/ppLQNW

<input type=3D"text=E2=80=9D = name=3D=E2=80=9Cnew_score_value_var=E2=80=9D value=3D=E2=80=9Cthe score = ja value form the codeine game=E2=80=9D>

=E2=80=99new_score_value_var=E2=80=99 would be parsed on the = webdna manipulated using webdna.

When the = js variable can be set inside the input statement I am quite sure I am = able to parse it on to some ajax code I have produced and then store in = a db together some other relevant data.

Anyone like to try to help out here? Actual examples would be = great stuff

/Palle
--------------------------------------------------------- This message is sent to you because you are subscribed to the mailing list talk@webdna.us To unsubscribe, E-mail to: talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55= Bug Reporting: support@webdna.us
--------------------------------------------------------- This message is sent to you because you are subscribed to the mailing list talk@webdna.us To unsubscribe, E-mail to: talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55 Bug Reporting: support@webdna.us

= --------------------------------------------------------- This message is sent to you because you are subscribed to the mailing list talk@webdna.us To unsubscribe, E-mail to: talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55 Bug Reporting: support@webdna.us --Apple-Mail=_6E7DA3AC-3F32-4A33-9ECB-753C4EE03038-- . Associated Messages, from the most recent to the oldest:

    
  1. Re: [WebDNA] Extract a JS variable into a form input value which can (Hetzner Powerpalle 2019)
  2. Re: [WebDNA] Extract a JS variable into a form input value which can (Tom Duke 2019)
  3. [WebDNA] Extract a JS variable into a form input value which can be stored in (Hetzner Powerpalle 2019)
2163 --Apple-Mail=_6E7DA3AC-3F32-4A33-9ECB-753C4EE03038 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=utf-8 Hi Tom I have tried many timew to get this working with your inspiration but = without any luck. Anyway thanks for your input=E2=80=A6 I might revive = the thread when I get the right inspiration. /Palle > On 28 Feb 2019, at 15.24, Tom Duke wrote: >=20 > Palle, >=20 > Set up your input with an ID: >=20 > >=20 > Then update the input every time the score gets updated in the = javascript code. This code below isn't tested but you should get the = idea. >=20 > - Tom >=20 >=20 >=20 > console.clear(); >=20 > interface BlockReturn > { > placed?:any; > chopped?:any; > plane: 'x' | 'y' | 'z'; > direction: number; > bonus?: boolean; > } >=20 > class Stage > { > private container: any; > private camera: any; > private scene: any; > private renderer: any; > private light: any; > private softLight: any; > private group: any; > =09 > constructor() > { > // container > =09 > this.container =3D document.getElementById('game'); > =09 > // renderer > =09 > this.renderer =3D new THREE.WebGLRenderer({ > antialias: true, > alpha: false > }); > =09 > this.renderer.setSize(window.innerWidth, = window.innerHeight); > this.renderer.setClearColor('#D0CBC7', 1); > this.container.appendChild( this.renderer.domElement ); > =09 > // scene >=20 > this.scene =3D new THREE.Scene(); >=20 > // camera >=20 > let aspect =3D window.innerWidth / window.innerHeight; > let d =3D 20; > this.camera =3D new THREE.OrthographicCamera( - d * = aspect, d * aspect, d, - d, -100, 1000); > this.camera.position.x =3D 2; > this.camera.position.y =3D 2;=20 > this.camera.position.z =3D 2;=20 > this.camera.lookAt(new THREE.Vector3(0, 0, 0)); > =09 > //light >=20 > this.light =3D new THREE.DirectionalLight(0xffffff, = 0.5); > this.light.position.set(0, 499, 0); > this.scene.add(this.light); >=20 > this.softLight =3D new THREE.AmbientLight( 0xffffff, 0.4 = ); > this.scene.add(this.softLight) > =09 > window.addEventListener('resize', () =3D> = this.onResize()); > this.onResize(); > } > =09 > setCamera(y:number, speed:number =3D 0.3) > { > TweenLite.to(this.camera.position, speed, {y: y + 4, = ease: Power1.easeInOut}); > TweenLite.to(this.camera.lookAt, speed, {y: y, ease: = Power1.easeInOut}); > } > =09 > onResize() > { > let viewSize =3D 30; > this.renderer.setSize(window.innerWidth, = window.innerHeight); > this.camera.left =3D window.innerWidth / - viewSize; > this.camera.right =3D window.innerWidth / viewSize; > this.camera.top =3D window.innerHeight / viewSize; > this.camera.bottom =3D window.innerHeight / - viewSize; > this.camera.updateProjectionMatrix(); > } > =09 > render =3D function() > { > this.renderer.render(this.scene, this.camera); > } >=20 > add =3D function(elem) > { > this.scene.add(elem); > } >=20 > remove =3D function(elem) > { > this.scene.remove(elem); > } > } >=20 > class Block > { > const STATES =3D {ACTIVE: 'active', STOPPED: 'stopped', MISSED: = 'missed'}; > const MOVE_AMOUNT =3D 12; >=20 > dimension =3D { width: 0, height: 0, depth: 0} > position =3D {x: 0, y: 0, z: 0}; > =09 > mesh:any; > state:string; > index:number; > speed:number; > direction:number; > colorOffset:number; > color:number; > material:any; >=20 > workingPlane:string; > workingDimension:string; >=20 > targetBlock:Block; > =09 > constructor(block:Block) > { > // set size and position > =09 > this.targetBlock =3D block; > =09 > this.index =3D (this.targetBlock ? = this.targetBlock.index : 0) + 1; > this.workingPlane =3D this.index % 2 ? 'x' : 'z'; > this.workingDimension =3D this.index % 2 ? 'width' : = 'depth'; > =09 > // set the dimensions from the target block, or = defaults. > =09 > this.dimension.width =3D this.targetBlock ? = this.targetBlock.dimension.width : 10; > this.dimension.height =3D this.targetBlock ? = this.targetBlock.dimension.height : 2; > this.dimension.depth =3D this.targetBlock ? = this.targetBlock.dimension.depth : 10; > =09 > this.position.x =3D this.targetBlock ? = this.targetBlock.position.x : 0; > this.position.y =3D this.dimension.height * this.index; > this.position.z =3D this.targetBlock ? = this.targetBlock.position.z : 0; > =09 > this.colorOffset =3D this.targetBlock ? = this.targetBlock.colorOffset : Math.round(Math.random() * 100); > =09 > // set color > if(!this.targetBlock)=20 > { > this.color =3D 0x333344; > } > else > { > let offset =3D this.index + this.colorOffset; > var r =3D Math.sin(0.3 * offset) * 55 + 200; > var g =3D Math.sin(0.3 * offset + 2) * 55 + 200; > var b =3D Math.sin(0.3 * offset + 4) * 55 + 200; > this.color =3D new THREE.Color( r / 255, g / = 255, b / 255 ); > } > =09 > // state > =09 > this.state =3D this.index > 1 ? this.STATES.ACTIVE : = this.STATES.STOPPED; > =09 > // set direction > =09 > this.speed =3D -0.1 - (this.index * 0.005); > if(this.speed < -4) this.speed =3D -4; > this.direction =3D this.speed; > =09 > // create block > =09 > let geometry =3D new THREE.BoxGeometry( = this.dimension.width, this.dimension.height, this.dimension.depth); > geometry.applyMatrix( new = THREE.Matrix4().makeTranslation(this.dimension.width/2, = this.dimension.height/2, this.dimension.depth/2) ); > this.material =3D new THREE.MeshToonMaterial( {color: = this.color, shading: THREE.FlatShading} ); > this.mesh =3D new THREE.Mesh( geometry, this.material ); > this.mesh.position.set(this.position.x, this.position.y = + (this.state =3D=3D this.STATES.ACTIVE ? 0 : 0), this.position.z); > =09 > if(this.state =3D=3D this.STATES.ACTIVE)=20 > { > this.position[this.workingPlane] =3D = Math.random() > 0.5 ? -this.MOVE_AMOUNT : this.MOVE_AMOUNT; > } > }=20 >=20 > reverseDirection() > { > this.direction =3D this.direction > 0 ? this.speed : = Math.abs(this.speed); =09 > } >=20 > place():BlockReturn > { > this.state =3D this.STATES.STOPPED; > =09 > let overlap =3D = this.targetBlock.dimension[this.workingDimension] - = Math.abs(this.position[this.workingPlane] - = this.targetBlock.position[this.workingPlane]); > =09 > let blocksToReturn:BlockReturn =3D { > plane: this.workingPlane, > direction: this.direction > }; > =09 > if(this.dimension[this.workingDimension] - overlap < = 0.3) > { > overlap =3D = this.dimension[this.workingDimension]; > blocksToReturn.bonus =3D true; > this.position.x =3D this.targetBlock.position.x; > this.position.z =3D this.targetBlock.position.z; > this.dimension.width =3D = this.targetBlock.dimension.width; > this.dimension.depth =3D = this.targetBlock.dimension.depth; > } > =09 > if(overlap > 0) > { > let choppedDimensions =3D { width: = this.dimension.width, height: this.dimension.height, depth: = this.dimension.depth }; > choppedDimensions[this.workingDimension] -=3D = overlap; > this.dimension[this.workingDimension] =3D = overlap; > =09 > let placedGeometry =3D new THREE.BoxGeometry( = this.dimension.width, this.dimension.height, this.dimension.depth); > placedGeometry.applyMatrix( new = THREE.Matrix4().makeTranslation(this.dimension.width/2, = this.dimension.height/2, this.dimension.depth/2) ); > let placedMesh =3D new THREE.Mesh( = placedGeometry, this.material ); > =09 > let choppedGeometry =3D new THREE.BoxGeometry( = choppedDimensions.width, choppedDimensions.height, = choppedDimensions.depth); > choppedGeometry.applyMatrix( new = THREE.Matrix4().makeTranslation(choppedDimensions.width/2, = choppedDimensions.height/2, choppedDimensions.depth/2) ); > let choppedMesh =3D new THREE.Mesh( = choppedGeometry, this.material ); > =09 > let choppedPosition =3D { > x: this.position.x, > y: this.position.y, > z: this.position.z > } > =09 > if(this.position[this.workingPlane] < = this.targetBlock.position[this.workingPlane]) > { > this.position[this.workingPlane] =3D = this.targetBlock.position[this.workingPlane] > } > else > { > choppedPosition[this.workingPlane] +=3D = overlap; > } > =09 > placedMesh.position.set(this.position.x, = this.position.y, this.position.z); > choppedMesh.position.set(choppedPosition.x, = choppedPosition.y, choppedPosition.z); > =09 > blocksToReturn.placed =3D placedMesh; > if(!blocksToReturn.bonus) blocksToReturn.chopped = =3D choppedMesh; > } > else > { > this.state =3D this.STATES.MISSED; > } > =09 > this.dimension[this.workingDimension] =3D overlap; >=20 > return blocksToReturn; > } > =09 > tick() > { > if(this.state =3D=3D this.STATES.ACTIVE) > { > let value =3D this.position[this.workingPlane]; > if(value > this.MOVE_AMOUNT || value < = -this.MOVE_AMOUNT) this.reverseDirection(); > this.position[this.workingPlane] +=3D = this.direction;=09 > this.mesh.position[this.workingPlane] =3D = this.position[this.workingPlane];=09 > } > } > } >=20 > class Game > { > const STATES =3D { > 'LOADING': 'loading', > 'PLAYING': 'playing', > 'READY': 'ready', > 'ENDED': 'ended', > 'RESETTING': 'resetting' > } > blocks:Block[] =3D []; > state:string =3D this.STATES.LOADING; > =09 > // groups >=20 > newBlocks:any; > placedBlocks:any; > choppedBlocks:any; >=20 > // UI elements >=20 > scoreContainer:any; > mainContainer:any; > startButton:any; > instructions:any; > =09 > constructor() > { > this.stage =3D new Stage(); > =09 > this.mainContainer =3D = document.getElementById('container'); > this.scoreContainer =3D = document.getElementById('score'); > this.webdnaScoreContainer =3D = document.getElementById('webdna-score'); > this.startButton =3D = document.getElementById('start-button'); > this.instructions =3D = document.getElementById('instructions'); > this.scoreContainer.innerHTML =3D '0'; > this.webdnaScoreContainer.value =3D '0'; > =09 > this.newBlocks =3D new THREE.Group(); > this.placedBlocks =3D new THREE.Group(); > this.choppedBlocks =3D new THREE.Group(); > =09 > this.stage.add(this.newBlocks); > this.stage.add(this.placedBlocks); > this.stage.add(this.choppedBlocks); > =09 > this.addBlock(); > this.tick(); > =09 > this.updateState(this.STATES.READY); > =09 > document.addEventListener('keydown', e =3D> > { > if(e.keyCode =3D=3D 32) this.onAction() > }); > =09 > document.addEventListener('click', e =3D> > { > this.onAction(); > });=09 > =09 > document.addEventListener('touchstart', e =3D> > { > e.preventDefault(); > // this.onAction(); > =09 > // =E2=98=9D=EF=B8=8F this triggers after click = on android so you > // insta-lose, will figure it out later. > }); > } >=20 > updateState(newState) > { > for(let key in this.STATES) = this.mainContainer.classList.remove(this.STATES[key]); > this.mainContainer.classList.add(newState); > this.state =3D newState; > } >=20 > onAction() > { > switch(this.state) > { > case this.STATES.READY: > this.startGame(); > break; > case this.STATES.PLAYING: > this.placeBlock(); > break; > case this.STATES.ENDED: > this.restartGame(); > break;=09 > } > } > =09 > startGame() > { > if(this.state !=3D this.STATES.PLAYING) > { > this.scoreContainer.innerHTML =3D '0'; > this.webdnaScoreContainer.value =3D '0'; > this.updateState(this.STATES.PLAYING); > this.addBlock(); > } > } >=20 > restartGame() > { > this.updateState(this.STATES.RESETTING); > =09 > let oldBlocks =3D this.placedBlocks.children; > let removeSpeed =3D 0.2; > let delayAmount =3D 0.02; > for(let i =3D 0; i < oldBlocks.length; i++) > { > TweenLite.to(oldBlocks[i].scale, removeSpeed, = {x: 0, y: 0, z: 0, delay: (oldBlocks.length - i) * delayAmount, ease: = Power1.easeIn, onComplete: () =3D> = this.placedBlocks.remove(oldBlocks[i])}) > TweenLite.to(oldBlocks[i].rotation, removeSpeed, = {y: 0.5, delay: (oldBlocks.length - i) * delayAmount, ease: = Power1.easeIn}) > } > let cameraMoveSpeed =3D removeSpeed * 2 + = (oldBlocks.length * delayAmount); > this.stage.setCamera(2, cameraMoveSpeed); > =09 > let countdown =3D {value: this.blocks.length - 1}; > TweenLite.to(countdown, cameraMoveSpeed, {value: 0, = onUpdate: () =3D> { >=20 > this.scoreContainer.innerHTML =3D = String(Math.round(countdown.value)); > this.webdnaScoreContainer.value =3D = String(Math.round(countdown.value)); >=20 > }}) > =09 > this.blocks =3D this.blocks.slice(0, 1); > =09 > setTimeout(() =3D> { > this.startGame(); > }, cameraMoveSpeed * 1000) > =09 > } > =09 > placeBlock() > { > let currentBlock =3D this.blocks[this.blocks.length - = 1]; > let newBlocks:BlockReturn =3D currentBlock.place(); > this.newBlocks.remove(currentBlock.mesh); > if(newBlocks.placed) = this.placedBlocks.add(newBlocks.placed); > if(newBlocks.chopped) > { > this.choppedBlocks.add(newBlocks.chopped); > let positionParams =3D {y: '-=3D30', ease: = Power1.easeIn, onComplete: () =3D> = this.choppedBlocks.remove(newBlocks.chopped)} > let rotateRandomness =3D 10; > let rotationParams =3D { > delay: 0.05, > x: newBlocks.plane =3D=3D 'z' ? = ((Math.random() * rotateRandomness) - (rotateRandomness/2)) : 0.1, > z: newBlocks.plane =3D=3D 'x' ? = ((Math.random() * rotateRandomness) - (rotateRandomness/2)) : 0.1, > y: Math.random() * 0.1, > }; > if(newBlocks.chopped.position[newBlocks.plane] > = newBlocks.placed.position[newBlocks.plane]) > { > positionParams[newBlocks.plane] =3D '+=3D'= + (40 * Math.abs(newBlocks.direction)); > } > else > { > positionParams[newBlocks.plane] =3D '-=3D'= + (40 * Math.abs(newBlocks.direction)); > } > TweenLite.to(newBlocks.chopped.position, 1, = positionParams); > TweenLite.to(newBlocks.chopped.rotation, 1, = rotationParams); > =09 > } > =09 > this.addBlock(); > } > =09 > addBlock() > { > let lastBlock =3D this.blocks[this.blocks.length - 1]; > =09 > if(lastBlock && lastBlock.state =3D=3D = lastBlock.STATES.MISSED) > { > return this.endGame(); > } > =09 > this.scoreContainer.innerHTML =3D = String(this.blocks.length - 1); > this.webdanScoreContainer.value =3D = String(this.blocks.length - 1); >=20 > let newKidOnTheBlock =3D new Block(lastBlock); > this.newBlocks.add(newKidOnTheBlock.mesh); > this.blocks.push(newKidOnTheBlock); >=20 > this.stage.setCamera(this.blocks.length * 2); > =09 > if(this.blocks.length >=3D 5) = this.instructions.classList.add('hide'); > } > =09 > endGame() > { > this.updateState(this.STATES.ENDED); > } >=20 > tick() > { > this.blocks[this.blocks.length - 1].tick(); > this.stage.render(); > requestAnimationFrame(() =3D> {this.tick()}); > } > } >=20 > let game =3D new Game(); >=20 >=20 >=20 > On Wed, 27 Feb 2019 at 09:52, Hetzner Powerpalle = > wrote: > I know I have touched this once before a the question below is not = directly a webdna issue, al though webdna will be involved later on to = received some data using ajax, which I have already figured out. >=20 > My question is the following. How can I extract the score value = provided by JS and sets it as an html form input variable=20 >=20 > In this case I would like to extract the final score of this game (url = provided) and take the JS score variable into an htm input context.=20 >=20 > https://codepen.io/ste-vg/pen/ppLQNW = >=20 > >=20 > =E2=80=99new_score_value_var=E2=80=99 would be parsed on the webdna = manipulated using webdna. >=20 > When the js variable can be set inside the input statement I am quite = sure I am able to parse it on to some ajax code I have produced and then = store in a db together some other relevant data. >=20 > Anyone like to try to help out here? Actual examples would be great = stuff >=20 > /Palle > --------------------------------------------------------- This message = is sent to you because you are subscribed to the mailing list = talk@webdna.us To unsubscribe, E-mail to: = talk-leave@webdna.us archives: = http://www.webdna.us/page.dna?numero=3D55 = Bug Reporting: = support@webdna.us = ------------------------------------------------= --------- This message is sent to you because you are subscribed to the = mailing list talk@webdna.us To unsubscribe, E-mail to: = talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55 = Bug Reporting: support@webdna.us --Apple-Mail=_6E7DA3AC-3F32-4A33-9ECB-753C4EE03038 Content-Transfer-Encoding: quoted-printable Content-Type: text/html; charset=utf-8 Hi = Tom

I have tried = many timew to get this working with your inspiration but without any = luck. Anyway thanks for your input=E2=80=A6 I might revive the thread = when I get the right inspiration.

/Palle

On 28 = Feb 2019, at 15.24, Tom Duke <tom@revolutionaries.ie> wrote:

Palle,

Set up your input with an ID:

<input type=3D"hidden=E2=80=9D = name=3D=E2=80=9Cnew_score_value_var=E2=80=9D value=3D=E2=80=9Cthe score = ja value form the codeine game=E2=80=9D id=3D"webdna-score">

Then update the input = every time the score gets updated in the javascript code.  This = code below isn't tested but you should get the idea.

- Tom



console.clear();

interface BlockReturn
{
= placed?:any;
= chopped?:any;
= plane: 'x' | 'y' | 'z';
= direction: number;
= bonus?: boolean;
}

class Stage
{
private container: any;
= private camera: any;
= private scene: any;
= private renderer: any;
= private light: any;
= private softLight: any;
= private group: any;
=
constructor()
= {
// container
= 
= this.container =3D document.getElementById('game');
= 
= // renderer
=
this.renderer =3D new = THREE.WebGLRenderer({
= antialias: true,
= alpha: false
= });

= this.renderer.setSize(window.innerWidth, = window.innerHeight);
= this.renderer.setClearColor('#D0CBC7', 1);
= this.container.appendChild( = this.renderer.domElement );
=
// scene

= this.scene =3D new THREE.Scene();

// camera

= let aspect =3D window.innerWidth / window.innerHeight;
= let d =3D 20;
= this.camera =3D new THREE.OrthographicCamera( - d * aspect, d * = aspect, d, - d, -100, 1000);
= this.camera.position.x =3D 2;
= this.camera.position.y =3D 2; 
= this.camera.position.z =3D 2; 
= this.camera.lookAt(new THREE.Vector3(0, 0, 0));
= 
= //light

= this.light =3D new = THREE.DirectionalLight(0xffffff, 0.5);
= this.light.position.set(0, 499, 0);
= this.scene.add(this.light);

this.softLight =3D new = THREE.AmbientLight( 0xffffff, 0.4 );
= this.scene.add(this.softLight)
=
= window.addEventListener('resize', () =3D> = this.onResize());
= this.onResize();
= }

= setCamera(y:number, speed:number =3D 0.3)
= {
= TweenLite.to(this.camera.position, speed, {y: y + 4, ease: = Power1.easeInOut});
= TweenLite.to(this.camera.lookAt, speed, {y: y, ease: = Power1.easeInOut});
= }

= onResize()
= {
let viewSize =3D = 30;
= this.renderer.setSize(window.innerWidth, = window.innerHeight);
= this.camera.left =3D window.innerWidth / - viewSize;
= this.camera.right =3D window.innerWidth / = viewSize;
this.camera.top =3D = window.innerHeight / viewSize;
= this.camera.bottom =3D window.innerHeight / - viewSize;
= this.camera.updateProjectionMatrix();
= }

= render =3D function()
= {
= this.renderer.render(this.scene, this.camera);
= }

= add =3D function(elem)
= {
= this.scene.add(elem);
= }

= remove =3D function(elem)
= {
= this.scene.remove(elem);
= }
}

class Block
{
const STATES =3D {ACTIVE: = 'active', STOPPED: 'stopped', MISSED: 'missed'};
= const MOVE_AMOUNT =3D 12;

dimension =3D { width: 0, height: = 0, depth: 0}
position =3D {x: 0, y: 0, z: = 0};

= mesh:any;
state:string;
= index:number;
= speed:number;
= direction:number;
= colorOffset:number;
= color:number;
= material:any;

= workingPlane:string;
= workingDimension:string;

targetBlock:Block;
= 
= constructor(block:Block)
= {
// set size and = position

= this.targetBlock =3D block;
=
this.index =3D = (this.targetBlock ? this.targetBlock.index : 0) + 1;
= this.workingPlane =3D this.index % 2 ? 'x' : = 'z';
this.workingDimension =3D = this.index % 2 ? 'width' : 'depth';
=
// set the dimensions = from the target block, or defaults.
=
this.dimension.width =3D = this.targetBlock ? this.targetBlock.dimension.width : 10;
= this.dimension.height =3D this.targetBlock ? = this.targetBlock.dimension.height : 2;
= this.dimension.depth =3D this.targetBlock ? = this.targetBlock.dimension.depth : 10;
=
this.position.x =3D = this.targetBlock ? this.targetBlock.position.x : 0;
= this.position.y =3D this.dimension.height * = this.index;
this.position.z =3D = this.targetBlock ? this.targetBlock.position.z : 0;
= 
= this.colorOffset =3D this.targetBlock ? = this.targetBlock.colorOffset : Math.round(Math.random() * = 100);

= // set color
= if(!this.targetBlock) 
= {
this.color =3D = 0x333344;
}
= else
= {
let offset =3D = this.index + this.colorOffset;
= var r =3D Math.sin(0.3 * offset) * 55 + 200;
= var g =3D Math.sin(0.3 * offset + 2) * 55 = + 200;
var b =3D = Math.sin(0.3 * offset + 4) * 55 + 200;
= this.color =3D new THREE.Color( r / 255, g / 255, b / 255 = );
}
= 
= // state

= this.state =3D this.index > 1 ? this.STATES.ACTIVE : = this.STATES.STOPPED;
=
// set = direction

= this.speed =3D -0.1 - (this.index * 0.005);
= if(this.speed < -4) this.speed =3D = -4;
this.direction =3D = this.speed;

= // create block
=
let geometry =3D new = THREE.BoxGeometry( this.dimension.width, this.dimension.height, = this.dimension.depth);
= geometry.applyMatrix( new = THREE.Matrix4().makeTranslation(this.dimension.width/2, = this.dimension.height/2, this.dimension.depth/2) );
= this.material =3D new THREE.MeshToonMaterial( = {color: this.color, shading: THREE.FlatShading} );
= this.mesh =3D new THREE.Mesh( geometry, = this.material );
= this.mesh.position.set(this.position.x, this.position.y + = (this.state =3D=3D this.STATES.ACTIVE ? 0 : 0), = this.position.z);
=
if(this.state =3D=3D = this.STATES.ACTIVE) 
= {
= this.position[this.workingPlane] =3D Math.random() > 0.5 ? = -this.MOVE_AMOUNT : this.MOVE_AMOUNT;
= }
} 

reverseDirection()
= {
this.direction =3D = this.direction > 0 ? this.speed : Math.abs(this.speed); =
}

place():BlockReturn
= {
this.state =3D = this.STATES.STOPPED;
=
let overlap =3D = this.targetBlock.dimension[this.workingDimension] - = Math.abs(this.position[this.workingPlane] - = this.targetBlock.position[this.workingPlane]);
=
let = blocksToReturn:BlockReturn =3D {
= plane: this.workingPlane,
= direction: this.direction
= };

= if(this.dimension[this.workingDimension] - overlap < = 0.3)
{
= overlap =3D = this.dimension[this.workingDimension];
= blocksToReturn.bonus =3D true;
= this.position.x =3D this.targetBlock.position.x;
= this.position.z =3D = this.targetBlock.position.z;
= this.dimension.width =3D = this.targetBlock.dimension.width;
= this.dimension.depth =3D = this.targetBlock.dimension.depth;
= }

= if(overlap > 0)
= {
let = choppedDimensions =3D { width: this.dimension.width, height: = this.dimension.height, depth: this.dimension.depth };
= choppedDimensions[this.workingDimension] = -=3D overlap;
= this.dimension[this.workingDimension] =3D overlap;
= 
= let placedGeometry =3D new THREE.BoxGeometry( = this.dimension.width, this.dimension.height, = this.dimension.depth);
= placedGeometry.applyMatrix( new = THREE.Matrix4().makeTranslation(this.dimension.width/2, = this.dimension.height/2, this.dimension.depth/2) );
= let placedMesh =3D new THREE.Mesh( = placedGeometry, this.material );
=
let = choppedGeometry =3D new THREE.BoxGeometry( choppedDimensions.width, = choppedDimensions.height, choppedDimensions.depth);
= choppedGeometry.applyMatrix( new = THREE.Matrix4().makeTranslation(choppedDimensions.width/2, = choppedDimensions.height/2, choppedDimensions.depth/2) );
= let choppedMesh =3D new THREE.Mesh( = choppedGeometry, this.material );
=
let = choppedPosition =3D {
= x: this.position.x,
= y: this.position.y,
= z: this.position.z
= }

= if(this.position[this.workingPlane] < = this.targetBlock.position[this.workingPlane])
= {
= this.position[this.workingPlane] =3D = this.targetBlock.position[this.workingPlane]
= }
else
= {
= choppedPosition[this.workingPlane] +=3D = overlap;
}
= 
= placedMesh.position.set(this.position.x, this.position.y, = this.position.z);
= choppedMesh.position.set(choppedPosition.x, choppedPosition.y, = choppedPosition.z);
=
= blocksToReturn.placed =3D placedMesh;
= if(!blocksToReturn.bonus) blocksToReturn.chopped =3D = choppedMesh;
}
= else
= {
this.state =3D = this.STATES.MISSED;
= }

= this.dimension[this.workingDimension] =3D overlap;

= return blocksToReturn;
= }

= tick()
{
= if(this.state =3D=3D this.STATES.ACTIVE)
= {
let value =3D = this.position[this.workingPlane];
= if(value > this.MOVE_AMOUNT || value < -this.MOVE_AMOUNT) = this.reverseDirection();
= this.position[this.workingPlane] +=3D this.direction;=
= this.mesh.position[this.workingPlane] =3D = this.position[this.workingPlane];
= }
}
}

class Game
{
const STATES =3D {
= 'LOADING': 'loading',
= 'PLAYING': 'playing',
= 'READY': 'ready',
= 'ENDED': 'ended',
= 'RESETTING': 'resetting'
= }
blocks:Block[] =3D [];
= state:string =3D this.STATES.LOADING;
= 
// groups

newBlocks:any;
= placedBlocks:any;
= choppedBlocks:any;

= // UI elements

scoreContainer:any;
= mainContainer:any;
= startButton:any;
= instructions:any;
=
constructor()
= {
this.stage =3D new = Stage();

= this.mainContainer =3D = document.getElementById('container');
= this.scoreContainer =3D = document.getElementById('score');
= this.webdnaScoreContainer =3D = document.getElementById('webdna-score');
= this.startButton =3D = document.getElementById('start-button');
= this.instructions =3D = document.getElementById('instructions');
= this.scoreContainer.innerHTML =3D '0';
= this.webdnaScoreContainer.value =3D = '0';

= this.newBlocks =3D new THREE.Group();
= this.placedBlocks =3D new THREE.Group();
= this.choppedBlocks =3D new THREE.Group();
= 
= this.stage.add(this.newBlocks);
= this.stage.add(this.placedBlocks);
= this.stage.add(this.choppedBlocks);
=
= this.addBlock();
= this.tick();
=
= this.updateState(this.STATES.READY);
=
= document.addEventListener('keydown', e =3D>
= {
= if(e.keyCode =3D=3D 32) this.onAction()
= });

= document.addEventListener('click', e =3D>
= {
= this.onAction();
= });= 

= document.addEventListener('touchstart', e =3D>
= {
= e.preventDefault();
= // this.onAction();
=
// =E2=98=9D=EF=B8=8F= this triggers after click on android so you
= // insta-lose, will figure it out later.
= });
}

updateState(newState)
= {
for(let key in = this.STATES) = this.mainContainer.classList.remove(this.STATES[key]);
= = this.mainContainer.classList.add(newState);
= this.state =3D newState;
= }

= onAction()
= {
= switch(this.state)
= {
case = this.STATES.READY:
= this.startGame();
= break;
= case this.STATES.PLAYING:
= this.placeBlock();
= break;
= case this.STATES.ENDED:
= this.restartGame();
= break;
= }
}
=
startGame()
= {
if(this.state !=3D = this.STATES.PLAYING)
= {
= this.scoreContainer.innerHTML =3D '0';
= this.webdnaScoreContainer.value =3D = '0';
= this.updateState(this.STATES.PLAYING);
= this.addBlock();
= }
}

restartGame()
= {
= this.updateState(this.STATES.RESETTING);
=
let oldBlocks =3D = this.placedBlocks.children;
= let removeSpeed =3D 0.2;
= let delayAmount =3D 0.02;
= for(let i =3D 0; i < oldBlocks.length; i++)
= {
= TweenLite.to(oldBlocks[i].scale, removeSpeed, {x: 0, y: 0, z: 0, = delay: (oldBlocks.length - i) * delayAmount, ease: Power1.easeIn, = onComplete: () =3D> = this.placedBlocks.remove(oldBlocks[i])})
= TweenLite.to(oldBlocks[i].rotation, removeSpeed, {y: 0.5, delay: = (oldBlocks.length - i) * delayAmount, ease: Power1.easeIn})
= }
= let cameraMoveSpeed =3D removeSpeed * 2 + (oldBlocks.length * = delayAmount);
this.stage.setCamera(2, = cameraMoveSpeed);
=
let countdown =3D {value: = this.blocks.length - 1};
= TweenLite.to(countdown, cameraMoveSpeed, {value: 0, onUpdate: () = =3D> {

= this.scoreContainer.innerHTML =3D = String(Math.round(countdown.value));
= this.webdnaScoreContainer.value =3D = String(Math.round(countdown.value));

}})
= 
= this.blocks =3D this.blocks.slice(0, 1);
=
setTimeout(() =3D> = {
= this.startGame();
= }, cameraMoveSpeed * 1000)
=
}
=
placeBlock()
= {
let currentBlock =3D = this.blocks[this.blocks.length - 1];
= let newBlocks:BlockReturn =3D currentBlock.place();
= = this.newBlocks.remove(currentBlock.mesh);
= if(newBlocks.placed) = this.placedBlocks.add(newBlocks.placed);
= if(newBlocks.chopped)
= {
= this.choppedBlocks.add(newBlocks.chopped);
= let positionParams =3D {y: '-=3D30', = ease: Power1.easeIn, onComplete: () =3D> = this.choppedBlocks.remove(newBlocks.chopped)}
= let rotateRandomness =3D 10;
= let rotationParams =3D {
= delay: 0.05,
= x: newBlocks.plane =3D=3D 'z' ? ((Math.random() * = rotateRandomness) - (rotateRandomness/2)) : 0.1,
= z: newBlocks.plane =3D=3D 'x' ? = ((Math.random() * rotateRandomness) - (rotateRandomness/2)) : = 0.1,
y: = Math.random() * 0.1,
= };
= if(newBlocks.chopped.position[newBlocks.plane] > = newBlocks.placed.position[newBlocks.plane])
= {
= positionParams[newBlocks.plane] =3D '+=3D' + (40 * = Math.abs(newBlocks.direction));
= }
else
= {
= positionParams[newBlocks.plane] =3D '-=3D' + (40 * = Math.abs(newBlocks.direction));
= }
= TweenLite.to(newBlocks.chopped.position, 1, = positionParams);
= TweenLite.to(newBlocks.chopped.rotation, 1, = rotationParams);

= }
=
= this.addBlock();
= }

= addBlock()
= {
let lastBlock =3D = this.blocks[this.blocks.length - 1];
=
if(lastBlock && = lastBlock.state =3D=3D lastBlock.STATES.MISSED)
= {
return = this.endGame();
}
= 
= this.scoreContainer.innerHTML =3D String(this.blocks.length - = 1);
= this.webdanScoreContainer.value =3D String(this.blocks.length - = 1);

= let newKidOnTheBlock =3D new Block(lastBlock);
= = this.newBlocks.add(newKidOnTheBlock.mesh);
= this.blocks.push(newKidOnTheBlock);

= this.stage.setCamera(this.blocks.length * 2);
= 
= if(this.blocks.length >=3D 5) = this.instructions.classList.add('hide');
= }

= endGame()
{
= this.updateState(this.STATES.ENDED);
= }

= tick()
{
= this.blocks[this.blocks.length - 1].tick();
= this.stage.render();
= requestAnimationFrame(() =3D> {this.tick()});
= }
}

let game =3D new = Game();



On Wed, 27 Feb 2019 at 09:52, Hetzner Powerpalle = <powerpalle@powerpalle.dk> wrote:
I = know I have touched this once before a the question below is not = directly a webdna issue, al though webdna will be involved later on to = received some data using ajax, which I have already figured out.

My question is the following. How can I = extract the score value provided by JS and sets it as an html form input = variable 

In this case I would like to = extract the final score of this game (url provided) and take the JS = score variable into an htm input context. 

https://codepen.io/ste-vg/pen/ppLQNW

<input type=3D"text=E2=80=9D = name=3D=E2=80=9Cnew_score_value_var=E2=80=9D value=3D=E2=80=9Cthe score = ja value form the codeine game=E2=80=9D>

=E2=80=99new_score_value_var=E2=80=99 would be parsed on the = webdna manipulated using webdna.

When the = js variable can be set inside the input statement I am quite sure I am = able to parse it on to some ajax code I have produced and then store in = a db together some other relevant data.

Anyone like to try to help out here? Actual examples would be = great stuff

/Palle
--------------------------------------------------------- This message is sent to you because you are subscribed to the mailing list talk@webdna.us To unsubscribe, E-mail to: talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55= Bug Reporting: support@webdna.us
--------------------------------------------------------- This message is sent to you because you are subscribed to the mailing list talk@webdna.us To unsubscribe, E-mail to: talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55 Bug Reporting: support@webdna.us

= --------------------------------------------------------- This message is sent to you because you are subscribed to the mailing list talk@webdna.us To unsubscribe, E-mail to: talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55 Bug Reporting: support@webdna.us --Apple-Mail=_6E7DA3AC-3F32-4A33-9ECB-753C4EE03038-- . Hetzner Powerpalle

DOWNLOAD WEBDNA NOW!

Top Articles:

Talk List

The WebDNA community talk-list is the best place to get some help: several hundred extremely proficient programmers with an excellent knowledge of WebDNA and an excellent spirit will deliver all the tips and tricks you can imagine...

Related Readings:

one item in several different categories? (2000) F3 crashing server (1997) cart ID (1998) [WebDNA] New Years Wish... WebDNA (2009) Multiple Pulldowns (1997) WCS Newbie question (1997) Problems with [Search] param - Mac Plugin b15 (1997) Solve the Problem, get the code! (2001) More news on 5.0 (2003) WebCat2_Mac RETURNs in .db (1997) Couple of techno questions (1999) Database (2002) WC 2.0 frames feature (1997) Signal Raised (1997) Loosing Quantity (2000) Problems with date math (1997) Order File Format (2004) Why does setheader provide a db= parameter? (2005) Why don't my carts expire (1998) turning every 5th line red (1998)