Small gig developing a PoC UI in SVG using Purescript + Halogen

Jobs
, ,
#1

Hi, I want to test the capabilities of Halogen + Purescript for managing medium complexity board games. In order to test that I want you to create a Proof of Concept (PoC) in SVG that allows me to evaluate suitability of the technological stack. Instead of going through that myself (still learning halogen and svg) I’ve crossposted this to several freelancing sites, but maybe here I’m able to find truly Purescript developers and we can avoid fees of freelancing platforms.
So if you are interested, read the requirements below and send me a message stating why you could tackle this and how much it would cost me.

Requirements:

  • I need a component un Purescript using Halogen that is able to draw a functioning minimal boardgame.

  • It needs to be in Purescript and as idiomatic as possible, no React, no vanilla Javascript, no other frameworks. Purescript + Halogen

  • It needs to build and package the application using spago.

  • The graphical engine needs to be SVG. No OpenGL, no HTML5 canvas, just plain SVG. Library JordanMartinez/purescript-halogen-svg-elems could be helpful.

  • The frontend will have a dropbox with two options:

    • Bitmap
    • SVG

  • When selecting one or the other, the SVG element will load a predefined map in corresponding format and will load as a background image. As an example of image for background, pick any map from https://www.amcharts.com/svg-maps/ and create the bitmap version from the SVG one.

  • Both the SVG and Bitmap need to be local assets packaged during the spago build-app step.

  • Superimposed in the map, there needs to be a grid of hexagons. The grid needs to cover the whole background image. See https://codepen.io/SanderMoolin/pen/BRLvNb as inspiration but mind that you need to cover the whole background.

  • If you clik with the mouse in the interior of the hexagon, the hexagon is filled in red, and the surrounding 6 other hexagons are in yellow, both with a transparency so we can still see the background map. Clicking again remove all the coloring.

  • In the webpage, when we display the map it is viewed using a viewport of 500x500, so only a portion of the map is visible.

  • If I left click and drag, the portion of the map that is displayed follows the mouse so we can see different parts of the map using this pan functionality.

  • Using the mouse wheel, I should be able to zoom in and zoom out on the map. Superimposed hexagons should resize accordingly.

  • When zooming out, stop the moment either the height or the width of the background image hits the size of the viewport.

  • When zooming in, stop the moment a single hexagon is being displayed.

  • Draw a square that could fit in an hexagon. It will act as a game piece. If I click on the piece, the effect will be to change the border of the rectangle making it thicker. There won’t be any highlighted hexagons as the default behaviour for empty hexagons.

  • If I drag the piece, the behaviour will be to move the piece until I release the mouse. The map won’t pan, only if the piece reaches on the borders of the viewport.

  • Instructions on compiling and running the code base need to be provided.

  • The code needs to act as a reference, so make the effort to making it as readable and understandable as possible.

4 Likes
#2

I sent you a message!

#3

I think it would be helpful if you could give an idea of your rough expectations in terms of time here. I expect you might get a range of offers, but for me, to really make this reference quality, I’d expect it to take at least a month of work, especially since you say there should be no use of frameworks.

I’m also curious why you say no frameworks, but definitely want to use Halogen. I’m not saying Halogen is a bad pick, but it probably wouldn’t be my goto choice for this project to be honest.

#4

Ok, let me address your points. In terms of time expectations I don’t see it longing more than a couple of days. In terms of code I see it as a single Halogen component listening to some mouse events, like clicking and dragging. If I underestimated one of the requirements, we can leave that off, just point to the offending one. Mind that maybe I overlooked something because of lack of proficiency on the stack.

This project is the intersection of three technologies, SVG, Halogen and Purescript. I think I’m at 20%, 20% and 80% proficiency on each, so instead of going spending time upping my level in SVG and Halogen, I’d like someone to provide a well crafted seed I can evolve. My hope is to have a well layered foundation I can iterate in the future, and learn the ropes while extending that seed.

Regarding my concern about frameworks, I’ve cross posted this in freelance sites and it was just a safety check for not having people offering the solution in React, Angular or Canvas. I should’ve edited the post.

Let me know if it is clearer now.

#5

I’d be interested in such PoC as I’m building a baduk game: pure-gnugo. I wasn’t able to figure out how to properly use SVG with halogen and I started the UI with canvases instead.

#6

I just wanted to thank @Adrielus for picking up this task and creating the PoC with all the features I was requesting. The code looks great and it is going to be a boost on my learning path of both SVG and Halogen.

I think others will benefit from this PoC so leaving here the repo (https://github.com/Mateiadrielrafael/purescript-board-game) for future reference and to help growing the community.

8 Likes
Let's discuss ways to render a grid-based game
#7

@Adrielus I’m very curious, having done both Concur and Halogen, are there any pros or cons for either that you can think of for this type of game? Thanks!

1 Like
#8

The SVG support in purescript-react (a major dependency of Concur) is quite poor. I don’t know whether it would have affected the implementation of this particular example, but I started working on an SVG-heavy hobby project with Concur and, unfortunately, ended up having to abandon it almost immediately due to purescript-react's poor and sometimes broken SVG support.

2 Likes
#9

I sometimes think a few of the other issues I’ve had in Concur may be React-related. Can’t wait to try one of the new backends. And now I’ve successfully hijacked the thread…

1 Like