LexiTiles 2

It's back!

Update: Version 2.1 is out with Android support and a new icon! Download links are at the end of the post.

About 5 years ago I had an idea for a small word game. Using the tools and knowledge I had at the time, I built the original version of LexiTiles using Ionic Framework (v1). Was that the right tool for the job? No, absolutely not. But it was a good way for me to learn more about Ionic and make something fun while doing so. After some time, I made the game free instead of $0.99 and eventually removed it from the stores after I was no longer able to keep it updated.

Fast forward a few years and I鈥檓 learning Blazor. Naturally, I want to learn how to build things in Blazor so I turn to a previous project to attempt to recreate it: LexiTiles. This version was actually finished and available to play up until a few days ago. I never promoted it because I was never really happy with the performance of it. I love Blazor, but when you need taps and clicks to be very, very responsive, it鈥檚 just not the right tool for the job. But again, it was for learning and for that it was a good project.

To be clear: Blazor is fast and responsive for almost every web app use case, just not a game where you need to quickly click tiles to make words. Blazor is great.

Fast forward again to a month or so ago, and AWH has given me some time to start learning Xamarin and Xamarin.Forms for an upcoming project. LexiTiles wasn鈥檛 the first Xamarin app I built as I also built a Pinboard client to learn the basics. But as with any new technology, I like to learn by recreating old projects and eventually I started to rebuild LexiTiles from the ground up using Xamarin.Forms.

Xamarin and Xamarin.Forms

Before this, I鈥檝e only used Xamarin once at work. It was years ago and I was only updating something small on an existing app. This was back when the only option for Xamarin development was Xamarin Native, where each platform鈥檚 UI and app logic were written for that specific platform using the idioms common to that platform. So you would write activities and intents for Android (though in C#) and UIViewControllers and the like for iOS (again in C#). This approach is still possible and a perfectly valid way to create a native app using .NET, but it only allows for some code sharing across platforms.

Xamarin.Forms adds a new layer which sits on top of each platform and provides a unified way to write the UI (in XAML or C#) and app logic (definitely in C#) in a single project so that you don鈥檛 need to mess with anything platform-specific (most of the time). I鈥檝e never really gotten into it before because XAML always irked me in ways that I couldn鈥檛 ever put into words and that slowed any drive I had to learn it. But now with an upcoming project, I had a much stronger drive to learn it. It also helped that I had time (thanks, AWH!).

At this point, I鈥檝e spent several weeks working through courses and documentation while building some basic apps and my conclusion is this: Xamarin.Forms is pretty great, though I still don鈥檛 really love XAML.

Side note: I鈥檓 really excited about .NET MAUI. Not only will the integration of Xamarin into .NET proper clear up a lot of confusion around names, but the prospect of using the Blazor component model to build native apps sounds absolutely wonderful.

LexiTiles 2

So here it is! Built from the ground up using Xamarin.Forms. The basic concept is the same: build as many words as you can using the tiles available before the timer runs out. Words are scored like Scrabble where each letter is worth a certain number of points, but with bonus points for longer words. If a word isn鈥檛 actually a word, those points are subtracted from your total. The only real difference from the original (aside from some UI) is the bonus scoring has been tweaked some.

The UI is all XAML with very few custom styles so as to look as native as possible and the entire app is structured using MVVM. Various parts like scoring and board generation are nicely abstracted out into their own services so they can be tweaked easily without having to adjust the game logic or UI. It also means that I could introduce more modes later by dynamically swapping out how the board is created (how about one where you only get one or two vowels?) or how the words are scored (one that really rewards length?). The structure opens up possibilities that would have been nearly impossible with the original.

Also different is the sharing. LexiTiles 1.5 introduced a way to share your games using a generated URL. This was accomplished using a NodeJS API connected to a database. This was annoying as I like these kinds of side-projects to be as standalone as possible. Databases are annoying to maintain and I wanted to avoid that, so I turned to the URL. I didn鈥檛 actually end up using the string compression stuff I wrote about in the fall. Instead the URL is generated using basic string concatenation and some Base64 encoding (just to obfuscate a bit).

The site the URL goes to is another result of some AWH learning: it鈥檚 a basic React app! Realistically, React is overkill for this site, as parsing out the results from the URL and displaying them could be achieved with some vanilla JS, string manipulation, and DOM insertion. But I was learning and learning works best when I can make something, so I made that. Ideally, I would like to compress the results to give you shorter URLs. I know how I can compress strings in C# really well, but decompressing them in JS is a tall order and one I will save for later.

I still have my hang-ups with React. Mostly they鈥檙e hang-ups with Facebook and the fact that Facebook is a garbage company. Ignoring that, React is pretty great. JSX always rubbed me the wrong way as seeing HTML in JS felt very wrong, but realizing that JSX is not HTML helped me get over that.

Future Changes and Improvements

Where鈥檚 Android? Where about iPads?

Both are on my list. Android is being weird and some of my buttons are invisible, which makes some of the modals rather hard to close. Expect that for version 2.1. iPad support requires me to rethink some layouts for the larger and wider screens. Right now my method of keeping the tiles square (a surprisingly tough task in XAML) doesn鈥檛 work at all on tablets. That will probably be version 2.3.

I also really want to make a better app icon. I鈥檓 still using the old one and it鈥檚 kind of ugly. I鈥檓 not very good at making images, so it could take some time. At least I still have the old one.

2.1 Update: The missing buttons were caused by some extraneous margins on the buttons and I made a new icon which I like a lot better.

LexiTiles 2 is available on the iOS App Store and Google Play Store for free. Go try it out: