# Incredibly n00b question by a 2 days elm learner

**URL:** <https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415>\
**Category:** Learn\
**Created:** [October 3, 2019, 4:00pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415 "2019-10-03T16:00:50Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![carloratm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carloratm/32/2564_2.png) [@carloratm](https://discourse.elm-lang.org/u/carloratm)\
**Post date:** [October 3, 2019, 4:00pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/1 "2019-10-03T16:00:50Z")

</div>

So,  
here I am, after years of procedural and oop programming, trying to learn Elm.

I started yesterday, so please be kind with my absolute beginner question.  
After reading the guide until the “Command and subscriptions” section, I decided to try and implement a very simple tic tac toe.  
What could go wrong, I tought… but now I am stuck, so a feedback would be greatly appreciated (again, please be kind :))

I am at the point where I have to set the turn, after the user clicks a cell.  
Here is the code:

[https://ellie-app.com/6PNgcHjWVMta1](https://ellie-app.com/6PNgcHjWVMta1)

I may be on a completely wrong path to elm… I would like to know what are your thoughts, and what should I levereage better of the guide.

Best,  
Carlo

---

<div class="post-metadata">

**Author:** ![aforemny](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/aforemny/32/2557_2.png) [@aforemny](https://discourse.elm-lang.org/u/aforemny)\
**Post date:** [October 3, 2019, 5:00pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/2 "2019-10-03T17:00:53Z")

</div>

Hi @carloratm,

now you are in the position where upon message `Turn n` you will want to set the `n`th board cell to either `X` or `O`. I think that you are on the wrong path with handling `Turn 0` to `Turn 8` in your update function seperately. Rather I think you will want to handle `Turn n` and update the `n`-th list element of `model.board`. You will also want to toggle `board.currentCell` whenever you are receiving a `Turn n` message.

So you are faced with updating the `n`th element of a list. I suggest mapping over _all_ elements of the list, and only really changing the `n`th element. Since you do not have access to the element’s index when using `List.map`, you should be using `List.indexedMap` which gives you the element as well as the element’s index.

Here is an updated version of your program: [https://ellie-app.com/6PPkRN4ZYFWa1](https://ellie-app.com/6PPkRN4ZYFWa1)

Feel free to ask if you are having any trouble understand my changes. I think you are doing very well!

---

<div class="post-metadata">

**Author:** ![carloratm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carloratm/32/2564_2.png) [@carloratm](https://discourse.elm-lang.org/u/carloratm)\
**Post date:** [October 3, 2019, 5:42pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/3 "2019-10-03T17:42:32Z")

</div>

Thanks a lot!

Got your changes, makes a lot of sense

---

<div class="post-metadata">

**Author:** ![rofrol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rofrol/32/60_2.png) [@rofrol](https://discourse.elm-lang.org/u/rofrol)\
**Post date:** [October 3, 2019, 11:44pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/4 "2019-10-03T23:44:15Z")

</div>

Simplified to not use `List` [https://ellie-app.com/6PWxDFKYPqra1](https://ellie-app.com/6PWxDFKYPqra1)

And here with `Just Value` [https://ellie-app.com/6PWMXj3Fpppa1](https://ellie-app.com/6PWMXj3Fpppa1)

---

<div class="post-metadata">

**Author:** ![carloratm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carloratm/32/2564_2.png) [@carloratm](https://discourse.elm-lang.org/u/carloratm)\
**Post date:** [October 4, 2019, 9:28am UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/5 "2019-10-04T09:28:02Z")

</div>

Thanks! really interesting!

I added a check to see if the move is actually possible, otherwise you could overwrite the cell value,  
the check I added (during a coffee break):

```
update : Msg -> Model -> Model
update msg model =
    case msg of
        Turn n ->
            if cellByIndex model.board n == Just Empty then
                { model
                    | board =
                        List.indexedMap
                            (\i prev ->
                                if n == i then
                                    model.currentCell

                                else
                                    prev
                            )
                            model.board
                    , currentCell =
                        if model.currentCell == X then
                            O

                        else
                            X
                }

            else
                model
```

---

<div class="post-metadata">

**Author:** ![carloratm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carloratm/32/2564_2.png) [@carloratm](https://discourse.elm-lang.org/u/carloratm)\
**Post date:** [October 4, 2019, 3:06pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/6 "2019-10-04T15:06:59Z")

</div>

Got a followup question.  
I would now like to write the function to check for a winner.

What is the way to do that? Given that there is no user interaction to call it.

Best,  
Carlo

---

<div class="post-metadata">

**Author:** ![aforemny](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/aforemny/32/2557_2.png) [@aforemny](https://discourse.elm-lang.org/u/aforemny)\
**Post date:** [October 4, 2019, 3:15pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/7 "2019-10-04T15:15:21Z")

</div>

Hi @carloratm,

you could check for a winner after every `Turn n` message. Suppose you have a function `isGameWon : Board -> Bool`, you could add a field `isWon : Bool` to your model and you could update that field every tiem your process a `Turn n`. You will have to be careful to call `isGameWon` on `updatedBoard` instead of `model.board` so that your change to the board is reflected. The following code illustrates how you can use a let statement to do that:

```auto
case msg of
    Turn n ->
        let
            updatedBoard = … -- List.indexedMap etc. like before
        in
        { model | board = updatedBoard, isWon = isGameWon updatedBoard }

```

If `model.isWon` is `True`, you could display a “Game over” label in your UI somewhere.

To check if a game is won, you will probably want to implement that using a long boolean expression, since there are only so many combinations of `cell1 == cell2 && cell2 == cell 3` for you to check.

---

<div class="post-metadata">

**Author:** ![carloratm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carloratm/32/2564_2.png) [@carloratm](https://discourse.elm-lang.org/u/carloratm)\
**Post date:** [October 4, 2019, 3:23pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/8 "2019-10-04T15:23:34Z")

</div>

Thanks @aforemny, the

```auto
let ... in

```

was the missing piece for me (I don’t think I have encountered that in the guide 🤔 )

---

<div class="post-metadata">

**Author:** ![aforemny](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/aforemny/32/2557_2.png) [@aforemny](https://discourse.elm-lang.org/u/aforemny)\
**Post date:** [October 4, 2019, 3:33pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/9 "2019-10-04T15:33:50Z")

</div>

@carloratm I would have expected to find it in the Core Language section of the guide, but I am having trouble finding an introduction to the let statement in the guide either.

Maybe you are willing to bring that up in Github Issues here: [https://github.com/evancz/guide.elm-lang.org/issues](https://github.com/evancz/guide.elm-lang.org/issues)?

---

<div class="post-metadata">

**Author:** ![malaire](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@malaire](https://discourse.elm-lang.org/u/malaire)\
**Post date:** [October 4, 2019, 3:34pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/10 "2019-10-04T15:34:16Z")

</div>

> [@carloratm](#):
>
> I don’t think I have encountered that in the guide

Quickly checking through the guide, first time it’s shown seems to be in [Commands and Subscriptions \> Time](https://guide.elm-lang.org/effects/time.html). Most examples in the guide are probably just so simple that they don’t really need to use `let ... in`.

---

<div class="post-metadata">

**Author:** ![rofrol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rofrol/32/60_2.png) [@rofrol](https://discourse.elm-lang.org/u/rofrol)\
**Post date:** [October 5, 2019, 4:56am UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/13 "2019-10-05T04:56:24Z")

</div>

I have added `gameState` function.  
Also I am generating html cells with `List.map`.

Version with `Maybe Value` [https://ellie-app.com/6Qw34t8LXzba1](https://ellie-app.com/6Qw34t8LXzba1)

I tried to use list destructuring

```elm
gameState board c =
    case Array.toList board of
        c0 :: c1 :: c2 :: c3 :: c4 :: c5 :: c6 :: c7 :: c8 ->
            if c0 == c && c1 == c && c2 == c || c3 == c && c4 == c && c5 == c || c6 == c && c7 == c && c8 == c || c0 == c && c4 == c && c8 == c || c2 == c && c4 == c && c6 == c || c0 == c && c3 == c && c6 == c || c1 == c && c4 == c && c7 == c || c2 == c && c5 == c && c8 == c then
                c
            else
                Nothing
        _ ->
            Nothing

```

but I was getting error

```auto
I am inferring a weird self-referential type for `c0`

```

BTW. There you have more Tic-Tac-Toe games in Elm [https://github.com/rofrol/elm-games#tic-tac-toe](https://github.com/rofrol/elm-games#tic-tac-toe) or on github [https://github.com/search?q=tic-tac-toe+language%3Aelm&type=Code](https://github.com/search?q=tic-tac-toe+language%3Aelm&type=Code)

---

<div class="post-metadata">

**Author:** ![pianomanfrazier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pianomanfrazier/32/2926_2.png) [@pianomanfrazier](https://discourse.elm-lang.org/u/pianomanfrazier)\
**Post date:** [October 6, 2019, 6:20pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/14 "2019-10-06T18:20:58Z")

</div>

I just did a tic tac toe in elm last week.  
I used a Dict instead of a list or array.  
[https://ellie-app.com/6Qtkw8k9JM9a1](https://ellie-app.com/6Qtkw8k9JM9a1)

---

<div class="post-metadata">

**Author:** ![carloratm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carloratm/32/2564_2.png) [@carloratm](https://discourse.elm-lang.org/u/carloratm)\
**Post date:** [October 7, 2019, 7:05am UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/15 "2019-10-07T07:05:09Z")

</div>

Ah nice video @pianomanfrazier

Thank you all!  
Hope to find time to finish my version soon, will share as well

---

<div class="post-metadata">

**Author:** ![carloratm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carloratm/32/2564_2.png) [@carloratm](https://discourse.elm-lang.org/u/carloratm)\
**Post date:** [October 7, 2019, 2:53pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/16 "2019-10-07T14:53:40Z")

</div>

Here is my version: [https://gitlab.com/2pxsolidblack/elm-tac-toe](https://gitlab.com/2pxsolidblack/elm-tac-toe)

Deployed here: [https://2pxsolidblack.gitlab.io/elm-tac-toe/](https://2pxsolidblack.gitlab.io/elm-tac-toe/)  
I have done that not looking at your (surely amazing) implementations, so please forgive any elm heresy I might have written.

Best,  
Carlo

---

<div class="post-metadata">

**Author:** ![rofrol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rofrol/32/60_2.png) [@rofrol](https://discourse.elm-lang.org/u/rofrol)\
**Post date:** [October 7, 2019, 3:57pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/17 "2019-10-07T15:57:50Z")

</div>

I have tested it on iphone but had trouble clicking nuttons on the right. Also there is something wrong with layout.

Link to screen record

---

<div class="post-metadata">

**Author:** ![pianomanfrazier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pianomanfrazier/32/2926_2.png) [@pianomanfrazier](https://discourse.elm-lang.org/u/pianomanfrazier)\
**Post date:** [October 7, 2019, 4:28pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/18 "2019-10-07T16:28:37Z")

</div>

Yes. I know. I need to fix the css. It is not mobile friendly at all. It works on a desktop. It’s a simple fix I just need to do it. Like a 10 min redo of the layout.

It’s broken on my android as well.

The cells on the right are wrapping to the next line.

---

<div class="post-metadata">

**Author:** ![pianomanfrazier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pianomanfrazier/32/2926_2.png) [@pianomanfrazier](https://discourse.elm-lang.org/u/pianomanfrazier)\
**Post date:** [October 7, 2019, 6:23pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/19 "2019-10-07T18:23:47Z")

</div>

@rofrol Fixed it over lunch. [https://ellie-app.com/6RCQmKnTq27a1](https://ellie-app.com/6RCQmKnTq27a1)

---

<div class="post-metadata">

**Author:** ![pianomanfrazier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pianomanfrazier/32/2926_2.png) [@pianomanfrazier](https://discourse.elm-lang.org/u/pianomanfrazier)\
**Post date:** [October 7, 2019, 6:37pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/20 "2019-10-07T18:37:36Z")

</div>

Nice. I like the svg drawn stuff.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [October 17, 2019, 6:37pm UTC](https://discourse.elm-lang.org/t/incredibly-n00b-question-by-a-2-days-elm-learner/4415/21 "2019-10-17T18:37:41Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.