In bringing the website for Knossos Games back to life (and I promise, there will be a few blog posts about specifically why it was gone and how it has returned), many things needed to be updated. Minor updates will be grouped together, major ones will get their own post, like this one.
With the publication of a new Space Pods puzzle in Imagine v22.n1 (September/October 2014), the Space Pods collection of puzzles became a good candidate for the next group of puzzles to be updated for the website, after the first major update (mazes).
In going through the graphics files in Adobe Illustrator, I realized that, over the years, I had constructed the puzzle graphics inconsistently. While this looked fine in print, and in the low resolution gifs used in the past, these inconsistencies would definitely show up in the scalable vector graphics drawn on high resolution displays of the updated site. Thus, the first task was to go back and clean up the original graphics files for each puzzle: the space pods puzzle and solution diagrams, as well as the solution charts.
If you look closely, there are a few fine details of how each space pods puzzle diagram is constructed. The grey squares representing the “doors” to the space pods are a good example. The surrounding wall lines overlap each door, which is meant to suggest that the doors are recessed and slide into the walls, like on your favorite science-fiction TV show or movie. (This style of door also visually looked the best compared to the many options I originally tried.) I fixed some consistency problems with the size of the gap for each door (especially gaps on a diagonal) by re-slicing and re-grouping the hexagon and hallway lines. The radius of the rounded edges of the doors was also changed to look more consistent across low and high resolutions.
The solution charts use a triple chevron arrow, and that was realigned to make it look sharper on low resolution displays, while also changing the style of the corner and ends. I then included a label above each highlighted step, because of the next change.
I have been increasingly unsatisfied with lengthy pages for solutions that include many steps. Having to scroll through step after step is not the best experience for reading the solution, since there is a temporal gap between focusing on one solution diagram and the next, and during that gap you need to maintain in your working memory the salient features of the last diagram in order to compare what has changed in the next. But a step-by-step approach to the solution is necessary for the these puzzles, in order to show how each of the three scientists moved around the space station.
The improved solution pages now include a user-directed slideshow of the solution steps. The solution diagrams maintain the same position on the page, so clicking from one to the next is a seamless experience. This was accomplished through a modification of a clever css technique to create a slideshow (since I did not want to bother with complicated javascript). Conceptually, the slideshow is a single, giant column containing all of the individual solution steps placed next to one another horizontally. All but one of the solution steps is hidden at any time, and the buttons contain anchor links to an unordered list of the individual solution steps. Because everything needs to load prior to being displayed, this can take a few moments to render properly, but that appears to be the only drawback, as it works in every browser I have tested.
Once the new images and pages were constructed, I ran into a bizarre issue in testing. In Safari (and possibly other WebKit-based browsers), the borders of the doors would inflate when you zoomed in on a diagram. Here is a compilation screenshot of the appropriate behavior:

And here’s what happened in Safari:

I could not figure out why this was happening. Other objects that have a non-zero point border do not exhibit this behavior when zooming in. The only thing I could think of was to take the rounded squares and expand them so that they would be borderless. In the end, this was a successful, if time consuming, workaround for the problem.
Finally, there is one additional piece of information that I would like to associate with each Space Pods puzzle and solution, and that is a diagram of the problem space (in other words, every possible way that the scientists can move through the puzzle). I have unfortunately run into some difficulties trying to create these charts in a clean, readable way. Since there are many, many more tasks to accomplish in bringing the website back to life, I decided to post the Space Pods puzzles and put this aside for the moment.