1+ const numberbox = document . getElementById ( "numberbox" ) ;
2+ const slider = document . getElementById ( "slider" ) ;
3+ const progressBar = document . getElementById ( "progress-bar" )
4+ const playButton = document . getElementById ( 'play-button' ) ;
5+ const pauseButton = document . getElementById ( "pause-button" ) ;
6+ const queen = '<i class="fas fa-chess-queen" style="color:#000"></i>' ;
7+
8+ let isMainContainerVisible = false ;
9+
10+ function toggleVisibility ( ) {
11+ const landingPage = document . querySelector ( '.landing-div' ) ;
12+ const mainContainer = document . querySelector ( '.n-queen' ) ;
13+
14+ if ( isMainContainerVisible ) {
15+ landingPage . style . display = 'none' ;
16+ mainContainer . style . display = 'flex' ;
17+ } else {
18+ landingPage . style . display = 'block' ;
19+ mainContainer . style . display = 'none' ;
20+ }
21+ }
22+ window . onload = toggleVisibility ;
23+ document . getElementById ( 'start-button' ) . onclick = function ( ) {
24+ isMainContainerVisible = true ;
25+ toggleVisibility ( ) ;
26+ } ;
27+
28+
29+ let n , speed , tempSpeed , q , Board = 0 ;
30+ let array = [ 0 , 2 , 1 , 1 , 3 , 11 , 5 , 41 , 93 ] ;
31+
32+ // Used to store the state of the boards;
33+ let pos = { } ;
34+
35+ speed = ( 100 - slider . value ) * 10 ;
36+ tempSpeed = speed ;
37+ slider . oninput = function ( ) {
38+ progressBar . style . width = this . value + "%" ;
39+ const sliderValue = parseInt ( this . value , 10 ) ;
40+ if ( sliderValue <= 25 ) {
41+ progressBar . style . backgroundColor = "green" ;
42+ slider . className = 'slider green' ;
43+ } else if ( sliderValue > 25 && sliderValue <= 75 ) {
44+ progressBar . style . backgroundColor = "#ffd200" ;
45+ slider . className = 'slider yellow' ;
46+ } else {
47+ progressBar . style . backgroundColor = "red" ;
48+ slider . className = 'slider red' ;
49+ }
50+
51+ speed = sliderValue ;
52+ speed = ( 100 - speed ) * 10 ;
53+ } ;
54+
55+
56+
57+ class Queen {
58+ constructor ( ) {
59+ this . position = Object . assign ( { } , pos ) ;
60+ this . uuid = [ ] ;
61+ }
62+
63+ nQueen = async ( ) => {
64+ Board = 0 ;
65+ this . position [ `${ Board } ] = { } ;
66+ numberbox . disabled = true ;
67+ await q . solveQueen ( Board , 0 , n ) ;
68+ await q . clearColor ( Board ) ;
69+ numberbox . disabled = false ;
70+ }
71+
72+ isValid = async ( board , r , col , n ) => {
73+ //Setting the current box color to orange
74+ const table = document . getElementById ( `table-${ this . uuid [ board ] } ) ;
75+ const currentRow = table . firstChild . childNodes [ r ] ;
76+ const currentColumn = currentRow . getElementsByTagName ( "td" ) [ col ] ;
77+ currentColumn . innerHTML = queen ;
78+ await q . delay ( ) ;
79+
80+ // Checking the queen in the same column
81+ for ( let i = r - 1 ; i >= 0 ; -- i ) {
82+ const row = table . firstChild . childNodes [ i ] ;
83+ const column = row . getElementsByTagName ( "td" ) [ col ] ;
84+ const value = column . innerHTML ;
85+
86+ if ( value == queen ) {
87+ column . style . backgroundColor = "#ff0000" ;
88+ currentColumn . innerHTML = "-"
89+ return false ;
90+ }
91+ column . style . backgroundColor = "#ddff00" ;
92+ await q . delay ( ) ;
93+ }
94+
95+ //Checking the upper left diagonal
96+ for ( let i = r - 1 , j = col - 1 ; i >= 0 && j >= 0 ; -- i , -- j ) {
97+ const row = table . firstChild . childNodes [ i ] ;
98+ const column = row . getElementsByTagName ( "td" ) [ j ] ;
99+ const value = column . innerHTML ;
100+
101+ if ( value == queen ) {
102+ column . style . backgroundColor = "#fb5607" ;
103+ currentColumn . innerHTML = "-"
104+ return false ;
105+ }
106+ column . style . backgroundColor = "#ffca3a" ;
107+ await q . delay ( ) ;
108+ }
109+
110+ // Checking the upper right diagonal
111+ for ( let i = r - 1 , j = col + 1 ; i >= 0 && j < n ; -- i , ++ j ) {
112+ const row = table . firstChild . childNodes [ i ] ;
113+ const column = row . getElementsByTagName ( "td" ) [ j ] ;
114+
115+ const value = column . innerHTML ;
116+
117+ if ( value == queen ) {
118+ column . style . backgroundColor = "#FB5607" ;
119+ currentColumn . innerHTML = "-"
120+ return false ;
121+ }
122+ column . style . backgroundColor = "#ffca3a" ;
123+ await q . delay ( ) ;
124+ }
125+ return true ;
126+ }
127+
128+ clearColor = async ( board ) => {
129+ for ( let j = 0 ; j < n ; ++ j ) {
130+ const table = document . getElementById ( `table-${ this . uuid [ board ] } ) ;
131+ const row = table . firstChild . childNodes [ j ] ;
132+ for ( let k = 0 ; k < n ; ++ k )
133+ ( j + k ) & 1
134+ ? ( row . getElementsByTagName ( "td" ) [ k ] . style . backgroundColor = "#03852e" )
135+ : ( row . getElementsByTagName ( "td" ) [ k ] . style . backgroundColor = "#ffffff" ) ;
136+ }
137+ }
138+
139+ delay = async ( ) => {
140+ await new Promise ( ( done ) => setTimeout ( ( ) => done ( ) , speed ) ) ;
141+ }
142+
143+ solveQueen = async ( board , r , n ) => {
144+ if ( r == n ) {
145+ ++ Board ;
146+ let table = document . getElementById ( `table-${ this . uuid [ Board ] } ) ;
147+ for ( let k = 0 ; k < n ; ++ k ) {
148+ let row = table . firstChild . childNodes [ k ] ;
149+ row . getElementsByTagName ( "td" ) [ this . position [ board ] [ k ] ] . innerHTML = queen ;
150+ }
151+ this . position [ Board ] = this . position [ board ] ;
152+ return ;
153+ }
154+
155+ for ( let i = 0 ; i < n ; ++ i ) {
156+ await q . delay ( ) ;
157+ // console.log("outside:" + board);
158+ await q . clearColor ( board ) ;
159+ if ( await q . isValid ( board , r , i , n ) ) {
160+ await q . delay ( ) ;
161+ // console.log("inside:" + board)
162+ await q . clearColor ( board ) ;
163+ let table = document . getElementById ( `table-${ this . uuid [ board ] } ) ;
164+ let row = table . firstChild . childNodes [ r ] ;
165+ row . getElementsByTagName ( "td" ) [ i ] . innerHTML = queen ;
166+
167+ this . position [ board ] [ r ] = i ;
168+
169+ if ( await q . solveQueen ( board , r + 1 , n ) )
170+ await q . clearColor ( board ) ;
171+
172+ await q . delay ( ) ;
173+ board = Board ;
174+ // console.log(this.Board)
175+ table = document . getElementById ( `table-${ this . uuid [ board ] } ) ;
176+ // console.log(JSON.parse(JSON.stringify(table)));
177+ row = table . firstChild . childNodes [ r ] ;
178+ row . getElementsByTagName ( "td" ) [ i ] . innerHTML = "-" ;
179+
180+ delete this . position [ `${ board } ] [ `${ r } ] ;
181+ }
182+ }
183+ }
184+ }
185+
186+ playButton . onclick = async function visualise ( ) {
187+ const chessBoard = document . getElementById ( "n-queen-board" ) ;
188+ const arrangement = document . getElementById ( "queen-arrangement" ) ;
189+
190+ n = numberbox . value ;
191+ q = new Queen ( ) ;
192+
193+ if ( n > 8 ) {
194+ numberbox . value = "" ;
195+ alert ( "Queen value is too large" ) ;
196+ return ;
197+ } else if ( n < 1 ) {
198+ numberbox . value = "" ;
199+ alert ( "Queen value is too small" ) ;
200+ return ;
201+ }
202+
203+ // Removing all the of previous execution context
204+ while ( chessBoard . hasChildNodes ( ) ) {
205+ chessBoard . removeChild ( chessBoard . firstChild ) ;
206+ }
207+ if ( arrangement . hasChildNodes ( ) ) {
208+ arrangement . removeChild ( arrangement . lastChild )
209+ }
210+
211+ const para = document . createElement ( "p" ) ;
212+ para . setAttribute ( "class" , "queen-info" ) ;
213+ para . innerHTML = `For ${ n } ${ n } ${ array [ n ] - 1 } ;
214+ arrangement . appendChild ( para ) ;
215+
216+ //Adding boards to the Div
217+ if ( chessBoard . childElementCount === 0 ) {
218+ for ( let i = 0 ; i < array [ n ] ; ++ i ) {
219+ q . uuid . push ( Math . random ( ) ) ;
220+ let div = document . createElement ( 'div' ) ;
221+ let table = document . createElement ( 'table' ) ;
222+ let header = document . createElement ( 'h4' ) ;
223+ // div.setAttribute("id", `div-${100 + uuid[i]}`)
224+ header . innerHTML = `Board ${ i + 1 }
225+ table . setAttribute ( "id" , `table-${ q . uuid [ i ] } ) ;
226+ header . setAttribute ( "id" , `paragraph-${ i } ) ;
227+ chessBoard . appendChild ( div ) ;
228+ div . appendChild ( header ) ;
229+ div . appendChild ( table ) ;
230+ }
231+ }
232+
233+ for ( let k = 0 ; k < array [ n ] ; ++ k ) {
234+ let table = document . getElementById ( `table-${ q . uuid [ k ] } ) ;
235+ for ( let i = 0 ; i < n ; ++ i ) {
236+ const row = table . insertRow ( i ) ; // inserting ith row
237+ row . setAttribute ( "id" , `Row${ i } ) ;
238+ for ( let j = 0 ; j < n ; ++ j ) {
239+ const col = row . insertCell ( j ) ; // inserting jth column
240+ ( i + j ) & 1
241+ ? ( col . style . backgroundColor = "#FF9F1C" )
242+ : ( col . style . backgroundColor = "#FCCD90" ) ;
243+ col . innerHTML = "-" ;
244+ col . style . border = "0.3px solid #373f51" ;
245+ }
246+ }
247+ await q . clearColor ( k ) ;
248+ }
249+ await q . nQueen ( ) ;
250+ } ;
0 commit comments