Tag Archives: website

Site Updates: August 2015

An ongoing catalogue of Knossos Games website issues and minor updates.


Updated WordPress through v4.3.

Added footnotes plugin Easy Footnotes. This enables unobtrusive updates to older blog posts, such as this one (where I wanted to convey that the puzzle mentioned has now been posted).

Minor updates were necessary to the Logic Problems, Part 1 update. First, the Logic problem #1 coin box graphic had the same issues encountered by the Space Pods graphics. The same workaround was successfully applied, although I continue to be perplexed as to what the underlying problem is. I also increased the font size for the graphics in the solution for Logic problem #4 so as to be more readable, especially on lower resolution displays. Finally, the PDFs for each puzzle were updated to the version 7 website design, which I neglected to do in the original update.


Fixed: Links between Knossos Games puzzles and blog entries

Problem: Blog entries about specific puzzles link back to those puzzles. However, visitors who surf directly to the puzzles may not know about the blog entries about those puzzles. Up to now, links from puzzles back to blog entires have been haphazardly posted. Need an organized way to add links from puzzle web pages back to blog posts. This is necessitated by the origin story blog entires for each logic puzzle, whereas past origin story blog entries were for entire groups of puzzles (which were easier to track and link).

Solution: This is a bit of a chicken-and-egg problem. Each puzzle web page needs to be posted first, then the accompanying blog entry can be created which links back to the puzzle. Once the blog entry is generated (and the link is fixed), the web page for the puzzle can be linked back to the blog entry. It took me a little while to recognize that this is the necessary order of things, but now that I have, I’ve added this process to my workflow for each puzzle or website update.


Updated: Splash page to main site

Problem: The splash page is meant to showcase the variety of puzzles available on Knossos Games. This was originally accomplished by presenting an edge-to-edge compilation of puzzle swaths (css stylesheet code):

