Periodic table puzzle

Game screen
Sodium info box
Silver info box (note the correct electron configuration)
Polonium info box
Table type chooser
p-block
Extended table
Left-step table

Inspiration

I saw the announcement for the Flutter Puzzle Hack, and I thought I might try something if I had an interesting idea, not just another classic slide puzzle. Around a week later I did have an interesting idea - The Periodic Table as a slide puzzle.

What it does

Slide puzzle where you have to arrange the elements in the Periodic Table in the right order. Choose between different table types for varying difficulty levels. Use hints if you get stuck.

How we built it

With Flutter and Dart. I didn't use any other framework. Everything is laid out using Stacks and LayoutBuilder! It surprised me that I didn't have to write custom RenderObjects.

Challenges we ran into

Flutter on web still has some problems - superscript characters show up as boxes, I had to use CustomPaint to render electron configurations. Also the performance on the web is lower than native. It would have been nice if Flutter had a generic "Shader" widget to display arbitrary GLSL/SPIR-V.

Accomplishments that we're proud of

The grid line animations look even better than I thought they would. Other than that, I think everything is as good as it could be - with the exception of the shaders - or rather the inability to write true shaders in Flutter.

What we learned

I learned a lot about the animation system in Flutter. I already knew how to use Flutter, I even wrote some custom RenderObjects, but I didn't do many animations and had little experience with them. Now I could say that I have mastered the Flutter animation system. Other than animations, I also learned some things about Dart-JS interop, but I still have some things to learn in this area.