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 <[email protected]> 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 [email protected].
> 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 [email protected].
For more options, visit https://groups.google.com/d/optout.
