7 ms·

Show HN: A puzzle game inspired by functional programming, written in PureScript

121 points by sharkdp 11y ago

sharkdp 11y ago
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
- shultays 11y ago
  It would be better if we could see the adjacent cubes with same color clearly. Especially on objective part, it is hard to determine how long a line segment is if it is same color.
  - sharkdp 11y ago
    Thank you for the feedback. I have been thinking about this earlier (https://github.com/sharkdp/cube-composer/issues/7 https://github.com/sharkdp/cube-composer/issues/7). I will definitely try to improve it.
    - thaumasiotes 11y ago
      Yeah, thin black borders between all the cubes would be a world of help.
    - odabaxok 11y ago
      How about truncate the cube a little bit ( http://en.wikipedia.org/wiki/Truncated_cube http://en.wikipedia.org/wiki/Truncated_cube )?
      - sharkdp 11y ago
        I will try this out in Isomer.js and see how it looks like. Thanks for the idea!
- deskamess 11y ago
  Like others I would like to second the visualization of block sizes better. And a brief explanation of commands like stackEqual (is there some sort of normalization going on to unit size?). push(X) would probably be better read as layer(X) or stack(X). Is there a way to normalize the program into a text string and also convert text string back into the program. This would allow for easy cut/paste sharing between users (including HN comments). This feedback is based on having completed up to 1.2 only.
  - sharkdp 11y ago
    Thank you for the valuable feedback! There is no import/export available right now, but you can take a look at the developer console for an output line like Program: ["rejectO","replaceYbyBY","replaceBbyOO"] I definitely like the idea, however. It should be quite simple to implement it. Basically, the 'code' right now is just the compositions of different 'transformers'. In pseudo-PureScript: rejectO >>> replaceYbyBY >>> replaceBbyOO
- minikomi 11y ago
  How about an in-row voxelperson or checkered flag, or something which indicates solved?
  - sharkdp 11y ago
    I love this idea! I'll try to implement it..
- fvirexi 11y ago
  [white] as a catchall is a bit misleading. Perhaps a different border color or an asterisk inside the square to clearly mark that it's not an actual white block?
  - sharkdp 11y ago
    Good idea! I will try both and see what works best. Thank you!
    - jessaustin 11y ago
      I would suggest just white (or whatever the background color happens to be), with a dashed border.
      - jessaustin 11y ago
        Now that I've seen the update, I think just make it transparent, so it is the color of the button on which it is placed. The dashed border is nice though.
        sharkdp 11y ago
        Thanks for the feedback! The dashed border was a really good suggestion. I like white better than 'transparent', though.
- boobsbr 11y ago
  An intro would've been nice for people like me who know nothing about functional programming.
- icefox 11y ago
  * 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.
  - sharkdp 11y ago
    Wow! Thank you so much for the detailed feedback. This will be very helpful for the future development. Most of these are 'small/easy' changes but I definitely see how they will improve the user experience. I think I agree with all of your points and will try to use it as a roadmap :-). The 'play test in person' tip is also very helpful. I will try this!
  - 11y ago
- ICWiener 11y ago
  When you try to apply all functions, the space becomes limited and you cannot see the resulting piece, especially when it gets tall.
- jessaustin 11y ago
  The block function diagrams would be clearer if they were stacked like they work instead of being turned on their side. That is, ▥ ↦ ▥ ▧ could instead be: ▧ ▥ ↦ ▥ I hope that makes sense! Also, the dropdown menu for levels could be replaced by something more informational (perhaps a tree control?), that indicated e.g. by color which levels have already been solved.
  - sharkdp 11y ago
    Yes, that makes sense! I've put it on my (now long) list of UI improvements. Thank you very much for the feedback!
- tgb 11y ago
  Poseidon was very tough for me, but I got it just now! Had to go back to it after finishing the rest. If you rotated the entire block display 90 degree vertically then the commands would match the display (as in R -> R R shows two red blocks adjacently instead of vertically), without having to make the commands too tall. (Just a possibility, maybe not a great way to do it.)
  - sharkdp 11y ago
    Thank you for your feedback! Poseidon is actually quite hard, true. I just promoted it to 'hard' :-). I think I will first try to display the two R blocks on top of each other in the name of the functions. I will keep your suggestion in mind, though.
