HTML and CSS Reference
In-Depth Information
<input id="opponentName" type="text" placeholder="Opponent's name"/>
<button id="goBtn" onclick="startGame();">
<!-- Instructions and buttons for the users to make their selections,
hidden initially -->
<div id="instructions" style="visibility:hidden;">
<p>Select one:</p>
<div id="buttons" style="visibility:hidden;">
<button id="rockBtn" name="rock" onclick="buttonClicked(this);">
<button id="paperBtn" name="paper" onclick="buttonClicked(this);">
<button id="scissorsBtn" name="scissors" onclick="buttonClicked(this);">
<!-- div to display opponent's choice, initially empty; populated by
JavaScript code in rps.js -->
<div id="opponentsButtons"></div>
Writing the Game Code
Now, that we've built a simple user interface for our app, let's take a closer look at the
JavaScript code. First, we declare the variables, as shown in Listing 5-7. Notice that we
include our connection URL to our WebSocket-enabled STOMP-based message broker,
Listing 5-7. Declaring the Variables Used in the JavaScript Code
// ActiveMQ STOMP connection URL
var url = "ws://";
// ActiveMQ username and password. Default value is "guest" for both.
var un, pw = "guest";
var client, src, dest;
// Variables holding the state whether the local and
// remote user had his/her turn yet
var hasUserPicked, hasOpponentPicked = false;
Search WWH ::

Custom Search