You almost got it right. Here is your program with the view altered a
little bit (I've extracted the row display and the style of the cell)
import Html.App as App
import Html exposing (..)
import Html.Attributes exposing(..)
main =
App.program { init = init, update = update, view = view, subscriptions
= \_ -> Sub.none}
type alias Player =
{
name: String
,shape: String
,score: Int
}
type alias Model =
{
player1: Player
,player2: Player
}
type alias Box =
{
id: Int
,shape: Maybe Player
}
area: List (List Box)
area =
[
[Box 1 Nothing, Box 2 Nothing, Box 3 Nothing]
,[Box 4 Nothing, Box 5 Nothing, Box 6 Nothing]
,[Box 7 Nothing, Box 8 Nothing, Box 9 Nothing]
]
init: (Model, Cmd Msg)
init =
(Model {name = "Player 1", shape = "X", score = 0 } {name = "Player 2",
shape = "O", score = 0}, Cmd.none)
type Msg = None
update: Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
None ->
(model, Cmd.none)
view: Model -> Html Msg
view model =
div []
[
span[style [("font-weight", "bold")]][text model.player1.name]
,span[style [("text-decoration", "underline")]] [text
(toString(model.player1.score))]
,span[style [("margin-right", "15px")]][]
,span[style [("text-decoration", "underline")]] [text
(toString(model.player2.score))]
,span[style [("font-weight", "bold")]][text model.player2.name]
,div[]
[
area
|> List.map viewRow
|> div[style [("border", "1px solid black")]]
]
]
viewRow : List Box -> Html Msg
viewRow row =
div []
(List.map (\box -> div [id (toString box.id), style (boxStyle
box.shape)][]) row)
boxStyle shape =
[ ("border", "1px solid black")
, ("width", "64px")
, ("height", "64px")
, ("display", "inline-block")
]
On Mon, Oct 24, 2016 at 3:01 PM, Did <didier.cau...@gmail.com> wrote:
> Hello there!
>
> As a newbie, and in order to learn elm, I started to write a tic tac toe
> game. I wanted to start by drawing the game area but I'm stuck with one
> thing. I decided that my area was a list of list of Box : List (List Box).
> A box is defined by an id and maybe a player (so that I can track if a box
> was filled by a player or not). With procedural languages, I can do
> something like this:
>
> for(var i = 0; i < 3; i++ {
> for (var j = 0; j < 3,; j++) {
> drawBox(area[i][j]);
> }
> }
>
> But I can't figure out how to do this in elm... It does not even compile,
> but that's because I don't fully understand List.map...
>
> Here is the code I started writing. If someone can help me, I would really
> appreciate!
>
> import Html.App as App
> import Html exposing (..)
> import Html.Attributes exposing(..)
>
> main =
> App.program { init = init, update = update, view = view, subscriptions
> = \_ -> Sub.none}
>
> type alias Player =
> {
> name: String
> ,shape: String
> ,score: Int
> }
>
> type alias Model =
> {
> player1: Player
> ,player2: Player
> }
>
>
> type alias Box =
> {
> id: Int
> ,shape: Maybe Player
> }
>
> area: List (List Box)
> area =
> [
> [Box 1 Nothing, Box 2 Nothing, Box 3 Nothing]
> ,[Box 4 Nothing, Box 5 Nothing, Box 6 Nothing]
> ,[Box 7 Nothing, Box 8 Nothing, Box 9 Nothing]
> ]
>
> init: (Model, Cmd Msg)
> init =
> (Model {name = "Player 1", shape = "X", score = 0 } {name = "Player
> 2", shape = "O", score = 0}, Cmd.none)
>
> type Msg = None
>
> update: Msg -> Model -> (Model, Cmd Msg)
> update msg model =
> case msg of
> None ->
> (model, Cmd.none)
>
> view: Model -> Html Msg
> view model =
> div []
> [
> span[style [("font-weight", "bold")]][text model.player1.name]
> ,span[style [("text-decoration", "underline")]] [text
> (toString(model.player1.score))]
> ,span[style [("margin-right", "15px")]][]
> ,span[style [("text-decoration", "underline")]] [text
> (toString(model.player2.score))]
> ,span[style [("font-weight", "bold")]][text model.player2.name]
> ,div[]
> [
> area
> |> List.map
> |> List.map (\box -> span[id box.id, style [("border", "1px solid
> black")]][])
> |> div[style [("border", "1px solid black")]]
> ]
> ]
>
> --
> You received this message because you are subscribed to the Google Groups
> "Elm Discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to elm-discuss+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
--
There is NO FATE, we are the creators.
blog: http://damoc.ro/
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
