jonpecson/firebase-leaderboard.html

## firebase-leaderboard.html
<html>
<head>
  <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/resources/tutorial/css/example.css">
</head>
<body>

<div class="example-base example-leaderboard l-demo-container">
  <table id="leaderboardTable">
    <tr>
      <th>Player</th>
      <th>Score</th>
    </tr>
  </table>
  <footer>
    <input class="example-leaderboard-name" type="text" id="nameInput" placeholder="Enter a name">
    <input class="example-leaderboard-score" type="text" id="scoreInput" placeholder="Record your score...">
  </footer>
</div>
<script>
  var LEADERBOARD_SIZE = 5;

  // Create our Firebase reference
  var scoreListRef = new Firebase('https://an22sj9l915.firebaseio-demo.com//scoreList');

  // Keep a mapping of firebase locations to HTML elements, so we can move / remove elements as necessary.
  var htmlForPath = {};

  // Helper function that takes a new score snapshot and adds an appropriate row to our leaderboard table.
  function handleScoreAdded(scoreSnapshot, prevScoreName) {
    var newScoreRow = $("<tr/>");
    newScoreRow.append($("<td/>").append($("<em/>").text(scoreSnapshot.val().name)));
    newScoreRow.append($("<td/>").text(scoreSnapshot.val().score));

    // Store a reference to the table row so we can get it again later.
    htmlForPath[scoreSnapshot.key()] = newScoreRow;

    // Insert the new score in the appropriate place in the table.
    if (prevScoreName === null) {
      $("#leaderboardTable").append(newScoreRow);
    }
    else {
      var lowerScoreRow = htmlForPath[prevScoreName];
      lowerScoreRow.before(newScoreRow);
    }
  }

  // Helper function to handle a score object being removed; just removes the corresponding table row.
  function handleScoreRemoved(scoreSnapshot) {
    var removedScoreRow = htmlForPath[scoreSnapshot.key()];
    removedScoreRow.remove();
    delete htmlForPath[scoreSnapshot.key()];
  }

  // Create a view to only receive callbacks for the last LEADERBOARD_SIZE scores
  var scoreListView = scoreListRef.limitToLast(LEADERBOARD_SIZE);

  // Add a callback to handle when a new score is added.
  scoreListView.on('child_added', function (newScoreSnapshot, prevScoreName) {
    handleScoreAdded(newScoreSnapshot, prevScoreName);
  });

  // Add a callback to handle when a score is removed
  scoreListView.on('child_removed', function (oldScoreSnapshot) {
    handleScoreRemoved(oldScoreSnapshot);
  });

  // Add a callback to handle when a score changes or moves positions.
  var changedCallback = function (scoreSnapshot, prevScoreName) {
    handleScoreRemoved(scoreSnapshot);
    handleScoreAdded(scoreSnapshot, prevScoreName);
  };
  scoreListView.on('child_moved', changedCallback);
  scoreListView.on('child_changed', changedCallback);

  // When the user presses enter on scoreInput, add the score, and update the highest score.
  $("#scoreInput").keypress(function (e) {
    if (e.keyCode == 13) {
      var newScore = Number($("#scoreInput").val());
      var name = $("#nameInput").val();
      $("#scoreInput").val("");

      if (name.length === 0)
        return;

      var userScoreRef = scoreListRef.child(name);

      // Use setWithPriority to put the name / score in Firebase, and set the priority to be the score.
      userScoreRef.setWithPriority({ name:name, score:newScore }, newScore);
    }
  });
</script>
</body>
</html>
	<html>
	<head>
	<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/resources/tutorial/css/example.css">
	</head>
	<body>

	<div class="example-base example-leaderboard l-demo-container">
	<table id="leaderboardTable">
	<tr>
	<th>Player</th>
	<th>Score</th>
	</tr>
	</table>
	<footer>
	<input class="example-leaderboard-name" type="text" id="nameInput" placeholder="Enter a name">
	<input class="example-leaderboard-score" type="text" id="scoreInput" placeholder="Record your score...">
	</footer>
	</div>
	<script>
	var LEADERBOARD_SIZE = 5;

	// Create our Firebase reference
	var scoreListRef = new Firebase('https://an22sj9l915.firebaseio-demo.com//scoreList');

	// Keep a mapping of firebase locations to HTML elements, so we can move / remove elements as necessary.
	var htmlForPath = {};

	// Helper function that takes a new score snapshot and adds an appropriate row to our leaderboard table.
	function handleScoreAdded(scoreSnapshot, prevScoreName) {
	var newScoreRow = $("<tr/>");
	newScoreRow.append($("<td/>").append($("<em/>").text(scoreSnapshot.val().name)));
	newScoreRow.append($("<td/>").text(scoreSnapshot.val().score));

	// Store a reference to the table row so we can get it again later.
	htmlForPath[scoreSnapshot.key()] = newScoreRow;

	// Insert the new score in the appropriate place in the table.
	if (prevScoreName === null) {
	$("#leaderboardTable").append(newScoreRow);
	}
	else {
	var lowerScoreRow = htmlForPath[prevScoreName];
	lowerScoreRow.before(newScoreRow);
	}
	}

	// Helper function to handle a score object being removed; just removes the corresponding table row.
	function handleScoreRemoved(scoreSnapshot) {
	var removedScoreRow = htmlForPath[scoreSnapshot.key()];
	removedScoreRow.remove();
	delete htmlForPath[scoreSnapshot.key()];
	}

	// Create a view to only receive callbacks for the last LEADERBOARD_SIZE scores
	var scoreListView = scoreListRef.limitToLast(LEADERBOARD_SIZE);

	// Add a callback to handle when a new score is added.
	scoreListView.on('child_added', function (newScoreSnapshot, prevScoreName) {
	handleScoreAdded(newScoreSnapshot, prevScoreName);
	});

	// Add a callback to handle when a score is removed
	scoreListView.on('child_removed', function (oldScoreSnapshot) {
	handleScoreRemoved(oldScoreSnapshot);
	});

	// Add a callback to handle when a score changes or moves positions.
	var changedCallback = function (scoreSnapshot, prevScoreName) {
	handleScoreRemoved(scoreSnapshot);
	handleScoreAdded(scoreSnapshot, prevScoreName);
	};
	scoreListView.on('child_moved', changedCallback);
	scoreListView.on('child_changed', changedCallback);

	// When the user presses enter on scoreInput, add the score, and update the highest score.
	$("#scoreInput").keypress(function (e) {
	if (e.keyCode == 13) {
	var newScore = Number($("#scoreInput").val());
	var name = $("#nameInput").val();
	$("#scoreInput").val("");

	if (name.length === 0)
	return;

	var userScoreRef = scoreListRef.child(name);

	// Use setWithPriority to put the name / score in Firebase, and set the priority to be the score.
	userScoreRef.setWithPriority({ name:name, score:newScore }, newScore);
	}
	});
	</script>
	</body>
	</html>