<!DOCTYPE html>
<head>
<title>Firebase Counter Demo</title>
<!-- inline style (could be replaced with a linked .css file -->
<style>
button {
border:1px solid gray;
width:40px;
padding:10px 10px;
margin-bottom:5px;
}
body {
font-size:180%;
font-family:"Open Sans";
}
.dot {
position:absolute;
height:6px;
width:6px;
background-color:black;
border-radius:50%;
}
</style>
<!-- load firebase and jquery code -->
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- firebase interaction code -->
<script>
var j = jQuery.noConflict();
var randomColor = Math.floor(Math.random() * 128);
// config here
firebase.initializeApp(config);
var db = firebase.database();
var dot = db.ref("dot");
var erase = db.ref("erase");
var boxLocation = db.ref("boxLocation");
var mydir = db.ref("dir");
var userCount = db.ref("userCount");
var seenUserCount = 0;
dot.on('value',function(dataSnapshot) {
var rawData = dataSnapshot.val(); // "300,100"
var xyData = rawData.split(',');
var x = xyData[0];
var y = xyData[1];
var newDot = j("<div class='dot'></div>");
newDot.css("left", x+"px");
newDot.css("top", y+"px");
//newDot.css("background-color",100);
j('#container').append(newDot);
});
erase.on('value',function() {
j('.dot').remove();
});
boxLocation.on('value',function(dataSnapshot) {
var position = dataSnapshot.val();
j('#log').text(position);
});
userCount.on('value',function() {
seenUserCount++;
if(seenUserCount > 2) seenUserCount = true;
console.log("suc: "+seenUserCount);
});
// runs when the page is fully loaded
j(document).ready(function() {
userCount.transaction(function(current) {
return current+1;
});
j(document).keydown(function(e) {
var direction;
console.log("WHAT");
if(e.keyCode == 37) direction = "left";
else if(e.keyCode == 39) direction = "right";
console.log(direction);
mydir.transaction(function(current) {
return direction;
});
});
j('body').click(synth1);
function synth1() {
console.log("here");
if(seenUserCount == true) return;
else { console.log("play sound"); }
}
j(document).mousemove(function(e) {
var position = e.pageX+","+e.pageY;
dot.transaction(function() {
return position;
});
});
});
</script>
<!-- finally, our HTML -->
<div id="container">
<div id="log"></div>
</div>
</body>
</html>