|
Firebase en español
Base de datos activa. Firebase - Juan Antonio Villalpando
-- Tutorial de iniciación de Firebase en español --
Volver al índice del tutorial
____________________________
________________________________________________________
4.- Leaderboard. Tabla de resultados.
________________________________
- Vamos a crear una página web en donde podamos ver una tabla con usuarios y sus puntuaciones.
- Simplemente copia este archivo en tu ordenador.
- Debes cambiar mi dirección:
var scoreListRef = new Firebase('https://kio4.firebaseio.com//scoreList');
por la tuya de Firebase.
Además debes bajar este archivo y subirlo a tu servidor
http://www.kio4.com/firebase/imagenes/example.css
leaderboard.htm |
<html>
<head>
<script src="https://cdn.firebase.com/js/client/2.2.1/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="http://www.kio4.com/firebase/imagenes/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://kio4.firebaseio.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>
|
____________________________________________________________
- Subimos el archivo a un servidor web.
- Voy a subir mi archivo leaderboard.htm a mi hosting de kio4.com
- La información se guardará en scoreList:
var scoreListRef = new Firebase('https://kio4.firebaseio.com//scoreList');
- Aquí está:
http://kio4.com/firebase/leaderboard.htm
- Así se verá en la base de datos.
____________________________________
__________________________________
|
