I have in mind a math educational game. It will require rudimentary graphics, like drawing the inside of buttons with simple graphics, drawing division bars, square-root symbols, and so forth. It may benefit from some rudimentary animation. It needs to receive clicks on parts of the drawings in order to highlight these parts. Possible dragging, but not necessary.
Can Elm do things like these? Do I need to give more specifics?
If you are drawing with svg, beware of not using the offsetX/Y properties of the events if the objects you draw are also able to emit mouse events. This is because the reference for the offset computation will change to the object under the mouse instead of the svg drawing area. So it’s a good idea to record the location of the svg and to listen for clientX/Y properties instead.
If you expect your game to be usable on tablets, use touch events or pointer events. For pointer events, the only reliable property working accross browsers is the clientX/Y property of the event. You might have issues with safari and firefox mobile if you use movementX/Y properties.
Thanks for the tips. I’m excited… I used Elm a couple years ago for a teaching project and the student and I loved it. For this current project I looked into Angular and the learning curve seemed to be very steep, while I already understood the basics of Elm.
One question about SVG. I’m assuming it must be encapsulated in an element like a div. Do you know if it’s clipped to that div or can extend beyond it? Or is that an optional setting? I guess I probably need to dig into the docs. I’m already a little familiar with vector graphics programming in other contexts, but I have a lot to learn.
I realized that I just need to get the x/y position of the click and compare that to the different locations within my drawing. For some kinds of SVG drawing, like bezier curves, it’s a little hard to compute the x/y location of a specific part of the curve (I think so… maybe I’m wrong) but I’m going to be drawing boxes and things that have an easily identifiable position.