Senior Application Developer for the Wharton Learning Lab

Jane Eisenstein's Posts

SIMPL Magic: Automatic Browser Page Updates

In multiplayer web-based games, all users should be able to see up-to-date game data without having to manually refresh their browsers. For example, players need to be notified when the game has moved from a phase in which they can submit decisions to a phase in which they cannot submit decisions. Monitoring the game state for such changes is often handled by the simulation’s front-end code.

One of the real pleasures of developing simulations using the Learning Lab-authored SIMPL framework is never needing to request fresh data in front-end code. That’s because SIMPL’s architecture ensures a game user’s browser page is always up to date. Curious how we managed to pull that off? Then keep reading!

First, it’s important to understand that each SIMPL game comprises three components:

  • SIMPL-Games-API (a service shared with other games that maintains the SIMPL database)
  • Model Service (defines and runs the game’s simulation model)
  • Front-end Server (provides the game’s user interface assets to the browser)

SIMPL-game-architecture

Architecture of a SIMPL game

 

Our SIMPL-Games-API service manages the SIMPL database. It provides a REST API used by the game’s model service.

The game’s model service defines the game’s simulation model and handles running the simulation and database updates. It is implemented in Python using classes provided by our SIMPL-Modelservice package.

The game’s front-end user interface code is implemented in Javascript using SIMPL game front-end functions provided by our SIMPL-React JavaScript library (built using React and Redux).

These SIMPL game components work together in concert to ensure that game users consistently see the current state-of-the-game data stored in the SIMPL database.

Here’s how it works: Each time the model service updates the database using the SIMPL-Games-API’s REST API, a webhook is triggered that notifies SIMPL-Modelservice functions of the update. SIMPL-Modelservice code then pushes an update notification to each game user’s browser via WAMP. There, SIMPL-React code handles updating the browser’s Redux store state, automatically updating the React components.

And there you have it — the user is automagically guaranteed to see fresh data, without game authors having to write a line of code! It works like magic, but it’s actually quite SIMPL

 

For more details, please see our SIMPL Framework docs.

Recipe for Quick Coding: How to Cook Up a Good Glossary, Fast

glossaryTwo weeks before the Learning Lab’s new Customer Centricity simulation was set to go live for the first time in a Wharton MBA class, I was asked to add a CRM glossary to it – one that could grow as more data reports became available to a player throughout the course of the game.

Suffice it to say this was a quite a task given the timeframe. Nevertheless, I approached the challenge with an open mind and a lot of quick thinking. Viewing it as a somewhat exploratory endeavor, I managed to meet the deadline and our sim made its scheduled debut with a fresh-baked working glossary. Now, having devised an efficient process for whipping one up on the fly, I’d like to share with you my recipe:

Read more ›