Setting the Display for Solved

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.



Complete and Continue