DEV Community: Max Miracolo

The Logic Behind Tile Swaps: Lessons from Connections and Starcrossed

Max Miracolo — Tue, 25 Mar 2025 16:25:29 +0000

Assuming you already know how Connections works, given the above scenario, which tiles from the top row will swap with which correctly selected tiles when the animation happens? There are a lot of options to pair them up. Will MICE swap with KINDER, SINGULAR or DIE? Will DICE move, or stay put? Think about it for a second and guess, read on to see the answer.

These are questions I found myself asking while playing connections one day, and it came in handy when I started building starcrossed. It’s a daily movie puzzle game inspired by games like Connections, and one aspect of Connections I set out to emulate was the animation of the tile swaps. Learning how they worked was a vital step, and it turned out to be way more intriguing than I had expected. On that note, back to the initial prompt. Here’s how the animation plays out.

We end up with the following swaps: KINDER↔OXEN, SINGULAR↔LICE, and DIE↔MICE, and DICE stayed put. Did you guess correctly? These pairs may seem arbitrary, but there is indeed a methodology for determining them.

Hierarchical

Connections employs what I would call a hierarchical approach. To illustrate this I’ve recreated the grid from above with the tiles labeled 1-16, and slowed down the animation.

The four selected tiles 2 , 5, 8, and 13 need to end up in the first row. Since 2 is already in the first row, that leaves 1, 3, and 4 to swap. There are six different combinations for pairing these six tiles, and if the fourth tile also needs to be swapped then that number jumps to 24 combinations. Therefore a decision needs to be made, or a rule needs to be established to decide how the pairs are formed. In the case of Connections, the tiles are swapped based on their ordering, or hierarchy. Tiles higher up, and to the left, take precedence. Or referencing our new grid, tiles with lower numbers get paired up first. This hierarchy becomes even clearer when the tiles are arranged in a single row.

Simply move from left to right to determine the order for selecting pairs. First 1↔5, then 3↔8, and finally 4↔13. Again, 2 stays put because it’s already one of the first four tiles.

While this approach certainly makes sense, it isn’t the only method to determine which tiles swap. One potential drawback of the hierarchical approach is that there may be more commotion, or a busier animation due to tiles moving farther than they need to. This brings us to the next approach.

Nearest Neighbor

The goal here is to have the tiles move as little distance as possible, and coincidentally, overlap as little as possible. As you can see, with the same selected tiles from the previous examples, there’s less movement in this animation.

In this case, it happens to be quite close to the hierarchical approach, but instead of 3↔8 swapping, 3↔13 swap because 4↔8 are closer together. However, in some cases the difference can be quite dramatic.

The nearest neighbor is a more subtle approach and I’m even contemplating updating starcrossed to use it. For now, starcrossed will keep its current approach, which I will call user-driven.

User-Driven

If you think about it, an order has already been established before the swap occurs. We can follow the sequence in which the user selected the tiles, and then have that be the order for how the tiles should land in the top row. Below is a visualization of this approach, again using the same selected tiles as the previous examples, now assuming the user selected the tiles in a specific order: 2 → 13 → 8 → 5.

Where nearest neighbor dialed back the commotion from the hierarchical approach, this can result in more commotion, which may be desirable! This is the approach I chose for starcrossed, with a caveat: no tiles are swapped. The tiles in the first row remain in place and are covered by the user-selected tiles.

Here’s a look at this approach in action with starcrossed.

In this case, the tiles were selected in the following order:

Hugh Jackman → Russell Crowe → Anne Hathaway → Amanda Seyfried

One reason I chose this approach was to create consistency. The tiles selected by the user maintain this order as they move to the top row, and that order is maintained again when the names are listed in the revealed category (green box). I also found that by not swapping the tiles with the user-driven approach it was a happy medium in terms of animation busyness.

Embrace the Chaos

A fourth option would be for the animation to have as much commotion as possible. Having more or less commotion isn’t strictly a good or bad thing. It largely depends on the use case — perhaps more commotion is desired to evoke a feeling of high energy and excitement.

In my mind, there are essentially two ways to implement this more chaotic approach. One would be to find the opposite of the nearest neighbor (farthest neighbor), and the other would be to choose pairs at random each time the animation will run. Of course, choosing pairs at random could result in the same combination as nearest neighbor, but the randomness between each round of swaps could still evoke a feeling of novelty and excitement.

Each approach has it’s pros and cons and choosing one ultimately depends on the experience you want to create. Whether it’s the structured logic of the hierarchical method, the subtle efficiency of nearest neighbor, the personalized feel of user-driven swaps, or the lively unpredictability of a chaotic approach, each method brings something unique. For starcrossed, I opted for consistency and excitement, but experimenting with different styles has been a fascinating process. If nothing else, I hope this overview has given you a new appreciation for the small details that shape how puzzles come to life on screen.

How I Built an Affordable, Efficient Architecture for a Daily Movie Puzzle Game

Max Miracolo — Wed, 18 Dec 2024 16:14:30 +0000

I’ve been building a daily movie puzzle game called starcrossed, and I’ve managed to set it up and maintain it at essentially no cost. We’re currently seeing about 500 daily users and growing. While things might change if traffic were to surge exponentially, it’s been cool to see how affordable creating and maintaining a project like this can be.

As a software engineer today, it’s easy to feel overwhelmed by the ever-growing selection of tools and technologies. But we’re also fortunate enough to have a lot of free or low-cost services that make projects like this possible.

