Oblastle Dev Log 001

Lately my family and I here in Germany have been playing a lot of Wordle and Worldle. Every morning our chat group is filled with messages sharing scores, reacting to others, and fun facts once everyone has answered. I’ve discussed words and places that would have otherwise never come up.

chat

Inspired by the fun we are having and the fact these games are rather simple web apps, I’ve set out to make my own. A game that more closely fits us. Language wise: English, Russian, and German. Geography wise: Belarus, U.S.A, Germany, and Russia. Here is my progress so far.

Demo

gameplay demo

The main mechanic of guessing via an auto complete input field is working!

Last night I did my first play test with Masha. Oblastle is not quite playable yet. Still needs distance, direction, and share logic before it will be really fun. For not I’m not ready to publish a beta version.

Hopefully the initial game development goes well because I’ve got a ton of ideas for secondary mechanics like a hint system that shows the flag of the answer or a fun fact.

Design

Wordle and the many clones / inspired games have created an simple language: A small color pallet of yellow, green, grey, black accompanied by minimalist interface with plenty of white-space.

wordle colors

I see no shame in mirroring the original games colors and design themes. Rather then come up with something completely different I think there is a benefit in adding something that follows the same ideas, expanding on the space created by all the similar games popping up.

figma

To lay things out I turn to one of my favorite tools, Figma. After extracting colors and screen shots from Wordle and Worldle I started by comparing those two. I think Worldle when a little to far from the design language by using so many emoji. In my design I’d like to limit that and keep things more cohesive. Also I’ve got a lot more technical information to display than the original Wordle so it will be challenging to keep things simple.

I’ve collected design inspiration on this are.na channel. It includes fun things like Windle, a Wordle Windows 3.1 clone 😀.

Sourcing Data

The core of this game is once per day guessing the name of a:

• U.S. state
• German Bundeslanden
• Russian Oblast (+🤯 the many other types of ‘fedral states’ Russia has, see wikipedia),
• Belarusian voblasts

based on a map of it.

I estimate there should be enough options to not get repeats for ~half a year.

For each of these items, further known as oblasts because it’s the coolest sounding of them all and name of game, I need the following info:

• Name
• Alternative Names
• Map image
• Center point
• Flag?
• Fun Fact?

After some searching I got lucky and stumbled onto amcharts.com which has .svg maps subdivided into oblasts for every country. I imported the country svgs into Figma, broke them up, applied the consistant color, and exported images of each oblast as 500px wide .jpg files. 😓 a lot of manual work but I think automating would have taken longer. So far I’ve finished images for U.S. and Belarus. Example:

capital voblast of belarus, minsk

Next for U.S. states I found the names and center points on wikipedia. Another stroke of luck because as it turns out getting center points of Belarus was not so easy. To calculate those I went down a rabbit hole that took me to GIS software I heard of once in college from the urban planning department.

In the end I imported shape map files from the natural earth data repository into QGIS and used the centroid plugin to calculate the surface center points of each Belarusian Voblast. Then I exported that data as a .geojson file and manually dug through it for the center point coordinates.

belarus in qgis

I’ll do the same for Russian and German oblasts when I add them. As for flag and fact data I’m still searching so I you know a source please reach out.

Tech

Big picture, the game is a light weight web app that runs in the browser. There are no write operations coming from the frontend like saving score. That is, like in Wordle, handled by the player sharing scores organically via copy and paste. This makes the game quite scaleable in hosting costs and complexity.

In Oblastle the frontend application will be served from CDN and when it loads it makes a small API call to a serverless backend that provides a list of all the oblasts and the answer. This is all the necessary information needed by the browser to play the game. I could have made it more preformant by including the info right away in the frontend app like the original Wordle did, but I like the idea of the backend only knowing the future answers better.

The frontend, repo here, is written in Svelte. Which is a great frontend framework I’ve been using in my personal projects for a year or so now. This time I tried out Svelte Kit for the first time. It aims to make Svelte app development smoother and so far I’ve found it very smooth. Only complaint so far is component separation. I’ve not figured out how to create inline components. I think one file per component makes little sense if the component is a one liner.

On the backend, repo here, I created another Node.js + TypeScript + Serverless Lambda Function. Since I’ve been making these a lot lately I created a tenpureto template, here. Challenge on thee backend has been randomizing the answers. Right now it shuffles an array of oblast keys but it will repeat after going through the list once.

Whats next?

In the coming weeks I hope to play test the game with my family and get feedback. Eventually sharing it with everyone. Stay tuned for more updates here on by blog under the oblastle tag.