This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.


This is a framework for creating multiplayer Guessing games by the boatloads, all within the comfort of Elm. Specify only what is unique to a game, write no logic on the back-end, and have it all wired up and ready to play.

elm-gameroom takes care of calling game rounds, generating problems and reconciling scores, as well as talking to either a generic real-time database such as Firebase (JS adapter provided), with have clients sort things out amongst themselves via WebRTC (JavaScript glue code provided).

The main game program

game : Spec problem guess -> Program Never (Model problem guess) (Msg problem guess)

Create a game program from a spec object, using any data type you can dream up for problem and guess. The spec is the declarative definition of the basic game logic and views powering your game.

As it is, this program doesn't work in multiplayer. For that, you have to set up outside communication with the back-end of your choice. See responsiblePorts for instructions.

Notice you don't have to supply any init, update or subscriptions field yourself. All that is taken care of, and you wind up with a working interface that allows you to create game rooms, invite others, and play. Timers, scoreboards etc. all come straight out of the box.

gameWith : List (Setting problem guess) -> Spec problem guess -> Program Never (Model problem guess) (Msg problem guess)

Game program with a list of settings. For example, this program:

    [ name "MyCoolGame"
    , roundDuration (10 * Time.second)
    , cooldownDuration (4 * Time.second)
    , clearWinner 100
    , noPeripheralUi
    { -- spec object from before

This produces a game with a custom name, custom round duration, custom cooldown duration between rounds, a clear winner at evaluation 100 (meaning no player can win unless their guess evaluates to exactly 100), and disable the peripheral ui - the score board, timer and winner notifications - so you can build those yourself in whichever design you prefer.

Game spec

type alias Spec problem guess = Spec.Spec problem guess

Define the unique bits and pieces to your game, all generalized over a type variable representing a problem, and one representing a guess. It's going to look a little heavy, but it'll make sense very quickly, I promise. Here it goes:

type alias Spec problem guess =
    { view : Context guess -> problem -> Html guess
    , evaluate : problem -> guess -> Float
    , problemGenerator : Random.Generator problem
    , problemEncoder : problem -> Encode.Value
    , problemDecoder : Decode.Decoder problem
    , guessEncoder : guess -> Encode.Value
    , guessDecoder : Decode.Decoder guess
  • view: The core of the user interface corresponding to the current game round, excluding all navigation, notifications and the score boards. Emits guesses. The first argument is a view context containing peripheral information such as window size, round time, already recorded guesses etc., and it's documented on its own. The second, main argument is the current game problem.
  • evaluate: given a problem and a guess, returns a numerical evaluation of the guess. The player with the highest evaluation wins a given round. Note that this is affected by the clearWinner setting, which specifies that only by attaining a certain highest evaluation can a player win.
  • problemGenerator: a random generator churning out new problems. If your problems are a simple list, there is a convenient helper.

Use these Msg and Model types to annotate your program when using the game or gameWith methods.

type alias Model problem guess = Models.Model problem guess

Model type alias for the game program.

type alias Msg problem guess = Messages.Msg problem guess

Msg type alias for the game program.


type alias Ports msg = Ports.Ports msg

The Ports record contains incoming and outgoing ports necessary for a guessing game, like so:

port outgoing : Json.Encode.Value -> Cmd msg

port incoming : (Json.Encode.Value -> msg) -> Sub msg

ports = { incoming = incoming, outgoing = outgoing }


basePath : String -> Setting problem guess

If your game doesn't start at the root route, you need to tell the package so the routing is done correctly, e.g. basePath "/game1". This is useful if you want to host multiple games on the same domain, and have them share data stores. This is how the demo site is set up :).

You can omit the leading slash or have an extra trailing slash. However, base paths with inner slashes such as /games/game1 are currently not supported.

name : String -> Setting problem guess

The name of your game, e.g. name "YouWillSurelyLose".

subheading : String -> Setting problem guess

A subheading to go under the name on the home page.

instructions : String -> Setting problem guess

Instructions displayed in the tutorial section.

unicodeIcon : String -> Setting problem guess

A unicode icon for your game.

clearWinner : Float -> Setting problem guess

In the most general case, players compete in getting as close as possible to a given goal. However, sometimes you might want to simplify the game and designate winners only if they attained a specific evaluation value specified by Spec.evaluate.

If you use the clearWinner setting, make sure evaluate does not depend on the timestamp.

roundDuration : Time.Time -> Setting problem guess

Set the duration of the game round (how long players have to make their guesses).

cooldownDuration : Time.Time -> Setting problem guess

Set the duration of the cooldown phase after a game round is over.

noInlineStyle : Setting problem guess

By default, the game interface renders an inline