Replacing a Table Top Game Timer (by Asking AI Nicely)

Here’s a fun little use of AI. On a recent weekend tabletop game session, we discovered the batteries stored with our copy of Last Word had corroded. Idea: could I build a timer app faster than our hosts could find their stash of AAA batteries?

As our hosts began checking junk drawers and closets to find replacements, I had a thought: Could I build a suitable timer app faster than they could find two working batteries?

Just a simple timer wouldn’t do, it had to fit the spirit of the game.

I didn’t just want a “stopwatch.” I wanted the vibe of the original game. That meant just a simple timer wouldn’t do, it had to fit the spirit of the game with a random time interval.

I pulled out my Pixel, tapped the Gemini icon and stated my simple request (everything shaded like this is my exact prompt inputs).

Create a single page HTML app that has only a single button on it, which starts a random timer between 8 and 18 seconds then plays a bell.

Within seconds, the AI spat out a wall of code. It was beautiful. It was functional. It was… a text file.

To make the magic happen, I had to:

1. Paste the code into a basic text editor app, the Google Docs app works fine.
2. Save As a true .html file (e.g., timer.html) in my local “Downloads” folder.
3. Use the “Files” app on my phone to open it (html files open in a browser).

Suddenly, my phone was practically the game’s official hardware. What I had now was already perfect for our needs and it only took 60 seconds to spawn it into existence!

After our game finished and while I was still giddy from the earlier success, I reopened my conversation and made a follow-up request to my robotic developer partner:

let’s add some simple unobtrusive controls to this single-file web app. Let’s add a way to set the minimum and maximum duration. Anytime between 5 seconds and 300 seconds. Also an option to turn off the random feature and have it be a set timer until the bell (for games that require that, like say Taboo).

Again after just a few seconds, I had exactly what I asked for. It worked so well I iterated with 5 more updates and feature changes over the next few moments:

Also perhaps the times could be sliders (or even a single slider with two handles if that’s possible).

Let’s show a progress ring when it’s a fixed time, but show an indeterminant animation or spinner/etc when random is engaged since that should be mysterious.

Next I’m declining one of the AI’s suggestions but countering with my own improvements to add:

I do have a few ideas though, such as showing the slider controls under a progressive disclosure UI (expand triangle button or such), and also disable the min time slider when fixed mode is on

Sliders can be hard to use on a phone with precision so let’s also show text boxes where the exact seconds desired can be typed in

Now I’m starting to ask the AI for it’s suggestions:

Maybe a color theme option inside settings, just to change the hue between a handful of options, what do you think?

Below is the finished “product” if you can call it that, and just a few minutes and few copy/pastes of text was all it took.

Want to try it yourself? After I was done tweaking conversationally, I asked Gemini for a so called “one-shot prompt” that would give me my desired output from a single input prompt that incorporates all the requests in my conversation at once. It’s included below and should work well in your AI tool of choice. I’ve tried it in Copilot and others with similar results.

System Goal: Create a single-file, mobile-first web app for a "Mystery Game Timer."

Design Requirements:

Aesthetic: Use a "Glassmorphism" look with a vibrant gradient background (like #667eea to #764ba2). The main container should be a translucent "glass" card with backdrop-filter: blur(20px).

Visuals: Center a visual indicator. If Fixed Mode is on, show a circular SVG progress ring that fills over time. If Random Mode is on, hide the ring and show a mysterious pulsing white glow.

Controls: Use a large, touch-friendly "Start Timer" button. Below it, a <details> collapsible section containing:

A "Theme Picker" (set of dots to change the background gradient).

A "Fixed Mode" toggle.

Two-way bound sliders and numeric inputs for "Min" and "Max" duration (range 5–300s).

Disable/dim the "Min" input when Fixed Mode is active.

A "🔔 Ring Bell" test button.

Functional Requirements:

Audio: Use the Web Audio API to generate a high-quality "Bell" chime (Sine wave at 880Hz with an exponential decay).

Timer Logic: If Fixed, duration = Max. If Random, duration = random value between Min and Max.

UX: When the timer starts, auto-collapse the settings. After the bell rings, display the "Last Delay: Xs" text.

Mobile Native Feel: Include user-select: none, overscroll-behavior: none, and inputmode="numeric" for inputs.

Screen Management: Implement the Screen Wake Lock API to prevent the phone screen from dimming while the timer is running.

Output: Provide the entire solution as a single self-contained HTML file (CSS and JS included).

Take the output it gives you, save it with a .htm file name and open it up to see the finished result in your browser.