DEV Community: Mickey

Creating an Elm Project with Snowpack

Mickey — Sat, 28 Nov 2020 17:15:49 +0000

Intro

There is a new emerging trend of a development setup in the frontend world. As browsers now natively support esm modules, we don't need to use bundlers like Webpack, Parcel or Rollup.

Projects like Snowpack, Vite (for Vue), Svite (for Svelte) and recently SvelteKit (official one for Svelte) are starting to gain attention.

By skipping the bundling stage, the browser is immediately updated with the changes in the source files, without having to wait for re-bundling.

Snowpack

Described in its own words as:

... a lightning-fast frontend build tool, designed for the modern web.

Snowpack has an out-of-the-box support for TypeScript, JSX, CSS Modules and more. It also can be extended with plugins, and there is a plugin for Elm: Snowpack Elm Plugin by Marc Walter. Thank you Marc!

Today I would like to share a setup of Snowpack with Elm and TailwindCSS - a very popular utility-first CSS framework.

Project Setup

Let's create our project from scratch, as it is described in the documentation' "Starting a New Project"

mkdir elm-snowpack
cd elm-snowpack
npm init -y
npm install snowpack --save-dev

Those will perform several things:

create elm-snowpack folder
cd into it
create package.json with predefined fields without prompting us (the -y or --yes)
install Snowpack version 3.x.y.

Now let's add index.html to the root of our project with the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Elm with Snowpack" />
    <title>Elm with Snowpack</title>
  </head>
  <body>
    <h1>Welcome to Snowpack!</h1>
  </body>
</html>

