Ok so now I have moved my area (which I renamed cells) into the model :
type alias Model =
{
player1: Player
,player2: Player
,current: Player
,boxClicked: Maybe Int
,cells: List (List Box)
}
I initialize the cells like this :
cells: List (List Box)
cells =
[
[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 player1 player2 player1 Nothing cells, Cmd.none)
The boxStyle function is now like this (the background image url is taken
from a website I found quickly on the internet for my shapes to display.
Thanks jimdscott by the way!) :
boxStyle player =
case player of
Nothing ->
[
("border", "1px solid black")
,("width", "64px")
,("height", "64px")
,("display", "inline-block")
]
Just p ->
[
("border", "1px solid black")
,("width", "64px")
,("height", "64px")
,("display", "inline-block")
,("background-image",
"http://jimdscott.com/static/images/tic-tac-toe-"; ++ p.shape ++ ".png")
]
Now is the hardest part for me : the update function. Since elm is a
functional language, I suppose I have to recreate a new cells list with the
value of the box concerned by the click. In OOP languages, I'd just take
the reference of the box from the list, change the player and that's it...
Here is the update function with some not working changes...
CELLS_WITH_BOX_UPDATED would be the new cells list updated but I don't
understand how to do this...
update msg model =
case msg of
None ->
(model, Cmd.none)
ClickBox boxId ->
let
currentBox = List.map (filterRow boxId) model.cells
-- not working : currentBox.player = model.current
currentPlayer = changePlayer model.current
in
(Model model.player1 model.player2 currentPlayer (Just boxId)
CELLS_WITH_BOX_UPDATED, Cmd.none)
Le mardi 25 octobre 2016 14:16:00 UTC+2, Peter Damoc a écrit :
>
> On Tue, Oct 25, 2016 at 2:57 PM, Did <didier...@gmail.com <javascript:>>
> wrote:
>
>> Thanks Peter for your help! I could go further but now, there's another
>> issue. I would like to display the current player's shape when he clicks on
>> a cell. The thing is I don't know how to interact with the DOM in this
>> case. I know how to define an onClick event on each cell (displayed as a
>> div), but I don't know how to interact with a cell to display a shape in
>> its div).
>>
>
> You're making great progress.
> Now, it should be obvious that you need to change/update the "area" on
> clicks to reflect the current state of the game.
>
> move the area into the model and on each click check to see if it is a
> valid click and if it is a valid click, change the value of the box and
> switch to the other player.
>
> the view should also be changed to handle the move of the area into the
> model and you should change the rendering of the box to take into
> consideration the shape. ;)
> I've already started that work in the previous code when I parameterized
> the boxStyle but that's only one of the ways to handle it (style the div
> with a background image).
> another way to approach it is to add the image (or a plain piece of text)
> as a child of the box div.
>
>
> --
> 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.
