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:

Saving/Looking Up customer numbers (1998) [OT] Yahoo! Front Page (2002) WebCat2b14MacPlugIn - [include] doesn't hide the search string (1997) Visitor info (2000) Mac to UNIX (2000) RE: WebCat name recognition (was MacFinder -- a new WebDNAweb site) (1998) Not really WebCat- (1997) More on the email templates (1997) Coding Standards - are there any ? (2003) shipcost (1997) If Empty ? (1997) Navigator 4.0 & tables (1997) redirect with frames (1997) Emailer help....! (1997) WebCat (or other) Indexing (1999) Long/Lat (2002) Help name our technology! I found it (1997) [username][password] not showing up! HELP! (1999) Download Question (1997) Error message (1999)