deepnet 11y ago
This is very challenging. Very very challenging
MegaLeon 11y ago
Thi is damn fun, well done. Any plans for a mobile version?
- sharkdp 11y ago
  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.
gholap 11y ago
Awesome game! The stackequal function is confusing though... Any help or description would've saved a lot of time...
- sharkdp 11y ago
  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 11y ago
    Ah.. it's like .. smush equal neighbours together .. yeah, tricky to name!
cies 11y ago
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/Transformer.purs https://github.com/sharkdp/cube-composer/blob/master/src/Tra... Nice demo!
- sharkdp 11y ago
  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 11y ago
    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.
thomasahle 11y ago
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 11y ago
  stackEqual stacks neighboring blocks of the same color on top of each other.
  - sweezyjeezy 11y ago
    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 11y ago
      Exactly! The code for stackEqual is here: https://github.com/sharkdp/cube-composer/blob/master/src/Transformer.purs#L45-L49 https://github.com/sharkdp/cube-composer/blob/master/src/Tra... I should definitely add a better description somewhere!
glaberficken 11y ago
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
ilya-pi 11y ago
This is so amazing, I love it so much! Very challenging, yet highly entertaining.
- sharkdp 11y ago
  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 11y ago
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 11y ago
  Absolutely! I fixed it: https://github.com/sharkdp/cube-composer/commit/ece7c6dbeb0bed0f11dfc4fa292fbc2f1f073175 https://github.com/sharkdp/cube-composer/commit/ece7c6dbeb0b... Thanks for the feedback!
