How to conditonally include elements in a list?

Learn
1

I’m building a simple hangman game to learn elm, translating it from some old javascript code.

To draw the hangman with a canvas, I found https://package.elm-lang.org/packages/joakin/elm-canvas/latest/ which is working out pretty well.

However, I need to conditionally draw parts of the body depending on how many turns the player has left.

Here’s my old Javacript code:

        let ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, 300, 300);
        ctx.strokeStyle = "black";
        ctx.lineWidth = 5;
        ctx.lineCap = "round";

        // Draw the stand.
        ctx.moveTo(3, 297);
        ctx.lineTo(297, 297);
        ctx.moveTo(13, 297);
        ctx.lineTo(13, 3);
        ctx.lineTo(150, 3);
        ctx.lineTo(150, 25);

        let turns:number = game.getTurnsLeft();

        if (turns < 8) {
            // Draw the head.
            ctx.moveTo(150, 25);
            ctx.arc(150, 50, 25, -Math.PI / 2, 2 * Math.PI);
        }
        if (turns < 7) {
            // Draw the body.
            ctx.moveTo(150, 75);
            ctx.lineTo(150, 180);
        }
        if (turns < 6) {
            // Draw left arm.
            ctx.moveTo(150, 90);
            ctx.lineTo(90, 150);
        }
        if (turns < 5) {
            // Draw right arm.
            ctx.moveTo(150, 90);
            ctx.lineTo(210, 150);
        }
        if (turns < 4) {
            // Draw left leg.
            ctx.moveTo(150, 180);
            ctx.lineTo(90, 270);
        }
        if (turns < 3) {
            // Draw right leg.
            ctx.moveTo(150, 180);
            ctx.lineTo(210, 270);
        }
        if (turns < 2) {
            // Draw left foot.
            ctx.moveTo(90, 270);
            ctx.lineTo(70, 260);
        }
        if (turns < 1) {
            // Draw right foot.
            ctx.moveTo(210, 270);
            ctx.lineTo(230, 260);
        }

        ctx.stroke();

And here’s my elm code. How do I add something like an if {} statement to only draw parts of the man depending on how many turns the player has left?

    Canvas.shapes
        [ -- Settings
          Canvas.Settings.Line.lineWidth 5
        , Canvas.Settings.Line.lineCap Canvas.Settings.Line.RoundCap
        , Canvas.Settings.stroke Color.black
        ]
        [ -- Shapes
          path ( 2, 297 )
            -- Draw the stand.
            [ lineTo ( 297, 297 )
            , moveTo ( 13, 297 )
            , lineTo ( 13, 3 )
            , lineTo ( 150, 3 )
            , lineTo ( 150, 25 )
            ]

        -- Draw the head
        , circle ( 150, 50 ) 25
        , path ( 150, 75 )
            -- Draw the body
            [ lineTo ( 150, 180 )

            -- Draw left arm
            , moveTo ( 150, 90 )
            , lineTo ( 90, 150 )

            -- Draw right arm
            , moveTo ( 150, 90 )
            , lineTo ( 210, 150 )

            -- Draw left leg.
            , moveTo ( 150, 180 )
            , lineTo ( 90, 270 )

            -- Draw right leg.
            , moveTo ( 150, 180 )
            , lineTo ( 210, 270 )

            -- Draw left foot.
            , moveTo ( 90, 270 )
            , lineTo ( 70, 260 )

            -- Draw right foot.
            , moveTo ( 210, 270 )
            , lineTo ( 230, 260 )
            ]
        ]
2

By conditional adding empty lists:

    Canvas.shapes
        [ -- Settings
          Canvas.Settings.Line.lineWidth 5
        , Canvas.Settings.Line.lineCap Canvas.Settings.Line.RoundCap
        , Canvas.Settings.stroke Color.black
        ]
       ( [ -- Shapes
          path ( 2, 297 )
      ]
     ++ 
     if (model.turns > 10 )then
            -- Draw the stand.
            [ lineTo ( 297, 297 )
            , moveTo ( 13, 297 )
            , lineTo ( 13, 3 )
            , lineTo ( 150, 3 )
            , lineTo ( 150, 25 )
            ]
     else
         []
    ++ ...
3

Thank you Hans-Helmut! That worked!

4

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