by Craig Hafer on December 4, 2025

Picture this: you find a charming old board game at a garage sale, bring it home, gather some friends—and snap. The 50-year-old plastic components break instantly. You search the web for help to replace this fun and unique game mechanic but there’s nothing to be found. So naturally, you roll up your sleeves and build your own mobile version. No one else does this? Just me? Well, in case you ever find yourself in a similar boat, I figured I would walk you through what I did when building my own mobile integration to the 1973 Parker Brothers classic Billionare.

As I said, right when I went to try out this cool "new" board game for the first time, the plastic ends of the Analyzer snapped. The analyzer is basically a plastic rod with 2 floating spinners on them. The spinners, when rotated, will either land with a red face or a green face. You then refer to the chart to see what action to take. I thought this was such a unique way to give a random effect in a game, without relying on dice. It essentially is just a random binary spinner that counts up to 4. Here is what it looks like for reference:

So, without any 4 sided die lying around, and not wanting to use a boring random number generator, my brain went right to what it knows best---Ruby on Rails.

So without further ado, here's what I did and how you can do something similar yourself.

Sure, Rails could be considered overkill for such a simple app. But my idea is to allow this project to scale into a whole library of board game helpers that can all live within the same app. So, to start off I ran the old trusty rails new command, with a couple preferences I like to pass in to make my life easier as a developer.

rails new board_game_library --css tailwind --database=postgresql

One of the main tools I leveraged for this project besides Rails was Tailwind. Tailwind makes styling so easy. Here at Hashrocket Tailwind is pretty standard for all of us, so if you're interested in any tips or tricks, we have plenty of blog posts and TILs worth checking out!

The app itself is very simple. Here is everything I needed to do:

• Create a view to host the Analyzer
• Create a stimulus controller to "scramble" the Analyzer
• Expose ngrok as a host in the config so I could access the Analyzer from my phone for free

The view is nothing revolutionary. I just wanted a simple interface that gave me all the capabilities of the Analyzer from the board game. So, I needed 2 "spinners", a way to spin them, and a chart that let you know what action to take.

Here is the html for the spinners. Simply 2 boxes side by side that have some data-analyzer-targets that are used by the stimulus controller. I also give them some default colors here to give the user an idea of what to expect when the app opens up.

<div class="flex space-x-4">
  <div class="bg-red-400 w-1/2 h-24" data-analyzer-target="left">
  </div>

  <div class="bg-green-400 w-1/2 h-24" data-analyzer-target="right">
  </div>
</div>

Next we have the call to action, the "spinner" button. This is simply a nicely styled button that will call the randomize method on the stimulus controller.

<div class="w-fit mx-auto mt-12">
  <button class="border border-black rounded-md shadow-lg p-2" data-action="click->analyzer#randomize" data-analyzer-target="analyzer">
    ANALYZE
  </button>
</div>

The actions chart is just simply a bunch of elements of text, styled with html, along with a visual representation of the matching result. I'll give an example of one, but to save screen space on this post, I won't post the whole thing. Remember, you can always check out the source code here.

<div class="mt-12">
  <div class="w-fit mx-auto border border-black rounded-lg p-4 space-y-4">
    <div class="flex space-x-6">
      <div class="flex space-x-1 my-auto">
        <div class="w-8 h-4 bg-red-400 border border-black"></div>
        <div class="w-8 h-4 bg-red-400 border border-black"></div>
      </div>

      <div>
        Take investment you are analyzing.
      </div>
    </div>

    <!-- Other divs for the other outcomes -->
</div>

For my stimulus controller I gave it the targets you saw in the examples above, as well as some functions to help us randomize. Here is a high-level view of a few of the methods. If you want to see the code for yourself, please check out the repo here:

• randomize() Called via the Analyze button. Kicks off the randomization, or *spinning*
• disableButton() Disables the Analyze button
• randomAnimation() Starts animating the left and right spinners on the page
• makeDecision() Determine via 50% chance for each spinner whether it will be red or green
• enableButton() Enable the Analyze button when everything is finished

For the final piece of the puzzle, I wanted a way to easily view this from my phone so I didn't need to bring a big laptop or something to the table. So, for a simple and easy way to host this "on the web" without actually paying for a domain and setting all that up, I used the free version of ngrok. Now, for this to work properly with your Rails app, you will need to add one line to your config/application.rb file.

#config/application.rb

# ...
config.hosts << ".ngrok-free.app"
# ...

This allows any hosts that end with .ngrok-free.app to have access to the application. This way you can start and stop ngrok as much as you wish, and you don't need to manually input the random host in every time.

Now simply start your rails server, start up ngrok, and access it from your phone or any other device and you should have something like this as your final product:

So, this ended up being a fun way to play the game with some friends. It worked exactly as expected and it was also really cool to be playing a 50 year old board game that had its own custom mobile integration, even if it was small and simple.

Don't want to go through all the work to make your own Rails app? Feel free to reach out to Hashrocket for your next project! Big or small, we'd love to hear about how we can help you make the app you want to get the results you need!

Cover Photo by Thomas Buchhol on Unsplash.

Analyzer image provided by Thomas Melinsky on BoardGameGeek.