like it would tell you to varnish the cache server and stuff. anyone remember? that sure was a doozy huh?
anyways,,,
A crude point and click game where you take on the role of a server janitor who is paged to resolve FIRST BYTE TIMEOUT errors by varnishing the cache server.
By clicking on specific parts of the images, you move to new locations. The images are low resolution and severely dithered.
The main puzzle is figuring out how to find a source of varnish, but also along the way you need to find a hidden location where you can pick up a brush with which you can apply varnish to the cache server at the end of the game.
NOTE: clicking 'read more' no longer resets the game. Please refresh the page to restart the game instead.
This one was fun to make and it is nice to do an ambitious css crime once again. I don't recall spending that much time figuring out what I wanted to make - there just was this period a few weeks ago where the First Byte Timeouts were happening and I decided to make some sort of css crime about it and quickly decided that it would be a point and click game where you carried out the instruction as given to you by that error message: Varnish Cache Server.
Longish post beneath the fold, only relevant for people with a specific strain of brain worms:
There were a few points I wanted to hit:
- Silly ways of losing the game
- Hitting your head on a pipe due to not turning the light on
- This turned into tripping over a foreign object instead. The benefit of this was I could stage a photo to explain the hazard once you had turned on the light, no need to photoshop a head-level pipe into a photo.
- Accidentally entering the catacombs and getting lost
- Initially I wanted the very first scene to be two doors side-by side, one marked Catacombs and the other marked Varnish Storage with the server sitting in between them, so you could lose the game right at the start AND at the very end. But in the end I could not find a good location to photograph two passages side by side, and combining that with having the server in the same scene would be kind of hard to convey, so the catacombs ended up being a mid-game hazard instead.
- Losing if you use the wrong kind of brush and that collecting the correct brush would require paying close attention to what kinds of brushes are present when you find their storage space.
- Hitting your head on a pipe due to not turning the light on
- Having the generating code somewhat nicely structured. (More on that below.)
Having all the images heavily dithered and displayed using a 'loading-in' animation was something I added just to see how it would work, and I immediately fell in love with it. This also had the benefit of making the photos from different locations still somewhat seem cohesive with one another, and it also gave me a lot of leeway in the absolute hatchet job of photo manipulation and clone brush work that I did.
To speed up the process, I made a quick bash script for processing a photo into a dithered version using imagemagick:
#!/bin/bash
convert $1 -scale 7% -dither FloydSteinberg -colors 10 -resize 424x424 processed/$2
All photos were taken from the common areas of my apartment building. I like the idea of there now being hundreds of furries and other chosters having taken an interactive tour of my apartment building's bike room and wash rooms.
The easy bit
The code. I'm happy with how I managed to structure the generating code. In my wheel of fortune game, the generating code became incredibly messy, a lot of it due to the complicated animations in the different scenes. For this one, the scenes were all pretty much the same, the only thing differing was what image to use, what zones to should be clickable to trigger to the next scene or scenes and the description text. So a lot of the game could be declared like this:
stair_bottom = ImageScene(
[[12, 0, 20, 20], [23, 22, 8, 20]],
"stair_bottom",
"You see the Bottom of the Stairwell.",
)
cabinet_approach = ImageScene(
[[12, 14, 15, 15]],
"cabinet_approach",
"You see a Brush Cabinet.",
)
The list of list of integers declare coordinates of the zones that you click to visit child scenes. Hooking up the graph of scenes would be done at a later stage:
stair_bottom.children = [stair_top, cabinet_approach]
To reduce duplication when it came to declare scenes that are the same save for the inventory, the scene objects could be cloned and specified to append an item in the inventory:
# Stair top scene with brush2 in inventory slot 1
stair_top_varnish = stair_top.with_inventory(1, ("brush2", False))
In the end all these scenes were assembled into a big tree structure which I could traverse and build up the html document;
def scene(a, s, z, trigger):
with a.details():
with a.summary(style={"font-size": 0}):
draw_trigger_div(trigger)
with a.div(
style={
"z-index": z + 1,
"position": "absolute",
"height": "600px",
"width": f"{WIDTH}px",
}
):
s.render(a, z)
for c, t in zip(s.children, s.triggers):
scene(a, c, z + 2, t)
The hard bit
Placing an old nightstand beneath the stairs and taking photos of it from different angles. How on earth would I explain myself if a neighbor walked in on me doing this. Um. It is for a project. Um. Have you heard of Cohost? Um. So it's like this social media blog site but GET THIS: You can write your posts in html with inline styles, and people have figured out a way to reuse an animation from the site's global CSS so you can even write html with animations. And, um. So that's why I'm photographing my nightstand. Here beneath the stairs. I'm making a game of it. What's it about you say? Well, um. So the site had this problem where sometimes the site wouldn't load and it would display this error message...
Anyways, nobody saw me photograph my nightstand underneath the stairs.
When I commit to a bit, I commit.