Here’s a list of most of the tools I’ve used to build starcrossed thus far:

Vercel
AWS S3, Lambda, API Gateway, and Cloudwatch
Cloudflare
Web API’s for Local Storage and IndexedDB
NextJS, TailwindCSS, Iconmonstr
TMDB

Vercel

I’ve come to greatly appreciate Vercel, their free Hobby plan is an excellent starting point—but don’t let the plan name deceive you, it comes with a fairly robust set of features. Check out their pricing page to see more.

When you create a project Vercel provides you with a free domain (e.g., *.vercel.app), but you can easily bring your own domain if you prefer. I purchased mine through Porkbun for only $3 (the most expensive purchase of this project yet).

While this isn’t an exhaustive review of Vercel, I’m sure there are plenty of those already, I will mention a few of my favorite features:

Deployments and Instant Rollbacks

Once you connect your Github project to Vercel, merges and pushes into your main branch will trigger an automatic production deployment. When you create a pull request, that branch gets its own designated preview URL (limited to one branch URL on hobby). I’ve used this feature frequently to test pull requests by sharing the branch-specific URL with my QA team (read: my friends).

While this alone is powerful, the ability to initiate instant rollbacks may be even more valuable. If you merge a problematic pull request, you can roll back to a previous deployment instantly with just a couple of clicks. Not that I would know anything about needing to do that… 😅.

Analytics

With just a couple lines of code, you can have a no-cost analytics tool that doesn’t rely on cookies. You get 2500 events per month on the free plan, which when starting out is pretty handy. I haven’t upgraded to Pro for the 25k events per month because I’ve found a workaround with Cloudflare’s analytics tools (more details below in the Cloudflare section).

Caching

Vercel offers flexible cache management and it becomes even more powerful when paired with a framework like NextJS. For starcrossed, the caching strategy is rather simple—the puzzle file fetch response is cached after the first request. Each puzzle is stored as a single JSON file, and since the same file is used by everyone for an entire day, it can be cached immediately. This approach not only improves performance but also keeps my AWS bill at zero almost every month since so few requests actually make it to AWS.

AWS

Speaking of AWS, below is a diagram of the simple architecture in use.

API Gateway handles requests to pull the JSON puzzle files that are stored in the S3 bucket. I followed this pattern provided by AWS. To ensure requests are legitimate, I use a Lambda Authorizer function. The S3 bucket is setup with replication and fail-over in us-west-2. The API gateway is configured with two stages: dev and prod. Cloudwatch log groups are set up for both the lambda function, and the two API Gateway stages.

The only month I’ve incurred any charges was September, and it was only $0.14:

$0.12 for API Gateway
$0.02 for S3

I have yet to dive into why this was the only month I was charged, so I unfortunately can’t provide any more details at this time. I also have a billing alarm set to prevent my account from blowing up, so I haven’t been in a hurry to investigate it any further.

Cloudflare

I chose to use Cloudflare as my DNS provider primarily for its free analytics tooling. Curiously, the traffic numbers reported are slightly higher than Vercel, and sometimes the numbers on Cloudflare don’t add up correctly (see screenshots below). I’m not concerned about traffic on a granular level so I haven’t been bothered enough to do more research. Besides, the numbers are still useful for viewing overall trends.

Take a look at our 30 day unique visitor chart. The Total Unique Visitors is stated as 10.76k, however if you add up each day individually you get 15.94k, quite a large discrepancy. Let me know if you have insight as to why the numbers differ.

Same thing with the 7 day chart, if you add up these 7 values you get 3.81k. Also, on Thursday December 12th we had a spike in traffic, Cloudflare lists it as 765 unique visitors from 7PM on the 11th to 7PM on the 12th. Vercel, for that same time frame counts up to 709. Not worrying, but an interesting observation.(I made sure to check that both services were using the same time zone, which they are).

Local Storage and IndexedDB Web API’s

To avoid the complexity and cost of setting up user authorization and a database, I opted to make use of existing web API’s to handle much of the same functionality. Of course the primary drawback is that our users’ data is more vulnerable to permanent deletion (accidental or not).

Local Storage is used to store data for in-progress games—such as your previous guesses, found answers, and currently selected tiles. I also chose to use IndexedDB to allow for a clear separation of intent: Local Storage stores in-progress game data, while IndexedDB stores stats and data for previously completed games. Plus IndexedDB has a significantly larger storage capacity than Local Storage. If starcrossed continues to grow and the game sticks around for a while, then the data could potentially pile up for our more active users. Futhermore, having long-term data stored in IndexedDB will facilitate incorporating upcoming features like lifetime statistics and a puzzle archive.

NextJS, TailwindCSS, Iconmonstr

There are a lot of options for frameworks, but I chose familiar ones that enable me to build quicker. Also they’re each free, and well made, so I had to give them a shout-out.

TMDB

Not a software or architecture related tool, but TMDB (The Movie Database) is a community-run alternative to IMDb that is free for non-commercial purposes. They have an extroadinarily large data set of Actors, Movies, and everything in between.

In conclusion…

Building a daily movie puzzle game like starcrossed has been an exciting challenge, and using low-cost solutions for the architecture has allowed me to keep things simple and affordable. By leveraging free tools like Vercel for hosting, Cloudflare for DNS and analytics, AWS for API requests and storage, and standard Web API’s I've been able to create a reliable, efficient system while barely spending a dime.