jayson | ARTS 445: Net Art

<!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 {
      width:6px;
      height:6px;
      border-radius:50%;
      position:absolute;
      background-color:black;
      left:0;
      top:0;
      opacity:0.5;
    }

    .box {
      width:100px;
      height:100px;
      background-color:green;
      position:absolute;
      left:0;
      top:0;
    }

  </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();
  
  // Initialize Firebase
  // PASTE BELOW YOUR var config = { ... set of lines below
  var config = {
    apiKey: "AIzaSyDtpm4-ja20S0w7X8M8wXlakRWFgmQa9DY",
    authDomain: "test1-e3791.firebaseapp.com",
    databaseURL: "https://test1-e3791.firebaseio.com",
    projectId: "test1-e3791",
    storageBucket: "test1-e3791.appspot.com",
    messagingSenderId: "504865521252"
  };

  firebase.initializeApp(config);

  var db = firebase.database();
  var boxTop = db.ref("boxtop");
  var boxLeft = db.ref("boxleft");

  boxLeft.on('value',function(dataSnapshot) {
    var newLeft = dataSnapshot.val();
    j('.box').css("left", parseInt(newLeft)+"px");
  });

  boxTop.on('value',function(dataSnapshot) {
    var newTop = dataSnapshot.val();
    j('.box').css("top", parseInt(newTop)+"px");
  });



  j(document).ready(function() {

    j(document).keyup(function(e) {

      console.log("hi");
      if(e.keyCode == 38) { // up
        console.log("up");
        boxTop.transaction(function(current) {
          return current - 1;
        });
      }

      if(e.keyCode == 40) { // down 
        boxTop.transaction(function(current) {
          return current + 1;
        });
      }

      if(e.keyCode == 37) { // left
        boxLeft.transaction(function(current) {
          return current - 1;
        });
      }

      if(e.keyCode == 39) { // right
        boxLeft.transaction(function(current) {
          return current + 1;
        });
      }
  
    });

  });


</script>

  <!-- finally, our HTML -->
  <div id="container">
    <div class="box"></div>
  </div>

</body>
</html>