Code Monkey home page Code Monkey logo

cube-composer's Introduction

cube composer

A puzzle game inspired by functional programming, written in PureScript.

Play it online!

Local install

git clone https://github.com/sharkdp/cube-composer.git
cd cube-composer
npm install
bower install
gulp

If no errors occur, the game can now be played on a browser by opening index.html.

Creating new levels

Levels are grouped into chapters. Each chapter has a dedicated file in the folder src/Levels/. To create a new chapter, you can copy one of the existing files, bump the chapter number and add it to the allChapters list in Levels.purs. Each chapter comes with a specific list of transformers (functions). As an example, we look at map (Yellow ↦ Red) in Chapter0.purs:

"replaceYbyR" :> {
    name: "map {Yellow}↦{Red}",
    function: replaceSingle Yellow Red
}

Here, replaceYbyR is an internal ID which is used to identify the transformer, map {Yellow}↦{Red} is the displayed name of the transformer ({x} will be replaced by a small cube of color x) and replaceSingle Yellow Red is the implementation of the transformer. The function field in the record has to be of type Transformer, where

type Stack = List Cube
type Wall = List Stack
type Transformer = Wall -> Wall

Consequently, a Transformer is a function that transforms a 2D array of cubes (Wall). Some basic transformers are given in Transformer.purs.

Each level is given by a record like

"0.2" :-> {
  name: "Level title",
  help: Just "...",
  difficulty: Easy,
  initial: [[Yellow, Yellow, Red], [Yellow, Red], ...],
  target: [[Red], [Red], [Red], [Red], [Red], [Red]]
}

where 0.2 is the Chapter.Level ID of the level, name is the title of the puzzle, help is the help text shown in the right panel, difficulty is Easy, Medium or Hard and initial :: Wall and target :: Wall are the inital and target 2D arrays of cubes.

To view all levels with all shortest solutions for each (can be useful, among other things, to verify newly introduced levels can be solved as planned – and cannot be solved in another way which undermines their point):

gulp prod
node dist/cli.js

Please send a pull request if you would like to add your puzzles to the game.

CI status

Build Status

cube-composer's People

Contributors

dependabot[bot] avatar djsiroky avatar franklinchen avatar sharkdp avatar shlomif avatar tomyuval avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cube-composer's Issues

Allow localization to other languages

Eg I would try to provide translation to Russian if it could be easily integrated. It would make the game available to younger children who know only basic English, or none at all.

Level 4.1 solution not recognized

From what I can tell, I met the goal on level 4.1 but the game does not recognize my solution.
My solution: [map(x2), map(+1), filter even, map(-1)]. See attached screenshot:

cube_composer_bug_level_4 1

Let players know if better solutions were possible

This is a great game - thanks a lot! I have a suggestion for a feature.

Something I found myself wondering as I was playing it is: am I using the functions efficiently? It'd be great to be able to know how close to optimal my solution was, because I would have preferred to stay on a level to improve my solution than to move to a higher level in some cases.

It's possible that 'optimal' could take on a lot of different meanings once you get into the higher levels - I haven't made it that far yet. But at least for the beginning levels, I imagine it would be tied to the number of functions used.

While I was playing I was looking for an option like 'training mode' or something that would only accept optimal solutions (or at least would alert you about suboptimal solutions).

Reduce horizontal space

  • Reduce height of canvas
  • Move cube-composer logo into canvas?
  • Move 'available functions' and 'program' labels below the boxes?

The function dialog sometimes obscures the view (perhaps allow to drag+move it?)

cube-composer-screenie-with-function-dialog-obscuring-the-view

Hi and thanks for cube-composer!

As can be seen in the screenshot, the function's dialog sometimes obscures the view of the cubes, even on a 1920*1080 screen like mine. One thing that can be done is allowing to drag and move it so the rest of the page will be visible. There's http://www.walterzorn.de/en/dragdrop/dragdrop_e.htm for that (which seems old) and I also found http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/ but the latter link seems overly detailed.

Click and drag doesn't work on Chrome or Firefox

Chrome 78.0.3904.97
Firefox 70.0.1
OS: Ubuntu 18.04

Expected behavior: 0.3 Goal states: "you can change the order of the functions by drag and drop." So, when I click and drag one function among several, in the right hand panel, it should go where I drop it.

Actual behavior: I get visual feeback that the function has been picked up - the image follows my mouse, but when I drop it, the image just disappears. The image of the function in the right panel does not move, either during dragging or after.

How to reproduce. Start from level 0.3 so that many functions are available. Click three in the left panel so that they appear in the right panel. Click and drag any one of them in the right panel and drop it in a new location, also within the right panel.

Other information: Clicking and dragging works for me in this test page: https://dunnbypaul.net/js_mouse/. I've also tried it in Chromium.

When empty, the right panels says "drop functions here". This also does not work.

Happy to provide other details. Really hoping this isn't my fault!

General UI improvements

See discussion here: https://news.ycombinator.com/item?id=9644324

  • "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?"
  • stack(X) instead of push(X)?
  • Replace 'press R to reset' by a button (the rest of the game is mouse-driven)
  • In a transformer like Y -> BB, the two B's could be stacked on top of each other
  • Bigger "Solved!" message... render something on the canvas?
  • "Play next level" button, once it is finished
  • Highlight the 'goal' / target (border around, "Make the left image look like the right image.", etc.)

Level management

  • Data format for levels
  • Storage:
    • localStorage access
    • save and restore the current game state properly
  • UI:
    • level selector
    • change levels and save to/load from localStorage correctly

Ideas for designing puzzles

  • Select a small set of transformers + initial state
  • make sure there is just one (shortest) solution?
    • necessary requirement: the transformers in the solution have to be non-commuting
  • make sure that the chosen transformers are not redundant (eg: T1 · T2 is equal to T3)
  • make sure that all possible (intermediate) outcomes are within some boundaries (prevent rendering problems)

Specific ideas:

  • some puzzles which are fixed at one or two columns
    • use tuple-functions or arrows?
  • represent binary numbers with fixed-length towers

Boundary checks

  • Make sure that it is not possible to generate an empty list (simply use the solver with the empty list as a target). This makes the changes in dc175a0 unnecessary.
  • Make sure that the stacks don't grow too large (harder)

Add option to reset all levels

Currently the only way to reset the status for all levels is manually selecting them, seeing the solution and then pressing reset.
It would be useful to have a replay functionality.
Just add a Reset all button under the choose level dialog with a little confirmation dialog.

Add some training exercises

Great game! Just a suggestion - a few very basic examples, maybe with one step each, just to illustrate the purpose of each function, would probably be very useful.

Show number of the instruction

Some kind of visual feedback: which "wall" belongs to which instruction?

Related: show arrow which indicates the direction of the program?

This would also allow us to add functions by pressing the corresponding key

Animations?

Show animation if puzzle has been solved? Rotating target etc..
Show animation for each program change?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.