We've made it to day eight of the 12 Days of Retool! Yesterday, we learned about the useful Big Fish Swimming workflow, which you can use to track new customer signups. If you missed that post or any others during the 12 Days of Retool, a full list of all the previous posts are linked at the bottom of this page.
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.
The building blocks of a simple arcade
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.
Using iframes in Retool
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:
<iframe src="https://archive.org/embed/smb-3_202110" width="560" height="384" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen> </iframe>
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.
Using state variables and List View
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
Now I have all the data I need in order to successfully display the List View in my arcade!
Linking it all together, and gaming away
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.
|List View title||
|List View image||
|Play button event handler URL||
Better than a Switch under the Christmas tree?
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.
All 12 Days of Retool posts
- Day 1: A parser for an abstract syntax tree
- Day 2: Two tuple hacks
- Day 3: Three equal signs
- Day 4: Four CRUD operations
- Day 5: Five Sidebar Wins
- Day 6: Six Commands in a Palette
- Day 7: Seven Big Fish Swimming
- Day 8: Eight Bits of Gaming
- Day 9: Nine Star Wars Movies
- Day 10: Ten Retool Videos
- Day 11: Eleven Best FIFA World Cup Games
- Day 12: Twelve Lines of AI Poetry