This week we will continue the series of articles about the creation of the Sudoku Player project (episode 1 of my Dozen Days of Tiles series on Blazing Games). The next step in the creation of the Sudoku Player is to build the user interface. When you look at the original planned layout, it is easy to break the interface down to two separate parts. The view of the puzzle and the note taking area on the right side. We will call the puzzle viewing area the view and the note-taking area the side bar. As a tile already exists for use with testing the side bar note-taking ability, I started with the side bar class which I called SideBar.
Laying out the buttons for the sidebar was very quick as it was just cutting and pasting from my user interface tester with the coordinates changed to be relative to the position of the sideBar. This allows the sidebar to be moved around easier and may make porting the game to another platform easier. The Numbers used to set the value of the tile and the check boxes for the notes can be placed algorithmically using a for loop. This leads to the rather large question of how to set the notes.
My thoughts are that when a tile is selected on the view, the selected tile gets sent to the SideBar which then updates it’s notes. Locked tiles, which are the numbers given to the player at the start of the game, should not be changable and should not have any notes. The setTile method calls updateUI which will hide the tiles and note check boxes if the tile is null or locked. To deal with locked tiles, a scaled-up tile is drawn in the note area with the value of the tile being the locked value. If a tile does exist and it is not locked, the check boxes are set to the note flags contained within the tile.
The sideBar class has implemented buttonClicked for dealing with buttons, which at this point of time does nothing but will be used later to actually make the sidebar buttons do something. The checkboxClicked method simply determines which check box was clicked (by looking at the unique id assigned to the check box) and updates the tile notes. This leads to the question of how to deal with clicking on a tile? Obviously a mouseUp method has to be added to the tile class which calls the registered listener’s tileClicked method. In sideBar, this method simply sets the value of the tile.
Testing on a single test tile works great so the next step is to create a grid of tiles. This is the view portion of the interface and is controlled by the SudokuView class. This is simply a grid of tiles represented by a two dimensional array. In JavaScript, such arrays have to be created by creating an array of arrays. The spacing of the tiles is calculated using the following code:
tempY = cntrRow * 43 + Math.floor((cntrRow - 1) / 3) * 10 - 27;
tempX = cntrCol * 43 + Math.floor((cntrCol - 1) / 3) * 10 - 27;
I should probably point out that constant numbers should not be used in production code, constant or property variables are far better as it makes changes much easier to implement. That said, when under pressure and when developing such a small project such shortcuts are common. Another shortcut that was taken was using the view for the tile grid as the model. The model and view should be separate with the model containing the data and the view just displaying the data. In fact, the Generator that I am creating will need a model class so I just deferred the development time. In hindsight, this was actually the correct decision as I barely finished the project in time as it was.
The tile message gets captured and passed to the parent SudokuPlayer class which calls the SideBar class with the selected tile. The rectangle showing which tile is selected was not implemented until later. At this point we have a fully functional game but many features are missing.
Laying out the buttons for the sidebar was very quick as it was just cutting and pasting from my user interface tester with the coordinates changed to be relative to the position of the sideBar. This allows the sidebar to be moved around easier and may make porting the game to another platform easier. The Numbers used to set the value of the tile and the check boxes for the notes can be placed algorithmically using a for loop. This leads to the rather large question of how to set the notes.
My thoughts are that when a tile is selected on the view, the selected tile gets sent to the SideBar which then updates it’s notes. Locked tiles, which are the numbers given to the player at the start of the game, should not be changable and should not have any notes. The setTile method calls updateUI which will hide the tiles and note check boxes if the tile is null or locked. To deal with locked tiles, a scaled-up tile is drawn in the note area with the value of the tile being the locked value. If a tile does exist and it is not locked, the check boxes are set to the note flags contained within the tile.
The sideBar class has implemented buttonClicked for dealing with buttons, which at this point of time does nothing but will be used later to actually make the sidebar buttons do something. The checkboxClicked method simply determines which check box was clicked (by looking at the unique id assigned to the check box) and updates the tile notes. This leads to the question of how to deal with clicking on a tile? Obviously a mouseUp method has to be added to the tile class which calls the registered listener’s tileClicked method. In sideBar, this method simply sets the value of the tile.
Testing on a single test tile works great so the next step is to create a grid of tiles. This is the view portion of the interface and is controlled by the SudokuView class. This is simply a grid of tiles represented by a two dimensional array. In JavaScript, such arrays have to be created by creating an array of arrays. The spacing of the tiles is calculated using the following code:
tempY = cntrRow * 43 + Math.floor((cntrRow - 1) / 3) * 10 - 27;
tempX = cntrCol * 43 + Math.floor((cntrCol - 1) / 3) * 10 - 27;
I should probably point out that constant numbers should not be used in production code, constant or property variables are far better as it makes changes much easier to implement. That said, when under pressure and when developing such a small project such shortcuts are common. Another shortcut that was taken was using the view for the tile grid as the model. The model and view should be separate with the model containing the data and the view just displaying the data. In fact, the Generator that I am creating will need a model class so I just deferred the development time. In hindsight, this was actually the correct decision as I barely finished the project in time as it was.
The tile message gets captured and passed to the parent SudokuPlayer class which calls the SideBar class with the selected tile. The rectangle showing which tile is selected was not implemented until later. At this point we have a fully functional game but many features are missing.
No comments:
Post a Comment