stepheneb / elm-2048

An Elm implementation of Gabriele Cirulli's 2048 game

Elm 2048

An Elm version of Gabriele Cirulli's 2048 game

Deployed to Github Pages: https://stepheneb.github.io/elm-2048/

MIT License

I wrote this to learn more about Elm.

Possibly helpful/useful/interesting features:

1. Save game state to local storage.

• JSON Encoding of Int, Bool, Union Type, and List of Tile records.
• Send game state to JavaScript where it is saved in local storage.

2. Load game state on application startup.

• JavaScript extracts game state from local storage, converts to JSON and passes to application via flags.
• Handle successful or failed JSON decoding of game state.

3. Model Tiles using Html.Keyed to allow CSS animations to work effectively.
4. Use Events.onKeyDown and Subscriptions to handle arrow keys for Tile movement.
   • Additional JavaScript code to prevent arrow keyboard events bubbling and causing page scroll.
5. Use JavaScript and incoming Port to turn touch interface swipes into Tile movements.
6. Game state record is nested one-level deep in Model.
   • Helper functions work with Update Msg branches to cleanly handle game state record manipulation and updates.

This project is bootstrapped with Create Elm App. Readme generated by elm-app: elm-app-readme.md).

Build dependencies:

• nvm
• yarn (or just npm)

To build locally:

% git clone https://github.com/stepheneb/elm-2048
% cd elm-2048
% nvm use
% yarn
% yarn build-css
% yarn start

Local development run:

% yarn start

If you are also changing the scss styles open a second shell and run:

$ yarn watch-css

Deploy to Github Pages:

% yarn build-deploy