Art-puzzel

Home page
Tiles in place
Desert Bridge
Desert Bridge reset
Josua Tree Sunset
Fractal

Inspiration

I was inspired to enter this challenge because I've developed with Flutter in the past for mobil and have some future projects I want to work on. Also I love puzzles!!

What it does

My project has 4 different versions of a slide puzzle to play. The first version called J-tree uses numbers to indicate the correct position along with color cues to indicate when a piece is in the correct position.

How I built it

I built Art Puzzle by modifying the example code provided and adding digital assets I created. The following is a synopsis the overall process I went through.

First I needed to set-up my development environment by updating my tool chain. (That was of course after I played with the example puzzle for a while.) I've been casually working in flutter and doing tutorials so I had an older version in place.

I cloned the git repository for the project example provided and opened it in VScode. That's when I realized I needed to update some things, so I ran flutter doctor from a terminal to see exactly what was needed. Based on the result I discovered I needed to evaluate the updates first since they required an os update. I knew this might affect other legacy applications on my system. After some research and testing open source replacement applications for graphics, I proceeded with the update. Once I brought my development environment up to speed I started playing around with the code.

I looked at the file structure and viewed the image and sound files then edited the colors.dart file. Next I skimmed all the code in the example files and updated some fonts in text_styles.dart. Then I went back and reviewed all the ideas I had noted when playing the puzzle before. I grouped the ideas by functions and looked for the files where I could implement those functions.

Next I replaced some images in the assets folders to create a new puzzle with the existing code in the dashatar theme. I noticed several of my ideas were in response to the number of successful tiles in place so I added a color to represent this. Next I added an additional else if statement to simple>simple_puzzel_layout_delegate.dart to change the background color of a tile that was in the correct position. This was very satisfying as it gave me useful information while playing, making it easier to see what moves to make.

At this time I went on to create three different styled picture puzzles to replace the dashatar versions. Next I updated all the colors to compliment the new images. After replacing the flutter logo with my own and changing the names of the puzzles I decided to build for additional platforms.

To spit out a build for a web app was relatively easy except I was hosting it in a sub-directory on my website so it did not work on first try. When I viewed code from the browser of the published puzzle I saw the comment in the code to adjust the root directory for serving from a non root position.

Next I went for the Android release which required updates to Kotlin and a few other things - again I've used the tools in the past but needed to update to the latest version of things to get a successful build. Luckily Android studio makes this trivial. After testing and viewing the application on the emulator I went back to the flutter docs to see what was necessary for a release on the play-store. Step by step I went through the recommendations for an Android release.

I've released on iOs before and know the timeline for app acceptance so I was satisfied to get a successful build and test in the emulator. I also viewed the project web app on several mobil devices and was please with the result. PWA's for the win!

Challenges I ran into

Updating my older laptop to run a current version Xcode for the iOs build recommended by Flutter.

Accomplishments that I'm proud of

The look of the my puzzles and the color that indicates a piece of the puzzle is in it's correct position.

What I learned

I really enjoyed reading and working with the example code. It set's a good example for building modular PWA's. With a history in web development this is very appealing to me.

What's next for Art-puzzel

I had several more ideas for modifying the puzzle both in look and functionality that I did not get to during the Puzzle Hack. I will continue to update the app with additional versions as time allows. I am also interested in diving into Rive for animations so I look forward to utilizing it for future puzzle theme iterations.