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 = 114496
interpreted = N
texte = 2115 --00000000000070d2950582f50e0e Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: quoted-printable Palle, Set up your input with an ID: 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.widt= h : 10; this.dimension.height =3D this.targetBlock ? this.targetBlock.dimension.height : 2; this.dimension.depth =3D this.targetBlock ? this.targetBlock.dimension.dept= h : 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_AMOUN= T : 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 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 > > form the codeine game=E2=80=9D> > > =E2=80=99new_score_value_var=E2=80=99 would be parsed on the webdna manip= ulated using > webdna. > > When the js variable can be set inside the input statement I am quite sur= e > 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.u= s --00000000000070d2950582f50e0e Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable
Palle,<= div>
Set up your input with an ID:
&= lt;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.=C2=A0 T= his code below isn't tested but you should get the idea.
= 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 som= e 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=C2=A0
In this case I would like to e= xtract the final score of this game (url provided) and take the JS score va= riable into an htm input context.=C2=A0
<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 gam= e=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
--------------------------------------------------------- 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 --00000000000070d2950582f50e0e-- .
Associated Messages, from the most recent to the oldest:
2115 --00000000000070d2950582f50e0e Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: quoted-printable Palle, Set up your input with an ID: 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.widt= h : 10; this.dimension.height =3D this.targetBlock ? this.targetBlock.dimension.height : 2; this.dimension.depth =3D this.targetBlock ? this.targetBlock.dimension.dept= h : 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_AMOUN= T : 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 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 > > form the codeine game=E2=80=9D> > > =E2=80=99new_score_value_var=E2=80=99 would be parsed on the webdna manip= ulated using > webdna. > > When the js variable can be set inside the input statement I am quite sur= e > 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.u= s --00000000000070d2950582f50e0e Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable
Palle,<= div>
Set up your input with an ID:
&= lt;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.=C2=A0 T= his code below isn't tested but you should get the idea.
= 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 som= e 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=C2=A0
In this case I would like to e= xtract the final score of this game (url provided) and take the JS score va= riable into an htm input context.=C2=A0
<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 gam= e=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
--------------------------------------------------------- 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 --00000000000070d2950582f50e0e-- .
Tom Duke
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...