and add a start script entry to the package.json file:

  "scripts": {
    "start": "snowpack dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

with that ready let's start the Snowpack development server:

npm run start

We see some Snowpack's output:

The browser opens automatically (if it will not - open it manually and navigate to http://localhost:8080).

And we see our beautiful application:

Following the documentation, let's add an index.js and index.css files.

Create both those files in the root of our project:

`index.js`

console.log('Hello World!');

`index.css`

body {
  font-family: sans-serif;
}

And update index.html to include them:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Elm with Snowpack" />
    <!-- add index.css -->
    <link rel="stylesheet" type="text/css" href="/index.css" />
    <title>Elm with Snowpack</title>
  </head>
  <body>
    <h1>Welcome to Snowpack!</h1>
    <!-- add index.js -->
    <script type="module" src="/index.js"></script>
  </body>
</html>

After saving all the files, the browser is updated with our changes.

Reorganizing

Having all the files in the root of our project is not practical. Usually source files reside in src folder. So let's reorganize our files.

Stop the Snowpack development server. Create an src folder and move index.js and index.css there. Then create public folder and move index.html there.

elm-snowpack/
  node_modules/
  public/
    index.html
  src/
    index.css
    index.js
  package.json
  package-lock.json

Since we have moved our files around, we need to inform Snowpack where to find them. Snowpack can be configured from the command line or by adding snowpack.config.js to the project folder. So let's add this file in the root of our project and add the default content from the documentation:

module.exports = {
  plugins: [
    /* ... */
  ],
  installOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
  proxy: {
    /* ... */
  },
  mount: {
    /* ... */
  },
  alias: {
    /* ... */
  },
};

This file can also be added automatically by Snowpack:

npx snowpack init

The entry we are interested in is mount and the example setting in the documentation is exactly suits our setup:

// ...omitted
  {
    "mount": {
      "src": "/dist",
      "public": "/"
    }
  }
// ...omitted

You can look for the examples of how this mapping works in the documentation, but basically it maps requests of /dist/* to serve files under src/* (index.js, index.css) and requests of /* to serve files under public/* (index.html).

According to this mapping our index.html will be server from /public folder when requested as / and it's good, but our source files under src/ folder should be requested from /dist. So let's change their URIs in the index.html:

<link rel="stylesheet" type="text/css" href="/dist/index.css" />

<script type="module" src="/dist/index.js"></script>

`index.html`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Elm with Snowpack" />
    <!-- update URI to index.css -->    
    <link rel="stylesheet" type="text/css" href="/dist/index.css" />
    <title>Elm with Snowpack</title>
  </head>
  <body>
    <h1>Welcome to Snowpack!</h1>
    <!-- update URI to index.js -->
    <script type="module" src="/dist/index.js"></script>
  </body>
</html>

Starting our development server should show our application as before.

Adding Elm Support

Great, we have an empty application running and the changes that we make are propagated to the browser with lightning speed!

Let's add Elm support now.

As I mentioned in the beginning - There is a Snowpack Elm Plugin by Marc Walter.

We need to install it (as a dev dependency using -D flag):

npm install -D snowpack-plugin-elm

And add it to the plugins entry in the snowpack.config.js:

module.exports = {
  // ...
  plugins: ['snowpack-plugin-elm'],
  // ...
}

as it is described in the plugin's repo.

Good, now let's add src/Main.elm with the mandatory "Hello World!":

module Main exposing (main)

import Html exposing (Html)

main =
    Html.text "Hello, World!"

and import our Elm application in src/index.js:

import Elm from './Main.elm';

console.log(Elm);

console.log('Elm and Tailwind with Snowpack');

If we run our application now (or it was already running) we'll see an error message that, very rightfully, tells us that we didn't initialize an Elm project with elm.json file:

So let's do exactly that:

elm init

Click Enter to agree with the prompt. This will create the elm.json file.

Running the application again shows no errors. And we see in the console that the Elm application is indeed created:

The wiring of the Elm application is described in the guide's JavaScript Interop/Embedding in HTML. We can copy the code from there to our src/index.js (I have deleted all the console.log):

import Elm from './Main.elm';

const app = Elm.Main.init({
  node: document.getElementById('app'),
});

We also need to update our index.html file to have a placeholder for our Elm application:

<div id="app"></div>

So now our index.html looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Elm with Snowpack" />  
    <link rel="stylesheet" type="text/css" href="/dist/index.css" />
    <title>Elm with Snowpack</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/dist/index.js"></script>
  </body>
</html>

After saving the file the browser is instantly updated and shows the "Hello, World!" - our application is working!

Try editing the text and saving it. The browser updates really fast!

Adding Tailwind CSS

Now let's add a Tailwind CSS to our project. We partially follow the Installing Tailwind CSS as a PostCSS plugin as it described in the documentation, only instead of postcss we'll install postcss-cli, that Snowpack needs.

npm install -D tailwindcss autoprefixer postcss-cli

The default presets of Tailwind CSS are absolutely sufficient to start playing with prototyping components/design. But in order to further customize Tailwind CSS we will need a configuration file - tailwind.config.js. So as an optional step we can create it by running:

npx tailwindcss init

Let's replace the content of our src/index.css with the standard TailwindCSS presets:

@tailwind base;

@tailwind components;

@tailwind utilities;

Let's also create postcss.config.js file:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

We tell PostCSS to use tailwindcss and autoprefixer (that is another plugin that add browser specific prefixes for the relevant CSS rules).

Good, now we need to tell Snowpack to execute the PostCSS when needed. Following the official guide on PostCSS, update snowpack.config.js, plugins entry:

plugins: [
  [
    '@snowpack/plugin-build-script',
    { cmd: 'postcss', input: ['.css'], output: ['.css'] },
  ],
  'snowpack-plugin-elm',
],

And that should enable TailwindCSS in our application.

NOTE: There is also an official way to setup TailwindCSS with Snowpack, but it did not work for me.

I took a chunk of user card HTML from the Tailwind CSS website's (version 1.9) landing page and pasted it in our public/index.html. In addition, I have updated the avatar image with an online placeholder and added shadow-lg mx-10 to the <div> in order to see the shadow and for the card not to spread all the way to the edges of the window:

<!-- ... -->
<body>
  <div id="app"></div>
  <div class="md:flex bg-white rounded-lg p-6 shadow-lg m-10">
    <img
      class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
      src="https://i.pravatar.cc/100?img=1"
    />
    <div class="text-center md:text-left">
      <h2 class="text-lg">Erin Lindford</h2>
      <div class="text-purple-500">Product Engineer</div>
      <div class="text-gray-600">erinlindford@example.com</div>
      <div class="text-gray-600">(555) 765-4321</div>
    </div>
  </div>
<!-- ... -->

And after the page updates, we see Tailwind CSS in action:

This style is responsive. Try narrowing the browser's window and see the card changes:

We can re-create this HTML in our Elm application and delete the raw HTML:

module Main exposing (main)

import Browser
import Html exposing (Html, div, h2, img, text)
import Html.Attributes exposing (class, src)


type alias User =
    { fullName : String
    , position : String
    , email : String
    , phone : String
    , avatar : String
    }


erinLindford : User
erinLindford =
    { fullName = "Erin Lindford"
    , position = "Product Engineer"
    , email = "erinlindford@example.com"
    , phone = "(555) 765-4321"
    , avatar = "https://i.pravatar.cc/100?img=1"
    }


userCardView : User -> Html msg
userCardView user =
    div [ class "md:flex bg-white rounded-lg p-6 shadow-lg m-10" ]
        [ img
            [ class "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
            , src user.avatar
            ]
            []
        , div
            [ class "text-center md:text-left" ]
            [ h2 [ class "text-lg" ] [ text user.fullName ]
            , div [ class "text-purple-500" ] [ text user.position ]
            , div [ class "text-gray-600" ] [ text user.email ]
            , div [ class "text-gray-600" ] [ text user.phone ]
            ]
        ]


update : msg -> User -> User
update _ model =
    model


view : User -> Html msg
view model =
    userCardView model


main : Program () User msg
main =
    Browser.sandbox { init = erinLindford, update = update, view = view }

Delete the raw HTML from index.html and refresh the page - the result is the same as before.

And at last we have a nice development setup with Snowpack, Elm and TailwindCSS.

Although the step-by-step tutorial may seem long, it's pretty quick to re-create this setup.

Hope you enjoyed creating our small project and find this useful.

Thank you for reading.

Writing A Word Memory Game In Elm - Part 5: More Randomness And More Game

Mickey — Fri, 31 May 2019 12:26:33 +0000

This is part 5 of the series "Writing A Word Memory Game In Elm", find:

Part 1: Setting Up an Elm Application With Parcel
Part 2: Modeling And Building a Basic Word Memory Game
Part 3: Rethinking the Model
Part 4: Spicing Things Up With Randomness
Part 5 - More Randomness And More Game

Playing with the same sentence all the time is pretty boring. The actual game needs to have many sentences to choose from. For example:

sentences : List String
sentences =
    [ "Two wrongs don't make a right."
    , "The pen is mightier than the sword."
    , "When in Rome, do as the Romans."
    , "Keep your friends close and your enemies closer."
    , "You can't make an omelet without breaking a few eggs."
    , "The grass is always greener on the other side of the hill."
    , "You can lead a horse to water, but you can't make him drink."
    , "If you want something done right, you have to do it yourself."
    ]

We can simplify the sentences by removing all the punctuation:

sentences : List String
sentences =
    [ "Two wrongs don't make a right"
    , "The pen is mightier than the sword"
    , "When in Rome do as the Romans"
    , "Keep your friends close and your enemies closer"
    , "You can't make an omelet without breaking a few eggs"
    , "The grass is always greener on the other side of the hill"
    , "You can lead a horse to water but you can't make him drink"
    , "If you want something done right you have to do it yourself"
    ]

To choose a sentence at random we can use elm/Random library to generate a random number from 0 to the length of our sentences list and take a sentence at this index (need to convert the List into an Array to use an index).

Or we can use elm-community/random-extra/Random-Extra#sample/ that will choose an element uniformly at random. We already have Random-Extra so let's use it:

import Random.Extra as Random

-- omitted

chooseSentence : List String -> Cmd Msg
chooseSentence sentences_ =
    Random.sample sentences_
        |> Random.map (Maybe.withDefault "")
        |> Random.generate SentenceChosen

In SentenceChosen handler we can call chooseWords command and continue as it was before.

type Msg
    = WordChanged Int String
    | SentenceChosen String
    | WordsChosen (List ( Int, Int ))
    | NewGame

We need also to introduce a new state Initialising for modeling the game start:

type GameState
    = Initializing
    | Started StateStarted
    | Playing StatePlaying
    | Win StateWin

Now let's implement the SentenceChosen branch of update function:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of

-- omitted

        SentenceChosen sentenceString ->
            case model of
                Initializing ->
                    let
                        sentence : Words
                        sentence =
                            generateSentence sentenceString
                    in
                    ( Started (StateStarted sentenceString), chooseWords sentence )

                Started _ ->
                    ( model, Cmd.none )

                Playing _ ->
                    ( model, Cmd.none )

                Win _ ->
                    ( model, Cmd.none )

We practically copied the code from the init function. And init itself becomes very short:

init : () -> ( Model, Cmd Msg )
init _ =
    ( Initializing, chooseSentence sentences )

We set the current state of the game to Initializing and invoke chooseSentence command by passing it the list of sentences.

The compiler informs us about non exhaustive cases for GameState in the update function, so let's address that:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        WordChanged index wordString ->
            let
                model_ =
                    case model of
                        Started { sentence } ->

-- omitted

                        Initializing ->
                            model

                        Started _ ->
                            model

                        Win _ ->
                            model
            in
            ( model_, Cmd.none )

-- omitted

        WordsChosen sortIndexes ->
            let
                model_ =
                    case model of
                        Started { currentSentence } ->
                            let
                                sentence : Words
                                sentence =
                                    generateSentence currentSentence

-- omitted

                            Playing (StatePlaying sentence_)

                        Initializing ->
                            model

                        Playing _ ->
                            model

                        Win _ ->
                            model
            in
            ( model_, Cmd.none )

We made a couple of changes here:

The first branch was Playing, now it's Started and we added a calculation of sentence inside the let block.
The 3rd branch was Started, now it's Playing.

Thus the flow is more correct:

Initialiazing - choose random sentence
Started - choose random words
Playing
Win

Now the view function. Let's add a viewInitilizing view:

viewInitializing : Html msg
viewInitializing =
    p []
        [ text "Initializing..." ]

and call it from view function:

view : Model -> Html Msg
view model =
    let
        currentView =
            case model of
                Initializing ->
                    viewInitializing

                Playing { sentence } ->
                    viewGame sentence

                Started { currentSentence } ->
                    viewStarted currentSentence

                Win { currentSentence } ->
                    viewWin currentSentence
    in
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ currentView ]
            ]
        ]

The game compiles and now each time a new game is starting - it picks a random sentence!

The current progress is saved in the repo under a Tag v7.0 https://github.com/mickeyvip/words-memory-game/tree/v7.0.

Stay tuned for Part 6 where we will add a difficulty level and a countdown for the sentence preview.

Writing A Word Memory Game In Elm - Part 4: Spicing Things Up With Randomness

Mickey — Thu, 25 Apr 2019 13:12:09 +0000

This is part 4 of the series "Writing A Word Memory Game In Elm", find:

Part 1: Setting Up an Elm Application With Parcel
Part 2: Modeling And Building a Basic Word Memory Game
Part 3: Rethinking the Model
Part 4: Spicing Things Up With Randomness
Part 5 - More Randomness And More Game

Choosing the same words every time is pretty boring. Let's make our game choose random words each time.

Randomness is a side effect and does not fit into functional programming concepts, since generating a random number returns something different each time.

In order to make our application handle side effects we need to upgrade it from Browser.sandbox to Browser.element which will add commands and subscriptions for interacting with the outside world.

Let's change our main definition to use Browser.element:

main : Program () Model Msg
main =
    Browser.element
        { view = view
        , init = init
        , update = update
        , subscriptions = subscriptions
        }

There are now several changes we need to make in order for our current application to compile:

init expects a function instead of Model, so we'll add the init function
subscriptions expects a function that we'll add
update returns a Tuple (Model, Cmd Msg) instead of a Model

Let's follow the compiler and fix the errors.

We'll start by adding the subscriptions function. We actually will not need subscriptions for now, so we can return Sub.none, meaning no subscriptions:

---- SUBSCRIPTIONS ----


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

Now update - let's change the signature to

update : Msg -> Model -> ( Model, Cmd Msg )

and return the expected tuple (last line):

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        WordChanged index wordString ->
            let
                updateWord : Int -> Word -> Word
                updateWord wordIndex word =
                    case word of
                        HiddenWrd hiddenWord ->
                            if wordIndex == index then
                                HiddenWrd
                                    { hiddenWord
                                        | playerChoice = PlayerChoice wordString
                                    }

                            else
                                word

                        _ ->
                            word

                newSentence : Words
                newSentence =
                    List.indexedMap updateWord model.sentence
            in
            ( { model | sentence = newSentence }, Cmd.none )

The last one is the init function. It takes flags which we will not be using and can just ignore by declaring the first argument as a unit type (). It returns a Tuple (Model, Cmd Msg) similar to update. We will use our initialModel and Cmd.none meaning no commands to run:

init : () -> ( Model, Cmd Msg )
init _ =
    ( initialModel, Cmd.none )

This should make the application compile and the game should function as before.

The current progress is saved in the repo under a Tag v3.0:
https://github.com/mickeyvip/words-memory-game/tree/v3.0.

How do we choose random words from the list of words? Elm guide has an example of Random usage: https://guide.elm-lang.org/effects/random.html, and elm/random package has a nice API for generating random numbers.

I have found that Random.list might be useful: we can produce 3 random values from 0 to the length of words and take words at those indexes.

indexes : Int -> Int -> Random.Generator (List Int)
indexes quantity listLength =
    Random.list quantity (Random.int 0 (listLength - 1))

Unfortunately, it may produces a list with repeated values. We can overcome this problem by, for example, keeping generating new random values until we have the required number of unique values. But in a search for simpler or "already made" solution I have found elm-community/random-extra package, which, as elm/random documentation says, may some day be merged with elm/random.

elm-community/random-extra has Random.List module which exposes a shuffle function which, as its name states, shuffles a list. So we can apply it on our list of words and take the first 3. Sounds simple enough.

Let's install it (stop the app if it is running):

$ elm install elm-community/random-extra

Accept the installation prompt by hitting y (or "enter").

We also need to have elm/random as a direct dependency, while up until now had been installed as an indirect dependency. When we install it, Elm installer will prompt us to move it from indirect to direct dependencies. Choose 'y':

$ elm install elm/random
I found it in your elm.json file, but in the "indirect" dependencies.
Should I move it into "direct" dependencies for more general use? [Y/n]:
Dependencies loaded from local cache.
Dependencies ready!

As wee see in the documentation, calling shuffle produces a Generator (List a), which is only a description of what we want to do. To actually execute the Generator we need to call Random.generate which in turn produces a Command, as described in the Random example in the Elm guide we saw earlier.

What we can do is take a list of indexes [0, 1, 2, 3...], shuffle this list and take the first 3 indexes. Those will be the indexes of the hidden words; their placement in the new list will be the sortKeys.

Let's add a function that will produce a Command:

import Random
import Random.List

--- COMMANDS ----


chooseWords : Words -> Cmd Msg
chooseWords chosenSentence =
    List.range 0 (List.length chosenSentence - 1)
        |> Random.List.shuffle
        |> Random.map (List.take 3)
        |> Random.map (List.indexedMap Tuple.pair)
        |> Random.generate WordsChosen

The List.range 0 (List.length chosenSentence - 1) will give us the [0, 1, 2, 3, 4, 5, 6] (since we have 7 words in our sentence).
The shuffle will reorder the list.
The List.take 3 will take first 3 items from the reordered list.
The List.indexedMap Tuple.pair will map the list of word indexes to a List of Tuples where the first index is the sortKey and the second index is the index of the word. For example [(0, 1), (1, 6), (2, 3)].
Then we execute the command by calling Random.generate and passing it the new message WordsChosen.

To manipulate the result of the Random we use Random.map - similar to map of other types.

Let's add a new message, WordsChosen, that gets a list of chosen indexes:

type Msg
    = WordChanged Int String
    | WordsChosen (List (Int, Int))

Now the compiler will guide us to handle the new message in the update function:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of

        -- omitted

        WordsChosen sortIndexes ->

I didn't find any easier way to update the sentence so what I did is as follows: List.indexMap the current sentence, so we have a word index and a word.

        WordsChosen sortIndexes ->
            let
                sentence =
                    List.indexedMap
                        (\wordIndex word ->

-- omitted

                    model.sentence
            in
            ( { model | sentence = sentence }, Cmd.none )

Look if there is a sortIndex pair for a current word (wordIndex equals the second member of the Tuple):

-- omitted
                sentence =
                    List.indexedMap
                        (\wordIndex word ->
                            let
                                hiddenIndex =
                                    List.filter
                                        (\( _, originalWordIndex ) ->
                                            originalWordIndex == wordIndex
                                        )
                                        sortIndexes

-- omitted

If hiddenIndex is not empty, we need to replace current word with HiddenWord, and the sortKey will be the first member of the Tuple. Else we need to leave the current word as is:

-- omitted

                                newWord =
                                    case List.head hiddenIndex of
                                        Just ( sortKey, _ ) ->
                                            HiddenWrd
                                                { sortKey = sortKey
                                                , answer = Answer (wordToString word)
                                                , playerChoice = PlayerChoice ""
                                                }

                                        Nothing ->
                                            word
-- omitted

Here is the full code for the WordsChosen message handler:

        WordsChosen sortIndexes ->
            let
                sentence =
                    List.indexedMap
                        (\wordIndex word ->
                            let
                                hiddenIndex =
                                    List.filter
                                        (\( _, originalWordIndex ) ->
                                            originalWordIndex == wordIndex
                                        )
                                        sortIndexes

                                newWord =
                                    case List.head hiddenIndex of
                                        Just ( sortKey, _ ) ->
                                            HiddenWrd
                                                { sortKey = sortKey
                                                , answer = Answer (wordToString word)
                                                , playerChoice = PlayerChoice ""
                                                }

                                        Nothing ->
                                            word
                            in
                            newWord
                        )
                        model.sentence
            in
            ( { model | sentence = sentence }, Cmd.none )

Let's also set all the words as SentenceWord:

initialModel : Model
initialModel =
    { sentence =
        [ SentenceWrd "The"
        , SentenceWrd "pen"
        , SentenceWrd "is"
        , SentenceWrd "mightier"
        , SentenceWrd "than"
        , SentenceWrd "the"
        , SentenceWrd "sword"
        ]
    }

We also need to update our init function to execute the chooseWords command:

init : () -> ( Model, Cmd Msg )
init _ =
    ( initialModel, chooseWords initialModel.sentence )

Refresh the page - we should see our game is working and each refresh makes it choose different words!

Let's add a nice "New Game" button so we don't need to refresh the page for a new game:

view : Model -> Html Msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ viewOriginalSentence model.sentence
                    , viewSentence model.sentence
                    ]
                , viewHiddenWords (hiddenWords model.sentence)
-- new code
                , div [ class "is-clearfix" ]
                    [ button
                        [ class "button is-info is-pulled-right"
                        , onClick NewGame
                        ]
                        [ text "New Game" ]
                    ]
                ]
            ]
        ]

Let's add NewGame message:

type Msg
    = WordChanged Int String
    | WordsChosen (List ( Int, Int ))
    | NewGame

And handle it in the update function:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of

        -- omitted

        NewGame ->
            ( initialModel, chooseWords initialModel.sentence )

And after the page is refreshed, we can click "New Game" to restart the game.

The current progress is saved in the repo under a Tag v4.0 https://github.com/mickeyvip/words-memory-game/tree/v4.0.

Indicating Winning

It would be a good time to show the player that the sentence is correct.

After each change, we can check if every HiddenWord has a playerChoice that is equal to answer. If it is the case - we can render the "You Win" view.

Let's add a function that will check if there is a win:

isWin : Words -> Bool
isWin sentence =
    List.all
        (\word ->
            case word of
                SentenceWrd _ ->
                    True

                HiddenWrd { answer, playerChoice } ->
                    answerToString answer == playerChoiceToString playerChoice
        )
        sentence

List.all will return True if for all of its members the predicate function returns True. If the word is SentenceWrd, there is nothing to check and we just return True. If the word is HiddenWrd, we return the result of comparing answer and playerChoice.

We can shorten isWin: we only interested in HiddenWords and we already have a function that takes a Words and returns List HiddenWord, which is hiddenWords. Let's use it:

isWin : Words -> Bool
isWin sentence =
    List.all
        (\{ answer, playerChoice } ->
            answerToString answer == playerChoiceToString playerChoice
        )
        (hiddenWords sentence)

And if isWin handles HiddenWords only, we don't need to send it Words at all:

isWin : List HiddenWord -> Bool
isWin hiddenWordList =
    List.all
        (\{ answer, playerChoice } ->
            answerToString answer == playerChoiceToString playerChoice
        )
        hiddenWordList

That looks much better.

We can get even fancier and remove the argument altogether and use currying ability of Elm, similar to how JSON decoders are declared:

isWin : List HiddenWord -> Bool
isWin =
    List.all
        (\{ answer, playerChoice } ->
            answerToString answer == playerChoiceToString playerChoice
        )

We are now returning a function that waits for List HiddenWord argument. This can be a little confusing for newcomers (like myself) though.

When the player wins, let's show the sentence and the "You Win!" message, and hide the sentence with drop-downs and the list of words. To make this easier we can refactor the main view to show viewGame or viewWin views depending on whether the win is True or False:

view : Model -> Html Msg
view model =
    let
        win : Bool
        win =
            isWin <| hiddenWords model.sentence


        currentView : Html Msg
        currentView =
            if win then
                viewWin model.sentence

            else
                viewGame model.sentence
    in
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ currentView ]
            ]
        ]


viewGame : Words -> Html Msg
viewGame sentence =
    div []
        [ viewSentence sentence
        , viewHiddenWords (hiddenWords sentence)
        ]


viewWin : Words -> Html Msg
viewWin sentence =
    div []
        [ div [ class "notification is-primary" ]
            [ h3 [ class "title is-3 has-text-centered" ] [ text "You Win!" ]
            ]
        , h4
            [ class "title is-4 has-text-centered" ]
            [ viewOriginalSentence sentence ]
        , div [ class "is-clearfix" ]
            [ button
                [ class "button is-info is-pulled-right"
                , onClick NewGame
                ]
                [ text "New Game" ]
            ]
        ]

This should be pretty straightforward and need no explanation. On the viewWin view we have a "You Win!" message, the sentence and the "New Game" button. I have also added is-big class to the title to make it bigger. On the viewGame view we show the game as before.

The current progress is saved in the repo under a Tag v5.0 https://github.com/mickeyvip/words-memory-game/tree/v5.0.

Generating `Sentence` Automatically

Until now we had manually set sentence, but in the actual game there will be many sentences as Strings and we want to be able to generate sentence from them.

How can we do it? We can use String.words. That will return a list of words that we can turn into what we need.

Let's first change our Model to have currentSentence : String, set it to "The pen is mightier than the sword" and set sentence to be an empty list:

type alias Model =
    { currentSentence : String
    , sentence : Words
    }


initialModel : Model
initialModel =
    { currentSentence = "The pen is mightier than the sword"
    , sentence = []
    }

Now we'll add a generateSentence function that will generate the sentence with the help of getWords:

getWords : String -> List String
getWords sentence =
    sentence
        |> String.words

generateSentence : String -> List Word
generateSentence sentenceString =
    sentenceString
        |> String.words
        |> List.map SentenceWrd

Let's update our init function to invoke generateSentence:

init : () -> ( Model, Cmd Msg )
init _ =
    let
        sentence : Words
        sentence =
            generateSentence initialModel.currentSentence

        model : Model
        model =
            { initialModel | sentence = sentence }
    in
    ( model, chooseWords sentence )

The game should work as before, only now the generating of the sentence is automatic.

However, when winning the game and clicking "New Game" we see an empty box. This is because we reset the model to initialModel which has sentence set to []. Let's change the update function to call init that generates the sentence and executes chooseWords command:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of

        -- omitted
        NewGame ->
            init ()

And now we can start a new game!

Refactoring `Model` Into Game States

We again got to a state that can get out of sync. The currentSentence is needed only for generating the sentence and we have to set sentence to [] at the beginning of each game because it is on our Model, but actually it is not needed for the first step.

Let's redefine our Model so it has 2 states:

Started - will have only the currentSentence : String
Playing - will have only the sentence : Words

The game will start in Started state and call generateSentence. After that the state will be changed to Playing.

type alias StateStarted =
    { currentSentence : String }


type alias StatePlaying =
    { sentence : Words
    }


type GameState
    = Started StateStarted
    | Playing StatePlaying

Now let's update our Model to be of type GameState:

type alias Model =
    GameState

Our initialModel can be set to:

initialModel : Model
initialModel =
    Started (StateStarted "The pen is mightier than the sword")

No unnecessary sentence in the initial state!

The init function becomes a little bit more verbose:

init : () -> ( Model, Cmd Msg )
init _ =
    let
        ( model, cmd ) =
            case initialModel of
                Started { currentSentence } ->
                    let
                        sentence : Words
                        sentence =
                            generateSentence currentSentence
                    in
                    ( Playing (StatePlaying sentence), chooseWords sentence )

                Playing _ ->
                    ( initialModel, Cmd.none )
    in
    ( model, cmd )

We now need to pattern match our Model to know in which game state the game is right now. If it's in Started state, we will generate the sentence and execute chooseWords. In the other case (which at this point should not happen), we will return the initialModel as is and not execute any command.

In the update function we also need to take the game state into account:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        WordChanged index wordString ->
            let
                model_ =
                    case model of
                        Playing { sentence } ->
                            let
                                updateWord : Int -> Word -> Word
                                updateWord wordIndex word =
                                    case word of
                                        HiddenWrd hiddenWord ->
                                            if wordIndex == index then
                                                HiddenWrd
                                                    { hiddenWord
                                                        | playerChoice = PlayerChoice wordString
                                                    }

                                            else
                                                word

                                        _ ->
                                            word

                                newSentence : Words
                                newSentence =
                                    List.indexedMap updateWord sentence
                            in
                            Playing (StatePlaying newSentence)

                        Started _ ->
                            model
            in
            ( model_, Cmd.none )

-- omitted

This change should be pretty straightforward: if the game is in Playing state - extract the sentence from the state, update it and return Playing state with the updated newSentence, otherwise - leave the model as is.

The same thing for WordsChosen:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of

-- omitted

        WordsChosen sortIndexes ->
            let
                model_ =
                    case model of
                        Playing { sentence } ->
                            let
                                sentence_ =
                                    List.indexedMap
                                        (\wordIndex word ->
                                            let
                                                hiddenIndex =
                                                    List.filter
                                                        (\( _, originalWordIndex ) ->
                                                            originalWordIndex == wordIndex
                                                        )
                                                        sortIndexes

                                                newWord =
                                                    case List.head hiddenIndex of
                                                        Just ( sortKey, _ ) ->
                                                            HiddenWrd
                                                                { sortKey = sortKey
                                                                , answer = Answer (wordToString word)
                                                                , playerChoice = PlayerChoice ""
                                                                }

                                                        Nothing ->
                                                            word
                                            in
                                            newWord
                                        )
                                        sentence
                            in
                            Playing (StatePlaying sentence_)

                        Started _ ->
                            model
            in
            ( model_, Cmd.none )

The view has to be updated also:

view : Model -> Html Msg
view model =
    let
        currentView =
            case model of
                Playing { sentence } ->
                    let
                        win : Bool
                        win =
                            isWin <| hiddenWords sentence
                    in
                    if win then
                        viewWin sentence

                    else
                        viewGame sentence

                Started { currentSentence } ->
                    viewStarted currentSentence
    in
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ currentView ]
            ]
        ]

When the game state is Started - we will render viewStarted view that will just show the current sentence:

viewStarted : String -> Html msg
viewStarted currentSentence =
    p []
        [ text currentSentence ]

Although we will not see it, since the game goes into Playing state after the init function, but we will use it in the future.

Now the game compiles and works as before, while the Model is much better designed.

It actually looks logical to have another playing state - Win. Thus the logic of winning will reside in the update function and not in the view like it is now, which feels odd.

type alias StateWin =
    { currentSentence : String
    }


type GameState
    = Started StateStarted
    | Playing StatePlaying
    | Win StateWin

The init:

init : () -> ( Model, Cmd Msg )
init _ =
    let
        ( model, cmd ) =
            case initialModel of
                Started { currentSentence } ->
                    let
                        sentence : Words
                        sentence =
                            generateSentence currentSentence
                    in
                    ( Playing (StatePlaying sentence), chooseWords sentence )

                Playing _ ->
                    ( initialModel, Cmd.none )

                Win _ ->
                    ( initialModel, Cmd.none )
    in
    ( model, cmd )

Then update:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        WordChanged index wordString ->
            let
                model_ =
                    case model of
                        Playing { sentence } ->
                            let
                                updateWord : Int -> Word -> Word
                                updateWord wordIndex word =
                                    case word of
                                        HiddenWrd hiddenWord ->
                                            if wordIndex == index then
                                                HiddenWrd
                                                    { hiddenWord
                                                        | playerChoice = PlayerChoice wordString
                                                    }

                                            else
                                                word

                                        _ ->
                                            word

                                newSentence : Words
                                newSentence =
                                    List.indexedMap updateWord sentence

                                isWin_ =
                                    isWin (hiddenWords newSentence)
                            in
                            if isWin_ then
                                Win (StateWin (sentenceToString newSentence))

                            else
                                Playing (StatePlaying newSentence)

                        Started _ ->
                            model

                        Win _ ->
                            model
            in
            ( model_, Cmd.none )

        WordsChosen sortIndexes ->
            let
                model_ =
                    case model of
                        Playing { sentence } ->

-- omitted

                        Win _ ->
                            model
            in
            ( model_, Cmd.none )

We added the winning check to the Playing case. If there is a winning, we will change the state to Win. If the game is in Win state already - just return current model similarly to Started case.

We added sentenceToString function that converts Words to String:

sentenceToString : Words -> String
sentenceToString sentence =
    sentence
        |> List.map wordToString
        |> String.join " "

An we can reuse it in viewOriginalSentence:

viewOriginalSentence : Words -> Html Msg
viewOriginalSentence words =
    p
        [ class "has-text-centered" ]
        [ text <| sentenceToString words ]

The view is now much simpler:

view : Model -> Html Msg
view model =
    let
        currentView =
            case model of
                Playing { sentence } ->
                    viewGame sentence

                Started { currentSentence } ->
                    viewStarted currentSentence

                Win { currentSentence } ->
                    viewWin currentSentence
    in

--- omitted

Now we see that we need to refactor viewWin to accept String and not Words:

viewWin : String -> Html Msg
viewWin sentence =
    div []
        [ div [ class "notification is-primary" ]
            [ h3 [ class "title is-3 has-text-centered" ] [ text "You Win!" ]
            ]
        , h4
            [ class "title is-4 has-text-centered" ]
            [ p
                [ class "has-text-centered" ]
                [ text sentence ]
            ]
        , div [ class "is-clearfix" ]
            [ button
                [ class "button is-info is-pulled-right"
                , onClick NewGame
                ]
                [ text "New Game" ]
            ]
        ]

And there is no need for viewOriginalSentence, since we just use the same code that generates HTML inside `viewWin, so just delete it.

The game should compile and work as before, but now we have a 3 specific game states with data relevant to each state.

The current progress is saved in the repo under a Tag v6.0 https://github.com/mickeyvip/words-memory-game/tree/v6.0.

Stay tuned for the upcoming post, where we will have more sentences to choose from for each new game!

Writing A Word Memory Game In Elm - Part 3: Rethinking the Model

Mickey — Thu, 11 Apr 2019 09:47:55 +0000

This is part 3 of the series "Writing A Word Memory Game In Elm", find:

Part 1: Setting Up an Elm Application With Parcel
Part 2: Modeling And Building a Basic Word Memory Game
Part 3: Rethinking the Model
Part 4: Spicing Things Up With Randomness
Part 5 - More Randomness And More Game

The game works now. Cool. But looking at the current Model

type Word
    = SentenceWord ( Int, String )
    | HiddenWord ( Int, String )


type alias Words =
    List Word


type alias Model =
    { sentence : String
    , chosenWords : Words
    , chosenSentence : Words
    }

we can spot several problems:

The chosenSentence and chosenWords are 2 separate parts of the Model and we can accidentally make them out of sync
Since chosenWords is of type Words, it may contain also SentenceWord
The sentence may also become out of sync with the rest of the Model
We also have some code smell in viewHiddenWord:

viewHiddenWord : Word -> List Word -> Html msg
viewHiddenWord hiddenWord chosenWords =

            -- omitted code

            wordElement : Word -> Html Msg                
                wordElement word =
                    case word of
                        HiddenWord ( _, wordString ) ->
                            viewOption wordString

                        SentenceWord ( _, wordString ) ->
                            viewOption wordString

            -- omitted code

And probably more.

In Elm we want to invest additional time into a good planning of our model and in getting it as close as possible to a form that will eliminate the invalid state of our application.

This idea, not new I suppose, was introduced by Richard Feldman at Elm-Conf 2016 in his amazing (as always) talk:

Since then we often hear "make impossible states impossible" in different communities, not only Elm.

How can we improve our Model and eliminate possibilities for the invalid state and code smell?

Instead of having chosenWords and sentenceWords - we can just have sentence property and rename the sentence to sentenceOriginal:

type Word
    = SentenceWord ( Int, String )
    | HiddenWord ( Int, String )


type alias Words =
    List Word


type alias Model =
    { sentenceOriginal : String
    , sentence : Words
    }

Looks better, but now we lost the original sentence's word or player's input, since there is only 1 String placeholder. Well... we can have the player's input and the original word in the same type constructor:

type Word
    = SentenceWord ( Int, String )
    | HiddenWord ( Int, String, String ) -- index, answer, player's choice

Also, maybe instead of having an index that can also get out of sync, we can use List.indexedMap when rendering the sentence which will give us the index:

type Word
    = SentenceWord String
    | HiddenWord String String  -- answer, player's choice


type alias Words =
    List Word


type alias Model =
    { originalSentence : String
    , sentence : Words
    }

We can go even further into modeling and replace String with a concrete types:

type PlayerChoice =
    PlayerChoice String    


type Answer =
    Answer String    


type Word
    = SentenceWord String
    | HiddenWord Answer PlayerChoice


type alias Words =
    List Word


type alias Model =
    { originalSentence : String
    , sentence : Words
    }

This will prevent us from passing the answer (which is String) and the player's input (also String) to HiddenWord, in the wrong order. The code now is also more readable.

We have almost all we need now. The ability to have a random order of chosen words, however, is still missing. To solve this, we can add a SortKey to the HiddenWord:

type PlayerChoice =
    PlayerChoice String    


type Answer =
    Answer String    


type SortKey =
    SortKey Int


type Word
    = SentenceWord String
    | HiddenWord SortKey Answer PlayerChoice


type alias Words =
    List Word


type alias Model =
    { originalSentence : String
    , sentence : Words
    }

When the type constructor grows, it may be better to turn it to a record. Let's convert HiddenWord into a record:

type alias HiddenWord =
    { sortKey : Int
    , playerChoice : PlayerChoice
    , answer : Answer
    }

We don't need the SortKey, just Int is sufficient:

type PlayerChoice =
    PlayerChoice String    


type Answer =
    Answer String    


type alias HiddenWord =
    { sortKey : Int
    , playerChoice : PlayerChoice
    , answer : Answer
    }


type Word
    = SentenceWord String
    | HiddenWord HiddenWord


type alias Words =
    List Word


type alias Model =
    { originalSentence : String
    , sentence : Words
    }

At this point Elm will complain about 2 HiddenWord type definitions.

We need to have different names. I renamed SentenceWord and HiddenWord to SentenceWrd and HiddenWrd:

type Word
    = SentenceWrd String
    | HiddenWrd HiddenWord

After this change we have a lot to refactor. Luckily we have our back covered with Elm compiler. Let's update the current initialModel:

type alias Model =
    { sentence : String
    , chosenWords : Words
    , chosenSentence : Words
    }


initialModel : Model
initialModel =
    { originalSentence = "The pen is mightier than the sword"
    , chosenWords =
        [ HiddenWord ( 1, "pen" )
        , HiddenWord ( 6, "sword" )
        , HiddenWord ( 3, "mightier" )
        ]
    , chosenSentence =
        [ SentenceWord ( 0, "The" )
        , HiddenWord ( 1, "" )
        , SentenceWord ( 2, "is" )
        , HiddenWord ( 3, "" )
        , SentenceWord ( 4, "than" )
        , SentenceWord ( 5, "the" )
        , HiddenWord ( 6, "" )
        ]
    }

to this:

type alias Model =
    { sentence : Words
    }


initialModel : Model
initialModel =
    { sentence =
        [ SentenceWrd "The"
        , HiddenWrd
            { sortKey = 1
            , answer = Answer "pen"
            , playerChoice = PlayerChoice ""
            }
        , SentenceWrd "is"
        , HiddenWrd
            { sortKey = 3
            , answer = Answer "mightier"
            , playerChoice = PlayerChoice ""
            }
        , SentenceWrd "than"
        , SentenceWrd "the"
        , HiddenWrd
            { sortKey = 2
            , answer = Answer "sword"
            , playerChoice = PlayerChoice ""
            }
        ]
    }

We hardcoded the "random" order of the chosen words by setting the sortKey, also removed the originalSentence from the model (for now) and renamed chosenSentence to sentence.

The update function is the first we can refactor easily. Let's change:

newSentence to use List.indexedMap
updateWord to take an index as the first argument

update : Msg -> Model -> Model
update msg model =
    case msg of
        WordChanged index wordString ->
            let
                updateWord : Int -> Word -> Word
                updateWord wordIndex word =
                    case word of
                        HiddenWrd hiddenWord ->
                            if wordIndex == index then
                                HiddenWrd
                                    { hiddenWord
                                        | playerChoice = PlayerChoice wordString
                                    }

                            else
                                word

                        _ ->
                            word

                newSentence : Words
                newSentence =
                    List.indexedMap updateWord model.sentence
            in
            { model | sentence = newSentence }

We now have an index of the word to update with the player's input, and wordIndex of the current word we are running List.indexedMap on. If both indexes are equal, we need to update the playerChoice field of the HiddenWrd.

Now there are a lot of compiler errors. Let's go step by step and comment out all the functions with errors, that is viewSentence, viewHiddenWord, viewChosenWords and the invocation of them in the view:

view : Model -> Html Msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ text model.sentence ]

                --                , viewSentence model.chosenSentence model.chosenWords
                --                , viewChosenWords model.chosenWords model.chosenSentence
                ]
            ]
        ]

The compilers complains about text model.sentence because text expects a String as input, but after the refactoring model.sentence is not a simple String but Words (which is itself a type alias for List Word).

First we need something that can convert a Word into a String:

wordToString : Word -> String
wordToString word =
    case word of
        SentenceWrd wordString ->
            wordString

        HiddenWrd hiddenWord ->
            case hiddenWord.answer of
                Answer answerString ->
                    answerString

If word is SenteceWrd, we'll take the String part of it. If it's the HiddenWrd, we'll take the Answer from it and then pattern match to get its String part.

Let's add a viewOriginalSentence function to render the sentence:

viewOriginalSentence : Words -> Html Msg
viewOriginalSentence words =
    p
        [ class "has-text-centered" ]
        (List.map
            (\word ->
                wordToString word |> text
            )
            words
        )

We are mapping each Word to a String and passing the String to Html.text.

Let's update the view function to use viewOriginalSentence:

view : Model -> Html Msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ viewOriginalSentence model.sentence ]

                --                , viewSentence model.chosenSentence model.chosenWords
                ]
                --                , viewChosenWords model.chosenWords model.chosenSentence
            ]
        ]

The application now compiles! Lets see how it looks:

Well... all the words are written without any spaces between them. We need to add some space, one way we can do it is by adding a space after each word:

viewOriginalSentence : Words -> Html Msg
viewOriginalSentence words =
    p
        [ class "has-text-centered" ]
        (List.map
            (\word ->
                wordToString word ++ " " |> text
            )
            words
        )

Or we can use List.intersperse that "Places the given value between all members of the given list.":

viewOriginalSentence : Words -> Html Msg
viewOriginalSentence words =
    p
        [ class "has-text-centered" ]
        (words
            |> List.map wordToString
            |> List.intersperse " "
            |> List.map text
        )

or event simpler with String.join:

viewOriginalSentence : Words -> Html Msg
viewOriginalSentence words =
    p
        [ class "has-text-centered" ]
        [ words
            |> List.map wordToString
            |> String.join " "
            |> text
        ]

And now the game looks better:

Let's do a small refactor before moving on. Let's add answerToString helper function to convert Answer into a String. We can use it from wordToString and it may come handy later when comparing the player's choice with the answer:

answerToString : Answer -> String
answerToString (Answer wordString) =
    wordString


wordToString : Word -> String
wordToString word =
    case word of
        HiddenWrd hiddenWord ->
            answerToString hiddenWord.answer

        SentenceWrd wordString ->
            wordString

Great. The next in line is the view for chosen words. Let's uncomment and examine it:

viewChosenWords : Words -> Words -> Html msg
viewChosenWords chosenWords sentenceWords =
    let
        viewChosenWord : Word -> Html msg
        viewChosenWord chosenWord =
            case chosenWord of
                HiddenWord ( _, wordString ) ->
                    let
                        isCorrectGuess : Bool
                        isCorrectGuess =
                            List.member chosenWord sentenceWords

                        className : String
                        className =
                            if isCorrectGuess then
                                "has-text-success"

                            else
                                "has-text-grey-light"
                    in
                    li []
                        [ span [ class className ]
                            [ text wordString
                            , text " "
                            , span [ class "icon is-small" ]
                                [ i [ class "far fa-check-circle" ] [] ]
                            ]
                        ]

                SentenceWord _ ->
                    text ""
    in
    ul [] (List.map viewChosenWord chosenWords)

The firs thing that we can improve is the signature. Now it takes chosenWords as Words, but it should only handle List HiddenWord.

Previously, we needed the sentenceWords to hint if the player's choice was correct. Now we have all the information in HiddenWord, both playerChoice and answer!

This means that the signature can be simplified and made to express the input better - we can only pass List HiddenWord here:

viewChosenWords : List HiddenWord -> Html msg
viewChosenWords chosenWords =

Let's also rename viewChosenWords to viewHiddenWords because hidden and chosen are used and it's confusing:

viewHiddenWords : List HiddenWord -> Html msg
viewHiddenWords hiddenWordList =

We also need a way to get the List HiddenWord from our model. Let's add this ability. We need to filter out the HiddenWrd and take HiddenWord from it (note "Word" vs. "Wrd"). And Elm has us covered with List.filterMap:

hiddenWords : Words -> List HiddenWord
hiddenWords sentence =
    List.filterMap
        (\word ->
            case word of
                HiddenWrd hiddenWord ->
                    Just hiddenWord

                _ ->
                    Nothing
        )
        sentence

Now we can update view to call it:

view : Model -> Html Msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ viewOriginalSentence model.sentence

                    --                , viewSentence model.chosenSentence model.chosenWords
                    ]
                , viewHiddenWords (hiddenWords model.sentence)
                ]
            ]
        ]

Back to viewHiddenWords. It has an inner viewChosenWord function. Let's rename it to viewHiddenWord and change the signature, since we now have only HiddenWord:

        viewHiddenWord : HiddenWord -> Html msg
        viewHiddenWord hiddenWord =

We don't need the case anymore for the same reason - we only have HiddenWord now, so we can delete it:

viewHiddenWords : List HiddenWord -> Html msg
viewHiddenWords hiddenWordList =
    let
        viewHiddenWord : HiddenWord -> Html msg
        viewHiddenWord hiddenWord =
            let
                isCorrectGuess : Bool
                isCorrectGuess =
                    List.member hiddenWord sentenceWords

                className : String
                className =
                    if isCorrectGuess then
                        "has-text-success"

                    else
                        "has-text-grey-light"
            in
            li []
                [ span [ class className ]
                    [ text wordString
                    , text " "
                    , span [ class "icon is-small" ]
                        [ i [ class "far fa-check-circle" ] [] ]
                    ]
                ]
    in
    ul [] (List.map viewHiddenWord hiddenWordList)

How do we know that the player's choice is the correct choice? As I previously mentioned, we have all we need in the HiddenWord type:

type alias HiddenWord =
    { sortKey : Int
    , playerChoice : PlayerChoice
    , answer : Answer
    }

All we need is to compare the payerChoice and answer. They both are container types:

type PlayerChoice
    = PlayerChoice String


type Answer
    = Answer String

So we need to extract the String value from them. Let's add playerChoiceToString in addition to a previously declared answerToString:

playerChoiceToString : PlayerChoice -> String
playerChoiceToString (PlayerChoice stringValue) =
    stringValue


answerToString : Answer -> String
answerToString (Answer stringValue) =
    stringValue

Pretty straightforward using the destructuring.

Now we can use them in isCorrectGuess:

viewHiddenWord : HiddenWord -> Html msg
        viewHiddenWord hiddenWord =
            let
                isCorrectGuess : Bool
                isCorrectGuess =
                    answerToString hiddenWord.answer == playerChoiceToString hiddenWord.playerChoice

The className needs no change. But the li declaration again needs a String where wordString was:

            li []
                [ span [ class className ]
                    [ text wordString
                    , text " "
                    , span [ class "icon is-small" ]
                        [ i [ class "far fa-check-circle" ] [] ]
                    ]
                ]

What should go there? The String from the hiddenWord.answer of course!

            li []
                [ span [ class className ]
                    [ text <| answerToString hiddenWord.answer
                    , text " "
                    , span [ class "icon is-small" ]
                        [ i [ class "far fa-check-circle" ] [] ]
                    ]
                ]

We can refactor it a little to reuse the value of answerToString hiddenWord.answer by adding 2 declarations:

viewHiddenWord : HiddenWord -> Html msg
        viewHiddenWord hiddenWord =
            let
                answerString : String
                answerString =
                    answerToString hiddenWord.answer

                playerChoiceString : String
                playerChoiceString =
                    playerChoiceToString hiddenWord.playerChoice

and:

                isCorrectGuess : Bool
                isCorrectGuess =
                    answerString == playerChoiceString


-- omitted code

            li []
                [ span [ class className ]
                    [ text answerString
                    , text " "
                    , span [ class "icon is-small" ]
                        [ i [ class "far fa-check-circle" ] [] ]
                    ]
                ]

And now our viewHiddenWords looks like this:

viewHiddenWords : List HiddenWord -> Html msg
viewHiddenWords hiddenWordList =
    let
        viewHiddenWord : HiddenWord -> Html msg
        viewHiddenWord hiddenWord =
            let
                answerString : String
                answerString =
                    answerToString hiddenWord.answer

                playerChoiceString : String
                playerChoiceString =
                    playerChoiceToString hiddenWord.playerChoice

                isCorrectGuess : Bool
                isCorrectGuess =
                    answerString == playerChoiceString

                className : String
                className =
                    if isCorrectGuess then
                        "has-text-success"

                    else
                        "has-text-grey-light"
            in
            li []
                [ span [ class className ]
                    [ text answerString
                    , text " "
                    , span [ class "icon is-small" ]
                        [ i [ class "far fa-check-circle" ] [] ]
                    ]
                ]
    in
    ul [] (List.map viewHiddenWord hiddenWordList)

Lets look at our game:

Looks good, but we are missing one more detail - the hidden words are presented in the same order as they appear in the sentence... If you remember we added sortKey to our HiddenWord to be able to show them in random order:

type alias HiddenWord =
    { sortKey : Int
    , playerChoice : PlayerChoice
    , answer : Answer
    }

Currently, we have the random order hardcoded in the initialModel:

initialModel : Model
initialModel =
    { sentence =
        [ SentenceWrd "The"
        , HiddenWrd
            { sortKey = 3
            , answer = Answer "pen"
            , playerChoice = PlayerChoice ""
            }
        , SentenceWrd "is"
        , HiddenWrd
            { sortKey = 1
            , answer = Answer "mightier"
            , playerChoice = PlayerChoice ""
            }
        , SentenceWrd "than"
        , SentenceWrd "the"
        , HiddenWrd
            { sortKey = 2
            , answer = Answer "sword"
            , playerChoice = PlayerChoice ""
            }
        ]
    }

So what is left to do is to sort the hidden words by the sortKey before showing them. We'll add hiddenWordsSorted and use it :

viewHiddenWords : List HiddenWord -> Html msg
viewHiddenWords hiddenWordList =
    let
        hiddenWordsSorted : List HiddenWord
        hiddenWordsSorted =
            List.sortBy .sortKey hiddenWordList

        viewHiddenWord : HiddenWord -> Html msg
        viewHiddenWord hiddenWord =

-- omitted

    in
    ul [] <| List.map viewHiddenWord hiddenWordsSorted

One last small refactor I would like to do is to wordToString:

wordToString : Word -> String
wordToString word =
    case word of
        SentenceWrd wordString ->
            wordString

        HiddenWrd hiddenWord ->
            case hiddenWord.answer of
                Answer answerString ->
                    answerString

We have answerToString so we can use it in the second branch of the case:

wordToString : Word -> String
wordToString word =
    case word of
        SentenceWrd wordString ->
            wordString

        HiddenWrd hiddenWord ->
            answerToString hiddenWord.answer

or even shorter:

wordToString : Word -> String
wordToString word =
    case word of
        SentenceWrd wordString ->
            wordString

        HiddenWrd { answer } ->
            answerToString answer

The final part - viewSentence. Let's uncomment it in the view function.

            viewSentence model.chosenSentence model.chosenWords

We don't have chosenSentence anymore since we replaced sentence, and we also got rid of the additional chosenWords. We do need to send the List HiddenWord to the viewSentence so it knows what to render as a <select> element. We already have a helper function for it - hiddenWords - that we use when calling viewHiddenWords. So the viewSentence may look like this:

view : Model -> Html Msg
view model =

-- omitted
                    [ viewOriginalSentence model.sentence
                    , viewSentence model.sentence (hiddenWords model.sentence)
                    ]

Looks like we are sending model.sentence to viewSentence and using it to get hidden words... We don't need to send (hiddenWords model.sentence) since viewSentence can calculate them by itself!

view : Model -> Html Msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ viewOriginalSentence model.sentence
                    , viewSentence model.sentence
                    ]
                , viewHiddenWords (hiddenWords model.sentence)
                ]
            ]
        ]

Let's uncomment viewSentence and change its signature from:

viewSentence : Words -> Words -> Html Msg
viewSentence sentence chosenWords =

viewSentence : Words -> Html Msg
viewSentence sentence =

Now we'll obtain hiddenWords:

viewSentence : Words -> Html Msg
viewSentence sentence =
    let
        hiddenWords_ =
            hiddenWords sentence
    in

And update the rest of viewSentence to:

viewSentence : Words -> Html Msg
viewSentence sentence =
    let
        hiddenWords_ : List HiddenWord
        hiddenWords_ =
            hiddenWords sentence
    in
    div [ class "has-text-centered" ]
        (List.map
            (\sentenceWord ->
                case sentenceWord of
                    SentenceWrd word ->
                        span [ class "sentence-word" ] [ text word ]

                    HiddenWrd hiddenWord ->
                        span [ class "sentence-word" ] [ text (answerToString hiddenWord.answer) ]
             --                        viewHiddenWord sentenceWord hiddenWords_
            )
            sentence
        )

I have commented out the call to viewHiddenWord so we can see the intermediate result:

Now let's uncomment viewHiddenWord and return the line inside viewSentence:

viewSentence : Words -> Html Msg
viewSentence sentence =
    let
        hiddenWords_ : List HiddenWord
        hiddenWords_ =
            hiddenWords sentence
    in
    div [ class "has-text-centered" ]
        (List.map
            (\sentenceWord ->
                case sentenceWord of
                    SentenceWrd word ->
                        span [ class "sentence-word" ] [ text word ]

                    HiddenWrd hiddenWord ->
                         viewHiddenWord sentenceWord hiddenWords_
            )
            sentence
        )

We need to change sentenceWord to hiddenWord:

viewSentence : Words -> Html Msg
viewSentence sentence =
    let
        hiddenWords_ : List HiddenWord
        hiddenWords_ =
            hiddenWords sentence
    in
    div [ class "has-text-centered" ]
        (List.map
            (\sentenceWord ->
                case sentenceWord of
                    SentenceWrd word ->
                        span [ class "sentence-word" ] [ text word ]

                    HiddenWrd hiddenWord ->
                         viewHiddenWord hiddenWord hiddenWords_
            )
            sentence
        )

Good. Now to viewHiddenWord. Let's update its type signature from:

viewHiddenWord : Word -> List Word -> Html Msg
viewHiddenWord hiddenWord chosenWords =

viewHiddenWord : HiddenWord -> List HiddenWord -> Html Msg
viewHiddenWord hiddenWord hiddenWords =

The only type that viewHiddenWord can accept now is HiddenWord. We also renamed all the chosenXYZ to hiddenXYZ.

Again, we don't need the case expression anymore!

viewHiddenWord : HiddenWord -> List HiddenWord -> Html Msg
viewHiddenWord hiddenWord hiddenWords =
    let
        viewOption : String -> Html Msg
        viewOption wordString =
            option
                [ value wordString, selected (wordString == hiddenWordText) ]
                [ text <| String.toLower wordString ]

        wordElement : Word -> Html Msg
        wordElement word =
            case word of
                HiddenWord ( _, wordString ) ->
                    viewOption wordString

                SentenceWord ( _, wordString ) ->
                    viewOption wordString
    in
    div [ class "select" ]
        [ select [ class "hidden-word", onInput (WordChanged hiddenIndex) ] <|
            option []
                [ text "" ]
                :: List.map wordElement hiddenWords
        ]

Let's also rename the 2 instances of hiddenWords to hiddenWords_, since the compiler complains about name collisions (2nd line and the line before the last in the code snippet).

viewHiddenWord : HiddenWord -> List HiddenWord -> Html Msg
viewHiddenWord hiddenWord hiddenWords_ =
    let
        viewOption : String -> Html Msg
        viewOption wordString =
            option
                [ value wordString, selected (wordString == hiddenWordText) ]
                [ text <| String.toLower wordString ]

        wordElement : Word -> Html Msg
        wordElement word =
            case word of
                HiddenWord ( _, wordString ) ->
                    viewOption wordString

                SentenceWord ( _, wordString ) ->
                    viewOption wordString
    in
    div [ class "select" ]
        [ select [ class "hidden-word", onInput (WordChanged hiddenIndex) ] <|
            option []
                [ text "" ]
                :: List.map wordElement hiddenWords_
        ]

The wordElement also gets simpler since it should only get HiddenWord, so the strange-looking case is gone:

viewHiddenWord : HiddenWord -> List HiddenWord -> Html Msg
viewHiddenWord hiddenWord hiddenWords_ =
    let
        viewOption : String -> Html Msg
        viewOption wordString =
            option
                [ value wordString, selected (wordString == hiddenWordText) ]
                [ text <| String.toLower wordString ]

        wordElement : HiddenWord -> Html Msg
        wordElement hiddenWord_ =
            viewOption (answerToString hiddenWord_.answer)
    in
    div [ class "select" ]
        [ select [ class "hidden-word", onInput (WordChanged hiddenIndex) ] <|
            option []
                [ text "" ]
                :: List.map wordElement hiddenWords_
        ]

The viewOption change is a pretty simple one. We need to select the <option> where the answer from the current HiddenWord equals playerChoice from the HiddenWord that was passed in:

viewHiddenWord : HiddenWord -> List HiddenWord -> Html Msg
viewHiddenWord hiddenWord hiddenWords_ =
    let
        playerChoiceString : String
        playerChoiceString =
            playerChoiceToString hiddenWord.playerChoice

        viewOption : String -> Html Msg
        viewOption answerString =
            option
                [ value answerString, selected (answerString == playerChoiceString) ]
                [ text <| String.toLower answerString ]

        wordElement : HiddenWord -> Html Msg
        wordElement hiddenWord_ =
            viewOption
                (answerToString hiddenWord_.answer)
    in
    div [ class "select" ]
        [ select [ class "hidden-word", onInput (WordChanged hiddenIndex) ] <|
            option []
                [ text "" ]
                :: List.map wordElement hiddenWords_
        ]

The compiler now complains about name collision between this viewHiddenWord and inner viewHiddenWord inside viewHiddenWords... Let's add _ to the inner viewHiddenWord:

viewHiddenWords : List HiddenWord -> Html msg
viewHiddenWords hiddenWordList =
    let
        hiddenWordsSorted : List HiddenWord
        hiddenWordsSorted =
            List.sortBy .sortKey hiddenWordList

        viewHiddenWord_ : HiddenWord -> Html msg
        viewHiddenWord_ hiddenWord =

-- omitted

    in
    ul [] <| List.map viewHiddenWord_ hiddenWordsSorted

Looking at the code we can see that wordElement does almost nothing and just calls viewOption, so we can just remove it and call viewOption directly:

viewHiddenWord : HiddenWord -> List HiddenWord -> Html Msg
viewHiddenWord hiddenWord hiddenWords_ =
    let
        playerChoiceString : String
        playerChoiceString =
            playerChoiceToString hiddenWord.playerChoice

        viewOption : HiddenWord -> Html Msg
        viewOption hiddenWord_ =
            let
                answerString =
                    answerToString hiddenWord_.answer
            in
            option
                [ value answerString, selected (answerString == playerChoiceString) ]
                [ text <| String.toLower answerString ]
    in
    div [ class "select" ]
        [ select [ class "hidden-word", onInput (WordChanged hiddenIndex) ] <|
            option []
                [ text "" ]
                :: List.map viewOption hiddenWords_
        ]

We now pass HiddenWord to viewOption and calculate answerString inside it. We also can use destructuring in the viewOption declaration to get hiddenWord_.answer immediately:

        viewOption : HiddenWord -> Html Msg
        viewOption { answer } =
            let
                answerString : String
                answerString =
                    answerToString answer
            in
            option
                [ value answerString, selected (answerString == playerChoiceString) ]
                [ text <| String.toLower answerString ]

We still have hiddenIndex in our viewHiddenWord that we haven't handled. This should be the index of the word in the sentence, so we can know what word to update with the player's choice. As we discussed in the beginning of the refactor, we can have this index by using List.indexedMap instead of List.map in viewSentence, and call viewHiddenWord with that index.

Let's update viewHiddenWord to use List.indexedMap, get the index in the inner function and pass it to viewHiddenWord:

viewSentence : Words -> Html Msg
viewSentence sentence =
    let
        hiddenWords_ : List HiddenWord
        hiddenWords_ =
            hiddenWords sentence
    in
    div [ class "has-text-centered" ]
        (List.indexedMap
            (\index sentenceWord ->
                case sentenceWord of
                    SentenceWrd word ->
                        span [ class "sentence-word" ] [ text word ]

                    HiddenWrd hiddenWord ->
                        viewHiddenWord index hiddenWord hiddenWords_
            )
            sentence
        )

Now let's update viewHiddenWord to take the index as its first argument and use it:

viewHiddenWord : Int -> HiddenWord -> List HiddenWord -> Html Msg
viewHiddenWord index hiddenWord hiddenWords_ =

-- omitted 

    in
    div [ class "select" ]
        [ select [ class "hidden-word", onInput (WordChanged index) ] <|
            option []
                [ text "" ]
                :: List.map viewOption hiddenWords_
        ]

The game compiles and works!

But the <option>s in the drop down again come in the same order as they appear in the sentence. We still need to sort them by sortKey as we did in viewHiddenWords.

We are repeating ourselves with hiddenWordsSorted, so lets refactor it to its own function:

hiddenWordsSorted : List HiddenWord -> List HiddenWord
hiddenWordsSorted hiddenWordList =
    List.sortBy .sortKey hiddenWordList

and use it inside viewHiddenWords:

viewHiddenWords : List HiddenWord -> Html msg
viewHiddenWords hiddenWordList =
    let
        hiddenWordsSorted_ : List HiddenWord
        hiddenWordsSorted_ =
            hiddenWordsSorted hiddenWordList

--- omitted

    in
    ul [] <| List.map viewHiddenWord_ hiddenWordsSorted_

and in viewHiddenWord:

viewHiddenWord : Int -> HiddenWord -> List HiddenWord -> Html Msg
viewHiddenWord index hiddenWord hiddenWords_ =
    let
        hiddenWordsSorted_ : List HiddenWord
        hiddenWordsSorted_ =
            hiddenWordsSorted hiddenWords_

-- omitted

    in
    div [ class "select" ]
        [ select [ class "hidden-word", onInput (WordChanged index) ] <|
            option []
                [ text "" ]
                :: List.map viewOption hiddenWordsSorted_
        ]

And now we have the hidden words in the correct random order also in the drop down:

Phew! That was a lot! And we gained a lot! Much less places to get our code into invalid state.

The current progress is saved in the repo under a Tag v2.0 https://github.com/mickeyvip/words-memory-game/tree/v2.0.

In the next post we will add randomness to select different words for each new game. Stay tuned!

Acknowledgements

Special thanks to Joël Quenneville for reviewing the code and suggesting the refactoring presented in this post.

Writing A Word Memory Game In Elm - Part 2: Modeling And Building a Basic Word Memory Game

Mickey — Fri, 22 Mar 2019 13:04:28 +0000

This is part 2 of the series "Writing A Word Memory Game In Elm", find:

Part 1: Setting Up an Elm Application With Parcel
Part 2: Modeling And Building a Basic Word Memory Game
Part 3: Rethinking the Model
Part 4: Spicing Things Up With Randomness
Part 5 - More Randomness And More Game

The game view should show the sentence with missing words, and the missing words as a list below it. The player will be able to choose a word and, if this word is correct, it will be marked in green in the list. For the "easy" level the view will show a dropdown list of available words.

Let's think about how the Model of the game should look like. For modeling a word let's declare a custom type Word with variants SentenceWord and HiddenWord, each holding a String value:

type Word
    = SentenceWord String
    | HiddenWord String

The sentence is a List of Word which we can alias as Words:

type alias Words =
    List Word

To update the correct word in a sentence when the player makes a choice, we can use the index of the word within the sentence. This means that we should update the Word type to hold an index with a String value by using a Tuple:

type Word
    = SentenceWord ( Int, String )
    | HiddenWord ( Int, String )

The Model now looks like this:

type alias Model =
    { sentence : String
    , chosenWords : Words
    , chosenSentence : Words
    }

For now we can hardcode the initialModel:

initialModel : Model
initialModel =
    { sentence = "The pen is mightier than the sword"
    , chosenWords =
        [ HiddenWord ( 1, "pen" )
        , HiddenWord ( 6, "sword" )
        , HiddenWord ( 3, "mightier" )
        ]
    , chosenSentence =
        [ SentenceWord ( 0, "The" )
        , HiddenWord ( 1, "" )
        , SentenceWord ( 2, "is" )
        , HiddenWord ( 3, "" )
        , SentenceWord ( 4, "than" )
        , SentenceWord ( 5, "the" )
        , HiddenWord ( 6, "" )
        ]
    }

In chosenSentence, we start by setting the String value of each HiddenWord to be empty. These will then be updated with the word the player chooses, and compared with chosenWords entries by index. If this HiddenWord in chosenSentence equals to one of HiddenWord in chosenWords, the choice is correct. For example:

chosenWords =
    [ HiddenWord ( 1, "pen" )
    , HiddenWord ( 6, "sword" )
    , HiddenWord ( 3, "mightier" )
    ]

chosenSentence =
    [ SentenceWord ( 0, "The" )
    , HiddenWord ( 1, "pen" )        -- this choice is correct
    , SentenceWord ( 2, "is" )
    , HiddenWord ( 3, "sword" )      -- this choice is incorrect, wrong index
    , SentenceWord ( 4, "than" )
    , SentenceWord ( 5, "the" )
    , HiddenWord ( 6, "" )
    ]

Let's add a new viewSentence function to render the sentence:

viewSentence : Words -> Words -> Html msg
viewSentence sentence chosenWords =
    div [ class "has-text-centered" ]
        (List.map
            (\sentenceWord ->
                case sentenceWord of
                    SentenceWord ( _, word ) ->
                        span [ class "sentence-word" ] [ text word ]

                    HiddenWord ( index, word ) ->
                        span [ class "hidden-word" ] [ text "-----" ]
            )
            sentence
        )

It's pretty straightforward: we are rendering Words that can be SentenceWord for showing a regular word and a HiddenWord for showing a word that was chosen. As a first iteration we are just rendering dashes. In the next step we will render a dropdown <select>.

In order for the words to have a space between them let's add a style.css inside src folder:

.hidden-word,
.sentence-word {
    display: inline-block;
    margin-left: 0.5em;
    margin-bottom: 1em;
    line-height: 2em;
}

.hidden-word:first-child,
.sentence-word:first-child {
    margin-left: 0;
}

And import it inside our index.js:

import { Elm } from './src/Main.elm';
import './src/style.css';

Elm.Main.init({
    node: document.getElementById('app')
});

Update the main view function with a call to viewSentence:

view : Model -> Html msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ text model.sentence ]
                , viewSentence model.chosenSentence model.chosenWords
                ]
            ]
        ]

Ellie: https://ellie-app.com/5CQqN2ptGsha1

Rendering The DropDown For Hidden Words

Let's add the new viewHiddenWord function that will render <select> for a HiddenWord:

viewHiddenWord : Word -> List Word -> Html msg
viewHiddenWord hiddenWord chosenWords =
    case hiddenWord of
        HiddenWord ( _, hiddenWordText ) ->
            let
                viewOption : String -> Html msg
                viewOption wordString =
                    option
                        [ value wordString, selected (wordString == hiddenWordText) ]
                        [ text <| String.toLower wordString ]

                wordElement : Word -> Html msg                
                wordElement word =
                    case word of
                        HiddenWord ( _, wordString ) ->
                            viewOption wordString

                        SentenceWord ( _, wordString ) ->
                            viewOption wordString
            in
            div [ class "select" ]
                [ select [ class "hidden-word" ] <|
                    option []
                        [ text "" ]
                        :: List.map wordElement chosenWords
                ]

        _ ->
            text ""

The viewHiddenWord accepts the current hidden word and a list of all missing words and renders a drop down for a selection.

First thing we do is to pattern match the Word type to get our HiddenWord, because only for HiddenWord should we render the <select> element. The SentenceWord render is still handled in the main view function.

The viewHiddenWord function renders a <select> element and maps over the list of all missing words. For each one of them it calls wordElement function. Here we must pattern match both cases but we render the same <option> element with word's text.

Let's call it from viewSentence:

viewSentence : Words -> Words -> Html msg
viewSentence sentence chosenWords =
    div [ class "has-text-centered" ]
        (List.map
            (\sentenceWord ->
                case sentenceWord of
                    SentenceWord ( _, word ) ->
                        span [ class "sentence-word" ] [ text word ]

                    HiddenWord ( index, word ) ->
                        viewHiddenWord sentenceWord chosenWords
            )
            sentence
        )

We should see that we can now choose any of the missing words:

Ellie: https://ellie-app.com/5CQyR6WT3zca1

Adding Interaction

The player can chose a word, but our Model is not updated with this change. We can use the onInput event on select and update the model with the current selection. Since we have a chosenSentence as a List of Tuples that have an index - we know which Word we need to update.

Let's delete the NoOp message type and add a new one that will get an index and a new word String:

type Msg
    = WordChanged Int String

Change the update function to handle the new Msg (don't forget to delete the code related to NoOp message):

update : Msg -> Model -> Model
update msg model =
    case msg of
        WordChanged index wordString ->
            let
                updateWord : Word -> Word
                updateWord word =
                    case word of
                        (HiddenWord ( hiddenIndex, _ )) as hiddenWord ->
                            if hiddenIndex == index then
                                HiddenWord ( index, wordString )

                            else
                                hiddenWord

                        _ ->
                            word

                newSentence : Words
                newSentence =
                    List.map updateWord model.chosenSentence
            in
            { model | chosenSentence = newSentence }

We map over all the words in the chosenSentence and if the index of the current sentence (hiddenIndex) word equals to the index of the changed word (index) - we replace the String part of the Tuple with the new wordString.

We are using as syntax to have a reference to the whole matched word, which we return if the index is not equal to hiddenIndex.

If the current word is not a HiddenWord - we just return the current word.

Let's update the viewHiddenWord function to emit the message from select element:

viewHiddenWord : Word -> List Word -> Html Msg
viewHiddenWord hiddenWord chosenWords =
    case hiddenWord of
        HiddenWord ( hiddenIndex, hiddenWordText ) ->
            let
                viewOption : String -> Html Msg
                viewOption wordString =
                    option
                        [ value wordString, selected (wordString == hiddenWordText) ]
                        [ text <| String.toLower wordString ]

                wordElement : Word -> Html Msg
                wordElement word =
                    case word of
                        HiddenWord ( _, wordString ) ->
                            viewOption wordString

                        SentenceWord ( _, wordString ) ->
                            viewOption wordString
            in
            div [ class "select" ]
                [ select [ class "hidden-word", onInput (WordChanged hiddenIndex) ] <|
                    option []
                        [ text "" ]
                        :: List.map wordElement chosenWords
                ]

        _ ->
            text ""

The onInput expects a function that accepts a String as a parameter. The WordChanged message accepts an Int and a String. We pass to onInput (WordChanged hiddenIndex) that is exactly what it needs. In Elm every function is automatically curried and, therefore, (WordChanged hiddenIndex) returns a function that is waiting for a String.

Note that we have changed the msg (any type) to Msg (our specific message type). We also need to make the same change in ViewSentence function since it is now also propagates our new message:

viewSentence : Words -> Words -> Html Msg
   -- omitted

The Model has initial missing words as an empty String:

The Model is updated when a word is chosen in the dropdown:

Ellie: https://ellie-app.com/5CQDxjPhpwpa1

Hint Correctness

We have a nice interactive game already, but the player has no indication whether the words they chose are correct.

We can render a list of missing words and hint the player if their chosen word is the correct one.

To render a list of missing words and know if any word is a correct choice, we need a list of missing words and a list of sentence words. If a missing word is a member of sentence words - has the same index and a word string - the word was chosen correctly:

viewChosenWords : Words -> Words -> Html msg
viewChosenWords chosenWords sentenceWords =
    let
        viewChosenWord : Word -> Html msg
        viewChosenWord chosenWord =
            case chosenWord of
                HiddenWord ( _, wordString ) ->
                    let
                        isCorrectGuess : Bool
                        isCorrectGuess =
                            List.member chosenWord sentenceWords

                        className : String
                        className =
                            if isCorrectGuess then
                                "has-text-success"

                            else
                                "has-text-grey-light"
                    in
                    li []
                        [ span [ class className ]
                            [ text wordString
                            , text " "
                            , span [ class "icon is-small" ]
                                [ i [ class "far fa-check-circle" ] [] ]
                            ]
                        ]

                SentenceWord _ ->
                    text ""
    in
    ul [] (List.map viewChosenWord chosenWords)

We are using Font Awesome's icon and Bulma's classes for coloring the words in light grey or green.

Add viewChosenWords to the main view function to render the list:

view : Model -> Html Msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ text model.sentence ]
                , viewSentence model.chosenSentence model.chosenWords
                , viewChosenWords model.chosenWords model.chosenSentence
                ]
            ]
        ]

And now every time a player choses the correct word - it is colored in green in the chosen words list:

Ellie: https://ellie-app.com/5CQKJZdYGMKa1

The game works, but the Model can be improved. In the next post we will refactor it to eliminate invalid states. Stay tuned!

The current progress is saved in the repo under a Tag v1.0 https://github.com/mickeyvip/words-memory-game/tree/v1.0.

Writing A Word Memory Game In Elm - Part 1: Setting Up an Elm Application With Parcel

Mickey — Wed, 20 Mar 2019 13:13:31 +0000

This is part 1 of the series "Writing A Word Memory Game In Elm", find:

Part 1: Setting Up an Elm Application With Parcel
Part 2: Modeling And Building a Basic Word Memory Game
Part 3: Rethinking the Model
Part 4: Spicing Things Up With Randomness
Part 5 - More Randomness And More Game

Preface

One of the most effective ways to learn is by doing. I was looking for a project to improve my Elm skills and a friend gave me an excellent idea -- to write a word memory game.

Note: this series of posts reflects my personal learning experience, any constructive feedback is welcome.

The Memory Game

There is a sentence which the player can read. Several words are then taken out and the player must reconstruct the sentence from memory.

For example, the sentence is:

If you want something done right, you have to do it yourself.

And with several words removed:

If --- want something ---- right, you ---- to do it yourself."

The game is pretty simple, but there are many ways it can be be extended:

The missing words can be presented to the user in-place (as a dropdown), or near the sentence as a list
Each time the player guesses the correct word, they can be informed straight away or find out the result only when all the words are used
At the beginning of the game the sentence is visible to the player for several seconds only
Etc

Starting the Project

To make the development cycle easier I chose to use Parcel bundler, which supports Elm out of the box since v1.10.0 and HMR since v1.11.0.

Let's create a project folder, for example word-memory-game, cd into it and initialise the NPM project:

$ npm init -y

The -y option will accept all defaults and create package.json file.

Let's install the Parcel bundler locally (it can also be installed globally):

$ npm i -D parcel-bundler

Following Parcel's Getting Started let's add index.html:

<!doctype html>
<html>
<body>
    <script src="./index.js"></script>
</body>
</html>

and index.js:

console.log('Words Memory Game started');

Also let's add the following lines to the scripts section of package.json:

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
}

In order to start the development server let's run:

$ npm run dev

and navigate to http://localhost:1234

In order to host our Elm application in a page let's add

<div id="app"></div>

to index.html:

<!-- index.html -->

<!doctype html>
<html>
<body>
    <div id="app"></div>
    <script src="./index.js"></script>
</body>
</html>

Let's create src folder and add Main.elm to it:

module Main exposing (main)

import Html

main =
    Html.text "Words Memory Game"

and change index.js to:

import { Elm } from "./src/Main.elm";

Elm.Main.init({
  node: document.getElementById("app")
});

After we save all the files, Parcel will automatically initialise an Elm project (including creating elm.json file), install needed dependencies and reload. We can also reload the page manually to clear all the previous errors from the console.

Now let's make our Elm skeleton a real Elm application by adding Msg, Model, view and update, as well as updating main:

module Main exposing (main)

import Browser
import Html exposing (Html)


type alias Model =
    { sentence : String
    }


initialModel : Model
initialModel =
    { sentence = "The pen is mightier than the sword" }


type Msg
    = NoOp


update : Msg -> Model -> Model
update msg model =
    case msg of
        NoOp ->
            model


view : Model -> Html msg
view model =
    Html.text model.sentence


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , update = update
        , view = view
        }

Great! We have our basic "Hello, World!".

I personally like my applications to look nice, so let's add the popular Bulma CSS framework in our index.html (or we can install it locally and import it) and a meta tag that Bulma recommends:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Words Memory Game</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
        />
    </head>
    <body>
        <div id="app" class="section"></div>
        <script src="./index.js"></script>
    </body>
</html>

Now in Main.elm let's update our view function to show a title and a sentence in a nice box:

view : Model -> Html msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ text model.sentence ]
                ]
            ]
        ]


viewTitle : Html msg
viewTitle =
    h1 [ class "title has-text-centered" ]
        [ text "Words Memory Game" ]

Don't forget to import Html and Html.Attributes functions:

import Html exposing (Html, div, h1, main_, p, text)
import Html.Attributes exposing (class)

Now our application looks nicer:

Another touch that I want to add to our game is the ability to show pretty icons. Therefore let's add a link to Font Awesome web font in our index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Words Memory Game</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
        />
        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.7.1/css/regular.css"
            integrity="sha384-IG162Tfx2WTn//TRUi9ahZHsz47lNKzYOp0b6Vv8qltVlPkub2yj9TVwzNck6GEF"
            crossorigin="anonymous"
        />
        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.7.1/css/fontawesome.css"
            integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div id="app" class="section"></div>
        <script src="./index.js"></script>
    </body>
</html>

Now we are all set up for the next steps, read about them in the upcoming posts.

The current progress is saved in the repo under a Tag v0.0: https://github.com/mickeyvip/words-memory-game/tree/v0.0.