javascriptで「FourConnect」ゲームを作ろうとしています。すべてのオンラインユーザーからのリストがあることを望みます。このリストは、Firebaseサイトの例で作成しました。今、私は1人のオンラインユーザーを選択して、一緒にプレイするための招待状を送信できるようにしたいと思っています。そこで、すべてのユーザーが私に追加のdivがあることを期待する関数を作成しました。divをクリックすると、この特別なユーザーは、OKまたはキャンセルするための確認ボックスを取得する必要があります。ユーザーが[OK]をクリックすると、再生が開始されます。ユーザーからの名前とIDを保存します。これはすでに機能しています。
私の問題は、他のユーザーにリクエストを送信する方法がわからないことです。私は多くのことを試しましたが、確認ボックスは常に他のユーザーのブラウザではなく私のブラウザにあります。
FirebaseページとGoogleで解決策を探しましたが、問題を解決するものが見つかりませんでした。
私がすでに持っているコード:
var name = prompt("Your name?", "Guest"),
currentStatus = "★ online";
// Get a reference to the presence data in Firebase.
var userListRef = new Firebase(connectFour.CONFIG.firebaseUrl);
// Generate a reference to a new location for my user with push.
var myUserRef = userListRef.push();
var gameId = myUserRef.name();
document.getElementById('labelGameId').innerHTML = gameId;
beginGame({id: gameId, name: name, status: currentStatus});
// Get a reference to my own presence status.
var connectedRef = new Firebase('http://presence.firebaseio-demo.com/.info/connected');
connectedRef.on("value", function(isOnline) {
if (isOnline.val()) {
// If we lose our internet connection, we want ourselves removed from the list.
myUserRef.onDisconnect().remove();
// Set our initial online status.
setUserStatus("★ online");
} else {
// We need to catch anytime we are marked as offline and then set the correct status. We
// could be marked as offline 1) on page load or 2) when we lose our internet connection
// temporarily.
setUserStatus(currentStatus);
}
});
//}
// A helper function to let us set our own state.
function setUserStatus(status) {
// Set our status in the list of online users.
currentStatus = status;
myUserRef.set({ name: name, status: status });
}
// Update our GUI to show someone"s online status.
userListRef.on("child_added", function(snapshot) {
var user = snapshot.val();
$("#output").append($("<div/>").attr("id", snapshot.name()));
$("#" + snapshot.name()).text(user.name + " is currently " + user.status);
if(snapshot.name() != myUserRef.name()){
var $invite = $('<div id="invite">invite</div>');
$("#output").append($invite);
$($invite).on('click', function(){
//startGame(user);
console.log('Gegner2: '+snapshot.name());
console.log('Genger2Name: '+user.name);
joinGame({id: snapshot.name(), name: user.name, status: user.status});
});
}
});
// Update our GUI to remove the status of a user who has left.
userListRef.on("child_removed", function(snapshot) {
$("#" + snapshot.name()).remove();
});
// Update our GUI to change a user"s status.
userListRef.on("child_changed", function(snapshot) {
var user = snapshot.val();
$("#" + snapshot.name()).text(user.name + " is currently " + user.status);
});
document.onIdle = function () {
setUserStatus("☆ idle");
}
document.onAway = function () {
setUserStatus("☄ away");
}
document.onBack = function (isIdle, isAway) {
setUserStatus("★ online");
}
setIdleTimeout(5000);
setAwayTimeout(10000);
function joinGame(opponent) {
console.log(opponent);
console.log(opponent.id);
var player2ID = opponent.id;
myUserRef = new Firebase(connectFour.CONFIG.firebaseUrl + opponent.id);
myUserRef.once('value', function(dataSnapshot){
if(dataSnapshot.val()){
beginGame({id: player2ID , name: opponent.name, status: opponent.status});
}else{
alert("game doesn't exist");
}
});
}
function beginGame(player) {
console.log(player);
console.log('Id spieler1: '+gameId);
});
このコードで「招待」をクリックすると、ユーザーが持っていたIDが表示されます。また、beginGame()にIDを送信したかったのですが、これは実際には機能しません。
私のFirebase構造:
ゲーム
-InmydEpSe5oZcLZUhfU
-InrLM6uxAsoOayOgFce
-name: "Barbara"
-status: "away"