<!DOCTYPE html>
<head>
<title>Firebase Counter Demo</title>
<style>
body {
font-size:180%;
font-family:"Open Sans";
width:1000px;
height:1000px;
}
.background img{
position:absolute;
width:1000px;
height:1000px;
}
#container {
width:1000px;
height:1000px;
}
.snowball img{
width:100px;
height:100px;
position:absolute;
left:400px;
top:400px;
transform: rotate(90deg);
}
</style>
<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>
<script>
var j = jQuery.noConflict();
var config = {
apiKey: "AIzaSyA4V-hTAdF4HxJnwDZ_I_o_hVHFYnK8hA4",
authDomain: "fir-7691f.firebaseapp.com",
databaseURL: "https://fir-7691f.firebaseio.com",
projectId: "fir-7691f",
storageBucket: "",
messagingSenderId: "426083234669"
};
firebase.initializeApp(config);
var db = firebase.database();
var mydir = db.ref("dir");
var imgsize = db.ref("size");
var dbCount = db.ref('count');
var height = db.ref("height");
var width = db.ref("width");
var rotation = db.ref("rotation");
height.transaction(function(current) {
if(current < 100){
return current = 100;
}
});
var myVar = setInterval(function(){ setColor2() }, 5000);
function setColor2() {
width.transaction(function(current) {
if(current < 110){
return current = 100
}
if(current > 300){
return current -40;
}
if(current > 500){
return current -80;
}
if(current > 700){
return current -150;
}
if(current > 900){
return current -250;
}
if(current > 1100){
return current -450;
}
return current -10;
});
}
var myVar = setInterval(function(){ setColor() }, 5000);
function setColor() {
height.transaction(function(current) {
if(current < 110){
return current = 100
}
if(current > 300){
return current -40;
}
if(current > 500){
return current -80;
}
if(current > 700){
return current -150;
}
if(current > 900){
return current -250;
}
if(current > 1100){
return current -450;
}
return current -10;
});
}
height.on('value',function(dataSnapshot) {
var newHeight = dataSnapshot.val();
j('.snowball img').css("height", parseInt(newHeight)+"px");
});
width.on('value',function(dataSnapshot) {
var newWidth = dataSnapshot.val();
j('.snowball img').css("width", parseInt(newWidth)+"px");
});
rotation.on('value',function(dataSnapshot) {
var newRotation = dataSnapshot.val();
j('.snowball img').css("transform", parseInt(newRotation)+"deg");
});
j(document).ready(function() {
j(document).keyup(function(e) {
if(e.keyCode == 39) {
height.transaction(function(current) {
return current + 1;
});
}
// if(e.keyCode == 39) {
// myFunction();
// }
if(e.keyCode == 39) {
width.transaction(function(current) {
return current + 1;
});
}
width.transaction(function(current) {
if(current < 100){
return current = 100;
}
});
});
// function myTimer(){
// var d = new Date();
// var t = d.toLocaleTimeString();
// document.getElementById("demo").innerHTML = t;
// }
});
// });
// });
// }
// }
</script>
<div id="container">
<div class="snowball">
<img src="https://vignette.wikia.nocookie.net/object-ultraverse/images/0/04/Snowball.png/revision/latest?cb=20170303202629" alt = "snowball" height="200px" width="200px">
</div>
<div id = "background">
<img src="https://i.imgur.com/7xkeu5z.png" alt = "background" height="1000px" width="1000px">
</div>
<div id = "picture"></div>
<div id = "timer"></div>
</div>
</body>
</html>