galfarragem 11y ago
I like also your geography quizz (not original but it's a nice implementation): http://david-peter.de/quizzity/ http://david-peter.de/quizzity/
prezjordan 11y ago
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 11y ago
  On the contrary. It was a pleasure working with Isomer! It's an integral part of the game .. thank you very much!
tseing 11y ago
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?
swang 11y ago
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 11y ago
  Thank you for the feedback. I will definitely work on these two points.

121 points by sharkdp 11y ago

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

shultays 11y ago
It would be better if we could see the adjacent cubes with same color clearly. Especially on objective part, it is hard to determine how long a line segment is if it is same color.
- sharkdp 11y ago
  Thank you for the feedback. I have been thinking about this earlier (https://github.com/sharkdp/cube-composer/issues/7 https://github.com/sharkdp/cube-composer/issues/7). I will definitely try to improve it.
  - thaumasiotes 11y ago
    Yeah, thin black borders between all the cubes would be a world of help.
  - odabaxok 11y ago
    How about truncate the cube a little bit ( http://en.wikipedia.org/wiki/Truncated_cube http://en.wikipedia.org/wiki/Truncated_cube )?
    - sharkdp 11y ago
      I will try this out in Isomer.js and see how it looks like. Thanks for the idea!
deskamess 11y ago
Like others I would like to second the visualization of block sizes better. And a brief explanation of commands like stackEqual (is there some sort of normalization going on to unit size?). push(X) would probably be better read as layer(X) or stack(X). Is there a way to normalize the program into a text string and also convert text string back into the program. This would allow for easy cut/paste sharing between users (including HN comments). This feedback is based on having completed up to 1.2 only.
- sharkdp 11y ago
  Thank you for the valuable feedback! There is no import/export available right now, but you can take a look at the developer console for an output line like Program: ["rejectO","replaceYbyBY","replaceBbyOO"] I definitely like the idea, however. It should be quite simple to implement it. Basically, the 'code' right now is just the compositions of different 'transformers'. In pseudo-PureScript: rejectO >>> replaceYbyBY >>> replaceBbyOO
minikomi 11y ago
How about an in-row voxelperson or checkered flag, or something which indicates solved?
- sharkdp 11y ago
  I love this idea! I'll try to implement it..
fvirexi 11y ago
[white] as a catchall is a bit misleading. Perhaps a different border color or an asterisk inside the square to clearly mark that it's not an actual white block?
- sharkdp 11y ago
  Good idea! I will try both and see what works best. Thank you!
  - jessaustin 11y ago
    I would suggest just white (or whatever the background color happens to be), with a dashed border.
    - jessaustin 11y ago
      Now that I've seen the update, I think just make it transparent, so it is the color of the button on which it is placed. The dashed border is nice though.
      - sharkdp 11y ago
        Thanks for the feedback! The dashed border was a really good suggestion. I like white better than 'transparent', though.
boobsbr 11y ago
An intro would've been nice for people like me who know nothing about functional programming.
icefox 11y ago
* 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.
- sharkdp 11y ago
  Wow! Thank you so much for the detailed feedback. This will be very helpful for the future development. Most of these are 'small/easy' changes but I definitely see how they will improve the user experience. I think I agree with all of your points and will try to use it as a roadmap :-). The 'play test in person' tip is also very helpful. I will try this!
- 11y ago
ICWiener 11y ago
When you try to apply all functions, the space becomes limited and you cannot see the resulting piece, especially when it gets tall.
jessaustin 11y ago
The block function diagrams would be clearer if they were stacked like they work instead of being turned on their side. That is, ▥ ↦ ▥ ▧ could instead be: ▧ ▥ ↦ ▥ I hope that makes sense! Also, the dropdown menu for levels could be replaced by something more informational (perhaps a tree control?), that indicated e.g. by color which levels have already been solved.
- sharkdp 11y ago
  Yes, that makes sense! I've put it on my (now long) list of UI improvements. Thank you very much for the feedback!
tgb 11y ago
Poseidon was very tough for me, but I got it just now! Had to go back to it after finishing the rest. If you rotated the entire block display 90 degree vertically then the commands would match the display (as in R -> R R shows two red blocks adjacently instead of vertically), without having to make the commands too tall. (Just a possibility, maybe not a great way to do it.)
- sharkdp 11y ago
  Thank you for your feedback! Poseidon is actually quite hard, true. I just promoted it to 'hard' :-). I think I will first try to display the two R blocks on top of each other in the name of the functions. I will keep your suggestion in mind, though.

deepnet 11y ago

This is very challenging. Very very challenging

MegaLeon 11y ago

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

sharkdp 11y ago
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.

gholap 11y ago

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

sharkdp 11y ago
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 11y ago
  Ah.. it's like .. smush equal neighbours together .. yeah, tricky to name!

cies 11y ago

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/Transformer.purs https://github.com/sharkdp/cube-composer/blob/master/src/Tra... Nice demo!

sharkdp 11y ago
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 11y ago
  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.

thomasahle 11y ago

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 11y ago
stackEqual stacks neighboring blocks of the same color on top of each other.
- sweezyjeezy 11y ago
  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 11y ago
    Exactly! The code for stackEqual is here: https://github.com/sharkdp/cube-composer/blob/master/src/Transformer.purs#L45-L49 https://github.com/sharkdp/cube-composer/blob/master/src/Tra... I should definitely add a better description somewhere!

glaberficken 11y ago

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

ilya-pi 11y ago

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

sharkdp 11y ago
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 11y ago

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 11y ago
Absolutely! I fixed it: https://github.com/sharkdp/cube-composer/commit/ece7c6dbeb0bed0f11dfc4fa292fbc2f1f073175 https://github.com/sharkdp/cube-composer/commit/ece7c6dbeb0b... Thanks for the feedback!

galfarragem 11y ago

I like also your geography quizz (not original but it's a nice implementation): http://david-peter.de/quizzity/ http://david-peter.de/quizzity/

prezjordan 11y ago

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 11y ago
On the contrary. It was a pleasure working with Isomer! It's an integral part of the game .. thank you very much!

tseing 11y ago

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?

swang 11y ago

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 11y ago
Thank you for the feedback. I will definitely work on these two points.