G.A.M.E. — Gambling Awareness Manic Education

A browser-based, educational prototype designed to help people notice gambling-related design patterns and practice safer next steps.

Comment

Inspiration

G.A.M.E. — Gambling Awareness Manic Education — was inspired by a simple question: how can an interactive experience help someone recognize gambling-related pressure patterns without recreating the harms of a gambling product?

Many gambling interfaces are built around urgency, near misses, rapid repetition, exaggerated wins, and frictionless spending. We wanted to reverse that design logic. Instead of rewarding more play, G.A.M.E. uses fictional simulations as a place to pause, reflect, identify a pattern, and choose a healthier next step.

This workshop project is also a blueprint for our future Agents for Humans hackathon concept: technology should help people retain agency, understand what is happening around them, and make safer decisions rather than optimize engagement at any cost.

What it does

G.A.M.E. is a browser-based, no-real-money gambling-awareness learning prototype.

It includes fictional versions of Roulette, Color Game, Blackjack, Poker, and Tong-its. These simulations are not designed to reward wagering or winning. Instead, the app connects simulated events to educational interventions about patterns such as:

  • rapid repeated play,
  • chasing losses,
  • attention-grabbing large wins, and
  • payment or deposit friction.

The experience begins with a safety acknowledgement and clearly states that no deposits, withdrawals, prizes, or real-money transactions exist. Sessions are time-bounded, and the available simulation time decreases as awareness mastery increases:

[ 20 \rightarrow 15 \rightarrow 10 \rightarrow 5 \rightarrow 0 \text{ minutes} ]

At higher mastery, simulations are retired completely while calming alternatives and the user’s report remain available.

Users can also access paced breathing, grounding, urge surfing, and low-stimulation activities. They can generate a local counselor-conversation report that summarizes fictional activity, completed lessons, and only the reflections they explicitly choose to include.

How we built it

We built G.A.M.E. as a React and TypeScript application using Vite.

The project separates the user interface from its domain logic:

  • React components handle onboarding, navigation, game screens, interventions, settings, alternatives, progress, and reporting.
  • Pure domain modules handle game rules, intervention detection, state transitions, report generation, random-number utilities, and browser storage.
  • Vitest and Testing Library cover application behavior, game-rule logic, state management, storage, reports, intervention triggers, and theme contrast checks.
  • localStorage keeps progress, settings, fictional ledger entries, and reflections in the current browser only.
  • Accessibility controls include reduced motion, calm visual intensity, higher contrast, sound settings, and light/dark themes.

We also documented light-theme WCAG contrast measurements and added executable contrast tests so important text and safety-related UI tokens remain above the intended accessibility threshold.

Challenges we ran into

One challenge was designing simulations that were recognizable enough to teach about gambling mechanics without becoming entertainment-first gambling experiences.

We addressed that by making several design choices:

  • simulated wins and wagers do not award awareness mastery;
  • simulated purchase actions never collect payment information;
  • sessions require a fresh acknowledgement and have a time limit;
  • intervention lessons interrupt risky patterns instead of encouraging another round;
  • calming alternatives remain available throughout the experience;
  • simulation access is gradually reduced and eventually retired as mastery grows.

Another challenge was balancing a visually authentic game-like presentation with accessibility and emotional safety. We added theme controls, reduced-motion support, calm visual settings, keyboard-aware UI patterns, and contrast tests for theme-driven interface surfaces.

Finally, privacy had to be part of the product design rather than an afterthought. The prototype does not require an account or use cloud synchronization. Reports are generated locally, and reflections are included only when the user explicitly opts in.

Accomplishments that we're proud of

We are proud that G.A.M.E. treats safety as a core interaction model instead of a disclaimer.

In particular, we are proud of:

  • creating a no-real-money prototype that does not accept financial credentials;
  • turning risky interaction patterns into learning moments;
  • ensuring progress comes from reflection, learning checks, and healthier alternatives rather than simulated wins;
  • building a bounded-session model that eventually retires simulations;
  • keeping user data local to the browser;
  • giving users control over what appears in their generated report;
  • adding automated tests across the game rules, application flow, storage, reports, interventions, and theme tokens.

What we learned

We learned that human-centered technology is not only about adding protective messages. It is about changing what the system rewards, what it interrupts, and what choices it makes easy.

We also learned the value of separating interaction design from domain logic. Keeping intervention detection, state transitions, reporting, and game rules in testable modules made it easier to verify that safety behavior remained consistent as the interface evolved.

Most importantly, this project reinforced that an experience can be interactive without being exploitative. A product can use game-like mechanics while still helping users pause, reflect, and move toward healthier choices.

What's next for G.A.M.E. — Gambling Awareness Manic Education

The next step is to evolve this workshop prototype into a stronger Agents for Humans concept.

Potential next steps include:

  • adding an opt-in supportive agent that explains patterns in plain language without shaming the user;
  • allowing users to set personal pause plans and safer-next-step reminders;
  • adding carefully reviewed educational content with clinical, responsible-gambling, and Filipino cultural input;
  • replacing the quick-exit blank page with user-controlled links to appropriate support resources;
  • expanding accessibility testing to include usability sessions with real users;
  • creating privacy-preserving ways to export or share a report with a trusted counselor or support person;
  • evaluating whether an agent can offer timely, non-manipulative guidance while keeping the user in control of all decisions.

G.A.M.E. is still a local-only, provisional educational prototype. It is not treatment, crisis care, or a replacement for professional support. Its goal is to demonstrate a different design direction: technology that helps people understand persuasive systems and preserve their agency.

Built With

Share this project:

Updates