1+ // const vars
2+ var MAX_RINGS = 5 ;
3+
4+ // use a function to get all ring buttons
5+ function getRingButtons ( ) {
6+ return document . getElementsByClassName ( "button" ) ;
7+ }
8+
9+ // main
10+ window . onload = function ( ) {
11+ // initialize the data and style of the whole Ring
12+ Initialization ( ) ;
13+ var icon = document . getElementsByClassName ( "apb" ) ;
14+
15+ var ringButtons = getRingButtons ( ) ;
16+ /*
17+ // use clouser for the event onclick for each ring elements
18+ for (var i = 0; i < ringButton.length; i++) {
19+ ringButton[i].onclick = function(i) {
20+ return function() {
21+ // send a requeset to server to get a random number
22+ ServerRequest(ringButton[i].childNodes[1]);
23+ }
24+ }(i);
25+ }
26+ */
27+
28+ // set a event for the big ring(to sum up all the numbers)
29+ var BigRing = document . getElementById ( "info-bar" ) ;
30+ BigRing . onclick = function ( ) {
31+ // to sum up all the numbers
32+ BigRingCount ( ) ;
33+ }
34+
35+ icon [ 0 ] . onclick = function ( ) {
36+ ServerRequest ( ringButtons , 0 ) ;
37+ }
38+
39+ icon [ 0 ] . onmouseover = function ( ) {
40+ // for each time the mouse leave the @+, do an initialization
41+ Initialization ( ) ;
42+ }
43+ }
44+
45+ // initial function, reset all the numbers of the ring and the sum of the big ring
46+ function Initialization ( ) {
47+ ringButton = getRingButtons ( ) ;
48+ // refers to the big ring
49+ var BigRing = document . getElementById ( "info-bar" ) ;
50+ // refers to the big ring's content
51+ var BigRingContent = document . getElementsByClassName ( "sum" ) ;
52+ BigRingContent [ 0 ] . innerHTML = "" ;
53+
54+ for ( var i = 0 ; i < ringButton . length ; i ++ ) {
55+ // no red circle beside the ring element
56+ ringButton [ i ] . childNodes [ 1 ] . style . display = "none" ;
57+ // the red circle is empty
58+ ringButton [ i ] . childNodes [ 1 ] . innerHTML = "" ;
59+ // all ring elements are available to click
60+ ringButton [ i ] . setAttribute ( "disable" , "" ) ;
61+ // the background color is reset
62+ ringButton [ i ] . style . backgroundColor = "#1C499E" ;
63+ }
64+ }
65+
66+
67+ // this function is for handling Server Requests
68+ function ServerRequest ( RequestButtons , i ) {
69+ theButton = RequestButtons [ i ] . childNodes [ 1 ] ;
70+ var XMLhttp = new XMLHttpRequest ( ) ;
71+
72+ DisableRingButtons ( ) ;
73+
74+ theButton . style . display = "block" ;
75+ RequestButtons [ i ] . style . backgroundColor = "#1C499E" ;
76+ theButton . innerHTML = "..." ;
77+
78+ XMLhttp . open ( "GET" , "http://localhost:3000/" , true ) ;
79+ XMLhttp . send ( null ) ;
80+
81+ // callback function for ajax
82+ XMLhttp . onreadystatechange = function ( ) {
83+ if ( XMLhttp . readyState == 4 && XMLhttp . status == 200 ) {
84+ // get result
85+ var result = XMLhttp . responseText ;
86+ // write result
87+ theButton . innerHTML = result ;
88+ ActivateRingButtons ( ) ;
89+ RequestButtons [ i ] . style . backgroundColor = "#999FD3" ;
90+ // disable thr current button forever
91+ RequestButtons [ i ] . setAttribute ( "disable" , "Disable2" )
92+
93+ // robot will continously call it again
94+ if ( i < MAX_RINGS - 1 ) {
95+ ServerRequest ( RequestButtons , i + 1 ) ;
96+ } else {
97+ BigRingCount ( ) ;
98+ }
99+ }
100+ }
101+
102+ }
103+
104+ // disable ring Buttons
105+ function DisableRingButtons ( ) {
106+ var ringButton = getRingButtons ( ) ;
107+
108+ for ( var i = 0 ; i < ringButton . length ; i ++ ) {
109+ if ( ringButton [ i ] . getAttribute ( "disable" ) != "Disable2" ) {
110+ ringButton [ i ] . setAttribute ( "disable" , "Disable" ) ;
111+ }
112+ ringButton [ i ] . style . backgroundColor = "#999FD3" ;
113+ }
114+ }
115+
116+ // Activate ring buttons
117+ function ActivateRingButtons ( ) {
118+ var ringButton = getRingButtons ( ) ;
119+
120+ for ( var i = 0 ; i < ringButton . length ; i ++ ) {
121+ if ( ringButton [ i ] . getAttribute ( "disable" ) != "Disable2" ) {
122+ ringButton [ i ] . setAttribute ( "disable" , "" ) ;
123+ ringButton [ i ] . style . backgroundColor = "#1C499E" ;
124+ }
125+ }
126+ }
127+
128+ // count the numbers of all ring elements
129+ function BigRingCount ( ) {
130+ var BigRing = document . getElementsByClassName ( "sum" ) ;
131+ var sum = 0 ;
132+ var ringButtons = getRingButtons ( ) ;
133+
134+ for ( var i = 0 ; i < ringButtons . length ; i ++ ) {
135+ if ( ringButtons [ i ] . childNodes [ 1 ] . innerHTML == "" )
136+ return ;
137+ sum += parseInt ( ringButtons [ i ] . childNodes [ 1 ] . innerHTML ) ;
138+ }
139+
140+ BigRing [ 0 ] . innerHTML = sum ;
141+ }
0 commit comments