HTML and CSS Reference
In-Depth Information
// HTML code for the opponent's three buttons and variable
// for opponent's pick
var opponentsBtns = '<button id="opponentRockBtn" name="opponentRock"
disabled="disabled">Rock</button>' + '<button id="opponentPaperBtn"
name="opponentPaper" disabled="disabled">Paper</button>' +
'<button id="opponentScissorsBtn" name="opponentScissors"
disabled="disabled">Scissors</button>';
var opponentsPick;
// Variables for this user's three buttons
var rockBtn, paperBtn, scissorsBtn;
After the DOM hierarchy has been fully constructed, we check whether the browser
supports WebSocket. If it doesn't, we hide the
div
s that were rendered by the HTML page,
and display a warning (Listing 5-8).
Listing 5-8.
Checking Whether the Browser Supports WebSocket
// Testing whether the browser supports WebSocket.
// If it does, fields are rendered for users' names
$(document).ready(function() {
if (!window.WebSocket) {
var msg = "Your browser does not have WebSocket support. This
example will not work properly.";
$("#nameFields").css("visibility", "hidden");
$("#instructions").css("visibility", "visible");
$("#instructions").html(msg);
}
});
The
startGame()
function is invoked by the
onclick
event of the
goBtn
. This
function, shown in Listing 5-9, disables all the elements of the previously filled out form,
makes the instructions and button
div
s visible, and constructs the names for the source
(
src
) and destination (
dest
) queues.
Listing 5-9.
The
startGame()
Function
var startGame = function() {
// Disabling the name input fields
$("#myName").attr("disabled", "disabled");
$("#opponentName").attr("disabled", "disabled");
$("#goBtn").attr("disabled", "disabled");
// Making the instructions and buttons visible
$("#instructions").css("visibility", "visible");
$("#buttons").css("visibility", "visible");
// Queues are named after the players