html { 
  background: url(../splash/splash.svg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

This code takes a background image, centers it in both directions, and (using code specific to each browser) resizes it so that the image covers at least the size of the browser window top-to-bottom or left-to-right.

While this achieved my original objective for the splash page, it also presented certain problems. In order to cover the largest possible screens, the graphic had to be huge. But for small screens, such as mobile devices (with fixed data plans), a big graphic makes little sense. (The splash page redirected to the homepage after a few seconds, so if your data connection was lousy, it would simply skip the load.) In addition, the size of the swaths was not consistent between screen sizes/devices, or between the splash page and the rest of the website, because of the resizing.

Solution: Instead of the edge-to-edge graphic for the splash page, there is now a five swath by five swath graphic that is centered in both directions based on the specific size of the graphic (css stylesheet code):

#splash-center {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 900px;
   height: 810px;
   margin-top: -405px;
   margin-left: -450px;}

This new graphic maintains the size of swaths across the entire site regardless of screen size, and it is smaller by a full megabyte. If the screen isn’t wide or tall enough to display the full image, it’s simply cut off. If the screen is wider or taller than the image, there is empty white space. The splash page still automatically redirects to the homepage, but a link is now embedded in the graphic if the page loads quickly and you feel tired of waiting (or if javascript has been turned off).

I contemplated many different solutions to this problem. One possible solution, which I may still try at some point, is to include different sizes of graphics for the splash page, and serving the best size for each particular device. This can be accomplished using javascript.


Continuing aggravation: Drop shadows in svg files do not properly display in Safari

Problem: In recreating the splash page graphic, specifically the drop shadow for the “featured in Imagine magazine” text overlay, I ran into  a known issue in Safari: drop shadows in svg files do not properly display. Somehow, someway, I figured out how to trick Safari into displaying the drop shadow in the original, large splash graphic. But I could not figure out how I did this when recreating the image. Absolutely nothing worked.

Solution: After beating my head against the wall, I made a drop shadow by simply offsetting the text as black and translucent. (Nothing was done to blur the boundary, since that too has trouble rendering in Safari.) I’ll continue to revisit this issue as I change the new splash graphic to reflect current updates and featured puzzles.

Fall ’15 updates just around the corner

While the site has been fairly dormant during the late Spring and Summer, don’t think for a moment that puzzle work has stopped at Knossos Games HQ. I’ve been hard at work planning and creating puzzles and updates for the magazine and website for the coming academic year. As I’ve commented before, several things are always going on at once,  and I’ve used the past few months to think through behind-the-scenes issues, tackle ongoing problems, and get better organized. I’m excited about what’s coming, and I hope you’ll enjoy it when it arrives!

Update: Logic problems, Part 1

I knew that updating the logic problems for the new website would be a big task. Several logic problems were never posted to the last version of the website, and those that were still needed updated graphics and, in some cases, updated detailed solutions. I decided to break the logic problem update into pieces, so that I could better manage the work and post updates more frequently. Here’s what’s new in the first update:

Logic problem #1 – Coin Box
The main coin chest graphic was redone to make it look more like an actual chest of small drawers (like an old card catalog). This is the third or fourth version of this graphic, and I’m finally happy with it. The solution graphics, while visually the same as the last version, also needed to be redone, since the original graphics inside the Adobe Illustrator file somehow had already been exported to a non-vector format.

Logic problem #2 – Two-year Garden
The solution graphics in the last version contained explanatory text, which I’m universally trying to eliminate. This text was removed and replaced with descriptive text on the actual page. I had updated the solution graphics at some point for the last revision of the website, but those updated graphics were never posted for some reason. I further modified those updated graphics to improve the font and color. The detailed solution text was updated and expanded to be more clear, and to replace the aforementioned text from the old graphics.

Logic problem #3 – Castaway, Part 1
This update required the most work out of the first group. The graphics for this puzzle need to illustrate the ordering of names, and the previous graphics (including a hideous font choice) didn’t look very good. I replaced them by changing the font and creating a “ballot” theme as seen on the TV show that inspired the puzzle. The page-wide format of the old website allowed ample room for the graphics to be placed next to their corresponding clues and explanations. The current skinny-column version of the site (which improves readability) doesn’t contain very much room to have text next to graphics, so the CSS spacing of the two-column view is a bit of a hack.

While the solution, in terms of the order of names kicked off the island, is unchanged, the text of the detailed solution and the structure of the solution is improved. The original solution sometimes inserted names between previously ordered pairs, while the new solution strictly builds before or after the currently ordered list. This was motivated by the previously mentioned difficulty with the graphic layout (inserting names required wider graphics that would not have been easily arranged on the new website), but also made the solution more straightforward. With the detailed solution changes, the following clues were eliminated, since they were redundant and no longer necessary to solve the problem:

Paul:
I was kicked off after Bill.
I was kicked off before Russel.

Tiffany:
Holliday was kicked off before Paul.
Emory was kicked off before Eutaw.

Logic problem #4 – Bookstore
Even though the text (numbers, really) in the solution graphics is a bit small, it is reiterated in the text of the detailed solution, so these graphics were not changed (except, as with all graphics on the site, replaced with new svg versions). I corrected a typo in a solution equation which I hadn’t previously caught.

Logic problem #5 – Cineplex
I increased the size of the cineplex solution graphics to match the main cineplex puzzle layout graphic. The text of the detailed solution was modified to include the original clues and increase clarity of the solution.

Site updates: February 2015

An ongoing catalogue of Knossos Games website issues and minor updates.


The Space Pods puzzle section received a significant update.


Updated: Knossos Games website homepage

Problem: In the overhaul of the entire Knossos Games website, the homepage was basically an afterthought. I had focused so much time and attention to how the content should be organized and presented (as well as the new code to support it all), that I hadn’t really figured out what should be on the new homepage. I’ve observed a few people interact with the site over the years, and the homepage from the last version seemed to be confusing (people weren’t sure what to click on or where to go next). My first attempt at the new homepage, however, was a boring overcorrection.

Solution: This time, I’ve tried to retreat from the blandness by including more puzzle swaths and sections (carried over from the category pages, like this one). I have more ideas, and it’s still a work in progress, but this is certainly better than what it used to be (and what it used to be before that).


Fixed: Numerous broken links across the site

Problem: There are a lot of broken links (temporarily) caused by pages from the older versions of the site coexisting with newer versions. (I’ll explain this situation in detail in another blog post at some point.)

Solution: The two-versions-ago homepage (kg.kghome.html) and an old attempt at creating an all-in-one puzzle index page (kg.CategoriesV6a.html) have now both been replaced with pointers to the current home page (kg.index.html). This fixes the vast majority of broken link issues.

Update: Space Pods

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:

Proper door behavior

And here’s what happened in Safari:

Improper door behavior

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.

Site updates: January 2015

An ongoing catalogue of Knossos Games website issues and minor updates.


Updated to WordPress 4.1.


Fixed: Mixing large and small puzzle images

Problem: In laying out the website, puzzle images are supposed to be centered horizontally within the column of text. However, if there is an image that is larger than the width of the text column, all of the images would be recentered so that they would be centered with the largest image instead of the text. This was ok if one large image dominated the layout and the other images should accompany it, but was inappropriate if one large image was simply mixed in with a lot of text and other smaller images.

Solution: By creating a separate div class, which relegates these large images to their own blocks, smaller images will center normally.

.content-graphic-big {
    display: block;
    width: 509px;
}

I still have an HTML5 problem, however, as the standard suggestion for centering images using the following just does not work for my layout, and I’m not completely sure why.

 img {
    display: block;
    margin: 0 auto;
}

Some images are centered using this technique, but most are misaligned left or right. Thus, I am still using the depreciated text-align hack.

.content-graphic {
    position: relative;
    text-align: center;
}

Here is an example of the original behavior, where all images are centered to the largest image width, which in this case I feel is still appropriate. Here is an example of the new, more appropriate centering of mixed image sizes. This problem was tackled now because it was causing many problems in re-editing the logic puzzle web pages.