99< body >
1010 < noscript > To play CardShifter, please either enable JavaScript or use a JavaScript-enabled browser.</ noscript >
1111 < h1 > Cardshifter login</ h1 >
12- < form name ="login_information ">
13- Server:
14- < select name ="server ">
15- < option value ="127.0.0.1 "> Local host</ option >
16- < option value ="dwarftowers.com "> dwarftowers.com</ option >
17- < option value = "ws://echo.websocket.org/ "> WebSocket.org echo test</ option >
12+ < form name ="login_information " id =" login_information " >
13+ < label for =" server " > Server:</ label >
14+ < select name ="server " id =" server " >
15+ < option value ="ws:// 127.0.0.1:4243 "> Local host</ option >
16+ < option value ="ws:// dwarftowers.com:4243 "> dwarftowers.com</ option >
17+ < option value = "ws://echo.websocket.org/ "> WebSocket.org echo test</ option >
1818 < option value ="other "> Other...</ option >
1919 </ select >
2020 < br />
2121 < div id ="server_other ">
22- Other Server:
23- < input name ="server_other " type ="text " />
22+ < label for =" server_other " > Other Server:</ label >
23+ < input name ="server_other " id =" server_other " type ="text " />
2424 < br />
2525 </ div >
26- Username:
27- < input name ="username " type ="text " placeholder ="Enter name... " />
28- < br /> Is secure server:
29- < input name ="secure " type ="checkbox " />
26+ < label for ="username "> Username:</ label >
27+ < input name ="username " id ="username " type ="text " placeholder ="Enter name... " />
28+ < br />
29+ < label for ="secure "> Is secure server:</ label >
30+ < input name ="secure " id ="secure " type ="checkbox " value ="secure " />
3031 < br />
31- Test message to server (for testing only):
32- < input name = "testMessage " type = "test " placeholder = "Hello, World! " />
32+ < label for ="test_message "> Test message to server:</ label >
3333 < br />
34- < input name ="submit " type ="button " value ="Log in " />
35- < input name ="test_websocket " type ="button " value ="Test WebSocket " />
34+ < input name ="test_message " id ="test_message " type ="text " size ="100 " placeholder ="Optional... Leave blank unless using for testing. " />
35+ < br />
36+ < input name ="submit " id =submit " type="button" value="Log in" />
37+ < input name ="test_websocket " id ="test_websocket "type ="button " value ="Test WebSocket " />
3638 </ form >
3739 < script src ="login.js "> </ script >
3840
3941 <!-- Temporary WebSocket connection test prints result to document -->
4042
41- <!-- EXTERNAL SCRIP DOESN'T WORK YET | 2015-07-28 @Phrancis
42- <script src="connection-test.js">
43- -->
44-
45- < script "type="text/javascript">
43+ < script type ="text/javascript ">
4644 // @TODO : Extract this functionality to external file.
4745
48- loginForm = document . forms [ ' login_information' ] ;
46+ login_information = document . login_information ;
4947
50- loginForm . elements [ ' test_websocket' ] . addEventListener ( "click" , init ) ;
48+ login_information . elements . test_websocket . addEventListener ( "click" , init ) ;
5149
52- var wsUri = "ws://echo.websocket.org/" ;
53- var output ;
50+ //var server = "ws://echo.websocket.org/";
51+ //var username = document.getElementsByName("username").value.toString();
52+
53+ var server
54+ , username
55+ , test_message
56+ , websocket_output ;
5457
5558 function init ( ) {
56- output = document . getElementById ( "output" ) ;
59+
60+ server = document . getElementById ( "server" ) . value . toString ( ) ;
61+ if ( server === "other" ) {
62+ server = document . getElementById ( "server_other" ) . value . toString ( ) ;
63+ }
64+ username = document . getElementById ( "username" ) . value . toString ( ) ;
65+ test_message = document . getElementById ( "test_message" ) . value . toString ( ) ;
66+ if ( ! test_message ) {
67+ test_message = '{ "command": "login", "username": "' + username + '" }' ;
68+ }
69+
70+ websocket_output = document . getElementById ( "websocket_output" ) ;
71+
5772 testWebSocket ( ) ;
5873 }
5974
6075 function testWebSocket ( ) {
6176
6277 // Message to append input values to document prior to printing test results
63- var wsInfo = document . createElement ( "h3" ) ;
64- wsInfo . innerHTML = "Testing WebSocket connection..." ;
65- output . appendChild ( wsInfo ) ;
78+ var wsHeader = document . createElement ( "h3" ) ;
79+ wsHeader . innerHTML = "Testing WebSocket connection..." ;
80+ websocket_output . appendChild ( wsHeader ) ;
81+
82+ var wsInput = document . createElement ( "p" ) ;
83+ wsInput . innerHTML =
84+ "Server: " + server + "<br/>" +
85+ "Username: " + username + "<br/>" +
86+ "Message: " + test_message ;
87+
88+ websocket_output . appendChild ( wsInput ) ;
6689
6790 // Begin WebSocket test
6891
69- websocket = new WebSocket ( wsUri ) ;
92+ websocket = new WebSocket ( server ) ;
7093 websocket . onopen = function ( evt ) {
7194 onOpen ( evt )
7295 } ;
@@ -83,7 +106,7 @@ <h1>Cardshifter login</h1>
83106
84107 function onOpen ( evt ) {
85108 writeToScreen ( "CONNECTED" ) ;
86- doSend ( "TEST" ) ;
109+ doSend ( test_message ) ;
87110 }
88111
89112 function onClose ( evt ) {
@@ -109,12 +132,12 @@ <h1>Cardshifter login</h1>
109132 var pre = document . createElement ( "p" ) ;
110133 pre . style . wordWrap = "break-word" ;
111134 pre . innerHTML = message ;
112- output . appendChild ( pre ) ;
135+ websocket_output . appendChild ( pre ) ;
113136 }
114137
115138 </ script >
116- <!-- <h2>WebSocket Test</h2> -->
117- < div id ="output "> </ div >
139+
140+ < div id ="websocket_output "> </ div >
118141
119142 <!-- end temporary connection test -->
120143
0 commit comments