Slidle+

Inspiration

The primary inspiration for this project was Wordle. I wanted to translate (roughly) the experience to a slide puzzle to see how it plays. I happened to enjoy it very much, but it felt a little light for the contest, so I added a photo game mode as well.

What it does

There are three puzzle modes. Simple for those who prefer; Slidle, a reimagining of Wordle as a slide puzzle; and Photo, a slide puzzle made from a selection of photos. Theming syncs to the photo. In Slidle, a tile in the correction position is green, a tile bordering it's correct position is yellow (the correct position can be one tile away, horizontally, vertically, or diagonally), and all other tiles are grey. Leaving a color legend out was a design decision as it makes the first experience more challenging and rewarding in my tests. A focus was made to ensure the play style is consistent across platforms. Playable on web, Android, or iOS, there are 3 forms of input: touch/click the tile, keyboard arrows, and swipe (on touchscreen or mousepad). There is a swipe sensitivity setting to compensate for preference and variations in hardware. When a tile is tapped that moves more than one tile, the move count increases by the total number of tiles moved, this is to keep scoring consistent across play styles. The user can also show/hide both move count and timer for a more casual experience. Player can download/share their "score card", which includes a QR code to challenge others to the exact same puzzle.

How I built it

Built from the sample project for this challenge, which uses Flutter & BLoC. A lot of changes were made.

Challenges I ran into

This was my first time working with BLoC, so there was a learning curve. I was unable to finish my plan to split user selected photos due to issues working with multithreading across web/mobile. I figured it out, but simply ran out of time.

Accomplishments that I'm proud of

I am VERY happy with the results of my approach to challenging friends. I feel it is a sophisticated approach to cross-platform asynchronous multiplayer that requires no backend. It captures an image of the puzzle widget (pre-solve) to share as well. I also feel that the Slidle concept feels like a good translation of Wordle as I had hoped. You start out not knowing the phrase, and receive colored hints as you move tiles, eventually leading to the solution.

What we learned

Starting with the sample was certainly helpful, and I learned a lot about the BLoC approach to state management. I look forward to using it in future projects. I learned more about handling multi-threading differences for web vs native with Flutter. I also learned a good bit about Flutter's animation framework.

What's next for Slidle+

I plan to add more phrases for the Slidle puzzle, to add variety and replay value (I went with just the one phrase for the challenge bc it is the message that I want everyone to see!). I would like to encode the puzzle data differently in the shared URL to prevent easy abuse/manipulation. I am also going to update the Photo theme to allow use of custom photos, including extracting theme colors from the photo, as well as the Photo shuffle animation. as I did not have enough time to implement my idea before submission. I will call it Photobomb!