Ninigrams

Uncover hidden patterns with Ninigrams – a pixel-perfect blend of nostalgia and modern gameplay.

Comment 1

Inspiration

The inspiration behind Ninigrams was a combination of nostalgia, cultural connection, and a shared love for puzzles. During our brainstorming, Peter recalled playing a game as a child where pictures were crafted by filling in a grid based on numerical clues. Curious about its origins, we discovered the game is called ‘nonograms’ in English and was invented by a Japanese woman named Non Ishida. Learning that the game gained popularity in Japan before gaining traction in Russia felt serendipitous, given our respective backgrounds: Peter’s Russian upbringing and Nina’s Japanese heritage. The name ‘Ninigrams’ is a nod to Nina’s childhood nickname ‘Nini.’

What it does

Ninigrams is a logic puzzle game where players fill in a grid with black and white tiles to reveal a hidden picture. Each row and column is accompanied by numerical clues, with each number representing a sequence of consecutive black tiles to be placed in the grid. The order of these numbers matters, and players must ensure that each sequence is separated by at least one white tile. No grey tiles should remain on the board when completed.

How we built it

We built Ninigrams by creating a shared GitHub repository, allowing us to collaborate on code in main.tsx. We coded the game in TypeScript and imported Devvit through Reddit’s public API. We created the illustrations ourselves and rendered the data into a custom JSON format to integrate into our app. Finally, we launched the app on our subreddit r/ninigrams and uploaded the submission video onto Youtube to showcase our project.

Challenges we ran into

One of the main challenges was working within the limitations of Reddit’s Devvit API. For instance, we were unable to customize certain aspects of the grid, such as rendering every fifth border thicker, using text sizes larger than xxlarge, or applying different border colors for text. The biggest obstacle was balancing functionality and design for smaller (mobile) screens. We needed to maintain playable cell sizes for accurate finger taps while ensuring the entire puzzle grid (and other game elements) remained visible.

Accomplishments that we're proud of

This marked our first experience working with Typescript and React-like concepts, as well as developing on Reddit’s platform, Devvit. We remained committed to the project in the midst of an extremely busy period in our lives, when Peter was submitting PhD applications and Nina was preparing for finals in her master’s program. By delegating tasks equally between the two of us based on our individual strengths and holding daily meetings to collaborate on code and user interface design, we maintained steady progress and brought our vision to life.

What we learned

It was a steep learning curve for both of us, as this was Peter’s first hack-a-thon and Nina’s first time collaborating extensively on code using GitHub. While we had experience coding functional programs in the past, building Ninigrams introduced us to the challenge of UX design, from creating buttons to producing an aesthetically pleasing visual layout and logo that pays homage to the origins of nonograms. With no prior exposure to TypeScript and Devvit, integrating these tools into a fully-fledged app required patience, experimentation, and countless FaceTime calls.

What's next for Ninigrams

Looking ahead, Ninigrams has the potential to evolve into a collaborative puzzle experience. Drawing inspiration from the notorious r/Place project, we envision a future where individual players’ completed puzzles are combined into a large collaborative mosaic – whether it’s a vibrant zoo of animals, a bustling cityscape, or a _ Where’s Wally?_ scene filled with hidden surprises. Alongside this, we aim to introduce a leaderboard system that tracks and displays player rankings according to metrics such as puzzle completion time. Lastly, we see an opportunity to engage with the existing r/Nonograms community, which boasts 4.3K members who regularly share their nonogram puzzles and elicit help from others. By bringing together beginners and avid nonogram players onto one cohesive platform, Ninigrams can foster a community of nostalgia, connection, and most importantly, a shared love for puzzles.

Share this project:

Updates