Made a little sliding puzzle

General Made with Ratatui
1

I made a little sliding puzzle (also known as the “15 puzzle”). It’s not very fancy, there’s a lot you could add to it, like a difficulty setting, or a step counter, but hopefully you find it pretty fun as is :grin:

1 Like
2

I’d recommend adding a screenshot / gif (use vhs) of this in action. Take a look at the vhs .tape files in the ratatui repo for inspiration.

3

Good idea, thank you!

slider

4

Looks great. I did a quick experiment about using solid color background and the QUADRANT_INSIDE borders

image
image636×652 37.7 KB

let color = if n % 2 == 0 { Color::Gray } else { Color::Blue };
let block = Block::bordered()
    .style(color)
    .border_set(border::QUADRANT_INSIDE);
let text_area = block.inner(area);
block.render(area, buf);
Line::from(format!(" {:02}", n))
    .fg(Color::Black)
    .bg(color)
    .render(text_area, buf);

On the gif, you can get rid of the cli typing part by using the Hide and Show vhs instructions.

As an aside, I’d generally avoid putting images in your source repos as they tend to bloat the repo size over time. Likely not a big deal for a small project, but one that matters for a much larger one.

Some good alternatives: vhs hosting (add --publish to the vhs command), upload it in a github comment on a PR and then link that, your own website or an image hosting site like imgur.

5

Nice, that looks much better! And it may be helpful for my next project too (which I’ll probably post about soon).

1 Like