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"
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");
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
Search WWH ::

Custom Search