Learning Elm + Elm UI

[Hasimir]

Ok… I managed to implement the SVG version of the die.
But damn the Elm/Svg documentation is terribly obscure! x_x

And I can’t seem able to figure out how to positin properly the SVG elment within the ElmUI structure.
I mean…
(reference the Git repository linked above)

I have a row with the IMG die alongside the SVG die. Cool.
But those two elements are supposed to have 10px padding between them… and they do not

I also had to manually and absolutely position the number within the die … is this the proper thing to do? Or could/should I find a way to just “center” it horizontally and vertically?

[mattpiz]

Svg is kind of a thing of its own. So once you get inside the Html.svg tag the rules are different from what you are used to in HTML. I’d suggest trying to familiarize yourself with SVG alone, playing with MDN tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial.

Then it’s just a matter of putting inside your elm-ui layout with Element.html.

[Hasimir]

Thanks for the hint.
Also, your words made me realise that since the SVG element is extraneous to the UI structure, then I could encase it within an el element … and boom! Perfect positioning is back!

[Hasimir]

Continuing to mess around with the Random exercise, I am now trying to implement the last task: show the dice rolling a random number of times before settling down to the final result.

I’m having trouble figuring out how to build such a thing without loops x_x
Also, the fact that I can’t just generate a number in a function, but I need 1 function to set the generator rules and a second one to use a command to produce the number… is confusing.

My idea is simply to call the die-roll function multiple times.
But in terms of actual logic and code it’s resulting very tough for me.

I add a new type of Msg
type Msg
= Roll
| NewFace Int
| RollBetter
| RollMore

Then I think I should add a new case to the Update function, but given the expected structure it’s unclear to me HOW I am supposed to do it

In my mind I need to create a random number, to be used as the number of times the die needs to roll.
But this already is a problem as it should be something like…
Random.generate Cmd rollRules
The Cmd part is the problem… what is it? What am I supposed to create to make it work?
In the example/tutorial this fat that Cmd was simply a Type (the NewFace one).
So… what… I create a Repeat thing?

type Msg
    = Roll
    | NewFace Int
    | RollBetter
    | RollMore
    **| Repeat Int**

So I write a function that uses these pieces to generate my new random number…

moreRandom =
    Random.generate Repeat rollRules

This sends the update case function into a panic, because not all cases are covered.
So I add a new case…

RollMore ->
            moreRandom

This is not good, as the case is a Cmd Msg while the rest of the cases are (Model, Cmd Msg).
I can fix this by writing the case like this:

    RollMore ->
        (model
        , moreRandom)

But why? I don’t need the model in here!
Anyway, this produces a different problem, as the Repeat case is not taken care of.
And here I basically get totally lost

[stevensonmt]

It might be easier to help if you put this in an ellie link.

I don’t think I understand the need for a RollMore Msg at all, though. When you want to update the die face, you just use Roll again.

[Hasimir]

I am making progress, but I keep being stuck on one point: the recursion

My logic is:

• when a specific button is clicked I call a function
• this function generates a random number and updates a counter stored in the model, and passes it to one of the case Msgs
• this case Msg calls a second function that evaluates the counter stored in the model:
  IF the evaluation is true THEN

1. call the function that generates and displays a random number (roll a die)
2. update the model.counter to decrease by 1
3. call again this same function, to evaluate the model.counter again
   ELSE do nothing or roll a die one last time, whatever

But because Elm has no statements, only expressions, I can’t seem able to make this work. And I’m failing at figuring out a different shape.

[Hasimir]

Is git good enough?
Ellie gives me more errors because of the SVG import

Hasimir0/myElmGuide/blob/master/random.elm

[Hasimir]

Almost there!
I fixed everything, except one case branch x_x
The case Counter mismatches…

The 5th branch is a tuple of type:
( { a | dieFace : Int, reRoll : Int }
, #{ b | reRoll : number }
-> { action : Cmd Msg, counter : { b | reRoll : number }, recursion : Msg
}#
)

But all the previous branches result in:
( { a | dieFace : Int, reRoll : Int }, #Cmd Msg# )

The github holds the updated code.

[jxxcarlson]

Another way to do this is to import the module in the repl and then
say the function name. As a silly example, suppose that
you did elm init and then made a file src/Experiment.elm like this:

module Experiment exposing(..)

ladidah x y = 
  "I, " ++ x ++ " really like the number " ++ String.fromInt y

Go into the repl, and do this:

$ elm repl
> import Experiment exposing(..)
> ladidah
<function> : String -> Int -> String

For fun, we try out the function:

> ladidah "Joe" 123
"I, Joe really like the number 123" : String