Synopsis

Now that we can identify collisions in the puzzle, we need to update the style of the cells that are in collision, namely set the background a light pink. We do this by looping through the CellsInError array and adding an error style to each cell identified in that array.

• We use a combination of methods in the model to ascertain the conditions and state of the puzzle, and the controller to update the view with the conditions of the model.
• We run into a problem with conflicting styles, and we learn how the !important rule can override the natural order of CSS styles.
• We then see that after correcting a collided cell, the pink background remains. We remedy this by looping through all of the cells replacing the Error style with a null style prior to checking or collisions
• Next, we need to mark collisions if we come into a saved puzzle that has collisions. By modifying the RenderPage method, we can check for collisions and add style right after we read the cell values from the database.
• Finally, we write a method to determine if the puzzle is solved, and add a style to each cell making the entire puzzle green when it's solved.

Take Aways

• !Important can resolve conflicts in CSS style
• AddFFClass adds fluid style to a field
• ReplaceFFClass replaces, or removes, a fluid style from a field
• Adding a /* TO_DO */ comment within your code is a great way to remind yourself to add code later.