Games and Graphics in Popup URL bars

by Matthew Rayfield on June 14th 2019

When I animated the URL bar with emojis I mentioned that I'd like to take it to the next level by putting a teeny game inside the URL bar. Well... Some really fine folks beat me to that. But I still wanted to give it a go ! I just needed to come up with something FRESH to work into it...

So while thinking about how I could expand beyond the 1-dimensional movement of a URL bar, it came to me... Popups ! Yes, the bane of early 2000s internet will help me in 2019 achieve my emoji-url-bar-gaming dreams. By just opening a series of popups and overlapping them in a column we create a 2-dimensional display of sorts:

NOTE: You'll need to disable popup blocking for any of the examples to work properly

Technical Challenges

Surprisingly, working with popups about a decade past their expiration date has some snags. Most frustratingly the focus() method appears to simply not work. Which means the last popup I open will receive all the keyboard events. Therefore it needs to be the page controlling the game logic. But because it's not the page that opened the popups it has no references to them and can't change their URLs...

This really threw me for a loop, and I tried all kinds of schemes, until I realized I could simply assign an array of popups over to the "controller popup" like this:

var popups = [],
    i;

// Open all me popups
for (i = 0; i < 7; i ++) {
    popups.push(window.open('popup.html', 'w'+i, 'width=100,height=100,left=0,top='+(i*100)));
}

// Give the "controller popup" all the popups
popups[popups.length-1].popups = popups;

// Start the game
popups[popups.length-1].setup();

Another pleasant technical detail that made this whole thing work was using:

popup.outerHeight - popup.innerHeight;

to find the vertical size of the browser's toolbar. With this I was able to figure out what size gap I needed to use when overlapping my popups. Nice !

Donkey Kong

No matter how I overlap the popups there will always be a nasty title bar in between each URL bar. Because of this I thought a game that took place on several vertical platforms might be nice and the Donkey Kong came to mind. It was also fun to recreate in emoji.

NOTE: On Windows the emoji are not fixed width, so they don't line up properly in any of these games... :[

Strangely sometimes an emoji in the URL bar will instead display as a non-emoji character. For example "White Medium Square" (◻️) if put into the URL will just show up as a square with a black outline (non-emoji style). But if you put a character before it that always shows up as an emoji then it will show its emoji version. It's odd and sometimes unpredictable. But the fix was simple, just border the left side of the game with "Large Orange Diamond" (🔶) emojis !

Breakout

While making the Donkey Kong "clone" I took a little break and made breakout:

It's almost fun if you ask me ! Though the ball does move a bit oddly at times.

Webcam ?

After two games I thought I'd try something different. In the past I've converted images into mosaics of emojis, and I thought perhaps I could do the same thing here.

So I wrote some code that found the average color of each emoji and sorted them into a 16x16x16 array. Each dimension of the array corresponding to the red, green, and blue values. Then with this I tried to render out a webcam's image into my popup display...

And... Well... The result is pretty bad. There just isn't enough resolution to tell what the heck is going on. Plus the gaps between each row of emojis doesn't help. But I saw some potential here.

The 3D Cube

Maybe my emoji-pixels would work if I showed an image that was only a few colors, and didn't require a high resolution to comprehend. So I whipped up a little 6 color 3D cube:

And hey, you can mostly tell what's going on... If you squint. So okay. One more thing then:

The 3D Room

"Doom ported to the url address bar" is the top comment on my animated URLs video. And okay... We're far away from anything resembling DOOM, but, I figured a tiny walkable 3D environment might be fun...

It's mostly navigable ! However the smiley face I put in the one corner is pretty much unrecognizable.

I'm Done

With that, I'm done. I feel that I have truly explored the possibilities of the stacked URL bar display system. And I've certainly reached a new realm of web uselessness. So, unless some brilliant new revelation comes to me about unchartered uses for this technology... I'm done with URL bar hackery for a while.

If you have questions, comments, or simply want to keep up with my latest tinkerings, check me out on Twitter: @MatthewRayfield. Or subscribe to my almost-never-bothered email list here.

Code for the above nonsense is available on GitHub here: https://github.com/MatthewRayfield/url-bar-games

Byeeeee !