Hotshots Racing Random Driver & Car App!
Authors: Eric Nantz
Abstract: A completely over-the-top random car and driver selector used in the Wimpy's World Hotshot Racing 2021 spring virtual racing league. Simply click the Launch button to kick off a Vegas-style carousel!
Full Description: ## The Hotshots Racing Random Driver & Car App!
This app is part of a very fun stack of open-source software created for the Official Wimpy's World of Linux Gaming Most Official Unofficial Hotshot Racing League Spring Championship (WWOLGMOUHRLSC) competition that took place in early 2021. A group of friends from Martin Wimpress' Wimpy's World discord channel who just so happen to really enjoy racing games decided to have a little competition using the retro-style racing game called Hotshot Racing. On top of the immense fun we had, I thought it was a great time to use R and Shiny for giving a lot of style to what would have been a boring random number selector.
Want to see the replays of each season's grand prix session? They are all available on Martin's YouTube channel!
- Grand Prix 1: The Tour
- Grand Prix 2: Pro Circuit
- Grand Prix 3: Racing Elite
- Grand Prix 4: HotShot!
- Grand Prix 5: Boss Level
App Background (and Why?)
Our enthusiastic group of racing friends wanted to ensure that each of our races had a fairly even playing fiend for all involved. In HotShot Racing, there are 8 drivers with 4 possible cars, and each of those cars have different levels of attributes like speed, acceleration, and drifting ability. It's fairly safe to say that a player with strong skills in the game could pick a car that could absolutely dominate the competition. With that in mind, we came up with the requirement that all players would have to drive the same car in each race, so we could remove the possible variation in car quality. But just how would we pick that car? In the early prototyping, yours truly simply ran an R session with the sample() function to take a random number each time. But, what's the fun in that? Since these races were streamed on YouTube, why not give a nice and Shiny frontend to this selection process? Hence this application was born!
Under the Hood
If you would like a more visual/audio explanation of my development thought process and how I constructed the app, check out one of my previous Shiny Developer Series livestreams on YouTube!
Here's a brief summary of the packages and other tools that fueled this dashboard. I am very grateful to the brilliant authors that give me the ability to mix and match these ingredients to make this app a reality!
The application is structured as a full R package using {golem} authored by Colin Fay and the team at ThinkR. I've been on record multiple times with this simple fact: Once you go {golem}, you never go back! Check out my awesome conversation with Colin in episode 2 of the Shiny Developer Series to hear the motivation and benefits straight from the author.
The package dependencies are managed by {renv} authored by RStudio's own Kevin Ushey, to ensure that I control the versions of packages for this app and keep the library self-contained from my other R projects. Hear more from Kevin on the adventures of developing {renv} while taking lessons learned from {packrat} in episode 32 of my R-Podcast.
With this app being shown as part of the gaming sessions, I definitely wanted a look and feel that would make this app blend right in with the aesthetics of Hotshot Racing. Earlier in the year, the Shiny team unveiled the spectacular improvements to theming Shiny applications using the {bslib} authored by Carson Sievert. Now I had the ability to define a few small settings for colors and font in the beginning of the app, and the power of SASS and CSS would take me to my desired goal!
I wanted an easy way to give the illusion of a Vegas-style slot machine that would show the drivers and cars in rapid succession and then just magically stop on the car that was selected in the backend random number function. Fortunately, I had just the answer. Yoni Sidi, a very talented statistician and R user authored the {slickR} package as a wrapper to the slick JavaScript Library for dynamic carousels. Of course, I didn't want the user of the app to have to click to the car that was selected on the backend. But, Yoni built in an easy settings function that included parameters like auto playing the carousel progressing between images! With a little reactivity in the server logic, it was easy to show and hide the carousel and reveal the selection after a few seconds. You can learn more about Yoni's journey with Shiny in episode 11 of the Shiny Developer Series
All of the interactive tables are powered by one of my favorite new packages {reactable} authored by RStudio's Greg Lin. It was easy for me to change the theme of the tables to match the font style and other aesthetics of the app.
Acknowledgements
On top of the brilliant authors above, I am also very thankful to my racing friends from Wimpy's World that continually give me some much-needed entertainment and have taught me so much with supercharging my media production skills and who now enjoy learning about R!
- Martin Wimpress: Leader of the Ubuntu Mate linux distribution and co-host of the Ubuntu Podcast. He streams on Twitch and YouTube
- Yannick Murray: Software developer and contributor to Ubuntu Mate. It seemed that he and I were in another competition of sorts to see who could make the most tech for this virtual league! Yannick is a co-host of the Tea, Earl Grey, Hot Star Trek fan podcast. and he streams about his tech projects on YouTube and Twitch
- Monica Ayhens-Madon: Ubuntu community representative at Canonical and one of the nicest people I've virtually met online! Monica has recently begun streaming on Twitch
Keywords: golem, random, gaming, theme
Shiny app: https://rpodcast.shinyapps.io/hotshot_random
Repo: GitHub - rpodcast/hotshots.random: Shiny app to select random racers for Hot Shot Racing game streams!
RStudio Cloud: Posit Cloud
Thumbnail:
Full image: