12 Days of Retool: Eight Bits of Gaming

Today, we'll be learning about iframes, temporary state variables, and all the tools you need to build your very own 8-bit arcade Retool app. We've selected eight famous games for this list, including Super Mario Bros, The Oregon Trail, Pac-Man, and more!

You can view the 8-bit arcade here and download the app JSON here.

There were a few components that went into building this little app. We'll go over each of them and talk about how they all work together.

A wrapper for the iframe HTML element is included in the Retool component library, and allows you to embed an HTML page inside your app. Each page has its own session history, document object, and content security policy. You can learn more about the Retool IFrame component here.

The Internet Archive provides list of games that they want to preserve for future generations. They also provide an option to embed a game on another web page using an iframe - here is the code they provided on the site to share Super Mario Bros 3:

I'm able to grab the URL (https://archive.org/embed/smb-3_202110) from the src property of the iframe tag above, and put it in the IFrame component in Retool:

Unfortunately, that wasn't enough to get my game in working order. As this iframe runs an emulator, it needed extra permissions from the document in order to function properly. Luckily, Retool's IFrame component allows me to easily toggle on the additional permissions required. Most of these are self-explanatory, but you can read more about them on the IFrame component page. I needed to enable Downloads and Storage and cookies in order for my emulator to work properly.

I wanted to be able to display 8 different video games within my tiny arcade page, but I wasn't exactly enthused at the prospect of copying and pasting the card components eight times. This is when I learned how List View components could solve this problem elegantly.

A List View renders each item from an array of data, similar to how forEach or map works in JavaScript. I had to create an array that held all the information I needed to dynamically display in the list component - the name, URL, and screenshot to display the game. I created a temporary state variable to store this array of data within the "Code" section of the Retool IDE.

Now I have all the data I need in order to successfully display the List View in my arcade!

The only thing left to do is to hook it all up to my arcade display. You can do this by accessing the local variable we set up above, listOfGames, and binding this data to the other UI components in the application.

There are a couple of ways you can implement the URL swap, but I decided to implement a Play button and add an event handler to change the IFrame URL each time it was clicked. You can access which index you're on in the List View by accessing it via the magic "i" variable.

Item Value List View title ### {{listOfGames.value[i].name}} List View image {{listOfGames.value[i].pic}} Play button event handler URL {{listOfGames.value[i].url}}

I hope you enjoyed learning more about the IFrame component in Retool! Combined with the List View component and a temporary state variable, we were able to celebrate some of our favorite games on a little arcade page. Come back to the Retool blog next week for our final four holiday hacks in the 12 Days of Retool.