4

I am trying to make a simple game on Elm with elm-ui for my interest, but I stacked how to turn on/off mouseOver attribute. I made a sample code for my explanation: https://ellie-app.com/9rvqJxz4ypga1

In this code, model has only two status (Myself|Opposite) which represent the turn of the game. I would like to turn on changing background color of each tiles with mouseOver when model has the same status as the label of the tile.

viewTile is the main code which contains what I want to do.

viewTile : Player -> Model -> Element Msg
viewTile player model =
    let
        desc =
            if player == Myself then
                "Myself"
            else
                "Opposite"
        changeMouseOver =
            if player == model then
                mouseOver [ Bg.color (rgba 1 0.2 0.3 0.5) ]
            else
                mouseOver []
    in
    column [ width (px 100), height (px 100), Border.width 1, changeMouseOver ] [ el [ centerX, centerY] ( text <| desc ) ]

For example, if model has "Myself" status, mouseOver will turn on only the tile labeled "Myself" . In addition, "Change turn" button can change model like Myself <-> Opposite. This trial showed good result if you clicked this button one time. However if you clicked again (means to recover model to Myself), mouseOver of "Myself" tile do not work. I tried move the if code from let-in section to external, but it did not also work well.

How should I change the code to work turn on/off mouseOver?

This issue seems to be browser-specific one, I tried this code with Ellie in Safari 13.0.5. Firefox 78.0.2 works fine.

AnMint
  • 41
  • 3
  • 1
    Your Ellie works fine in my browser (Firefox). – 8n8 Jul 16 '20 at 18:55
  • Thank you 5ndG. I totally did not recognize browser dependency. Actually my code work well and can change mouseOver work with changing model in Firefox as you said. I have worked in Safari. I am not sure the root cause though. – AnMint Jul 16 '20 at 21:42
  • I can confirm that the Ellie app does not work properly on Safari. I tried with version 13.1. You should edit your question (and tags?) to include that this is browser specific issue. – kaskelotti Jul 17 '20 at 06:52
  • Thanks kaskelotti. I edited my question and tags following to you. I think this is not Ellie issue because I reproduced this error(?) with elm-reactor in Safari 13.0.5. Firefox still works fine. I think this is compatibility issue between Safari and Elm (or generated js). – AnMint Jul 17 '20 at 08:57
  • Are there any errors printed in the browser's console or does it fail silently? – ivarni Jul 17 '20 at 11:43

0 Answers0