

Show HN: A puzzle game inspired by functional programming, written in PureScript - sharkdp
http://david-peter.de/cube-composer

======
cies
PureScript is a game changer. Compilation is fairly simple (unlike GHCJS),
full Haskell'ish type system and modern/compact syntax, picked up a lot of
momentum lately.

It find it by far the best AltJS implementation currently available.

Have a look at the code implementing the transformer functions, so clean!

[https://github.com/sharkdp/cube-
composer/blob/master/src/Tra...](https://github.com/sharkdp/cube-
composer/blob/master/src/Transformer.purs)

Nice demo!

~~~
sharkdp
Thank you! I started this project with plain JS + lodash, went on to JS +
ramda and ended up using PureScript. I absolutely recommend it. I also have
been using Haste before (Haskell to JavaScript), but I really like the
lightweight architecture around PureScript, the super-simple FFI and the
generated JS.

~~~
cies
Thanks for these insights. I used the Fay project to compile Haskell to JS for
some time. But in the next overhaul I probably switch to GHCJS, as for my
project interop with server-side Haskell code it a requirement.

If I did not need that interop I go for PureScript in a heartbeat.
CoffeeScript/TypeScript/ES6/Opal, they all don't come close to what PureScript
delivers.

------
sharkdp
This is still work in progress. I would love to hear your feedback.

GitHub link: [https://github.com/sharkdp/cube-
composer](https://github.com/sharkdp/cube-composer)

~~~
icefox
* Rather than saying to hit 'R' to reset have a button (keyboard can work too, but only allowing the keyboard goes against the rest of the game which is mouse/touch driven).

* On the right have the words "Goal" on top of the image, maybe put a box around it or something to separate it from the other images that appear.

* For the first level you need a "pit of success". Limit the available functions to only the one that works.

* The first few levels need to introduce and teach the user how to use each and every function separately. Say for 12 levels the first three teach/introduce a concept, the next 6 are actual simple/medium levels and the final 3 are the more difficult (but not impossible) levels before repeating and introducing a new concept.

* When you solve it don't put the message up top in little text, but next to the program and bigger bolder so the user knows. Ideally with some sort of css transition.

* When you solve it put a link to "Play next level" or automatically go to the next level after a short animation or something

* Only expose levels after you have beat them.

* After doing a function rather than instantly showing the next cube put a .5 second opacity transition (or something) so the user will notice what they did.

Lastly, but most importantly play test in person. Show someone your game, but
don't say a single word. Write down everything they do wrong and debate how
you can improve it and try again. Do not give them advice on what to do. If
they can't figure it out neither will a ton of random people on the internet
(I didn't the first time I saw the game and just closed it as I didn't realize
I had to drag it over and I was on a tablet and saw the 'R' command and figure
there was other keyboard only commands.)

Remember it is _not_ fun to lose. Hard is fun, but you want to guild the user
to have fun, be challenged, and build on the game concepts you have taught
them. It isn't fun to give up because you have no clue what to do.

If you build in a way that users can create puzzles and share them (say by
putting the user generated level in the url) the game would have more life as
users spread the word by showing off their creations.

~~~
ICWiener
> After doing a function rather than instantly showing the next cube put a .5
> second opacity transition

Please, no animation. Instantaneous feedback is perfect as it is. My 2cts.

~~~
icefox
Yeah .5 seconds is way to long, the reason for the animation is that in this
game you are looking at the list of functions and only after you are done does
your eyes have time to register changes elsewhere. If it has already changed
your brain has to try to figure out what has changed when the system can
provide hints.

Because you would rapidly move them around changing it to be 0.05 or something
just slow enough so that your brain would notice movement above, but not slow
enough to impede in trying new things.

------
gholap
Awesome game! The stackequal function is confusing though... Any help or
description would've saved a lot of time...

~~~
sharkdp
I couldn't come up with a better name for this function. I will try to add a
help-panel or introductory chapters to make this more clear. Thank you very
much for the feedback.

~~~
minikomi
Ah.. it's like .. smush equal neighbours together .. yeah, tricky to name!

------
swang
Maybe I've just stared at the page too long looking for what to do, but I had
to come into the comments to figure it out. My eyes completely glossed over
"Goal" as it doesn't really stand out and I just assumed that shape was a
logo. Could use some short text saying something like, "Make the left image
look like the right image."

Otherwise cool/fun game concept, although like others have mentioned,
stackEqual is a bit confusing as to what it does.

~~~
sharkdp
Thank you for the feedback. I will definitely work on these two points.

------
tseing
Great implementation! I'm researching functional programming front-end
solutions for my latest web app project. PureScript has been on my radar but
would love to hear about others' experiences. Has anyone else here used
PureScript? What was your experience like?

------
galfarragem
I like also your geography quizz (not original but it's a nice
implementation):

[http://david-peter.de/quizzity/](http://david-peter.de/quizzity/)

------
MegaLeon
Thi is damn fun, well done. Any plans for a mobile version?

~~~
sharkdp
Thank you. The drag and drop should work on mobile (I use
[https://github.com/RubaXa/Sortable](https://github.com/RubaXa/Sortable)). I
definitely have to make the layout responsive, however.

------
prezjordan
Always nice to see isomer [0] in the wild :) Cool game - I hope the library
didn't slow you down too much!

[0]: [http://jdan.github.io/isomer/](http://jdan.github.io/isomer/)

~~~
sharkdp
On the contrary. It was a pleasure working with Isomer! It's an integral part
of the game .. thank you very much!

------
ilya-pi
This is so amazing, I love it so much! Very challenging, yet highly
entertaining.

~~~
sharkdp
Thank you! I haven't really worked on a nice 'transition' in difficulty. I
will try to add more introductory levels with explanations in the future.

------
fvirexi
Amazing game!

On the "Fort" level, the map [blue][white]->[blue] removes the [blue] block,
rather than the [white]. This is a different behavior than the map
[red][red]->[blue], which converts two [red] into one [blue].

~~~
sharkdp
Absolutely! I fixed it: [https://github.com/sharkdp/cube-
composer/commit/ece7c6dbeb0b...](https://github.com/sharkdp/cube-
composer/commit/ece7c6dbeb0bed0f11dfc4fa292fbc2f1f073175)

Thanks for the feedback!

------
glaberficken
I know this is not reddit, but I couldn't resist being a bit juvenile about
this =) [http://imgur.com/9W6DGFj](http://imgur.com/9W6DGFj)

------
thomasahle
I solved the second one using stackEqual. Still have no idea what it does...

The interface is really fun though, and the blocks look nice. Only the
"Solved!" text is quite small and not easy to spot.

~~~
altschuler
stackEqual stacks neighboring blocks of the same color on top of each other.

~~~
sweezyjeezy
Not quite, it stacks neighbouring columns with the same pattern of colours on
top of each other, e.g.
[http://i.imgur.com/35N4tPu.png](http://i.imgur.com/35N4tPu.png)

The columns have to be the same pattern exactly (same height, same colours)

~~~
sharkdp
Exactly! The code for stackEqual is here: [https://github.com/sharkdp/cube-
composer/blob/master/src/Tra...](https://github.com/sharkdp/cube-
composer/blob/master/src/Transformer.purs#L45-L49)

I should definitely add a better description somewhere!

------
deepnet
This is very challenging.

Very very challenging

