better dialog close

docs/FUTURE.md

@@ -38,8 +38,10 @@
   - https://twitter.com/jerome_etienne/status/861868630883094528
 
 # Ideas
+- IDEA: A pong game in AR. Do it in augmented screen space. solo or multi-player. Two persons playing together thru #AR. https://twitter.com/jerome_etienne/status/878534742458732544
 - play with camera parameters to optimize it for AR - available in mediastreamtrack
   - https://www.oberhofer.co/mediastreamtrack-and-its-capabilities/
+  - white balance off ?
 - AR Gaming - https://www.youtube.com/watch?v=EmGGGzibGok
 - AR Business Card - https://vimeo.com/4979525
 - ar cube visu - real nice for 360 AR https://twitter.com/jerome_etienne/status/869765239356747776

three.js/examples/augmented-webpages/TODO.md

-- make the player receive variable query instead of hash. check if it works well when sending email
-- how to include goo.gl - make QRCode easier to read important
+- try to integrate firebase
+  - there is already working examples
+- firebase could be used to sync-up markers-page size with phone
+- firebase could be used to calibrate markers-page brightness/contrast
+
+------------
+- DONE make the player receive variable query instead of hash. check if it works well when sending email
+- DONE how to include goo.gl - make QRCode easier to read important
 - peerjs works in standalone
 - replace peerjs by firebase
   - 

three.js/examples/augmented-webpages/examples/firebase-receiver.html

@@ -14,7 +14,7 @@ var rootRef = firebase.database().ref();
 // Get a reference to the /users/ada node
 var adaRef = firebase.database().ref("users/ada");
 
-adaRef.on('value', function(snapshot) {
-  console.log('new value',  Date.now() - snapshot.val().time);
+adaRef.on('value', function(snapshot){
+	console.log('new value',  Date.now() - snapshot.val().time);
 });
 </script>

three.js/examples/augmented-webpages/index.html

@@ -94,20 +94,19 @@
 						<i class="material-icons">info_outline</i>
 					</button>
 					<dialog id='infoDialog' class="mdl-dialog">
-						<h4 class="mdl-dialog__title">Augmented WebPages with AR.js</h4>
+						<img class='close' src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style="cursor: pointer; float: right; width: 3em"/>
+						<h4 class="mdl-dialog__title">Augmented Web Pages</h4>
 						<div class="mdl-dialog__content">
 							<p>
-								Adding AR to any Webpage
+								Augmented webpages is a way to bring
+								augmented reality to any webpages with AR.js.
+								See more about this in this <a href='https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8' target='_blank'>post</a>.
 							</p>
 							<iframe width="560" height="315" src="https://www.youtube.com/embed/sp7Wxk1yVcY" frameborder="0" allowfullscreen></iframe>
-							<br/>
-							<p>
-								<a href='https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8' target='_blank'>Seminal post</a> explaining the concept 
-							</p>
 						</div>
-						<div class="mdl-dialog__actions">
+						<!-- <div class="mdl-dialog__actions">
 							<button type="button" class="mdl-button">Close</button>
-						</div>
+						</div> -->
 					</dialog>
 					
 					<!-- help BUTTON and DIALOG -->
@@ -115,6 +114,7 @@
 						<i class="material-icons">settings</i>
 					</button>
 					<dialog id='helpDialog' class="mdl-dialog">
+						<img class='close' src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style="cursor: pointer; float: right; width: 3em"/>
 						<h4 class="mdl-dialog__title">Debug stuff</h4>
 						<div class="mdl-dialog__content">
 							wanna open <a target='_blank' id='arAppURLLink' href='javascript:void(0)'>ar app</a> ?
@@ -136,9 +136,6 @@
 								<li>you can simply type it - low tech</li>
 							</ul>
 						</div>
-						<div class="mdl-dialog__actions">
-							<button type="button" class="mdl-button">Close</button>
-						</div>
 					</dialog>
 					
 					<!-- MIDDLE QRCODE CARD -->

three.js/examples/augmented-webpages/js/dialog.js

@@ -3,7 +3,7 @@ function dialogsInit(){
 	document.querySelector('#infoButton').addEventListener('click', function(){
 		document.querySelector('#infoDialog').showModal()
 	})
-	document.querySelector('#infoDialog button').addEventListener('click', function(){
+	document.querySelector('#infoDialog .close').addEventListener('click', function(){
 		document.querySelector('#infoDialog').close()
 	})
 
@@ -11,7 +11,7 @@ function dialogsInit(){
 	document.querySelector('#helpButton').addEventListener('click', function(){
 		document.querySelector('#helpDialog').showModal()
 	})
-	document.querySelector('#helpDialog button').addEventListener('click', function(){
+	document.querySelector('#helpDialog .close').addEventListener('click', function(){
 		document.querySelector('#helpDialog').close()
 	})	
 }